cps-ui-kit 21.28.0 → 21.29.0

package/fesm2022/cps-ui-kit.mjs

@@ -571,11 +571,11 @@ class CpsChipComponent {
         this.closed.emit(this.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <button\n      type=\"button\"\n      class=\"cps-chip-close-btn\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"$event.stopPropagation()\">\n      <cps-icon icon=\"close-x\" size=\"xsmall\" color=\"text-darkest\"></cps-icon>\n    </button>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding-left:.75rem;padding-right:.375rem;cursor:default}:host .cps-chip-close-btn{border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:.375rem;cursor:pointer}:host .cps-chip-close-btn:focus{outline:none}:host .cps-chip-close-btn:focus-visible{outline:none;position:relative}:host .cps-chip-close-btn:focus-visible:before,:host .cps-chip-close-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-btn:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{margin-top:.25rem;margin-bottom:.25rem;font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip-label:not(:has(+.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-btn ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}:host .cps-chip.cps-chip--icon-after .cps-chip-icon:not(:has(~.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-close-btn{order:2}:host .cps-chip.cps-chip--icon-after .cps-chip-label{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" role=\"group\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <button\n      type=\"button\"\n      class=\"cps-chip-close-btn\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"$event.stopPropagation()\">\n      <cps-icon icon=\"close-x\" size=\"xsmall\" color=\"text-darkest\"></cps-icon>\n    </button>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding-left:.75rem;padding-right:.375rem;cursor:default}:host .cps-chip-close-btn{border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:.375rem;cursor:pointer}:host .cps-chip-close-btn:focus{outline:none}:host .cps-chip-close-btn:focus-visible{outline:none;position:relative}:host .cps-chip-close-btn:focus-visible:before,:host .cps-chip-close-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-btn:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{margin-top:.25rem;margin-bottom:.25rem;font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip-label:not(:has(+.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-btn ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}:host .cps-chip.cps-chip--icon-after .cps-chip-icon:not(:has(~.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-close-btn{order:2}:host .cps-chip.cps-chip--icon-after .cps-chip-label{margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsChipComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <button\n      type=\"button\"\n      class=\"cps-chip-close-btn\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"$event.stopPropagation()\">\n      <cps-icon icon=\"close-x\" size=\"xsmall\" color=\"text-darkest\"></cps-icon>\n    </button>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding-left:.75rem;padding-right:.375rem;cursor:default}:host .cps-chip-close-btn{border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:.375rem;cursor:pointer}:host .cps-chip-close-btn:focus{outline:none}:host .cps-chip-close-btn:focus-visible{outline:none;position:relative}:host .cps-chip-close-btn:focus-visible:before,:host .cps-chip-close-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-btn:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{margin-top:.25rem;margin-bottom:.25rem;font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip-label:not(:has(+.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-btn ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}:host .cps-chip.cps-chip--icon-after .cps-chip-icon:not(:has(~.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-close-btn{order:2}:host .cps-chip.cps-chip--icon-after .cps-chip-label{margin-right:0}\n"] }]
+            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" role=\"group\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <button\n      type=\"button\"\n      class=\"cps-chip-close-btn\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"$event.stopPropagation()\">\n      <cps-icon icon=\"close-x\" size=\"xsmall\" color=\"text-darkest\"></cps-icon>\n    </button>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding-left:.75rem;padding-right:.375rem;cursor:default}:host .cps-chip-close-btn{border:none;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:.375rem;cursor:pointer}:host .cps-chip-close-btn:focus{outline:none}:host .cps-chip-close-btn:focus-visible{outline:none;position:relative}:host .cps-chip-close-btn:focus-visible:before,:host .cps-chip-close-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:before,:host .cps-chip-close-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-chip-close-btn:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{margin-top:.25rem;margin-bottom:.25rem;font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip-label:not(:has(+.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-btn ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}:host .cps-chip.cps-chip--icon-after .cps-chip-icon:not(:has(~.cps-chip-close-btn)){margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-close-btn{order:2}:host .cps-chip.cps-chip--icon-after .cps-chip-label{margin-right:0}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -3041,7 +3041,7 @@ class CpsAutocompleteComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", 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.17", 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            [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 icon=\"delete\" size=\"small\"></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                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=\"0.1875rem\"\n        radius=\"0.25rem\"\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 [id]=\"hintId\" class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-autocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\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-busy]=\"loading || validating ? true : null\"\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-describedby]=\"describedBy\"\n    [attr.aria-label]=\"ariaLabel || label || null\" />\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-mild)}: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-mild)}: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", "ariaLabel"] }, { 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", "ariaLabel"] }, { 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.17", 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            [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 (\n                    val of value;\n                    track returnObject ? (val?.[optionValue] ?? val) : val;\n                    let last = $last\n                  ) {\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 (\n                    val of value;\n                    track returnObject ? (val?.[optionValue] ?? val) : val;\n                    let last = $last\n                  ) {\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 icon=\"delete\" size=\"small\"></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                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 (\n              item of filteredOptions;\n              track item?.[optionValue] ?? item;\n              let itemIndex = $index\n            ) {\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=\"0.1875rem\"\n        radius=\"0.25rem\"\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 [id]=\"hintId\" class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-autocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\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-busy]=\"loading || validating ? true : null\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"isOpened ? optionsListId : null\"\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-describedby]=\"describedBy\"\n    [attr.aria-label]=\"ariaLabel || label || null\" />\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-mild)}: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-mild)}: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", "ariaLabel"] }, { 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", "ariaLabel"] }, { 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.17", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
@@ -3056,7 +3056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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    [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            [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 icon=\"delete\" size=\"small\"></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                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=\"0.1875rem\"\n        radius=\"0.25rem\"\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 [id]=\"hintId\" class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-autocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\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-busy]=\"loading || validating ? true : null\"\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-describedby]=\"describedBy\"\n    [attr.aria-label]=\"ariaLabel || label || null\" />\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-mild)}: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-mild)}: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            [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 (\n                    val of value;\n                    track returnObject ? (val?.[optionValue] ?? val) : val;\n                    let last = $last\n                  ) {\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 (\n                    val of value;\n                    track returnObject ? (val?.[optionValue] ?? val) : val;\n                    let last = $last\n                  ) {\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 icon=\"delete\" size=\"small\"></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                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 (\n              item of filteredOptions;\n              track item?.[optionValue] ?? item;\n              let itemIndex = $index\n            ) {\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=\"0.1875rem\"\n        radius=\"0.25rem\"\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 [id]=\"hintId\" class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-autocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\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-busy]=\"loading || validating ? true : null\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"isOpened ? optionsListId : null\"\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-describedby]=\"describedBy\"\n    [attr.aria-label]=\"ariaLabel || label || null\" />\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-mild)}: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-mild)}: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
                 }, {
@@ -4867,7 +4867,7 @@ class CpsDatepickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsDatepickerComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", width: "width", dateFormat: "dateFormat", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }, { propertyName: "_datepicker", first: true, predicate: DatePicker, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-datepicker\" [style.width]=\"cvtWidth\" [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    inputRole=\"combobox\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"isOpened\"\n    [ariaControls]=\"calendarId\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder || dateFormat\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onCalendarMenuShown()\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden($event)\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div\n      class=\"cps-datepicker-calendar\"\n      role=\"dialog\"\n      aria-label=\"Date picker\"\n      [attr.id]=\"calendarId\"\n      (click)=\"onCalendarClick($event)\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onSelectCalendarDate(null)\"\n        (onMonthChange)=\"onDatepickerMonthChange()\"\n        (onYearChange)=\"onYearSelected()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:.0625rem solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel-inline{vertical-align:top}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:.0625rem solid #dee2e6;border-top-right-radius:.375rem;border-top-left-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button svg,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button svg{width:.875rem;height:.875rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus{overflow:visible;color:var(--cps-color-calm);outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:.0625rem solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:.0625rem solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-calm);border-width:.125rem;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:.0625rem solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{visibility:hidden}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "hint", "placeholder", "disabled", "readonly", "autocomplete", "spellcheck", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixIconAriaLabel", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", width: "width", dateFormat: "dateFormat", placeholder: "placeholder", hint: "hint", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", showTodayButton: "showTodayButton", openOnInputFocus: "openOnInputFocus", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", minDate: "minDate", maxDate: "maxDate", value: "value" }, outputs: { valueChanged: "valueChanged" }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["datepickerInput"], descendants: true }, { propertyName: "calendarMenu", first: true, predicate: ["calendarMenu"], descendants: true }, { propertyName: "_datepicker", first: true, predicate: DatePicker, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-datepicker\" [style.width]=\"cvtWidth\" [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    inputRole=\"combobox\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"isOpened\"\n    [ariaControls]=\"isOpened ? calendarId : null\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder || dateFormat\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onCalendarMenuShown()\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden($event)\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div\n      class=\"cps-datepicker-calendar\"\n      role=\"dialog\"\n      aria-label=\"Date picker\"\n      [attr.id]=\"calendarId\"\n      (click)=\"onCalendarClick($event)\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onSelectCalendarDate(null)\"\n        (onMonthChange)=\"onDatepickerMonthChange()\"\n        (onYearChange)=\"onYearSelected()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:.0625rem solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel-inline{vertical-align:top}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:.0625rem solid #dee2e6;border-top-right-radius:.375rem;border-top-left-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button svg,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button svg{width:.875rem;height:.875rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus{overflow:visible;color:var(--cps-color-calm);outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:.0625rem solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:.0625rem solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-calm);border-width:.125rem;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:.0625rem solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{visibility:hidden}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "inputRole", "ariaExpanded", "ariaHasPopup", "ariaControls", "hint", "placeholder", "disabled", "readonly", "autocomplete", "spellcheck", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixIconAriaLabel", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i2$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
             type: Component,
@@ -4877,7 +4877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CommonModule,
                         FormsModule,
                         CpsMenuComponent
-                    ], selector: 'cps-datepicker', template: "<div class=\"cps-datepicker\" [style.width]=\"cvtWidth\" [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    inputRole=\"combobox\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"isOpened\"\n    [ariaControls]=\"calendarId\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder || dateFormat\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onCalendarMenuShown()\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden($event)\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div\n      class=\"cps-datepicker-calendar\"\n      role=\"dialog\"\n      aria-label=\"Date picker\"\n      [attr.id]=\"calendarId\"\n      (click)=\"onCalendarClick($event)\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onSelectCalendarDate(null)\"\n        (onMonthChange)=\"onDatepickerMonthChange()\"\n        (onYearChange)=\"onYearSelected()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:.0625rem solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel-inline{vertical-align:top}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:.0625rem solid #dee2e6;border-top-right-radius:.375rem;border-top-left-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button svg,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button svg{width:.875rem;height:.875rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus{overflow:visible;color:var(--cps-color-calm);outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:.0625rem solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:.0625rem solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-calm);border-width:.125rem;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:.0625rem solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{visibility:hidden}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem}\n"] }]
+                    ], selector: 'cps-datepicker', template: "<div class=\"cps-datepicker\" [style.width]=\"cvtWidth\" [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    inputRole=\"combobox\"\n    ariaHasPopup=\"dialog\"\n    [ariaExpanded]=\"isOpened\"\n    [ariaControls]=\"isOpened ? calendarId : null\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder || dateFormat\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\n    (keydown)=\"onInputKeydown($event)\"\n    (valueChanged)=\"onInputValueChanged($event)\"\n    [clearable]=\"clearable\"\n    (blurred)=\"onInputBlur()\"\n    (cleared)=\"onInputClear()\"\n    (enterClicked)=\"onInputEnterClicked()\"\n    [width]=\"width\"\n    [hint]=\"hint\"\n    [hideDetails]=\"hideDetails\"\n    [infoTooltip]=\"infoTooltip\"\n    [infoTooltipClass]=\"infoTooltipClass\"\n    [infoTooltipMaxWidth]=\"infoTooltipMaxWidth\"\n    [infoTooltipPersistent]=\"infoTooltipPersistent\"\n    [persistentClear]=\"persistentClear\"\n    [appearance]=\"appearance\"\n    [error]=\"error\"></cps-input>\n  <cps-menu\n    #calendarMenu\n    [withArrow]=\"false\"\n    (menuShown)=\"onCalendarMenuShown()\"\n    (beforeMenuHidden)=\"onBeforeCalendarHidden($event)\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div\n      class=\"cps-datepicker-calendar\"\n      role=\"dialog\"\n      aria-label=\"Date picker\"\n      [attr.id]=\"calendarId\"\n      (click)=\"onCalendarClick($event)\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onSelectCalendarDate(null)\"\n        (onMonthChange)=\"onDatepickerMonthChange()\"\n        (onYearChange)=\"onYearSelected()\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\" />\n    </div>\n  </cps-menu>\n</div>\n", styles: [":host{display:flex}:host .cps-datepicker{position:relative;width:100%}:host .cps-datepicker.focused ::ng-deep .cps-input-wrap{border-color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .cps-input-prefix-icon{color:var(--cps-color-calm)!important}:host .cps-datepicker.focused ::ng-deep .clear-btn cps-icon{opacity:.5!important}.cps-datepicker-calendar{-webkit-user-select:none;-ms-user-select:none;user-select:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel{font-family:Source Sans Pro,sans-serif;width:auto!important;padding:.5rem;background:#fff;color:var(--cps-color-text-darkest);border:.0625rem solid #ced4da}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-panel-inline{vertical-align:top}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header{padding:.5rem;color:var(--cps-color-text-darkest);background:#fff;font-weight:600;margin:0;border-bottom:.0625rem solid #dee2e6;border-top-right-radius:.375rem;border-top-left-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-prev-button svg,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-next-button svg{width:.875rem;height:.875rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title{line-height:2rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{color:var(--cps-color-text-darkest);transition:background-color .2s,color .2s,box-shadow .2s;font-weight:600;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:enabled:hover,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:enabled:hover{color:var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus{overflow:visible;color:var(--cps-color-calm);outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-year:focus.suppress-focus-visible:after,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-select-month{margin-right:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table{font-size:1rem;margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker table th{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th>span{width:2.5rem;height:2.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span{width:2.5rem;height:2.5rem;border-radius:50%;transition:box-shadow .2s;border:.0625rem solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{content:\"\";position:absolute;border-radius:50%}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus:after{inset:-.125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span{border-color:var(--cps-color-calm);background:unset;color:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker table td.p-datepicker-today>span.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar{padding:.5rem 0 0;border-top:.0625rem solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-calm);border-width:.125rem;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus{overflow:visible;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button:focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:.0625rem solid #dee2e6;padding:.5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button{width:2rem;height:2rem;color:var(--cps-color-calm);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker button:last-child{margin-top:.2em}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker span{font-size:1.25rem}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker>div{padding:0 .5rem}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-timeonly .p-timepicker{border-top:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-month-view .p-datepicker-month.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view{margin:.5rem 0}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year{padding:.5rem;transition:box-shadow .2s;border-radius:.375rem;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-disabled{color:var(--cps-color-text-light);cursor:default}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-year-view .p-datepicker-year.p-datepicker-day-selected{color:var(--cps-color-calm);background:var(--cps-color-highlight-selected);font-weight:700}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group{border-left:.0625rem solid #dee2e6;padding-right:.5rem;padding-left:.5rem;padding-top:0;padding-bottom:0}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child{padding-left:0;border-left:0 none}.cps-datepicker-calendar ::ng-deep .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child{padding-right:0}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) table td span:not(.p-datepicker-day-selected):not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-month-view .p-datepicker-month:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):is(:hover,:focus){background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus{overflow:visible;z-index:1;outline:none;position:relative}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{content:\"\";position:absolute;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:before,.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-datepicker-year-view .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):focus.suppress-focus-visible:after{display:none}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-inputtext{padding-right:2.5rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable .p-calendar-clear-icon{color:var(--cps-color-calm);right:.75rem}.cps-datepicker-calendar ::ng-deep p-calendar.p-calendar-clearable.p-calendar-w-btn .p-calendar-clear-icon{color:var(--cps-color-calm);right:3.75rem}.cps-datepicker-calendar ::ng-deep .p-datepicker table th,.cps-datepicker-calendar ::ng-deep .p-datepicker table td{padding:.125rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-other-month{visibility:hidden}.cps-datepicker-calendar ::ng-deep .p-ripple:focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-ripple{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;font-family:Source Sans Pro,sans-serif;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button{font-family:Source Sans Pro,sans-serif;background-color:transparent;color:var(--cps-color-calm);border-color:transparent;margin:0;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;vertical-align:bottom;text-align:center;overflow:hidden;position:relative;padding:.75rem 1.25rem;font-size:1rem;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;border-radius:.375rem}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:focus{box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:hover{background-color:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button:active{background-color:var(--cps-color-highlight-selected)}.cps-datepicker-calendar ::ng-deep .p-datepicker-buttonbar .p-button .p-button-label{font-weight:700}.cps-datepicker-calendar ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:.0625rem;margin:-.0625rem;overflow:hidden;padding:0;position:absolute;width:.0625rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -5716,11 +5716,11 @@ class CpsLoaderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsLoaderComponent, isStandalone: true, selector: "cps-loader", inputs: { fullScreen: "fullScreen", opacity: "opacity", labelColor: "labelColor", showLabel: "showLabel", label: "label", ariaLabel: "ariaLabel", doneAriaLabel: "doneAriaLabel" }, host: { attributes: { "aria-busy": "true" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    @if (showLabel && label.trim()) {\n      <span\n        class=\"cps-loader-overlay-content-text\"\n        [style.color]=\"cvtLabelColor\"\n        aria-hidden=\"true\">\n        {{ label }}\n      </span>\n    }\n    <div class=\"cps-loader-overlay-content-circles\" aria-hidden=\"true\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:1.25rem;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:.9375rem;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:5.3125rem;width:5.625rem}:host .cps-loader-overlay-content-circles-circle{border-left:.3125rem solid;border-top-left-radius:100%;border-top:.3125rem solid;margin:.3125rem;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-accent-primary);border-top-color:var(--cps-accent-primary);width:2.5rem;height:2.5rem}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-accent-secondary);border-top-color:var(--cps-accent-secondary);width:1.875rem;height:1.875rem}:host .cps-loader-overlay-content-circles .cps-sp3{width:1.25rem;height:1.25rem;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@media(prefers-reduced-motion:reduce){:host .cps-loader-overlay-content-text{animation-duration:8s!important;animation-iteration-count:infinite!important}:host .cps-loader-overlay-content-circles-circle{animation-duration:3s!important;animation-iteration-count:infinite!important}}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsLoaderComponent, isStandalone: true, selector: "cps-loader", inputs: { fullScreen: "fullScreen", opacity: "opacity", labelColor: "labelColor", showLabel: "showLabel", label: "label", ariaLabel: "ariaLabel", doneAriaLabel: "doneAriaLabel" }, host: { attributes: { "aria-busy": "true" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    @if (showLabel && label.trim()) {\n      <span\n        class=\"cps-loader-overlay-content-text\"\n        [style.color]=\"cvtLabelColor\"\n        aria-hidden=\"true\">\n        {{ label }}\n      </span>\n    }\n    <div class=\"cps-loader-overlay-content-circles\" aria-hidden=\"true\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:1.25rem;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:.9375rem;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:5.3125rem;width:5.625rem}:host .cps-loader-overlay-content-circles-circle{border-left:.3125rem solid;border-top-left-radius:100%;border-top:.3125rem solid;margin:.3125rem;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-accent-primary);border-top-color:var(--cps-accent-primary);width:2.5rem;height:2.5rem}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-accent-secondary);border-top-color:var(--cps-accent-secondary);width:1.875rem;height:1.875rem}:host .cps-loader-overlay-content-circles .cps-sp3{width:1.25rem;height:1.25rem;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@media(prefers-reduced-motion:reduce){:host .cps-loader-overlay-content-text{animation:none}:host .cps-loader-overlay-content-circles-circle{animation-duration:3s!important;animation-iteration-count:infinite!important}}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsLoaderComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'cps-loader', host: { 'aria-busy': 'true' }, template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    @if (showLabel && label.trim()) {\n      <span\n        class=\"cps-loader-overlay-content-text\"\n        [style.color]=\"cvtLabelColor\"\n        aria-hidden=\"true\">\n        {{ label }}\n      </span>\n    }\n    <div class=\"cps-loader-overlay-content-circles\" aria-hidden=\"true\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:1.25rem;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:.9375rem;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:5.3125rem;width:5.625rem}:host .cps-loader-overlay-content-circles-circle{border-left:.3125rem solid;border-top-left-radius:100%;border-top:.3125rem solid;margin:.3125rem;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-accent-primary);border-top-color:var(--cps-accent-primary);width:2.5rem;height:2.5rem}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-accent-secondary);border-top-color:var(--cps-accent-secondary);width:1.875rem;height:1.875rem}:host .cps-loader-overlay-content-circles .cps-sp3{width:1.25rem;height:1.25rem;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@media(prefers-reduced-motion:reduce){:host .cps-loader-overlay-content-text{animation-duration:8s!important;animation-iteration-count:infinite!important}:host .cps-loader-overlay-content-circles-circle{animation-duration:3s!important;animation-iteration-count:infinite!important}}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"] }]
+            args: [{ imports: [CommonModule], selector: 'cps-loader', host: { 'aria-busy': 'true' }, template: "<div\n  class=\"cps-loader-overlay\"\n  [ngStyle]=\"{\n    'background-color': backgroundColor,\n    position: fullScreen ? 'fixed' : 'relative'\n  }\">\n  <div class=\"cps-loader-overlay-content\">\n    @if (showLabel && label.trim()) {\n      <span\n        class=\"cps-loader-overlay-content-text\"\n        [style.color]=\"cvtLabelColor\"\n        aria-hidden=\"true\">\n        {{ label }}\n      </span>\n    }\n    <div class=\"cps-loader-overlay-content-circles\" aria-hidden=\"true\">\n      <div class=\"cps-loader-overlay-content-circles-circle cps-sp1\">\n        <div class=\"cps-loader-overlay-content-circles-circle cps-sp2\">\n          <div class=\"cps-loader-overlay-content-circles-circle cps-sp3\"></div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:contents}:host .cps-loader-overlay{width:100%;height:100%;inset:0;z-index:2000}:host .cps-loader-overlay-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}:host .cps-loader-overlay-content-text{display:block;text-align:center;font-size:1.25rem;font-family:Source Sans Pro,sans-serif;font-weight:600;padding-bottom:.9375rem;animation:cps-loader-text-animation 4s linear infinite;-webkit-user-select:none;user-select:none}:host .cps-loader-overlay-content-circles{height:5.3125rem;width:5.625rem}:host .cps-loader-overlay-content-circles-circle{border-left:.3125rem solid;border-top-left-radius:100%;border-top:.3125rem solid;margin:.3125rem;animation-name:cps-loader-circles-animation;animation-duration:1s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:forwards}:host .cps-loader-overlay-content-circles .cps-sp1{border-left-color:var(--cps-accent-primary);border-top-color:var(--cps-accent-primary);width:2.5rem;height:2.5rem}:host .cps-loader-overlay-content-circles .cps-sp2{border-left-color:var(--cps-accent-secondary);border-top-color:var(--cps-accent-secondary);width:1.875rem;height:1.875rem}:host .cps-loader-overlay-content-circles .cps-sp3{width:1.25rem;height:1.25rem;border-left-color:var(--cps-color-energy);border-top-color:var(--cps-color-energy)}@media(prefers-reduced-motion:reduce){:host .cps-loader-overlay-content-text{animation:none}:host .cps-loader-overlay-content-circles-circle{animation-duration:3s!important;animation-iteration-count:infinite!important}}@keyframes cps-loader-text-animation{0%,to{filter:opacity(1)}50%{filter:opacity(.4)}}@keyframes cps-loader-circles-animation{0%{transform:rotate(0);transform-origin:right bottom}25%{transform:rotate(90deg);transform-origin:right bottom}50%{transform:rotate(180deg);transform-origin:right bottom}75%{transform:rotate(270deg);transform-origin:right bottom}to{transform:rotate(360deg);transform-origin:right bottom}}\n"] }]
         }], propDecorators: { fullScreen: [{
                 type: Input
             }], opacity: [{
@@ -6429,7 +6429,7 @@ class CpsSelectComponent {
         scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsSelectComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], 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 }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  [ngClass]=\"{ disabled: disabled, error: error }\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-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    class=\"cps-select-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined',\n      active: isOpened,\n      focused: isActive\n    }\"\n    #selectContainer\n    (keydown)=\"onContainerKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-select-box\" #selectBox (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (!hasSelectedValue()) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        } @else {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"clear($event)\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && hasSelectedValue())\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-select-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"onChevronClick($event)\"\n            (keydown.enter)=\"onChevronClick($event)\"\n            (keydown.space)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        [id]=\"optionsListId\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-select-options\"\n        [style.width.px]=\"selectBoxWidthPx\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-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-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item; let itemIdx = $index) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item,\n                  itemIdx: itemIdx\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [tabindex]=\"-1\"\n            [items]=\"options\"\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                    itemIdx: options.index\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-select-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIdx=\"itemIdx\">\n  <div\n    class=\"cps-select-options-option\"\n    [id]=\"getOptionId(item, itemIdx)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    aria-disabled=\"false\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIdx)\"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative;outline:none}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-select .cps-select-container.focused .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron{top:1.375rem}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-select .cps-select-container:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-select .cps-select-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{pointer-events:none}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:hover cps-icon,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus cps-icon{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron cps-icon{transition:transform .2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-medium);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:.5rem}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-right{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { 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", "ariaLabel"] }, { 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: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsSelectComponent, isStandalone: true, selector: "cps-select", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", options: "options", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", optionIcon: "optionIcon", optionIconColor: "optionIconColor", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", optionsClass: "optionsClass", appearance: "appearance", showChevron: "showChevron", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true }, { propertyName: "selectContainer", first: true, predicate: ["selectContainer"], 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 }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  [ngClass]=\"{ disabled: disabled, error: error }\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-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    class=\"cps-select-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"isOpened ? optionsListId : null\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined',\n      active: isOpened,\n      focused: isActive\n    }\"\n    #selectContainer\n    (keydown)=\"onContainerKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-select-box\" #selectBox (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (!hasSelectedValue()) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        } @else {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"clear($event)\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && hasSelectedValue())\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-select-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"onChevronClick($event)\"\n            (keydown.enter)=\"onChevronClick($event)\"\n            (keydown.space)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        [id]=\"optionsListId\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-select-options\"\n        [style.width.px]=\"selectBoxWidthPx\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-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-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item; let itemIdx = $index) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item,\n                  itemIdx: itemIdx\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [tabindex]=\"-1\"\n            [items]=\"options\"\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                    itemIdx: options.index\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-select-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIdx=\"itemIdx\">\n  <div\n    class=\"cps-select-options-option\"\n    [id]=\"getOptionId(item, itemIdx)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    aria-disabled=\"false\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIdx)\"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative;outline:none}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-select .cps-select-container.focused .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron{top:1.375rem}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-select .cps-select-container:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-select .cps-select-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{pointer-events:none}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:hover cps-icon,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus cps-icon{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron cps-icon{transition:transform .2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-medium);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:.5rem}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-right{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { 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", "ariaLabel"] }, { 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: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsSelectComponent, decorators: [{
             type: Component,
@@ -6445,7 +6445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  [ngClass]=\"{ disabled: disabled, error: error }\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-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    class=\"cps-select-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined',\n      active: isOpened,\n      focused: isActive\n    }\"\n    #selectContainer\n    (keydown)=\"onContainerKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-select-box\" #selectBox (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (!hasSelectedValue()) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        } @else {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"clear($event)\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && hasSelectedValue())\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-select-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"onChevronClick($event)\"\n            (keydown.enter)=\"onChevronClick($event)\"\n            (keydown.space)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        [id]=\"optionsListId\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-select-options\"\n        [style.width.px]=\"selectBoxWidthPx\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-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-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item; let itemIdx = $index) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item,\n                  itemIdx: itemIdx\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [tabindex]=\"-1\"\n            [items]=\"options\"\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                    itemIdx: options.index\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-select-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIdx=\"itemIdx\">\n  <div\n    class=\"cps-select-options-option\"\n    [id]=\"getOptionId(item, itemIdx)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    aria-disabled=\"false\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIdx)\"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative;outline:none}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-select .cps-select-container.focused .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron{top:1.375rem}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-select .cps-select-container:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-select .cps-select-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{pointer-events:none}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:hover cps-icon,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus cps-icon{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron cps-icon{transition:transform .2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-medium);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:.5rem}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-right{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
+                    ], providers: [LabelByValuePipe, CombineLabelsPipe, CheckOptionSelectedPipe], selector: 'cps-select', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-select\"\n  [ngClass]=\"{ disabled: disabled, error: error }\">\n  @if (label) {\n    <div class=\"cps-select-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-select-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    class=\"cps-select-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    role=\"combobox\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"isOpened ? optionsListId : null\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined',\n      active: isOpened,\n      focused: isActive\n    }\"\n    #selectContainer\n    (keydown)=\"onContainerKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-select-box\" #selectBox (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-select-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (!hasSelectedValue()) {\n          <div class=\"cps-select-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        } @else {\n          <div class=\"cps-select-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                {{\n                  returnObject\n                    ? value[optionLabel]\n                    : (value\n                      | labelByValue: options : optionValue : optionLabel)\n                }}</span\n              >\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    value\n                      | combineLabels\n                        : options\n                        : optionValue\n                        : optionLabel\n                        : returnObject\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of value; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"select(val, true)\"\n                    [label]=\"\n                      returnObject\n                        ? val[optionLabel]\n                        : (val\n                          | labelByValue: options : optionValue : optionLabel)\n                    \">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-select-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"clear($event)\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && hasSelectedValue())\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-select-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-select-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"onChevronClick($event)\"\n            (keydown.enter)=\"onChevronClick($event)\"\n            (keydown.space)=\"onChevronClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      [containerClass]=\"'cps-select-options-menu ' + optionsClass\">\n      <div\n        #optionsList\n        [id]=\"optionsListId\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-select-options\"\n        [style.width.px]=\"selectBoxWidthPx\">\n        @if (!virtualScroll) {\n          @if (multiple && selectAll && options.length > 1) {\n            <div\n              class=\"cps-select-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-select-options-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-select-options-option-check\"> </span>\n                }\n                <span class=\"cps-select-options-option-label\">Select all</span>\n              </span>\n            </div>\n          }\n          @for (item of options; track item; let itemIdx = $index) {\n            <ng-container\n              *ngTemplateOutlet=\"\n                itemTemplate;\n                context: {\n                  item: item,\n                  itemIdx: itemIdx\n                }\n              \"></ng-container>\n          }\n        }\n        @if (virtualScroll) {\n          <p-virtualscroller\n            #virtualList\n            [tabindex]=\"-1\"\n            [items]=\"options\"\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                    itemIdx: options.index\n                  }\n                \"></ng-container>\n            </ng-template>\n          </p-virtualscroller>\n        }\n      </div>\n    </cps-menu>\n\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"select-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-select-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIdx=\"itemIdx\">\n  <div\n    class=\"cps-select-options-option\"\n    [id]=\"getOptionId(item, itemIdx)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    aria-disabled=\"false\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIdx)\"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIdx === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-select-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-select-options-option-check\"> </span>\n      }\n      <span\n        class=\"cps-select-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-select-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\">\n      {{ item[optionInfo] }}\n      @if (item[optionIcon]) {\n        <cps-icon\n          [icon]=\"item[optionIcon]\"\n          [color]=\"item[optionIconColor] || 'text-light'\"\n          class=\"cps-select-options-option-right-icon\">\n        </cps-icon>\n      }\n    </span>\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-select{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-select .cps-select-container{position:relative;outline:none}:host .cps-select .cps-select-container .select-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-select .cps-select-container.borderless .cps-select-box,:host .cps-select .cps-select-container.underlined .cps-select-box{line-height:1;border:none!important;border-radius:0}:host .cps-select .cps-select-container.underlined .cps-select-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-select .cps-select-container.focused .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron{top:1.375rem}:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-select .cps-select-container:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-select .cps-select-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-container:focus-visible:before,:host .cps-select .cps-select-container:focus-visible:after{pointer-events:none}:host .cps-select .cps-select-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-select .cps-select-label .cps-select-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-select .persistent-clear .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.focused .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container.active .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-select .cps-select-container:hover .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-select .cps-select-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-select .cps-select-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-select .cps-select-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-select .cps-select-box-items .text-group,:host .cps-select .cps-select-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-select .cps-select-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-select .cps-select-box-items .text-group-item{line-height:1.5}:host .cps-select .cps-select-box .cps-select-box-left{display:inline-flex;align-items:center}:host .cps-select .cps-select-box .cps-select-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-select .cps-select-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box:hover .cps-select-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons{display:flex}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:hover cps-icon,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus cps-icon{opacity:1}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron cps-icon{transition:transform .2s}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus{outline:none}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible{outline:none;position:relative}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-select .cps-select-box .cps-select-box-icons .cps-select-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-select .cps-select-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-select .cps-select-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-select.disabled{pointer-events:none}:host .cps-select.disabled .cps-select-box{background:var(--cps-color-bg-disabled)}:host .cps-select.disabled .cps-select-box-items{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-box-items .text-group,:host .cps-select.disabled .cps-select-box-items .single-item{color:var(--cps-color-text-mild)}:host .cps-select.disabled .cps-select-label{color:var(--cps-color-text-mild)}:host .cps-select.error .cps-select-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-select-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-select-options .cps-select-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-select-options .cps-select-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-select-options .cps-select-options-option-label{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-select-options .cps-select-options-option-right{color:var(--cps-color-text-medium);display:flex;align-items:center}.cps-select-options .cps-select-options-option-right-icon{margin-left:.5rem}.cps-select-options .cps-select-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-select-options .cps-select-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-select-options .cps-select-options-option.selected,.cps-select-options .cps-select-options-option.allselected{font-weight:600}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-label,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-label{color:var(--cps-color-calm)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-check,.cps-select-options .cps-select-options-option.allselected .cps-select-options-option-check{opacity:1}.cps-select-options .cps-select-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-select-options .cps-select-options-option.selected .cps-select-options-option-right{color:var(--cps-color-text-dark)}.cps-select-options .cps-select-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-select-options .cps-select-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-select-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-select-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-select-options .virtual-row{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -9382,7 +9382,7 @@ class CpsSidebarMenuComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsSidebarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, exactRoutes: { classPropertyName: "exactRoutes", publicName: "exactRoutes", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_expandAreaBtn", first: true, predicate: ["expandAreaBtn"], descendants: true }, { propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (touchstart)=\"onMenuItemTouchStart()\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    #expandAreaBtn\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%;flex:1;overflow-y:auto}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit;border-radius:.25rem}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsSidebarMenuComponent, isStandalone: true, selector: "cps-sidebar-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: null }, exactRoutes: { classPropertyName: "exactRoutes", publicName: "exactRoutes", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_expandAreaBtn", first: true, predicate: ["expandAreaBtn"], descendants: true }, { propertyName: "allMenus", predicate: ["popupMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          role=\"link\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (touchstart)=\"onMenuItemTouchStart()\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    #expandAreaBtn\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%;flex:1;overflow-y:auto}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit;border-radius:.25rem}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], animations: [
             trigger('onExpand', [
                 state('collapsed', style({
                     marginTop: '0',
@@ -9418,7 +9418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                                 params: { transitionParams: '0.2s cubic-bezier(0.4, 0, 0.2, 1)' }
                             })
                         ])
-                    ], template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (touchstart)=\"onMenuItemTouchStart()\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    #expandAreaBtn\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%;flex:1;overflow-y:auto}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit;border-radius:.25rem}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"] }]
+                    ], template: "<div\n  class=\"cps-sidebar-menu\"\n  [style.height]=\"cvtHeight()\"\n  [class.cps-sidebar-menu-collapsed]=\"!isExpanded\">\n  <nav\n    class=\"cps-sidebar-menubar\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-description]=\"`Sidebar ${isExpanded ? 'expanded' : 'collapsed'}`\">\n    @for (item of items; track item) {\n      @if (item.url) {\n        <a\n          class=\"cps-sidebar-menu-item\"\n          tabindex=\"0\"\n          role=\"link\"\n          [routerLink]=\"item.disabled ? null : [item.url]\"\n          routerLinkActive=\"active\"\n          ariaCurrentWhenActive=\"page\"\n          [routerLinkActiveOptions]=\"{ exact: exactRoutes }\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </a>\n      }\n      @if (!item.url) {\n        <cps-menu\n          #popupMenu\n          [items]=\"item.items || []\"\n          [header]=\"item.title\"\n          [focusOnShow]=\"false\"\n          showTransitionOptions=\"0s\"\n          hideTransitionOptions=\"0s\"\n          [withArrow]=\"false\"\n          (containerMouseLeave)=\"leaveMenu($event, popupMenu)\">\n        </cps-menu>\n        <button\n          type=\"button\"\n          (touchstart)=\"onMenuItemTouchStart()\"\n          (mouseenter)=\"showMenu($event, popupMenu)\"\n          (mouseleave)=\"leaveMenu($event, popupMenu)\"\n          (focusin)=\"showMenu($event, popupMenu, item)\"\n          (focusout)=\"leaveMenu($event, popupMenu)\"\n          (click)=\"toggleMenu($event, popupMenu, item)\"\n          class=\"cps-sidebar-menu-item menu-trigger\"\n          [class.active]=\"isActive(item)\"\n          [class.menu-open]=\"popupMenu.isVisible()\"\n          [class.disabled]=\"item.disabled\"\n          [attr.aria-haspopup]=\"'menu'\"\n          [attr.aria-expanded]=\"\n            focusedItemWithMenu === item ? popupMenu.isVisible() : null\n          \"\n          [attr.aria-current]=\"isActive(item) ? 'page' : null\"\n          [attr.aria-disabled]=\"item.disabled || null\"\n          [attr.aria-label]=\"item.title\">\n          <cps-icon [icon]=\"item.icon\" size=\"normal\"> </cps-icon>\n          <span\n            class=\"cps-sidebar-menu-item-label\"\n            [@onExpand]=\"{\n              value: isExpanded ? 'expanded' : 'collapsed',\n              params: { transitionParams: resolvedTransitionParams }\n            }\">\n            {{ item.title }}\n          </span>\n        </button>\n      }\n    }\n  </nav>\n  <button\n    #expandAreaBtn\n    type=\"button\"\n    class=\"expand-area\"\n    (click)=\"toggleSidebar()\"\n    [attr.aria-label]=\"isExpanded ? 'Collapse sidebar' : 'Expand sidebar'\"\n    [attr.aria-expanded]=\"isExpanded\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"> </cps-icon>\n  </button>\n</div>\n", styles: [":host .cps-sidebar-menu{display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 0 3.75rem #0000001a;width:5rem;transition-duration:.2s;overflow:hidden;position:relative}:host .cps-sidebar-menu .cps-sidebar-menubar{width:100%;flex:1;overflow-y:auto}:host .cps-sidebar-menu .expand-area{cursor:pointer;display:flex;justify-content:center;height:1.5rem;position:absolute;bottom:5%;background:none;border:none;padding:0;font:inherit;color:inherit;border-radius:.25rem}:host .cps-sidebar-menu .expand-area cps-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}:host .cps-sidebar-menu .expand-area:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .expand-area:focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-sidebar-menu .expand-area:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .expand-area:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .expand-area:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .expand-area:hover,:host .cps-sidebar-menu .expand-area:focus-visible{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:5rem;text-decoration:none;color:var(--cps-color-text-darkest);border-bottom:.0625rem solid var(--cps-color-line-mid);-webkit-user-select:none;user-select:none;background:none;border-left:none;border-right:none;border-top:none;padding:0;font:inherit}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible{outline:none;position:relative}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{content:\"\";position:absolute;border-radius:0}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:before,:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible.suppress-focus-visible:after{display:none}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:focus-visible:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item .cps-sidebar-menu-item-label{font-weight:600;font-size:.6875rem;line-height:.8125rem;width:5rem;color:var(--cps-color-text-darkest);text-align:center}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled){background:var(--cps-color-highlight-hover);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:hover:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item:active:not(.active):not(.disabled){background:var(--cps-color-highlight-active)}:host .cps-sidebar-menu .cps-sidebar-menu-item.active{background:var(--cps-color-calm);color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.active .cps-sidebar-menu-item-label{color:#fff}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled){background:var(--cps-color-highlight-active);color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-open:not(.active):not(.disabled) .cps-sidebar-menu-item-label{color:var(--cps-color-calm)}:host .cps-sidebar-menu .cps-sidebar-menu-item.menu-trigger{cursor:pointer}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled{cursor:default;background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-sidebar-menu .cps-sidebar-menu-item.disabled .cps-sidebar-menu-item-label{color:var(--cps-color-text-mild)}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed{width:2.5rem}:host .cps-sidebar-menu.cps-sidebar-menu-collapsed .expand-area cps-icon{transform:rotate(180deg)}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], isExpanded: [{
@@ -13975,8 +13975,10 @@ class CpsBaseTreeDropdownComponent {
         return key.replace('key-', '');
     }
     _setTreeListHeight(height) {
-        if (this.treeList?.scroller?.style)
-            this.treeList.scroller.style.height = height;
+        const scrollerEl = this.treeList?.scroller?.elementViewChild?.nativeElement;
+        if (scrollerEl?.style) {
+            scrollerEl.style.height = height;
+        }
     }
     _nodeToggled(elem, key) {
         this.recalcVirtualListHeight();
@@ -14475,7 +14477,7 @@ class CpsTreeAutocompleteComponent extends CpsBaseTreeDropdownComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsTreeAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, viewQueries: [{ propertyName: "treeAutocompleteInput", first: true, predicate: ["treeAutocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"-1\"\n  (keydown)=\"onOuterDivKeyDown($event)\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\"\n  [class.active]=\"isActive()\"\n  [class.opened]=\"isOpened\"\n  #componentContainer>\n  @if (label) {\n    <div class=\"cps-treeautocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeautocomplete-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    (mousedown)=\"onContainerMouseDown($event)\"\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isActive()\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeautocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    treeSelection.label\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    treeAutocompleteInputTemplate;\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=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <div\n                    role=\"listitem\"\n                    class=\"text-group-item\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\">\n                    {{ val.label }}{{ !last ? ',' : '' }}\n                  </div>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-item-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-chip-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"treeAutocompleteInputTemplate\">\n          </ng-container>\n        }\n        <span class=\"cps-treeautocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"$event.preventDefault(); clear($event)\"\n              [style.visibility]=\"\n                persistentClear ||\n                (!persistentClear &&\n                  ((multiple && treeSelection?.length) ||\n                    (!multiple && treeSelection)))\n                  ? 'visible'\n                  : 'hidden'\n              \"\n              class=\"cps-treeautocomplete-box-clear-icon\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron) {\n            <span\n              class=\"cps-treeautocomplete-box-chevron\"\n              role=\"button\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\">\n              <cps-icon\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      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeautocomplete-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeautocomplete-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeautocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeautocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeautocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #treeAutocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #treeAutocompleteInput\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    aria-haspopup=\"tree\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-controls]=\"optionsTreeId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.opened .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-mild);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .cps-treeautocomplete-input-listitem{flex-grow:1;min-width:1.875rem;display:flex;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{display:flex;color:var(--cps-state-error);margin-left:.5rem;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:hover cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:.5rem;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron cps-icon{transition:transform .2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-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-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeautocomplete-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:.6875rem;font-size:1rem;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:1rem}.cps-treeautocomplete-options ::ng-deep *:focus-visible:before,.cps-treeautocomplete-options ::ng-deep *:focus-visible:after{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: TreeModule }, { kind: "component", type: i2$3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { 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", "ariaLabel"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsTreeAutocompleteComponent, isStandalone: true, selector: "cps-tree-autocomplete", inputs: { emptyMessage: "emptyMessage", appearance: "appearance", placeholder: "placeholder" }, viewQueries: [{ propertyName: "treeAutocompleteInput", first: true, predicate: ["treeAutocompleteInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"-1\"\n  (keydown)=\"onOuterDivKeyDown($event)\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\"\n  [class.active]=\"isActive()\"\n  [class.opened]=\"isOpened\"\n  #componentContainer>\n  @if (label) {\n    <div class=\"cps-treeautocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeautocomplete-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    (mousedown)=\"onContainerMouseDown($event)\"\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isActive()\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeautocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    treeSelection.label\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    treeAutocompleteInputTemplate;\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=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <div\n                    role=\"listitem\"\n                    class=\"text-group-item\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\">\n                    {{ val.label }}{{ !last ? ',' : '' }}\n                  </div>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-item-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-chip-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"treeAutocompleteInputTemplate\">\n          </ng-container>\n        }\n        <span class=\"cps-treeautocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"$event.preventDefault(); clear($event)\"\n              [style.visibility]=\"\n                persistentClear ||\n                (!persistentClear &&\n                  ((multiple && treeSelection?.length) ||\n                    (!multiple && treeSelection)))\n                  ? 'visible'\n                  : 'hidden'\n              \"\n              class=\"cps-treeautocomplete-box-clear-icon\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron) {\n            <span\n              class=\"cps-treeautocomplete-box-chevron\"\n              role=\"button\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\">\n              <cps-icon\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      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeautocomplete-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeautocomplete-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeautocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeautocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeautocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #treeAutocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #treeAutocompleteInput\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    aria-haspopup=\"tree\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-controls]=\"isOpened ? optionsTreeId : null\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.opened .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-mild);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .cps-treeautocomplete-input-listitem{flex-grow:1;min-width:1.875rem;display:flex;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{display:flex;color:var(--cps-state-error);margin-left:.5rem;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:hover cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:.5rem;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron cps-icon{transition:transform .2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-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-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeautocomplete-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:.6875rem;font-size:1rem;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:1rem}.cps-treeautocomplete-options ::ng-deep *:focus-visible:before,.cps-treeautocomplete-options ::ng-deep *:focus-visible:after{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: TreeModule }, { kind: "component", type: i2$3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { 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", "ariaLabel"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsTreeAutocompleteComponent, decorators: [{
             type: Component,
@@ -14488,7 +14490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CpsProgressLinearComponent,
                         CpsInfoCircleComponent,
                         CpsMenuComponent
-                    ], selector: 'cps-tree-autocomplete', template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"-1\"\n  (keydown)=\"onOuterDivKeyDown($event)\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\"\n  [class.active]=\"isActive()\"\n  [class.opened]=\"isOpened\"\n  #componentContainer>\n  @if (label) {\n    <div class=\"cps-treeautocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeautocomplete-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    (mousedown)=\"onContainerMouseDown($event)\"\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isActive()\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeautocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    treeSelection.label\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    treeAutocompleteInputTemplate;\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=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <div\n                    role=\"listitem\"\n                    class=\"text-group-item\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\">\n                    {{ val.label }}{{ !last ? ',' : '' }}\n                  </div>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-item-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-chip-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"treeAutocompleteInputTemplate\">\n          </ng-container>\n        }\n        <span class=\"cps-treeautocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"$event.preventDefault(); clear($event)\"\n              [style.visibility]=\"\n                persistentClear ||\n                (!persistentClear &&\n                  ((multiple && treeSelection?.length) ||\n                    (!multiple && treeSelection)))\n                  ? 'visible'\n                  : 'hidden'\n              \"\n              class=\"cps-treeautocomplete-box-clear-icon\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron) {\n            <span\n              class=\"cps-treeautocomplete-box-chevron\"\n              role=\"button\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\">\n              <cps-icon\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      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeautocomplete-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeautocomplete-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeautocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeautocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeautocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #treeAutocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #treeAutocompleteInput\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    aria-haspopup=\"tree\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-controls]=\"optionsTreeId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.opened .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-mild);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .cps-treeautocomplete-input-listitem{flex-grow:1;min-width:1.875rem;display:flex;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{display:flex;color:var(--cps-state-error);margin-left:.5rem;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:hover cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:.5rem;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron cps-icon{transition:transform .2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-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-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeautocomplete-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:.6875rem;font-size:1rem;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:1rem}.cps-treeautocomplete-options ::ng-deep *:focus-visible:before,.cps-treeautocomplete-options ::ng-deep *:focus-visible:after{display:none!important}\n"] }]
+                    ], selector: 'cps-tree-autocomplete', template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeautocomplete\"\n  tabindex=\"-1\"\n  (keydown)=\"onOuterDivKeyDown($event)\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\"\n  [class.active]=\"isActive()\"\n  [class.opened]=\"isOpened\"\n  #componentContainer>\n  @if (label) {\n    <div class=\"cps-treeautocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeautocomplete-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    (mousedown)=\"onContainerMouseDown($event)\"\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-treeautocomplete-container\"\n    [class.focused]=\"isActive()\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\">\n    <div class=\"cps-treeautocomplete-box\" #boxEl (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-treeautocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeautocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    treeSelection.label\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    treeAutocompleteInputTemplate;\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=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <div\n                    role=\"listitem\"\n                    class=\"text-group-item\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\">\n                    {{ val.label }}{{ !last ? ',' : '' }}\n                  </div>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-item-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val; let last = $last) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [class.about-to-remove]=\"last && backspaceClickedOnce\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n                <span\n                  role=\"listitem\"\n                  class=\"cps-treeautocomplete-input-listitem\">\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      treeAutocompleteInputTemplate;\n                      context: {\n                        inputClass: 'multi-chip-input'\n                      }\n                    \"></ng-container>\n                </span>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container *ngTemplateOutlet=\"treeAutocompleteInputTemplate\">\n          </ng-container>\n        }\n        <span class=\"cps-treeautocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"$event.preventDefault(); clear($event)\"\n              [style.visibility]=\"\n                persistentClear ||\n                (!persistentClear &&\n                  ((multiple && treeSelection?.length) ||\n                    (!multiple && treeSelection)))\n                  ? 'visible'\n                  : 'hidden'\n              \"\n              class=\"cps-treeautocomplete-box-clear-icon\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron) {\n            <span\n              class=\"cps-treeautocomplete-box-chevron\"\n              role=\"button\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\">\n              <cps-icon\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      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeautocomplete-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeautocomplete-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [emptyMessage]=\"emptyMessage\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          (onFilter)=\"onFilterOptions()\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeautocomplete-directory-elem\">{{\n              node.label\n            }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeautocomplete-option\">\n              <span class=\"cps-treeautocomplete-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeautocomplete-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeautocomplete-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeautocomplete-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeautocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeautocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeautocomplete-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #treeAutocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #treeAutocompleteInput\n    class=\"cps-treeautocomplete-box-input\"\n    spellcheck=\"false\"\n    role=\"combobox\"\n    [disabled]=\"disabled\"\n    aria-haspopup=\"tree\"\n    aria-autocomplete=\"list\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-controls]=\"isOpened ? optionsTreeId : null\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [class]=\"inputClass\"\n    [style]=\"inputStyle\"\n    [placeholder]=\"\n      (!treeSelection && !multiple) || (treeSelection?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n</ng-template>\n", styles: [":host{display:flex}:host .cps-treeautocomplete{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeautocomplete .cps-treeautocomplete-container{position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container .cps-treeautocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box{background:#fff!important}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:before,:host .cps-treeautocomplete .cps-treeautocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-treeautocomplete .cps-treeautocomplete-container.borderless .cps-treeautocomplete-box,:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeautocomplete .cps-treeautocomplete-container.underlined .cps-treeautocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeautocomplete.active .cps-treeautocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete.active .cps-treeautocomplete-box .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete.opened .cps-treeautocomplete-box .cps-treeautocomplete-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeautocomplete .cps-treeautocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeautocomplete .cps-treeautocomplete-label .cps-treeautocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeautocomplete .persistent-clear .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container.focused .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-container:hover .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeautocomplete .cps-treeautocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:#fff;font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeautocomplete .cps-treeautocomplete-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:Source Sans Pro,sans-serif}:host .cps-treeautocomplete .cps-treeautocomplete-box-input::placeholder{color:var(--cps-color-text-mild);font-style:italic;opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete .cps-treeautocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .cps-treeautocomplete-input-listitem{flex-grow:1;min-width:1.875rem;display:flex;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group{color:var(--cps-color-text-dark);align-items:center;display:inline-flex;flex-wrap:wrap}:host .cps-treeautocomplete .cps-treeautocomplete-box-items .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box:hover .cps-treeautocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons{display:flex}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon{display:flex;color:var(--cps-state-error);margin-left:.5rem;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:hover cps-icon,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron{display:flex;margin-left:.5rem;transition-duration:.2s;cursor:pointer}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron cps-icon{transition:transform .2s}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus{outline:none}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeautocomplete .cps-treeautocomplete-box .cps-treeautocomplete-box-icons .cps-treeautocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeautocomplete .cps-treeautocomplete-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeautocomplete .cps-treeautocomplete-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-treeautocomplete.disabled{pointer-events:none}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .text-group,:host .cps-treeautocomplete.disabled .cps-treeautocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeautocomplete.disabled .cps-treeautocomplete-label{color:var(--cps-color-text-mild)}:host .cps-treeautocomplete.error .cps-treeautocomplete-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-treeautocomplete-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeautocomplete-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeautocomplete-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-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-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-option .virtual-row{white-space:nowrap}.cps-treeautocomplete-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeautocomplete-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeautocomplete-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeautocomplete-option-check{opacity:1}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeautocomplete-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeautocomplete-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeautocomplete-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeautocomplete-options ::ng-deep .p-tree-empty-message{padding:.6875rem;font-size:1rem;cursor:default}.cps-treeautocomplete-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeautocomplete-options ::ng-deep .cps-treeautocomplete-directory-elem{font-weight:700;font-size:1rem}.cps-treeautocomplete-options ::ng-deep *:focus-visible:before,.cps-treeautocomplete-options ::ng-deep *:focus-visible:after{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { emptyMessage: [{
@@ -14556,7 +14558,7 @@ class CpsTreeSelectComponent extends CpsBaseTreeDropdownComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsTreeSelectComponent, deps: [{ token: i1$2.NgControl, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeselect\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\">\n  @if (label) {\n    <div class=\"cps-treeselect-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeselect-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    class=\"cps-treeselect-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [class.focused]=\"isOpened\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.active]=\"isOpened\"\n    #componentContainer\n    role=\"combobox\"\n    aria-haspopup=\"tree\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"optionsTreeId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!treeSelection && !multiple) ||\n          (treeSelection?.length < 1 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\"> {{ treeSelection.label }}</span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    treeSelection\n                      | combineLabels: innerOptions : '' : 'label' : true\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"$event.preventDefault(); clear($event)\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeselect-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-treeselect-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onBoxClick($event)\"\n            (keydown.space)=\"$event.preventDefault(); onBoxClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeselect-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeselect-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeselect-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeselect-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeselect-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative;outline:none}:host .cps-treeselect .cps-treeselect-container:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeselect .cps-treeselect-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{pointer-events:none}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:hover cps-icon,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron cps-icon{transition:transform .2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-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-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:var(--cps-color-bg-disabled)}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeselect-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree-node:focus{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:1rem}.cps-treeselect-options ::ng-deep *:focus-visible:before,.cps-treeselect-options ::ng-deep *:focus-visible:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { 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", "ariaLabel"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { 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: CombineLabelsPipe, name: "combineLabels" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CpsTreeSelectComponent, isStandalone: true, selector: "cps-tree-select", inputs: { appearance: "appearance", placeholder: "placeholder" }, providers: [CombineLabelsPipe], usesInheritance: true, ngImport: i0, template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeselect\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\">\n  @if (label) {\n    <div class=\"cps-treeselect-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeselect-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    class=\"cps-treeselect-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [class.focused]=\"isOpened\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.active]=\"isOpened\"\n    #componentContainer\n    role=\"combobox\"\n    aria-haspopup=\"tree\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"isOpened ? optionsTreeId : null\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!treeSelection && !multiple) ||\n          (treeSelection?.length < 1 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\"> {{ treeSelection.label }}</span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    treeSelection\n                      | combineLabels: innerOptions : '' : 'label' : true\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"$event.preventDefault(); clear($event)\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeselect-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-treeselect-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onBoxClick($event)\"\n            (keydown.space)=\"$event.preventDefault(); onBoxClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeselect-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeselect-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeselect-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeselect-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeselect-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative;outline:none}:host .cps-treeselect .cps-treeselect-container:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeselect .cps-treeselect-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{pointer-events:none}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:hover cps-icon,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron cps-icon{transition:transform .2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-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-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:var(--cps-color-bg-disabled)}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeselect-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree-node:focus{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:1rem}.cps-treeselect-options ::ng-deep *:focus-visible:before,.cps-treeselect-options ::ng-deep *:focus-visible:after{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TreeModule }, { kind: "component", type: i2$3.Tree, selector: "p-tree", inputs: ["value", "selectionMode", "loadingMode", "selection", "styleClass", "contextMenu", "contextMenuSelectionMode", "contextMenuSelection", "draggableScope", "droppableScope", "draggableNodes", "droppableNodes", "metaKeySelection", "propagateSelectionUp", "propagateSelectionDown", "loading", "loadingIcon", "emptyMessage", "ariaLabel", "togglerAriaLabel", "ariaLabelledBy", "validateDrop", "filter", "filterInputAutoFocus", "filterBy", "filterMode", "filterOptions", "filterPlaceholder", "filteredNodes", "filterLocale", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "indentation", "_templateMap", "trackBy", "highlightOnSelect"], outputs: ["selectionChange", "contextMenuSelectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse", "onNodeContextMenuSelect", "onNodeDoubleClick", "onNodeDrop", "onLazyLoad", "onScroll", "onScrollIndexChange", "onFilter"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color", "ariaLabel"] }, { 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", "ariaLabel"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { 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: CombineLabelsPipe, name: "combineLabels" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CpsTreeSelectComponent, decorators: [{
             type: Component,
@@ -14569,7 +14571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CpsInfoCircleComponent,
                         CombineLabelsPipe,
                         CpsMenuComponent
-                    ], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeselect\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\">\n  @if (label) {\n    <div class=\"cps-treeselect-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeselect-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    class=\"cps-treeselect-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [class.focused]=\"isOpened\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.active]=\"isOpened\"\n    #componentContainer\n    role=\"combobox\"\n    aria-haspopup=\"tree\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"optionsTreeId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!treeSelection && !multiple) ||\n          (treeSelection?.length < 1 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\"> {{ treeSelection.label }}</span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    treeSelection\n                      | combineLabels: innerOptions : '' : 'label' : true\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"$event.preventDefault(); clear($event)\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeselect-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-treeselect-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onBoxClick($event)\"\n            (keydown.space)=\"$event.preventDefault(); onBoxClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeselect-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeselect-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeselect-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeselect-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeselect-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative;outline:none}:host .cps-treeselect .cps-treeselect-container:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeselect .cps-treeselect-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{pointer-events:none}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:hover cps-icon,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron cps-icon{transition:transform .2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-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-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:var(--cps-color-bg-disabled)}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeselect-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree-node:focus{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:1rem}.cps-treeselect-options ::ng-deep *:focus-visible:before,.cps-treeselect-options ::ng-deep *:focus-visible:after{display:none!important}\n"] }]
+                    ], providers: [CombineLabelsPipe], selector: 'cps-tree-select', template: "<div\n  [style.width]=\"cvtWidth\"\n  class=\"cps-treeselect\"\n  [class.disabled]=\"disabled\"\n  [class.error]=\"error\">\n  @if (label) {\n    <div class=\"cps-treeselect-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-treeselect-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    class=\"cps-treeselect-container\"\n    [tabindex]=\"disabled ? -1 : 0\"\n    [class.focused]=\"isOpened\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.active]=\"isOpened\"\n    #componentContainer\n    role=\"combobox\"\n    aria-haspopup=\"tree\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-busy]=\"loading ? true : null\"\n    [attr.aria-controls]=\"isOpened ? optionsTreeId : null\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"ariaLabel || label || null\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-disabled]=\"disabled || null\"\n    (keydown)=\"onKeyDown($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\">\n    <div class=\"cps-treeselect-box\" #boxEl (click)=\"onBoxClick()\">\n      <div class=\"cps-treeselect-box-left\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? '#9a9595' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!treeSelection && !multiple) ||\n          (treeSelection?.length < 1 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-placeholder\">\n            {{ placeholder }}\n          </div>\n        }\n        @if (\n          (treeSelection && !multiple) ||\n          (treeSelection?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-treeselect-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\"> {{ treeSelection.label }}</span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"text-group\" role=\"list\" aria-label=\"Selected options\">\n                <span class=\"text-group-item\" role=\"listitem\">\n                  {{\n                    treeSelection\n                      | combineLabels: innerOptions : '' : 'label' : true\n                  }}\n                </span>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div\n                class=\"chips-group\"\n                role=\"list\"\n                aria-label=\"Selected options\">\n                @for (val of treeSelection; track val) {\n                  <cps-chip\n                    role=\"listitem\"\n                    closeButtonAriaLabel=\"Remove\"\n                    [disabled]=\"disabled\"\n                    [closable]=\"closableChips\"\n                    (closed)=\"remove(val)\"\n                    [label]=\"val.label\">\n                  </cps-chip>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      <span class=\"cps-treeselect-box-icons\">\n        @if (clearable && !disabled) {\n          <span\n            role=\"button\"\n            aria-label=\"Clear selection\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (click)=\"clear($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"clear($event)\"\n            (keydown.space)=\"$event.preventDefault(); clear($event)\"\n            [style.visibility]=\"\n              persistentClear ||\n              (!persistentClear &&\n                ((multiple && treeSelection?.length) ||\n                  (!multiple && treeSelection)))\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"cps-treeselect-box-clear-icon\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (showChevron) {\n          <span\n            class=\"cps-treeselect-box-chevron\"\n            role=\"button\"\n            [attr.aria-label]=\"isOpened ? 'Collapse options' : 'Expand options'\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (keydown.enter)=\"onBoxClick($event)\"\n            (keydown.space)=\"$event.preventDefault(); onBoxClick($event)\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      [focusOnShow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden()\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-treeselect-options-menu\">\n      <div\n        [id]=\"optionsTreeId\"\n        class=\"cps-treeselect-options\"\n        [class.arrow-navigating]=\"isArrowNavigating\"\n        [style.width.px]=\"boxWidthPx\"\n        (keydown)=\"onOptionsKeyDown($event)\">\n        <p-tree\n          #treeList\n          [trackBy]=\"treeTrackBy\"\n          [pt]=\"treeNodeToggleButtonPt\"\n          [virtualScroll]=\"virtualScroll\"\n          [virtualScrollItemSize]=\"virtualScrollItemSizePx()\"\n          [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n          [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n          (onNodeSelect)=\"onSelectNode()\"\n          (onNodeExpand)=\"onNodeExpand($event)\"\n          (onNodeCollapse)=\"onNodeCollapse($event)\"\n          [value]=\"innerOptions\"\n          [(selection)]=\"treeSelection\"\n          (selectionChange)=\"treeSelectionChanged($event)\"\n          [metaKeySelection]=\"multiple ? false : true\"\n          [selectionMode]=\"multiple ? 'multiple' : 'single'\">\n          <ng-template let-node pTemplate=\"directory\">\n            <span class=\"cps-treeselect-directory-elem\">{{ node.label }}</span>\n          </ng-template>\n          <ng-template let-node pTemplate=\"default\">\n            <span class=\"cps-treeselect-option\">\n              <span class=\"cps-treeselect-option-left\">\n                @if (multiple) {\n                  <span class=\"cps-treeselect-option-check\"> </span>\n                }\n                <span\n                  class=\"cps-treeselect-option-label\"\n                  [class.virtual-row]=\"virtualScroll\"\n                  >{{ node.label }}</span\n                >\n              </span>\n              <span\n                class=\"cps-treeselect-option-info\"\n                [class.virtual-row]=\"virtualScroll\"\n                >{{ node.info }}</span\n              >\n            </span>\n          </ng-template>\n        </p-tree>\n      </div>\n    </cps-menu>\n    @if (loading) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        class=\"cps-treeselect-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-treeselect-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-treeselect-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-treeselect{position:relative;width:100%;outline:none;font-family:Source Sans Pro,sans-serif;font-weight:400;display:grid}:host .cps-treeselect .cps-treeselect-container{position:relative;outline:none}:host .cps-treeselect .cps-treeselect-container:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-treeselect .cps-treeselect-container:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-container:focus-visible:before,:host .cps-treeselect .cps-treeselect-container:focus-visible:after{pointer-events:none}:host .cps-treeselect .cps-treeselect-container .cps-treeselect-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-treeselect .cps-treeselect-container.borderless .cps-treeselect-box,:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{line-height:1;border:none!important;border-radius:0}:host .cps-treeselect .cps-treeselect-container.underlined .cps-treeselect-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-container.active .cps-treeselect-box .cps-treeselect-box-chevron cps-icon{transform:rotate(180deg)}:host .cps-treeselect .cps-treeselect-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-treeselect .cps-treeselect-label .cps-treeselect-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-treeselect .persistent-clear .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container.focused .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-treeselect .cps-treeselect-container:hover .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-treeselect .cps-treeselect-box{overflow:hidden;justify-content:space-between;min-height:2.375rem;width:100%;cursor:pointer;background:#fff;font-size:1rem;outline:none;padding-left:.75rem;padding-right:.5rem;border-radius:.25rem;align-items:center;display:flex;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box-placeholder{color:var(--cps-color-text-mild);font-style:italic}:host .cps-treeselect .cps-treeselect-box-items{margin-top:.1875rem;margin-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .text-group,:host .cps-treeselect .cps-treeselect-box-items .single-item{color:var(--cps-color-text-dark);padding-top:.1875rem;padding-bottom:.1875rem}:host .cps-treeselect .cps-treeselect-box-items .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-treeselect .cps-treeselect-box-items .text-group-item{line-height:1.5}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left{display:inline-flex;align-items:center}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-left .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-treeselect .cps-treeselect-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box:hover .cps-treeselect-box-left .prefix-icon{color:var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons{display:flex}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon{display:flex;padding:.25rem;color:var(--cps-state-error);margin-left:.25rem;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:hover cps-icon,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus cps-icon{opacity:1}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron{display:flex;padding:.25rem;transition-duration:.2s;cursor:pointer}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron cps-icon{transition:transform .2s}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus{outline:none}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible{outline:none;position:relative}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-treeselect .cps-treeselect-box .cps-treeselect-box-icons .cps-treeselect-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-treeselect .cps-treeselect-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-treeselect .cps-treeselect-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-treeselect.disabled{pointer-events:none}:host .cps-treeselect.disabled .cps-treeselect-box{background:var(--cps-color-bg-disabled)}:host .cps-treeselect.disabled .cps-treeselect-box-items{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-box-items .text-group,:host .cps-treeselect.disabled .cps-treeselect-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-treeselect.disabled .cps-treeselect-label{color:var(--cps-color-text-mild)}:host .cps-treeselect.error .cps-treeselect-box{border-color:var(--cps-state-error)!important;background:#fef3f2!important}.cps-treeselect-options{background:#fff;overflow-x:hidden;max-height:15.125rem;overflow-y:auto;--focused-selected-option-background: var(--cps-color-highlight-selected)}.cps-treeselect-options.arrow-navigating{--focused-selected-option-background: var(--cps-color-highlight-selected-dark)}.cps-treeselect-options ::ng-deep .p-tree{background:#fff;color:var(--cps-color-text-dark);padding:0;border:unset;border-radius:unset}.cps-treeselect-options ::ng-deep .cps-treeselect-option{margin-right:.5rem;display:flex;align-items:center;justify-content:space-between}.cps-treeselect-options ::ng-deep .cps-treeselect-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-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-treeselect-options ::ng-deep .cps-treeselect-option-info{margin-left:.375rem;color:var(--cps-color-text-light)}.cps-treeselect-options ::ng-deep .cps-treeselect-option .virtual-row{white-space:nowrap}.cps-treeselect-options ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:.875rem;font-weight:400}.cps-treeselect-options ::ng-deep .p-tree-wrapper{overflow:auto}.cps-treeselect-options ::ng-deep .p-tree-root-children{margin:0;padding:0;list-style-type:none;overflow:auto}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node{padding:unset;outline:0 none;min-width:fit-content}.cps-treeselect-options ::ng-deep .p-tree-node:focus{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content{border-radius:0;transition:box-shadow .2s;padding:.25rem}.cps-treeselect-options ::ng-deep .p-tree-node-content{display:flex;align-items:center}.cps-treeselect-options ::ng-deep .p-tree-node-content .p-tree-node-label{width:100%}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button{margin-right:.5rem;width:2rem;height:2rem;color:var(--cps-color-text-light);border:0 none;background:transparent;border-radius:50%;transition:background-color .2s,color .2s,box-shadow .2s}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content .p-tree-node-toggle-button .p-tree-node-toggle-icon{width:.875rem;height:.875rem}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content:not(.p-tree-node-selected):hover{background:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content:not(.p-tree-node-selected){background-color:var(--cps-color-highlight-hover)}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected{background:var(--cps-color-highlight-selected);color:var(--cps-color-calm);font-weight:600}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node .p-tree-node-content.p-tree-node-selected .cps-treeselect-option-check{opacity:1}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content.p-tree-node-selected{background:var(--focused-selected-option-background)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button{outline:0 none;outline-offset:0;cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button :hover{color:var(--cps-color-calm)}.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus,.cps-treeselect-options ::ng-deep .p-tree-node-toggle-button:focus-visible{outline:none;box-shadow:none}.cps-treeselect-options ::ng-deep .p-tree .p-tree-root-children .p-tree-node:focus>.p-tree-node-content .p-tree-node-toggle-button{outline:0 none;outline-offset:0;box-shadow:unset}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable>.p-tree-node-content:hover .p-tree-node-toggle-button{color:var(--cps-color-calm)!important}.cps-treeselect-options ::ng-deep .p-tree .p-tree-node-children{padding:0 0 0 1rem}.cps-treeselect-options ::ng-deep .p-tree-node-children{margin:0;padding:0;list-style-type:none}.cps-treeselect-options ::ng-deep .cps-tree-node-fully-expandable{cursor:pointer;-webkit-user-select:none;user-select:none}.cps-treeselect-options ::ng-deep .cps-treeselect-directory-elem{font-weight:700;font-size:1rem}.cps-treeselect-options ::ng-deep *:focus-visible:before,.cps-treeselect-options ::ng-deep *:focus-visible:after{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }], propDecorators: { appearance: [{
@@ -16130,6 +16132,20 @@ class CpsTreeTableComponent {
                 if (table)
                     this.renderer.setStyle(table, 'min-width', this.minWidth);
             }
+            this._removeEmptyFooter();
+        }
+    }
+    /**
+     * PrimeNG's non-scrollable p-treeTable view always renders a
+     * `<tfoot role="rowgroup">`, even with no footer template provided,
+     * leaving an empty rowgroup that violates aria-required-children.
+     * The scrollable view correctly omits it in that case, so this only
+     * needs to run here.
+     */
+    _removeEmptyFooter() {
+        const tfoot = this.primengTreeTable.el?.nativeElement?.querySelector('.p-treetable-tfoot');
+        if (tfoot && tfoot.childElementCount === 0 && tfoot.parentNode) {
+            this.renderer.removeChild(tfoot.parentNode, tfoot);
         }
     }
     ngAfterViewChecked() {
@@ -17731,7 +17747,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class CpsConfirmationComponent {
-    // eslint-disable-next-line no-useless-constructor
     constructor(_dialogRef, _config) {
         this._dialogRef = _dialogRef;
         this._config = _config;