cps-ui-kit 21.21.0 → 21.23.0

package/fesm2022/cps-ui-kit.mjs

@@ -165,20 +165,6 @@ const randomPrefix = Math.random().toString(36).slice(2, 8);
 const generateUniqueId = (prefix = 'cps') => {
     return `${prefix}-${randomPrefix}-${id++}`;
 };
-const getComputedLabel = (context) => {
-    const parts = [];
-    // Always add label
-    if (context.label) {
-        parts.push(context.label.trim().replace(/\.*$/, '.')); // ensure single period
-    }
-    // Add error if exists and not hidden
-    const errorText = context.error;
-    if (errorText && !context.hideDetails) {
-        const cleanedError = errorText.trim().replace(/\.*$/, '');
-        parts.push(`Error: ${cleanedError}.`);
-    }
-    return parts.length > 0 ? parts.join(' ') : null;
-};
 const focusElement = (element) => {
     if (element) {
         setTimeout(() => element.focus());
@@ -2029,6 +2015,15 @@ class CpsAutocompleteComponent {
     get options() {
         return this._options;
     }
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error || this.externalError)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
     constructor(_control, cdRef, _labelByValue) {
         this._control = _control;
         this.cdRef = cdRef;
@@ -2291,6 +2286,8 @@ class CpsAutocompleteComponent {
         this.isTimePickerField = false;
         this.optionsListId = generateUniqueId('cps-autocomplete-options-list');
         this.selectAllOptionId = generateUniqueId('cps-autocomplete-option-select-all');
+        this.hintId = generateUniqueId('cps-autocomplete-hint');
+        this.errorId = generateUniqueId('cps-autocomplete-error');
         this._optionIdPrefix = generateUniqueId('cps-autocomplete-option');
         this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
         this._inputChangeSubject$ = new Subject();
@@ -2658,13 +2655,6 @@ class CpsAutocompleteComponent {
     get isRequired() {
         return this._control?.control?.hasValidator(Validators.required) ?? false;
     }
-    get computedLabel() {
-        return getComputedLabel({
-            label: this.ariaLabel || this.label,
-            error: this.error || this.externalError,
-            hideDetails: this.hideDetails
-        });
-    }
     get isSelectAllVisible() {
         return (!this.virtualScroll &&
             !this.loading &&
@@ -2948,7 +2938,7 @@ class CpsAutocompleteComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div [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-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
@@ -2963,7 +2953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"!hasSelectedValue() ? placeholder : ''\"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      isArrowNavigating &&\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:before,:host .cps-autocomplete .cps-autocomplete-container.keyboard-focused:after{pointer-events:none}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{-webkit-user-select:none;user-select:none;color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible.suppress-focus-visible:after{display:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
+                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [class.keyboard-focused]=\"isKeyboardFocused\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            aria-hidden=\"true\"\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (hasSelectedValue()) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear && !hasSelectedValue()\n              }\">\n              <cps-icon\n                icon=\"delete\"\n                size=\"small\"\n                aria-hidden=\"true\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                aria-hidden=\"true\"\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.px]=\"autocompleteBoxWidthPx\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"\n              isArrowNavigating && optionHighlightedIndex === 0\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [tabindex]=\"-1\"\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx()\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div [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-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -3740,15 +3730,28 @@ class CpsInputComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, elementRef, cdRef) {
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
+    constructor(_control, elementRef) {
         this._control = _control;
         this.elementRef = elementRef;
-        this.cdRef = cdRef;
         /**
          * Label of the input element.
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the input component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Bottom hint text for the input field.
          * @group Props
@@ -3769,6 +3772,16 @@ class CpsInputComponent {
          * @group Props
          */
         this.readonly = false;
+        /**
+         * Determines whether the value of the input can be automatically completed by the browser.
+         * @group Props
+         */
+        this.autocomplete = 'off';
+        /**
+         * Determines whether the value of the input may be checked for spelling errors.
+         * @group Props
+         */
+        this.spellcheck = false;
         /**
          * Width of the input field, of type number denoting pixels or string.
          * @group Props
@@ -3803,7 +3816,12 @@ class CpsInputComponent {
          * Size of icon before input value.
          * @group Props
          */
-        this.prefixIconSize = '18px';
+        this.prefixIconSize = '1.125rem';
+        /**
+         * Aria label for the clickable prefix icon, required when prefixIconClickable is true.
+         * @group Props
+         */
+        this.prefixIconAriaLabel = '';
         /**
          * Text before input value.
          * @group Props
@@ -3896,8 +3914,11 @@ class CpsInputComponent {
          */
         this.enterClicked = new EventEmitter();
         this.currentType = '';
-        this.prefixWidth = '';
         this.cvtWidth = '';
+        this.isKeyboardFocused = false;
+        this.hintId = generateUniqueId('cps-input-hint');
+        this.errorId = generateUniqueId('cps-input-error');
+        this._mouseActivated = false;
         this._value = '';
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
@@ -3913,17 +3934,22 @@ class CpsInputComponent {
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
+        if (this.prefixIconClickable && !this.prefixIconAriaLabel?.trim()) {
+            console.error('CpsInputComponent: prefixIconClickable requires a prefixIconAriaLabel for accessibility.');
+        }
+        logMissingAriaLabelError('CpsInputComponent', this.label, this.ariaLabel);
     }
-    ngAfterViewInit() {
-        let w = 0;
-        if (this.prefixText) {
-            w = this.prefixTextSpan?.nativeElement?.offsetWidth + 22;
+    ngOnChanges(changes) {
+        if (changes.type) {
+            this.currentType = this.type;
         }
-        if (this.prefixIcon) {
-            w += 38 - (this.prefixText ? 14 : 0);
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
         }
-        this.prefixWidth = w > 0 ? `${w}px` : '';
-        this.cdRef.detectChanges();
+        if (this.prefixIconClickable && !this.prefixIconAriaLabel?.trim()) {
+            console.error('CpsInputComponent: prefixIconClickable requires a prefixIconAriaLabel for accessibility.');
+        }
+        logMissingAriaLabelError('CpsInputComponent', this.label, this.ariaLabel);
     }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
@@ -3967,7 +3993,7 @@ class CpsInputComponent {
         this.error = message || 'Unknown error';
     }
     onInputEnterKeyDown() {
-        this.elementRef?.nativeElement?.querySelector('input')?.blur();
+        this._checkErrors();
         this.enterClicked.emit();
     }
     registerOnChange(fn) {
@@ -3991,6 +4017,7 @@ class CpsInputComponent {
     onClear() {
         this.clear();
         this.cleared.emit();
+        this.focus();
     }
     clear() {
         if (this.value !== '')
@@ -4001,24 +4028,33 @@ class CpsInputComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
+    get isRequired() {
+        return this._control?.control?.hasValidator(Validators.required) ?? false;
+    }
     onClickPrefixIcon() {
         if (!this.prefixIconClickable || this.readonly || this.disabled)
             return;
         this.prefixIconClicked.emit();
     }
     onBlur() {
+        this.isKeyboardFocused = false;
         this._checkErrors();
         this.blurred.emit();
     }
     onFocus() {
+        this.isKeyboardFocused = !this._mouseActivated;
+        this._mouseActivated = false;
         this._control?.control?.markAsTouched();
         this.focused.emit();
     }
+    onInputMousedown() {
+        this._mouseActivated = true;
+    }
     focus() {
         this.elementRef?.nativeElement?.querySelector('input')?.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", valueToDisplay: "valueToDisplay", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, viewQueries: [{ propertyName: "prefixTextSpan", first: true, predicate: ["prefixTextSpan"], descendants: true }], ngImport: i0, template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\">\n    @if (!valueToDisplay) {\n      <input\n        spellcheck=\"false\"\n        [type]=\"currentType\"\n        autocomplete=\"off\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [ngStyle]=\"{\n          width: cvtWidth,\n          'padding-left': prefixWidth || 'none'\n        }\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [ngStyle]=\"{\n          width: cvtWidth,\n          'padding-left': prefixWidth || 'none'\n        }\" />\n    }\n\n    <div class=\"cps-input-prefix\">\n      @if (prefixIcon) {\n        <span class=\"cps-input-prefix-icon\">\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [size]=\"prefixIconSize\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [style.cursor]=\"\n              prefixIconClickable && !disabled && !readonly\n                ? 'pointer'\n                : 'default'\n            \"\n            (click)=\"onClickPrefixIcon()\">\n          </cps-icon>\n        </span>\n      }\n\n      @if (prefixText) {\n        <span class=\"cps-input-prefix-text\" #prefixTextSpan>\n          {{ prefixText }}\n        </span>\n      }\n    </div>\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"clear-btn\">\n            <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\">\n            <cps-icon\n              icon=\"eye\"\n              size=\"18px\"\n              (click)=\"togglePassword()\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-input-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:var(--cps-input-background);padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-line-light);transition-duration:.2s;appearance:none;border-radius:var(--cps-border-radius-small);width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:var(--cps-color-bg-disabled);pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsInputComponent, isStandalone: true, selector: "cps-input", inputs: { label: "label", ariaLabel: "ariaLabel", hint: "hint", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", autocomplete: "autocomplete", spellcheck: "spellcheck", width: "width", type: "type", loading: "loading", clearable: "clearable", prefixIcon: "prefixIcon", prefixIconClickable: "prefixIconClickable", prefixIconSize: "prefixIconSize", prefixIconAriaLabel: "prefixIconAriaLabel", prefixText: "prefixText", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", valueToDisplay: "valueToDisplay", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred", cleared: "cleared", enterClicked: "enterClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-input-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    @if (prefixIcon || prefixText) {\n      <div class=\"cps-input-prefix\">\n        @if (prefixIcon) {\n          <span\n            class=\"cps-input-prefix-icon\"\n            [attr.role]=\"prefixIconClickable ? 'button' : null\"\n            [attr.tabindex]=\"\n              prefixIconClickable && !disabled && !readonly ? 0 : null\n            \"\n            [attr.aria-label]=\"\n              prefixIconClickable ? prefixIconAriaLabel || null : null\n            \"\n            (click)=\"onClickPrefixIcon()\"\n            (keydown.enter)=\"onClickPrefixIcon()\"\n            (keydown.space)=\"$event.preventDefault(); onClickPrefixIcon()\">\n            <cps-icon\n              [icon]=\"prefixIcon\"\n              [size]=\"prefixIconSize\"\n              [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n              [style.cursor]=\"\n                prefixIconClickable && !disabled && !readonly\n                  ? 'pointer'\n                  : 'default'\n              \">\n            </cps-icon>\n          </span>\n        }\n\n        @if (prefixText) {\n          <span class=\"cps-input-prefix-text\">\n            {{ prefixText }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (!valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-invalid]=\"error ? 'true' : null\"\n        [attr.aria-required]=\"isRequired || null\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.spellcheck]=\"spellcheck\"\n        [type]=\"currentType\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [style.width]=\"cvtWidth\"\n        (mousedown)=\"onInputMousedown()\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [style.width]=\"cvtWidth\" />\n    }\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            class=\"clear-btn\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Clear\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onClear()\"\n            (keydown.enter)=\"onClear()\"\n            (keydown.space)=\"$event.preventDefault(); onClear()\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"\n              currentType === 'password' ? 'Show password' : 'Hide password'\n            \"\n            [attr.aria-pressed]=\"currentType !== 'password'\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword()\"\n            (keydown.enter)=\"togglePassword()\"\n            (keydown.space)=\"$event.preventDefault(); togglePassword()\">\n            <cps-icon icon=\"eye\" size=\"1.125rem\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-input-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden;display:flex;align-items:stretch;min-height:2.375rem;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem;background:var(--cps-input-background);transition-duration:.2s}:host .cps-input-container .cps-input-wrap:hover:has(input:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:focus-within:not(:has(input:read-only)),:host .cps-input-container .cps-input-wrap.keyboard-focused:has(input:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{pointer-events:none}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:disabled:not([readonly])){background-color:var(--cps-color-bg-disabled)}:host .cps-input-container .cps-input-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error:not(:focus-within){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:transparent;padding:.375rem .75rem;line-height:1.5;border:none;appearance:none;border-radius:0;flex:1;min-width:0}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-mild);background-color:transparent;pointer-events:none}:host .cps-input-container .cps-input-wrap:has(.cps-input-prefix) input{padding-left:0}:host .cps-input-container .cps-input-wrap:has(input:focus:not(:read-only)) .cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap:has(input:hover:not(:read-only)) .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:has(input:disabled) .cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:0;bottom:0;right:.5rem;align-items:center}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-top:.125rem;margin-left:.0625rem;cursor:pointer;color:var(--cps-color-text-mild);display:flex;padding:.1875rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:hover cps-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:not(:read-only)) .cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;flex-shrink:0;padding-left:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;align-self:center;padding:.1875rem;margin-left:.0625rem;margin-right:.3125rem;transition-duration:.2s;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus{outline:none;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2;padding-left:.25rem;padding-right:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:0;display:block}:host .cps-input-container .cps-input-wrap.borderless,:host .cps-input-container .cps-input-wrap.underlined{border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1}:host .cps-input-container .cps-input-wrap.underlined{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.75rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.5rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:.5rem}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{-webkit-user-select:none;user-select:none;font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsInputComponent, decorators: [{
             type: Component,
@@ -4027,12 +4063,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsIconComponent,
                         CpsInfoCircleComponent,
                         CpsProgressLinearComponent
-                    ], selector: 'cps-input', template: "<div class=\"cps-input-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\">\n    @if (!valueToDisplay) {\n      <input\n        spellcheck=\"false\"\n        [type]=\"currentType\"\n        autocomplete=\"off\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [ngStyle]=\"{\n          width: cvtWidth,\n          'padding-left': prefixWidth || 'none'\n        }\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [ngStyle]=\"{\n          width: cvtWidth,\n          'padding-left': prefixWidth || 'none'\n        }\" />\n    }\n\n    <div class=\"cps-input-prefix\">\n      @if (prefixIcon) {\n        <span class=\"cps-input-prefix-icon\">\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [size]=\"prefixIconSize\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [style.cursor]=\"\n              prefixIconClickable && !disabled && !readonly\n                ? 'pointer'\n                : 'default'\n            \"\n            (click)=\"onClickPrefixIcon()\">\n          </cps-icon>\n        </span>\n      }\n\n      @if (prefixText) {\n        <span class=\"cps-input-prefix-text\" #prefixTextSpan>\n          {{ prefixText }}\n        </span>\n      }\n    </div>\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            class=\"clear-btn\">\n            <cps-icon icon=\"delete\" size=\"small\" (click)=\"onClear()\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\">\n            <cps-icon\n              icon=\"eye\"\n              size=\"18px\"\n              (click)=\"togglePassword()\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-input-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden}:host .cps-input-container .cps-input-wrap:hover input:enabled:not(:read-only){border:1px solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap-error input{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error input:not(:focus){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{min-height:38px;font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:var(--cps-input-background);padding:.375rem .75rem;line-height:1.5;border:1px solid var(--cps-color-line-light);transition-duration:.2s;appearance:none;border-radius:var(--cps-border-radius-small);width:100%}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-light);background-color:var(--cps-color-bg-disabled);pointer-events:none}:host .cps-input-container .cps-input-wrap input:focus:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap input:hover:not(:read-only)+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:disabled+.cps-input-prefix>.cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus+.cps-input-prefix+.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:50%;right:.75rem;margin-top:-.5rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon:hover{opacity:1!important}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-left:.5rem;cursor:pointer;color:var(--cps-color-text-mild)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon:hover{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap input:not(:read-only)+.cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;position:absolute;height:100%;top:50%;left:.8rem;transform:translateY(-50%)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;flex-direction:column;justify-content:center;transition-duration:.2s;margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:1px;padding:0 1px;display:block}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1;border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.underlined input{border-bottom:1px solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.8rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.2rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:8px}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
+                    ], selector: 'cps-input', template: "<div class=\"cps-input-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-input-label\"\n      [class.cps-input-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-input-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\n  <div\n    class=\"cps-input-wrap\"\n    [class.password]=\"type === 'password'\"\n    [class.cps-input-wrap-error]=\"error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.borderless]=\"appearance === 'borderless'\"\n    [class.underlined]=\"appearance === 'underlined'\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    @if (prefixIcon || prefixText) {\n      <div class=\"cps-input-prefix\">\n        @if (prefixIcon) {\n          <span\n            class=\"cps-input-prefix-icon\"\n            [attr.role]=\"prefixIconClickable ? 'button' : null\"\n            [attr.tabindex]=\"\n              prefixIconClickable && !disabled && !readonly ? 0 : null\n            \"\n            [attr.aria-label]=\"\n              prefixIconClickable ? prefixIconAriaLabel || null : null\n            \"\n            (click)=\"onClickPrefixIcon()\"\n            (keydown.enter)=\"onClickPrefixIcon()\"\n            (keydown.space)=\"$event.preventDefault(); onClickPrefixIcon()\">\n            <cps-icon\n              [icon]=\"prefixIcon\"\n              [size]=\"prefixIconSize\"\n              [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n              [style.cursor]=\"\n                prefixIconClickable && !disabled && !readonly\n                  ? 'pointer'\n                  : 'default'\n              \">\n            </cps-icon>\n          </span>\n        }\n\n        @if (prefixText) {\n          <span class=\"cps-input-prefix-text\">\n            {{ prefixText }}\n          </span>\n        }\n      </div>\n    }\n\n    @if (!valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-invalid]=\"error ? 'true' : null\"\n        [attr.aria-required]=\"isRequired || null\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [attr.autocomplete]=\"autocomplete\"\n        [attr.spellcheck]=\"spellcheck\"\n        [type]=\"currentType\"\n        [value]=\"value\"\n        (input)=\"updateValueEvent($event)\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readonly\"\n        (keydown.enter)=\"onInputEnterKeyDown()\"\n        [style.width]=\"cvtWidth\"\n        (mousedown)=\"onInputMousedown()\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\" />\n    }\n\n    @if (valueToDisplay) {\n      <input\n        [attr.aria-label]=\"ariaLabel || label || null\"\n        [attr.aria-describedby]=\"describedBy\"\n        [attr.aria-busy]=\"loading ? true : null\"\n        [value]=\"valueToDisplay\"\n        [disabled]=\"true\"\n        [readonly]=\"true\"\n        [style.width]=\"cvtWidth\" />\n    }\n\n    @if (!disabled && !readonly) {\n      <div class=\"cps-input-action-btns\">\n        @if (clearable) {\n          <span\n            class=\"clear-btn\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"Clear\"\n            [style.visibility]=\"\n              persistentClear || (!persistentClear && value)\n                ? 'visible'\n                : 'hidden'\n            \"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"onClear()\"\n            (keydown.enter)=\"onClear()\"\n            (keydown.space)=\"$event.preventDefault(); onClear()\">\n            <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n          </span>\n        }\n        @if (type === 'password') {\n          <span\n            class=\"password-show-btn\"\n            [class.password-show-btn-active]=\"currentType === 'text'\"\n            role=\"button\"\n            tabindex=\"0\"\n            [attr.aria-label]=\"\n              currentType === 'password' ? 'Show password' : 'Hide password'\n            \"\n            [attr.aria-pressed]=\"currentType !== 'password'\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePassword()\"\n            (keydown.enter)=\"togglePassword()\"\n            (keydown.space)=\"$event.preventDefault(); togglePassword()\">\n            <cps-icon icon=\"eye\" size=\"1.125rem\"></cps-icon>\n          </span>\n        }\n      </div>\n    }\n    @if (loading) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.5\"\n        class=\"cps-input-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-input-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-input-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-input-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:inherit}:host .cps-input-container .cps-input-wrap{position:relative;overflow:hidden;display:flex;align-items:stretch;min-height:2.375rem;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem;background:var(--cps-input-background);transition-duration:.2s}:host .cps-input-container .cps-input-wrap:hover:has(input:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:hover .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap:focus-within:not(:has(input:read-only)),:host .cps-input-container .cps-input-wrap.keyboard-focused:has(input:read-only){border-color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap.keyboard-focused:before,:host .cps-input-container .cps-input-wrap.keyboard-focused:after{pointer-events:none}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless{outline:none;position:relative}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.underlined.suppress-focus-visible:after,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap.keyboard-focused.borderless.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:disabled:not([readonly])){background-color:var(--cps-color-bg-disabled)}:host .cps-input-container .cps-input-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap-error:not(:focus-within){background:var(--cps-error-background)!important}:host .cps-input-container .cps-input-wrap-error .cps-input-prefix-icon{color:var(--cps-state-error)!important}:host .cps-input-container .cps-input-wrap input{font-family:inherit;font-size:1rem;color:var(--cps-color-text-dark);background:transparent;padding:.375rem .75rem;line-height:1.5;border:none;appearance:none;border-radius:0;flex:1;min-width:0}:host .cps-input-container .cps-input-wrap input:focus{outline:0}:host .cps-input-container .cps-input-wrap input:read-only{cursor:default}:host .cps-input-container .cps-input-wrap input:disabled{opacity:1}:host .cps-input-container .cps-input-wrap input:disabled:not([readonly]){color:var(--cps-color-text-mild);background-color:transparent;pointer-events:none}:host .cps-input-container .cps-input-wrap:has(.cps-input-prefix) input{padding-left:0}:host .cps-input-container .cps-input-wrap:has(input:focus:not(:read-only)) .cps-input-prefix-icon,:host .cps-input-container .cps-input-wrap:has(input:hover:not(:read-only)) .cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap:has(input:disabled) .cps-input-prefix-icon{color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn cps-icon{opacity:.5}:host .cps-input-container .cps-input-wrap input:focus~.cps-input-action-btns>.clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns{display:flex;position:absolute;top:0;bottom:0;right:.5rem;align-items:center}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn{display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:hover cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn{margin-top:.125rem;margin-left:.0625rem;cursor:pointer;color:var(--cps-color-text-mild);display:flex;padding:.1875rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn-active{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn cps-icon{transition-duration:.2s}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:hover cps-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus{outline:none}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-action-btns .password-show-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap:has(input:not(:read-only)) .cps-input-prefix:hover>.cps-input-prefix-icon{color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix{display:flex;flex-shrink:0;padding-left:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon{display:flex;align-self:center;padding:.1875rem;margin-left:.0625rem;margin-right:.3125rem;transition-duration:.2s;color:var(--cps-color-text-dark)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus{outline:none;color:var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible{outline:none;position:relative}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:before{inset:0;border:.0625rem solid var(--cps-color-calm)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible:after{inset:.0625rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:before,:host .cps-input-container .cps-input-wrap .cps-input-prefix-icon:focus-visible.suppress-focus-visible:after{display:none}:host .cps-input-container .cps-input-wrap .cps-input-prefix-text{display:flex;flex-direction:column;justify-content:center;color:var(--cps-color-text-mild);cursor:default;line-height:1.2;padding-left:.25rem;padding-right:.5rem}:host .cps-input-container .cps-input-wrap .cps-input-progress-bar{position:absolute;bottom:0;display:block}:host .cps-input-container .cps-input-wrap.borderless,:host .cps-input-container .cps-input-wrap.underlined{border:none!important;border-radius:0}:host .cps-input-container .cps-input-wrap.borderless input,:host .cps-input-container .cps-input-wrap.underlined input{line-height:1}:host .cps-input-container .cps-input-wrap.underlined{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-input-container .persistent-clear .cps-input-action-btns .clear-btn cps-icon{opacity:.5}:host .cps-input-container .password.clearable>input{padding-right:3.75rem}:host .cps-input-container .password>input,:host .cps-input-container .clearable>input{padding-right:2.5rem}:host .cps-input-container .cps-input-hint{color:var(--cps-color-text-mild);font-family:inherit;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-error{color:var(--cps-state-error);font-family:inherit;font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-input-container .cps-input-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-input-container .cps-input-label .cps-input-label-info-circle{margin-left:.5rem}:host .cps-input-container .cps-input-label-disabled{color:var(--cps-color-text-mild)}:host .cps-input-container ::placeholder{-webkit-user-select:none;user-select:none;font-family:inherit;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
+                }] }, { type: i0.ElementRef }], propDecorators: { label: [{
+                type: Input
+            }], ariaLabel: [{
                 type: Input
             }], hint: [{
                 type: Input
@@ -4042,6 +4080,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], readonly: [{
                 type: Input
+            }], autocomplete: [{
+                type: Input
+            }], spellcheck: [{
+                type: Input
             }], width: [{
                 type: Input
             }], type: [{
@@ -4056,6 +4098,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], prefixIconSize: [{
                 type: Input
+            }], prefixIconAriaLabel: [{
+                type: Input
             }], prefixText: [{
                 type: Input
             }], hideDetails: [{
@@ -4092,9 +4136,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Output
             }], enterClicked: [{
                 type: Output
-            }], prefixTextSpan: [{
-                type: ViewChild,
-                args: ['prefixTextSpan']
             }] } });
 
 /**
@@ -4122,6 +4163,11 @@ class CpsDatepickerComponent {
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the datepicker component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Determines whether datepicker is disabled.
          * @group Props
@@ -4221,6 +4267,10 @@ class CpsDatepickerComponent {
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
+        logMissingAriaLabelError('CpsDatepickerComponent', this.label, this.ariaLabel);
+    }
+    ngOnChanges() {
+        logMissingAriaLabelError('CpsDatepickerComponent', this.label, this.ariaLabel);
     }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
@@ -4405,7 +4455,7 @@ class CpsDatepickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", disabled: "disabled", width: "width", 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 }], ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\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    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\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 input{border:1px solid 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:1px solid #ced4da}.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:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.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{outline:0 none;outline-offset:0;box-shadow:unset}.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-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:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);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{outline:0 none;outline-offset:0;box-shadow:unset}.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:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px 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:6px}.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-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:6px}.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:1px 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):hover{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):hover{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):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.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{color:var(--cps-color-text-light)}.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:6px}.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:6px}.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:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.13", type: CpsDatepickerComponent, isStandalone: true, selector: "cps-datepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", width: "width", 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 }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\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    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\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:1px solid #ced4da}.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:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.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{outline:0 none;outline-offset:0;box-shadow:unset}.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-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:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);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{outline:0 none;outline-offset:0;box-shadow:unset}.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:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px 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:6px}.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-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:6px}.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:1px 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):hover{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):hover{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):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.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{color:var(--cps-color-text-light)}.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:6px}.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:6px}.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:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}\n"], dependencies: [{ kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.13", ngImport: i0, type: CpsDatepickerComponent, decorators: [{
             type: Component,
@@ -4415,13 +4465,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CommonModule,
                         FormsModule,
                         CpsMenuComponent
-                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    prefixIcon=\"datepicker\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\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    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\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 input{border:1px solid 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:1px solid #ced4da}.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:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.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{outline:0 none;outline-offset:0;box-shadow:unset}.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-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:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);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{outline:0 none;outline-offset:0;box-shadow:unset}.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:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px 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:6px}.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-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:6px}.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:1px 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):hover{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):hover{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):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.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{color:var(--cps-color-text-light)}.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:6px}.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:6px}.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:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}\n"] }]
+                    ], selector: 'cps-datepicker', template: "<div\n  class=\"cps-datepicker\"\n  [ngStyle]=\"{ width: cvtWidth }\"\n  [class.focused]=\"isOpened\">\n  <cps-input\n    #datepickerInput\n    [disabled]=\"disabled\"\n    [value]=\"stringDate\"\n    [label]=\"label\"\n    [ariaLabel]=\"ariaLabel\"\n    prefixIcon=\"datepicker\"\n    prefixIconAriaLabel=\"Open calendar\"\n    [placeholder]=\"placeholder\"\n    (prefixIconClicked)=\"onClickCalendarIcon()\"\n    [prefixIconClickable]=\"true\"\n    (focused)=\"onInputFocus()\"\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    (beforeMenuHidden)=\"onBeforeCalendarHidden()\"\n    (contentClicked)=\"onCalendarContentClick()\"\n    [focusOnShow]=\"false\"\n    hideTransitionOptions=\"0s linear\"\n    containerClass=\"cps-datepicker-calendar-menu\">\n    <div class=\"cps-datepicker-calendar\">\n      <p-datepicker\n        [(ngModel)]=\"value\"\n        [inline]=\"true\"\n        [showIcon]=\"true\"\n        [showButtonBar]=\"showTodayButton\"\n        (onSelect)=\"onSelectCalendarDate($event)\"\n        (onClearClick)=\"onClearCalendarDate()\"\n        [showOtherMonths]=\"false\"\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:1px solid #ced4da}.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:1px solid #dee2e6;border-top-right-radius:6px;border-top-left-radius:6px}.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{outline:0 none;outline-offset:0;box-shadow:unset}.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-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:1px solid transparent}.cps-datepicker-calendar ::ng-deep .p-datepicker table td>span.p-disabled{color:var(--cps-color-text-lightest);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{outline:0 none;outline-offset:0;box-shadow:unset}.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:1px solid #dee2e6}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-datepicker-buttonbar .p-button{width:auto;color:var(--cps-color-prepared);border-width:2px;border-style:solid}.cps-datepicker-calendar ::ng-deep .p-datepicker .p-timepicker{border-top:1px 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:6px}.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-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:6px}.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:1px 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):hover{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):hover{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):focus{outline:0 none;outline-offset:0;box-shadow:unset}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):not(.p-datepicker-day-selected):hover{background:var(--cps-color-highlight-hover)}.cps-datepicker-calendar ::ng-deep .p-datepicker:not(.p-disabled) .p-yearpicker .p-datepicker-year:not(.p-disabled):focus{outline:0 none;outline-offset:0;box-shadow:unset}.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{color:var(--cps-color-text-light)}.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:6px}.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:6px}.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:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }] }], propDecorators: { label: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], width: [{
@@ -5105,6 +5157,15 @@ class CpsSelectComponent {
     get value() {
         return this._value;
     }
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
     constructor(_control) {
         this._control = _control;
         /**
@@ -5318,6 +5379,8 @@ class CpsSelectComponent {
         this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
         this.optionsListId = generateUniqueId('cps-select-options-list');
         this.selectAllOptionId = generateUniqueId('cps-select-option-select-all');
+        this.hintId = generateUniqueId('cps-select-hint');
+        this.errorId = generateUniqueId('cps-select-error');
         this._optionIdPrefix = generateUniqueId('cps-select-option');
         this._optionIds = new WeakMap();
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5661,13 +5724,6 @@ class CpsSelectComponent {
     get isRequired() {
         return this._control?.control?.hasValidator(Validators.required) ?? false;
     }
-    get computedLabel() {
-        return getComputedLabel({
-            label: this.ariaLabel || this.label,
-            error: this.error,
-            hideDetails: this.hideDetails
-        });
-    }
     get isSelectAllVisible() {
         return (!this.virtualScroll &&
             this.multiple &&
@@ -5757,7 +5813,7 @@ class CpsSelectComponent {
         scrollerEl.scrollTop = Math.min(Math.max(0, nextTop), maxTop);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", 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.13", 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-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"computedLabel\"\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            aria-hidden=\"true\"\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\" aria-hidden=\"true\"></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              aria-hidden=\"true\"\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\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=\"3\"\n        radius=\"4\"\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 class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-select-error\" role=\"alert\" aria-live=\"assertive\">\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          aria-hidden=\"true\"\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-light)}: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-light)}: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"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", 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            aria-hidden=\"true\"\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\" aria-hidden=\"true\"></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              aria-hidden=\"true\"\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\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=\"3\"\n        radius=\"4\"\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          aria-hidden=\"true\"\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-light)}: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-light)}: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"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "ariaLabel", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked", "containerMouseLeave"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CombineLabelsPipe, name: "combineLabels" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSelectComponent, decorators: [{
             type: Component,
@@ -5773,7 +5829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", 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-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-required]=\"isRequired || null\"\n    [attr.aria-invalid]=\"error ? 'true' : null\"\n    [attr.aria-label]=\"computedLabel\"\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            aria-hidden=\"true\"\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\" aria-hidden=\"true\"></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              aria-hidden=\"true\"\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\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=\"3\"\n        radius=\"4\"\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 class=\"cps-select-hint\">{{ hint }}</div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-select-error\" role=\"alert\" aria-live=\"assertive\">\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          aria-hidden=\"true\"\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-light)}: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-light)}: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]=\"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            aria-hidden=\"true\"\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\" aria-hidden=\"true\"></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              aria-hidden=\"true\"\n              icon=\"chevron-down\"\n              size=\"small\"\n              [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n          </span>\n        }\n      </span>\n    </div>\n\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=\"3\"\n        radius=\"4\"\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          aria-hidden=\"true\"\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-light)}: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-light)}: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
                 }, {
@@ -6112,6 +6168,15 @@ class CpsRadioGroupComponent {
     get value() {
         return this._value;
     }
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
     constructor(_control) {
         this._control = _control;
         /**
@@ -6193,6 +6258,8 @@ class CpsRadioGroupComponent {
          */
         this.focused = new EventEmitter();
         this.groupName = generateUniqueId('cps-radio-group');
+        this.hintId = generateUniqueId('cps-radio-group-hint');
+        this.errorId = generateUniqueId('cps-radio-group-error');
         this._value = undefined;
         this.error = '';
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -6247,13 +6314,6 @@ class CpsRadioGroupComponent {
     get isRequired() {
         return this._control?.control?.hasValidator(Validators.required) ?? false;
     }
-    get computedLabel() {
-        return getComputedLabel({
-            label: this.ariaLabel || this.groupLabel,
-            error: this.error,
-            hideDetails: this.hideDetails
-        });
-    }
     _checkErrors() {
         if (!this._control)
             return;
@@ -6280,7 +6340,7 @@ class CpsRadioGroupComponent {
                 provide: CPS_RADIO_GROUP,
                 useExisting: CpsRadioGroupComponent
             }
-        ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"computedLabel\"\n  [attr.aria-disabled]=\"disabled || null\"\n  [attr.aria-required]=\"isRequired || null\"\n  [attr.aria-invalid]=\"error ? 'true' : null\">\n  @if (groupLabel) {\n    <div class=\"cps-radio-group-label\">\n      <span>{{ groupLabel }}</span>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [class.cps-radio-group-content-vertical]=\"vertical\"\n    [class.cps-radio-group-content-horizontal]=\"!vertical\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!contentRef.innerHTML.trim()) {\n    <div\n      class=\"cps-radio-group-content\"\n      [class.cps-radio-group-content-vertical]=\"vertical\"\n      [class.cps-radio-group-content-horizontal]=\"!vertical\">\n      @for (option of options; track option) {\n        <cps-radio-button\n          [option]=\"option\"\n          [groupName]=\"groupName\"\n          [checked]=\"option.value === value\"\n          [groupDisabled]=\"disabled\"\n          (blurred)=\"onBlur()\"\n          (focused)=\"onFocus()\"\n          (updateValueEvent)=\"updateValueEvent($event)\">\n        </cps-radio-button>\n      }\n    </div>\n  }\n  @if (!error && !hideDetails) {\n    <div class=\"cps-radio-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-radio-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:.5rem}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}:host .cps-radio-group .cps-radio-hint{margin-top:.25rem;color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-radio-group .cps-radio-error{margin-top:.25rem;color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["groupName", "option", "checked", "groupDisabled"], outputs: ["updateValueEvent", "blurred", "focused"] }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel || groupLabel || null\"\n  [attr.aria-describedby]=\"describedBy\"\n  [attr.aria-disabled]=\"disabled || null\"\n  [attr.aria-required]=\"isRequired || null\"\n  [attr.aria-invalid]=\"error ? 'true' : null\">\n  @if (groupLabel) {\n    <div class=\"cps-radio-group-label\">\n      <span>{{ groupLabel }}</span>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [class.cps-radio-group-content-vertical]=\"vertical\"\n    [class.cps-radio-group-content-horizontal]=\"!vertical\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!contentRef.innerHTML.trim()) {\n    <div\n      class=\"cps-radio-group-content\"\n      [class.cps-radio-group-content-vertical]=\"vertical\"\n      [class.cps-radio-group-content-horizontal]=\"!vertical\">\n      @for (option of options; track option) {\n        <cps-radio-button\n          [option]=\"option\"\n          [groupName]=\"groupName\"\n          [checked]=\"option.value === value\"\n          [groupDisabled]=\"disabled\"\n          (blurred)=\"onBlur()\"\n          (focused)=\"onFocus()\"\n          (updateValueEvent)=\"updateValueEvent($event)\">\n        </cps-radio-button>\n      }\n    </div>\n  }\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-radio-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-radio-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:.5rem}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}:host .cps-radio-group .cps-radio-hint{margin-top:.25rem;color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-radio-group .cps-radio-error{margin-top:.25rem;color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["groupName", "option", "checked", "groupDisabled"], outputs: ["updateValueEvent", "blurred", "focused"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
             type: Component,
@@ -6289,7 +6349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             provide: CPS_RADIO_GROUP,
                             useExisting: CpsRadioGroupComponent
                         }
-                    ], template: "<div\n  class=\"cps-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"computedLabel\"\n  [attr.aria-disabled]=\"disabled || null\"\n  [attr.aria-required]=\"isRequired || null\"\n  [attr.aria-invalid]=\"error ? 'true' : null\">\n  @if (groupLabel) {\n    <div class=\"cps-radio-group-label\">\n      <span>{{ groupLabel }}</span>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [class.cps-radio-group-content-vertical]=\"vertical\"\n    [class.cps-radio-group-content-horizontal]=\"!vertical\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!contentRef.innerHTML.trim()) {\n    <div\n      class=\"cps-radio-group-content\"\n      [class.cps-radio-group-content-vertical]=\"vertical\"\n      [class.cps-radio-group-content-horizontal]=\"!vertical\">\n      @for (option of options; track option) {\n        <cps-radio-button\n          [option]=\"option\"\n          [groupName]=\"groupName\"\n          [checked]=\"option.value === value\"\n          [groupDisabled]=\"disabled\"\n          (blurred)=\"onBlur()\"\n          (focused)=\"onFocus()\"\n          (updateValueEvent)=\"updateValueEvent($event)\">\n        </cps-radio-button>\n      }\n    </div>\n  }\n  @if (!error && !hideDetails) {\n    <div class=\"cps-radio-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-radio-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:.5rem}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}:host .cps-radio-group .cps-radio-hint{margin-top:.25rem;color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-radio-group .cps-radio-error{margin-top:.25rem;color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}\n"] }]
+                    ], template: "<div\n  class=\"cps-radio-group\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"ariaLabel || groupLabel || null\"\n  [attr.aria-describedby]=\"describedBy\"\n  [attr.aria-disabled]=\"disabled || null\"\n  [attr.aria-required]=\"isRequired || null\"\n  [attr.aria-invalid]=\"error ? 'true' : null\">\n  @if (groupLabel) {\n    <div class=\"cps-radio-group-label\">\n      <span>{{ groupLabel }}</span>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-radio-group-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\n  <div\n    #contentRef\n    class=\"cps-radio-group-content\"\n    [class.cps-radio-group-content-vertical]=\"vertical\"\n    [class.cps-radio-group-content-horizontal]=\"!vertical\">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!contentRef.innerHTML.trim()) {\n    <div\n      class=\"cps-radio-group-content\"\n      [class.cps-radio-group-content-vertical]=\"vertical\"\n      [class.cps-radio-group-content-horizontal]=\"!vertical\">\n      @for (option of options; track option) {\n        <cps-radio-button\n          [option]=\"option\"\n          [groupName]=\"groupName\"\n          [checked]=\"option.value === value\"\n          [groupDisabled]=\"disabled\"\n          (blurred)=\"onBlur()\"\n          (focused)=\"onFocus()\"\n          (updateValueEvent)=\"updateValueEvent($event)\">\n        </cps-radio-button>\n      }\n    </div>\n  }\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-radio-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-radio-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block}:host .cps-radio-group{font-family:Source Sans Pro,sans-serif}:host .cps-radio-group-label{font-style:normal;font-weight:700;font-size:1rem;color:var(--cps-color-text-dark);margin-bottom:.75rem;align-items:center;display:inline-flex;cursor:default}:host .cps-radio-group-label .cps-radio-group-label-info-circle{margin-left:.5rem}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-radio-group-content{margin-left:.5rem;gap:1.25rem}:host .cps-radio-group-content-vertical{display:grid;grid-auto-rows:1fr}:host .cps-radio-group-content-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}:host .cps-radio-group-content .content:empty{display:none}:host .cps-radio-group .cps-radio-hint{margin-top:.25rem;color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-radio-group .cps-radio-error{margin-top:.25rem;color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -6812,6 +6872,15 @@ class CpsTimepickerComponent {
     get value() {
         return this._value;
     }
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
     constructor(_control) {
         this._control = _control;
         /**
@@ -6907,6 +6976,8 @@ class CpsTimepickerComponent {
             label: m.toString().padStart(2, '0')
         }));
         this.secondsOptions = [];
+        this.hintId = generateUniqueId('cps-timepicker-hint');
+        this.errorId = generateUniqueId('cps-timepicker-error');
         this.error = '';
         this.hoursError = '';
         this.minutesError = '';
@@ -7106,7 +7177,7 @@ class CpsTimepickerComponent {
         return Array.from({ length: until + 1 - startFrom }, (_, k) => k + startFrom);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTimepickerComponent, 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.13", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-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 class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      [ariaLabel]=\"`Hours, ${ariaLabel || label}`\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"3.75rem\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-timepicker-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-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-timepicker-body\"\n    role=\"group\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-label]=\"ariaLabel || label || null\">\n    <cps-autocomplete\n      #hoursField\n      ariaLabel=\"Hours\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"3.75rem\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-timepicker-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTimepickerComponent, decorators: [{
             type: Component,
@@ -7116,7 +7187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsButtonToggleComponent,
                         CpsAutocompleteComponent,
                         CpsInfoCircleComponent
-                    ], template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-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 class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      [ariaLabel]=\"`Hours, ${ariaLabel || label}`\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"3.75rem\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-timepicker-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\n"] }]
+                    ], template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-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-timepicker-body\"\n    role=\"group\"\n    [attr.aria-describedby]=\"describedBy\"\n    [attr.aria-label]=\"ariaLabel || label || null\">\n    <cps-autocomplete\n      #hoursField\n      ariaLabel=\"Hours\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"3.75rem\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-timepicker-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-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-timepicker .cps-timepicker-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}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -8427,7 +8498,7 @@ class CpsSchedulerComponent {
         return isNaN(res) ? 0 : res;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "ariaLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "ariaLabel", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            ariaLabel=\"Advanced cron expression\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "ariaLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "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: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "ariaLabel", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
             type: Component,
@@ -8442,7 +8513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsInputComponent,
                         CpsTimepickerComponent,
                         CpsAutocompleteComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            ariaLabel=\"Advanced cron expression\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], cron: [{
@@ -9811,7 +9882,7 @@ class TableColumnFilterConstraintComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterConstraintComponent, deps: [{ token: i1$5.Table, optional: true }, { token: i2$2.TreeTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (type) {\n  @case ('text') {\n    <cps-input\n      [placeholder]=\"placeholder\"\n      [hideDetails]=\"true\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"text\"></cps-input>\n  }\n  @case ('number') {\n    <cps-input\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"number\"></cps-input>\n  }\n  @case ('boolean') {\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        ariaLabel=\"Boolean filter\"\n        [options]=\"booleanOptions\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\">\n      </cps-button-toggle>\n    </div>\n  }\n  @case ('date') {\n    <cps-datepicker\n      [openOnInputFocus]=\"true\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      [value]=\"filterConstraint?.value\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      (valueChanged)=\"onValueChange($event)\">\n    </cps-datepicker>\n  }\n  @case ('category') {\n    @if (!asButtonToggle) {\n      <cps-autocomplete\n        #categoryAutocompleteComponent\n        ariaLabel=\"Category filter\"\n        class=\"cps-table-col-filter-category-autocomplete\"\n        [placeholder]=\"placeholder\"\n        [options]=\"categories\"\n        [hideDetails]=\"true\"\n        [clearable]=\"true\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [returnObject]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-autocomplete>\n    }\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      @if (asButtonToggle) {\n        <cps-button-toggle\n          ariaLabel=\"Category filter\"\n          [options]=\"categories\"\n          [value]=\"filterConstraint?.value\"\n          (valueChanged)=\"onValueChange($event)\"\n          [mandatory]=\"false\"\n          [multiple]=\"!singleSelection\">\n        </cps-button-toggle>\n      }\n    </div>\n  }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: TableColumnFilterConstraintComponent, isStandalone: true, selector: "table-column-filter-constraint", inputs: { type: "type", field: "field", filterConstraint: "filterConstraint", categoryOptions: "categoryOptions", asButtonToggle: "asButtonToggle", singleSelection: "singleSelection", placeholder: "placeholder", hasApplyButton: "hasApplyButton" }, viewQueries: [{ propertyName: "categoryAutocompleteComponent", first: true, predicate: ["categoryAutocompleteComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@switch (type) {\n  @case ('text') {\n    <cps-input\n      ariaLabel=\"Text filter\"\n      [placeholder]=\"placeholder\"\n      [hideDetails]=\"true\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"text\"></cps-input>\n  }\n  @case ('number') {\n    <cps-input\n      ariaLabel=\"Number filter\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"number\"></cps-input>\n  }\n  @case ('boolean') {\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        ariaLabel=\"Boolean filter\"\n        [options]=\"booleanOptions\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\">\n      </cps-button-toggle>\n    </div>\n  }\n  @case ('date') {\n    <cps-datepicker\n      ariaLabel=\"Date filter\"\n      [openOnInputFocus]=\"true\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      [value]=\"filterConstraint?.value\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      (valueChanged)=\"onValueChange($event)\">\n    </cps-datepicker>\n  }\n  @case ('category') {\n    @if (!asButtonToggle) {\n      <cps-autocomplete\n        #categoryAutocompleteComponent\n        ariaLabel=\"Category filter\"\n        class=\"cps-table-col-filter-category-autocomplete\"\n        [placeholder]=\"placeholder\"\n        [options]=\"categories\"\n        [hideDetails]=\"true\"\n        [clearable]=\"true\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [returnObject]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-autocomplete>\n    }\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      @if (asButtonToggle) {\n        <cps-button-toggle\n          ariaLabel=\"Category filter\"\n          [options]=\"categories\"\n          [value]=\"filterConstraint?.value\"\n          (valueChanged)=\"onValueChange($event)\"\n          [mandatory]=\"false\"\n          [multiple]=\"!singleSelection\">\n        </cps-button-toggle>\n      }\n    </div>\n  }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "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: "component", type: CpsDatepickerComponent, selector: "cps-datepicker", inputs: ["label", "ariaLabel", "disabled", "width", "placeholder", "hint", "clearable", "hideDetails", "persistentClear", "showTodayButton", "openOnInputFocus", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "minDate", "maxDate", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: TableColumnFilterConstraintComponent, decorators: [{
             type: Component,
@@ -9821,7 +9892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsDatepickerComponent,
                         CpsButtonToggleComponent,
                         CpsAutocompleteComponent
-                    ], template: "@switch (type) {\n  @case ('text') {\n    <cps-input\n      [placeholder]=\"placeholder\"\n      [hideDetails]=\"true\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"text\"></cps-input>\n  }\n  @case ('number') {\n    <cps-input\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"number\"></cps-input>\n  }\n  @case ('boolean') {\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        ariaLabel=\"Boolean filter\"\n        [options]=\"booleanOptions\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\">\n      </cps-button-toggle>\n    </div>\n  }\n  @case ('date') {\n    <cps-datepicker\n      [openOnInputFocus]=\"true\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      [value]=\"filterConstraint?.value\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      (valueChanged)=\"onValueChange($event)\">\n    </cps-datepicker>\n  }\n  @case ('category') {\n    @if (!asButtonToggle) {\n      <cps-autocomplete\n        #categoryAutocompleteComponent\n        ariaLabel=\"Category filter\"\n        class=\"cps-table-col-filter-category-autocomplete\"\n        [placeholder]=\"placeholder\"\n        [options]=\"categories\"\n        [hideDetails]=\"true\"\n        [clearable]=\"true\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [returnObject]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-autocomplete>\n    }\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      @if (asButtonToggle) {\n        <cps-button-toggle\n          ariaLabel=\"Category filter\"\n          [options]=\"categories\"\n          [value]=\"filterConstraint?.value\"\n          (valueChanged)=\"onValueChange($event)\"\n          [mandatory]=\"false\"\n          [multiple]=\"!singleSelection\">\n        </cps-button-toggle>\n      }\n    </div>\n  }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"] }]
+                    ], template: "@switch (type) {\n  @case ('text') {\n    <cps-input\n      ariaLabel=\"Text filter\"\n      [placeholder]=\"placeholder\"\n      [hideDetails]=\"true\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"text\"></cps-input>\n  }\n  @case ('number') {\n    <cps-input\n      ariaLabel=\"Number filter\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      [value]=\"filterConstraint?.value\"\n      (valueChanged)=\"onValueChange($event)\"\n      type=\"number\"></cps-input>\n  }\n  @case ('boolean') {\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      <cps-button-toggle\n        ariaLabel=\"Boolean filter\"\n        [options]=\"booleanOptions\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [mandatory]=\"false\">\n      </cps-button-toggle>\n    </div>\n  }\n  @case ('date') {\n    <cps-datepicker\n      ariaLabel=\"Date filter\"\n      [openOnInputFocus]=\"true\"\n      [hideDetails]=\"true\"\n      [placeholder]=\"placeholder\"\n      [value]=\"filterConstraint?.value\"\n      (keydown.enter)=\"onEnterKeyDown($event)\"\n      (valueChanged)=\"onValueChange($event)\">\n    </cps-datepicker>\n  }\n  @case ('category') {\n    @if (!asButtonToggle) {\n      <cps-autocomplete\n        #categoryAutocompleteComponent\n        ariaLabel=\"Category filter\"\n        class=\"cps-table-col-filter-category-autocomplete\"\n        [placeholder]=\"placeholder\"\n        [options]=\"categories\"\n        [hideDetails]=\"true\"\n        [clearable]=\"true\"\n        [value]=\"filterConstraint?.value\"\n        (valueChanged)=\"onValueChange($event)\"\n        [returnObject]=\"false\"\n        [multiple]=\"!singleSelection\">\n      </cps-autocomplete>\n    }\n    <div class=\"cps-table-col-filter-constraint-btn-toggles\">\n      @if (asButtonToggle) {\n        <cps-button-toggle\n          ariaLabel=\"Category filter\"\n          [options]=\"categories\"\n          [value]=\"filterConstraint?.value\"\n          (valueChanged)=\"onValueChange($event)\"\n          [mandatory]=\"false\"\n          [multiple]=\"!singleSelection\">\n        </cps-button-toggle>\n      }\n    </div>\n  }\n}\n", styles: [":host .cps-table-col-filter-constraint-btn-toggles{display:flex;justify-content:center}:host .cps-table-col-filter-category-autocomplete{min-width:200px;max-width:400px}\n"] }]
         }], ctorParameters: () => [{ type: i1$5.Table, decorators: [{
                     type: Optional
                 }] }, { type: i2$2.TreeTable, decorators: [{
@@ -11209,7 +11280,7 @@ class CpsTableComponent {
                 // eslint-disable-next-line no-use-before-define
                 deps: [CpsTableComponent]
             }
-        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [stripedRows]=\"striped\"\n  [showGridlines]=\"bordered\"\n  [size]=\"size === 'normal' ? undefined : size\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-table-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-table-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-table-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-table-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-table-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-table-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-table-coltoggle-menu\">\n                  <div\n                    class=\"cps-table-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-table-coltoggle-menu-item-left\">\n                      <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                      <span class=\"cps-table-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-table-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-table-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-table-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-table-tbar-export-btn\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-icon\n                icon=\"export\"\n                size=\"20\"\n                [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n                (click)=\"onExportData($event)\"></cps-icon>\n              <cps-menu\n                #exportMenu\n                [items]=\"exportMenuItems\"\n                [compressed]=\"true\"\n                [withArrow]=\"false\">\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-table-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: {\n            $implicit: columns\n          }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        @if (rowExpansionTemplate) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (reorderableRows) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (selectable) {\n          <th\n            style=\"width: 4rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\">\n            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n          </th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: {\n                $implicit: columns\n              }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            style=\"width: 2rem\"\n            class=\"cps-table-row-menu-cell\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      @if (rowExpansionTemplate) {\n        <td class=\"cps-table-row-chevron-cell\">\n          <div\n            class=\"cps-table-row-chevron\"\n            [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              color=\"text-dark\"\n              [pRowToggler]=\"item\">\n            </cps-icon>\n          </div>\n        </td>\n      }\n      @if (reorderableRows) {\n        <td class=\"cps-table-row-drag-handle-cell\">\n          <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n            >\u2630</span\n          >\n        </td>\n      }\n      @if (selectable) {\n        <td>\n          <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n        </td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col) {\n              <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n            }\n          } @else {\n            @for (col of columns; track col) {\n              <td>\n                {{\n                  col[colDateFormatName]\n                    ? (rowData[col[colFieldName]]\n                      | date: col[colDateFormatName])\n                    : rowData[col[colFieldName]]\n                }}\n              </td>\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-table-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(item)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  @if (rowExpansionTemplate; as item) {\n    <ng-template pTemplate=\"rowexpansion\" let-item>\n      <tr class=\"cps-table-row-expanded-content\">\n        <td colspan=\"100\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowExpansionTemplate;\n              context: {\n                $implicit: item\n              }\n            \"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  }\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ 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: "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: TableModule }, { kind: "component", type: i1$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$5.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$5.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$5.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { 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: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "rowExpansionTemplate", first: true, predicate: ["rowexpansion"], descendants: true }], viewQueries: [{ propertyName: "primengTable", first: true, predicate: ["primengTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "exportMenu", first: true, predicate: ["exportMenu"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }, { propertyName: "tUnsortDirective", first: true, predicate: ["tUnsortDirective"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [stripedRows]=\"striped\"\n  [showGridlines]=\"bordered\"\n  [size]=\"size === 'normal' ? undefined : size\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-table-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-table-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-table-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-table-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-table-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-table-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-table-coltoggle-menu\">\n                  <div\n                    class=\"cps-table-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-table-coltoggle-menu-item-left\">\n                      <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                      <span class=\"cps-table-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-table-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-table-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-table-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-table-tbar-export-btn\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-icon\n                icon=\"export\"\n                size=\"20\"\n                [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n                (click)=\"onExportData($event)\"></cps-icon>\n              <cps-menu\n                #exportMenu\n                [items]=\"exportMenuItems\"\n                [compressed]=\"true\"\n                [withArrow]=\"false\">\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-table-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: {\n            $implicit: columns\n          }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        @if (rowExpansionTemplate) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (reorderableRows) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (selectable) {\n          <th\n            style=\"width: 4rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\">\n            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n          </th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: {\n                $implicit: columns\n              }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            style=\"width: 2rem\"\n            class=\"cps-table-row-menu-cell\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      @if (rowExpansionTemplate) {\n        <td class=\"cps-table-row-chevron-cell\">\n          <div\n            class=\"cps-table-row-chevron\"\n            [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              color=\"text-dark\"\n              [pRowToggler]=\"item\">\n            </cps-icon>\n          </div>\n        </td>\n      }\n      @if (reorderableRows) {\n        <td class=\"cps-table-row-drag-handle-cell\">\n          <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n            >\u2630</span\n          >\n        </td>\n      }\n      @if (selectable) {\n        <td>\n          <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n        </td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col) {\n              <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n            }\n          } @else {\n            @for (col of columns; track col) {\n              <td>\n                {{\n                  col[colDateFormatName]\n                    ? (rowData[col[colFieldName]]\n                      | date: col[colDateFormatName])\n                    : rowData[col[colFieldName]]\n                }}\n              </td>\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-table-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(item)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  @if (rowExpansionTemplate; as item) {\n    <ng-template pTemplate=\"rowexpansion\" let-item>\n      <tr class=\"cps-table-row-expanded-content\">\n        <td colspan=\"100\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowExpansionTemplate;\n              context: {\n                $implicit: item\n              }\n            \"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  }\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ 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: "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: TableModule }, { kind: "component", type: i1$5.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$5.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "component", type: i1$5.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$5.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$5.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$5.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "directive", type: TableUnsortDirective, selector: "[tWithUnsort]", exportAs: ["tWithUnsort"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "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: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { 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: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "directive", type: CpsTableColumnSortableDirective, selector: "[cpsTColSortable]", inputs: ["cpsTColSortable"] }, { kind: "directive", type: CpsTableColumnFilterDirective, selector: "[cpsTColFilter]", inputs: ["cpsTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterMaxConstraints", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTColFilter"] }, { kind: "directive", type: CpsTableColumnResizableDirective, selector: "[cpsTColResizable]", inputs: ["cpsTColResizableDisabled"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTableDetectFilterTypePipe, name: "cpsTableDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTableComponent, decorators: [{
             type: Component,
@@ -11237,7 +11308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTableComponent]
                         }
-                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [stripedRows]=\"striped\"\n  [showGridlines]=\"bordered\"\n  [size]=\"size === 'normal' ? undefined : size\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-table-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-table-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-table-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-table-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-table-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-table-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-table-coltoggle-menu\">\n                  <div\n                    class=\"cps-table-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-table-coltoggle-menu-item-left\">\n                      <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                      <span class=\"cps-table-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-table-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-table-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-table-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-table-tbar-export-btn\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-icon\n                icon=\"export\"\n                size=\"20\"\n                [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n                (click)=\"onExportData($event)\"></cps-icon>\n              <cps-menu\n                #exportMenu\n                [items]=\"exportMenuItems\"\n                [compressed]=\"true\"\n                [withArrow]=\"false\">\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-table-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: {\n            $implicit: columns\n          }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        @if (rowExpansionTemplate) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (reorderableRows) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (selectable) {\n          <th\n            style=\"width: 4rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\">\n            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n          </th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: {\n                $implicit: columns\n              }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            style=\"width: 2rem\"\n            class=\"cps-table-row-menu-cell\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      @if (rowExpansionTemplate) {\n        <td class=\"cps-table-row-chevron-cell\">\n          <div\n            class=\"cps-table-row-chevron\"\n            [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              color=\"text-dark\"\n              [pRowToggler]=\"item\">\n            </cps-icon>\n          </div>\n        </td>\n      }\n      @if (reorderableRows) {\n        <td class=\"cps-table-row-drag-handle-cell\">\n          <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n            >\u2630</span\n          >\n        </td>\n      }\n      @if (selectable) {\n        <td>\n          <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n        </td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col) {\n              <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n            }\n          } @else {\n            @for (col of columns; track col) {\n              <td>\n                {{\n                  col[colDateFormatName]\n                    ? (rowData[col[colFieldName]]\n                      | date: col[colDateFormatName])\n                    : rowData[col[colFieldName]]\n                }}\n              </td>\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-table-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(item)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  @if (rowExpansionTemplate; as item) {\n    <ng-template pTemplate=\"rowexpansion\" let-item>\n      <tr class=\"cps-table-row-expanded-content\">\n        <td colspan=\"100\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowExpansionTemplate;\n              context: {\n                $implicit: item\n              }\n            \"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  }\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+                    ], template: "<p-table\n  #primengTable\n  #tUnsortDirective=\"tWithUnsort\"\n  tWithUnsort\n  [ngClass]=\"{ 'cps-table-loading': loading }\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [value]=\"data\"\n  [dataKey]=\"dataKey\"\n  [columns]=\"selectedColumns\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [showInitialSortBadge]=\"false\"\n  [loading]=\"loading\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [lazy]=\"lazy\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{ numToleratedItems: numToleratedItems }\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  [(selection)]=\"selectedRows\"\n  [metaKeySelection]=\"false\"\n  [rowHover]=\"rowHover\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [exportFilename]=\"exportFilename\"\n  [csvSeparator]=\"csvSeparator\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [stripedRows]=\"striped\"\n  [showGridlines]=\"bordered\"\n  [size]=\"size === 'normal' ? undefined : size\"\n  (onPage)=\"onPageChange($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onRowReorder)=\"onRowReorder($event)\">\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-table-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-table-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-table-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-table-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-table-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-table-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-table-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-table-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-table-coltoggle-menu\">\n                  <div\n                    class=\"cps-table-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-table-coltoggle-menu-item-left\">\n                      <span class=\"cps-table-coltoggle-menu-item-check\"> </span>\n                      <span class=\"cps-table-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-table-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-table-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-table-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-table-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-table-tbar-export-btn\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-icon\n                icon=\"export\"\n                size=\"20\"\n                [color]=\"exportBtnDisabled ? 'text-light' : 'prepared-lighten1'\"\n                (click)=\"onExportData($event)\"></cps-icon>\n              <cps-menu\n                #exportMenu\n                [items]=\"exportMenuItems\"\n                [compressed]=\"true\"\n                [withArrow]=\"false\">\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-table-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: {\n            $implicit: columns\n          }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        @if (rowExpansionTemplate) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (reorderableRows) {\n          <th\n            style=\"width: 3rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (selectable) {\n          <th\n            style=\"width: 4rem\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\">\n            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>\n          </th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: {\n                $implicit: columns\n              }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColSortable]=\"col[colFieldName]\"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTableDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTColResizable\n                  [cpsTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            style=\"width: 2rem\"\n            class=\"cps-table-row-menu-cell\"\n            cpsTColResizable\n            [cpsTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData\n    let-columns=\"columns\"\n    let-item\n    let-rowIndex=\"rowIndex\"\n    let-expanded=\"expanded\">\n    <tr\n      [pReorderableRow]=\"rowIndex\"\n      [ngClass]=\"{\n        'cps-table-row-selected': selectable && primengTable.isSelected(item)\n      }\">\n      @if (rowExpansionTemplate) {\n        <td class=\"cps-table-row-chevron-cell\">\n          <div\n            class=\"cps-table-row-chevron\"\n            [ngClass]=\"{ 'cps-table-row-chevron-expanded': expanded }\">\n            <cps-icon\n              icon=\"chevron-down\"\n              size=\"small\"\n              color=\"text-dark\"\n              [pRowToggler]=\"item\">\n            </cps-icon>\n          </div>\n        </td>\n      }\n      @if (reorderableRows) {\n        <td class=\"cps-table-row-drag-handle-cell\">\n          <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle\n            >\u2630</span\n          >\n        </td>\n      }\n      @if (selectable) {\n        <td>\n          <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n        </td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: item,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col) {\n              <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n            }\n          } @else {\n            @for (col of columns; track col) {\n              <td>\n                {{\n                  col[colDateFormatName]\n                    ? (rowData[col[colFieldName]]\n                      | date: col[colDateFormatName])\n                    : rowData[col[colFieldName]]\n                }}\n              </td>\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-table-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(item)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(item)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  @if (rowExpansionTemplate; as item) {\n    <ng-template pTemplate=\"rowexpansion\" let-item>\n      <tr class=\"cps-table-row-expanded-content\">\n        <td colspan=\"100\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              rowExpansionTemplate;\n              context: {\n                $implicit: item\n              }\n            \"></ng-container>\n        </td>\n      </tr>\n    </ng-template>\n  }\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-table-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n</p-table>\n", styles: [":host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-datatable-flex-scrollable{display:flex;flex-direction:column;height:100%}:host ::ng-deep .p-datatable{position:relative}:host ::ng-deep .p-datatable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable .p-datatable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-left .cps-table-tbar-title{cursor:default}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn{display:contents}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-export-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-datatable .p-datatable-header .cps-table-tbar-right .cps-table-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-datatable .p-datatable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-datatable .p-datatable-header{height:72px}:host ::ng-deep .p-datatable-flex-scrollable>.p-datatable-wrapper{display:flex;flex-direction:column;flex:1;height:100%}:host ::ng-deep .p-datatable-scrollable>.p-datatable-wrapper{position:relative}:host ::ng-deep .p-datatable>.p-datatable-wrapper{overflow:auto}:host ::ng-deep .p-datatable-table{border-spacing:0px;width:100%}:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-datatable-table>.p-datatable-tfoot,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-thead,:host ::ng-deep .p-datatable.p-datatable-scrollable>.p-datatable-wrapper>.p-scroller-viewport>.p-scroller>.p-datatable-table>.p-datatable-tfoot{background-color:#fff}:host ::ng-deep .p-datatable-scrollable-table>.p-datatable-thead{position:sticky;top:0;z-index:1}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-datatable .p-datatable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-thead tr:not(:first-child) th{border-top:unset}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-datatable .p-datatable-sortable-column:not(.p-paginator-page-selected):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-datatable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-datatable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-datatable.p-datatable-striped .p-datatable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .p-datatable.p-datatable-hoverable .p-datatable-tbody>tr:not(.p-highlight):not(.cps-table-row-expanded-content):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-datatable .p-datatable-tbody .cps-table-row-expanded-content td{border-left:4px solid var(--cps-color-surprise)!important}:host ::ng-deep .p-datatable .p-datatable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.cps-table-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td:last-child{border-width:1px 1px 0 1px}:host ::ng-deep .p-datatable.p-datatable-gridlines .p-datatable-tbody>tr>td{border-width:1px 0 0 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-datatable .p-datatable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td{padding:1.25rem}:host ::ng-deep td:has(p-tablecheckbox){text-align:center!important}:host ::ng-deep th:has(p-tableheadercheckbox){text-align:center!important;width:3rem!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-datatable-reorderable-row-handle,:host ::ng-deep [pReorderableColumn]{cursor:move;font-size:20px;line-height:1}:host ::ng-deep .p-datatable-reorderable-row-handle:hover,:host ::ng-deep [pReorderableColumn]:hover{color:var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-top>td{box-shadow:inset 0 2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-datatable-tbody>tr.p-datatable-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 var(--cps-color-calm)}:host ::ng-deep .p-datatable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-table-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .cps-table-row-drag-handle-cell{text-align:center!important}:host ::ng-deep .cps-table-row-drag-handle-cell .cps-table-row-drag-handle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host ::ng-deep .cps-table-row-chevron-cell{text-align:center!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron{transition-duration:.2s;cursor:pointer;display:inline-flex}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron:hover cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host ::ng-deep .cps-table-row-chevron-cell .cps-table-row-chevron-expanded{transform:rotate(180deg)}:host ::ng-deep .cps-table-row-menu-cell{border-left:none!important}:host ::ng-deep .p-datatable .p-datatable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-datatable.cps-tbar-small .p-datatable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-datatable.cps-tbar-normal .p-datatable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-table-loading .p-datatable{min-height:200px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-table-loading .p-datatable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected{font-weight:600}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-label,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected .cps-table-coltoggle-menu-item-check,.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.allselected .cps-table-coltoggle-menu-item-check{opacity:1}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-table-coltoggle-menu .cps-table-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-table-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -11623,6 +11694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Output
             }] } });
 
+const RESIZE_STEP_REM = 1.5;
 /**
  * CpsTextareaComponent is a textarea component.
  * @group Components
@@ -11642,6 +11714,15 @@ class CpsTextareaComponent {
     get value() {
         return this._value;
     }
+    get describedBy() {
+        if (this.hideDetails)
+            return null;
+        if (this.error)
+            return this.errorId;
+        if (this.hint)
+            return this.hintId;
+        return null;
+    }
     constructor(_control, _elementRef) {
         this._control = _control;
         this._elementRef = _elementRef;
@@ -11650,6 +11731,11 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the textarea component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Placeholder text for the textarea.
          * @group Props
@@ -11670,6 +11756,16 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.autofocus = false;
+        /**
+         * Determines whether the value of the textarea may be checked for spelling errors.
+         * @group Props
+         */
+        this.spellcheck = false;
+        /**
+         * Determines whether the value of the textarea can be automatically completed by the browser.
+         * @group Props
+         */
+        this.autocomplete = 'off';
         /**
          * Bottom hint text for the textarea.
          * @group Props
@@ -11680,6 +11776,11 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.disabled = false;
+        /**
+         * Determines whether the textarea is readonly.
+         * @group Props
+         */
+        this.readonly = false;
         /**
          * Width of the textarea, it can be of type number denoting pixels or string.
          * @group Props
@@ -11710,6 +11811,12 @@ class CpsTextareaComponent {
          * @group Props
          */
         this.resizable = 'vertical';
+        /**
+         * Maximum height of the textarea during resize, of type number denoting pixels or string.
+         * Accepts only units of px, rem and em. When resizable is set to 'none', this prop has no effect.
+         * @group Props
+         */
+        this.maxHeight = Infinity;
         /**
          * When it is not an empty string, an info icon is displayed to show text for more info.
          * @group Props
@@ -11760,7 +11867,16 @@ class CpsTextareaComponent {
          */
         this.blurred = new EventEmitter();
         this._value = '';
+        this.hintId = generateUniqueId('cps-textarea-hint');
+        this.errorId = generateUniqueId('cps-textarea-error');
         this.cvtWidth = '';
+        this.maxHeightPx = null;
+        this.isKeyboardFocused = false;
+        this._singleRowHeightPx = 0;
+        this._mouseActivated = false;
+        this._cpsRootFontSizeService = inject(CPS_ROOT_FONT_SIZE_SERVICE);
+        this._platformId = inject(PLATFORM_ID);
+        this._resizeStepPx = computed(() => RESIZE_STEP_REM * (this._cpsRootFontSizeService?.fontSize() || 16), ...(ngDevMode ? [{ debugName: "_resizeStepPx" }] : /* istanbul ignore next */ []));
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.onChange = (_event) => { };
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -11768,16 +11884,61 @@ class CpsTextareaComponent {
         if (this._control) {
             this._control.valueAccessor = this;
         }
+        effect(() => this._updateMaxHeight());
     }
     ngOnInit() {
         this.cvtWidth = convertSize(this.width);
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
+        logMissingAriaLabelError('CpsTextareaComponent', this.label, this.ariaLabel);
+    }
+    ngOnChanges(changes) {
+        if (changes.width) {
+            this.cvtWidth = convertSize(this.width);
+        }
+        if (changes.maxHeight || changes.resizable) {
+            this._updateMaxHeight();
+        }
+        logMissingAriaLabelError('CpsTextareaComponent', this.label, this.ariaLabel);
+    }
+    ngAfterViewInit() {
+        if (this.resizable === 'vertical') {
+            const textarea = this._textareaEl?.nativeElement;
+            if (textarea) {
+                this._singleRowHeightPx = textarea.offsetHeight / this.rows;
+            }
+        }
     }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
     }
+    _updateMaxHeight() {
+        if (this.resizable !== 'vertical' || this.maxHeight === Infinity) {
+            this.maxHeightPx = null;
+            return;
+        }
+        const css = convertSize(this.maxHeight);
+        const parsed = parseSize(css);
+        if (!parsed)
+            throw new Error(`Unsupported value for maxHeight.`);
+        const rootFontSizePx = this._cpsRootFontSizeService?.fontSize() || 16;
+        if (parsed.unit === 'px') {
+            this.maxHeightPx = parsed.value;
+        }
+        else if (parsed.unit === 'rem') {
+            this.maxHeightPx = parsed.value * rootFontSizePx;
+        }
+        else if (parsed.unit === 'em') {
+            const emBase = isPlatformBrowser(this._platformId)
+                ? parseFloat(getComputedStyle(this._elementRef.nativeElement).fontSize || '16')
+                : rootFontSizePx;
+            this.maxHeightPx = parsed.value * emBase;
+        }
+        else {
+            throw new Error(`Unsupported unit "${parsed.unit}" for maxHeight.`);
+        }
+    }
     _checkErrors() {
         if (!this._control)
             return;
@@ -11812,6 +11973,9 @@ class CpsTextareaComponent {
         const message = errArr.find((msg) => typeof msg === 'string');
         this.error = message || 'Unknown error';
     }
+    get isRequired() {
+        return this._control?.control?.hasValidator(Validators.required) ?? false;
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -11834,31 +11998,68 @@ class CpsTextareaComponent {
         if (this.value !== '')
             this._updateValue('');
     }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clear();
+        this.focus();
+    }
+    get isClearButtonVisible() {
+        return this.persistentClear || !!this.value;
+    }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
     onBlur() {
+        this.isKeyboardFocused = false;
         this._checkErrors();
         this.blurred.emit();
     }
     onFocus() {
+        this.isKeyboardFocused = !this._mouseActivated;
+        this._mouseActivated = false;
         this._control?.control?.markAsTouched();
         this.focused.emit();
     }
+    onTextareaMousedown() {
+        this._mouseActivated = true;
+    }
     focus() {
-        this._elementRef?.nativeElement?.querySelector('textarea')?.focus();
+        this._textareaEl?.nativeElement?.focus();
+    }
+    onResizeHandleKeydown(event) {
+        const textarea = this._textareaEl?.nativeElement;
+        if (!textarea)
+            return;
+        const current = textarea.offsetHeight;
+        let next = current;
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                next = Math.max(current - this._resizeStepPx(), this._singleRowHeightPx);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                next = Math.min(current + this._resizeStepPx(), this.maxHeightPx ?? Infinity);
+                break;
+            default:
+                return;
+        }
+        textarea.style.height = `${next}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTextareaComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", hint: "hint", disabled: "disabled", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, ngImport: i0, template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-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\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      spellcheck=\"false\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    @if (clearable && !disabled) {\n      <span\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n      </span>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-textarea-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-state-error)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTextareaComponent, isStandalone: true, selector: "cps-textarea", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", rows: "rows", cols: "cols", autofocus: "autofocus", spellcheck: "spellcheck", autocomplete: "autocomplete", hint: "hint", disabled: "disabled", readonly: "readonly", width: "width", clearable: "clearable", hideDetails: "hideDetails", persistentClear: "persistentClear", error: "error", resizable: "resizable", maxHeight: "maxHeight", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", prefixIconClicked: "prefixIconClicked", blurred: "blurred" }, viewQueries: [{ propertyName: "_textareaEl", first: true, predicate: ["textareaEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-textarea-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [class.cps-textarea-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-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\n  <div\n    class=\"cps-textarea-wrap\"\n    [class.cps-textarea-wrap-error]=\"!!error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    <textarea\n      #textareaEl\n      [attr.spellcheck]=\"spellcheck\"\n      [attr.autocomplete]=\"autocomplete\"\n      [attr.aria-label]=\"ariaLabel || label || null\"\n      [attr.aria-invalid]=\"error ? 'true' : null\"\n      [attr.aria-required]=\"isRequired || null\"\n      [attr.aria-describedby]=\"describedBy\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [style.width]=\"cvtWidth\"\n      [style.max-height.px]=\"maxHeightPx\"\n      [style.resize]=\"readonly || disabled ? 'none' : resizable\"\n      (mousedown)=\"onTextareaMousedown()\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\">\n    </textarea>\n\n    @if (clearable && !disabled && !readonly) {\n      <span\n        class=\"clear-btn\"\n        role=\"button\"\n        [attr.tabindex]=\"isClearButtonVisible ? 0 : null\"\n        aria-label=\"Clear\"\n        [attr.aria-hidden]=\"isClearButtonVisible ? null : 'true'\"\n        [style.visibility]=\"isClearButtonVisible ? 'visible' : 'hidden'\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"onClear($event)\"\n        (keydown.enter)=\"onClear($event)\"\n        (keydown.space)=\"onClear($event)\">\n        <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n      </span>\n    }\n\n    @if (resizable === 'vertical' && !disabled && !readonly) {\n      <div\n        class=\"cps-textarea-resize-handle\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vertically resize textarea\"\n        aria-description=\"Use up and down arrow keys to resize\"\n        (keydown)=\"onResizeHandleKeydown($event)\"></div>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-textarea-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap:hover:has(textarea:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap:focus-within:not(:has(textarea:read-only)),:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:has(textarea:read-only){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:2.375rem;border:none;transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:0;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:read-only{cursor:default}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-mild);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{margin-left:.6875rem;margin-top:.6875rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{position:absolute;bottom:0;right:0}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.4375rem;right:.4375rem;display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:hover cps-icon{opacity:1!important}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{position:absolute;top:.4375rem;right:.4375rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:.5rem}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [ngStyle]=\"{ width: cvtWidth }\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [ngClass]=\"{ 'cps-textarea-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-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\n  <div\n    class=\"cps-textarea-wrap\"\n    [ngClass]=\"{\n      'cps-textarea-wrap-error': error,\n      clearable: clearable,\n      'persistent-clear': persistentClear\n    }\">\n    <textarea\n      spellcheck=\"false\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [ngStyle]=\"{\n        width: cvtWidth,\n        resize: resizable\n      }\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\"></textarea>\n\n    @if (clearable && !disabled) {\n      <span\n        [style.visibility]=\"\n          persistentClear || (!persistentClear && value) ? 'visible' : 'hidden'\n        \"\n        class=\"clear-btn\">\n        <cps-icon icon=\"delete\" size=\"small\" (click)=\"clear()\"></cps-icon>\n      </span>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-textarea-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden}:host .cps-textarea-container .cps-textarea-wrap:hover textarea:enabled{border:1px solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap-error textarea{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:38px;border:1px solid var(--cps-color-line-light);transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:4px;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{border:1px solid var(--cps-color-calm);outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-light);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.75rem;right:.75rem;cursor:pointer;color:var(--cps-state-error)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon:hover{opacity:1!important}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:8px}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
+            args: [{ selector: 'cps-textarea', imports: [CommonModule, CpsIconComponent, CpsInfoCircleComponent], template: "<div class=\"cps-textarea-container\" [style.width]=\"cvtWidth\">\n  @if (label) {\n    <div\n      class=\"cps-textarea-label\"\n      [class.cps-textarea-label-disabled]=\"disabled && !readonly\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-textarea-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\n  <div\n    class=\"cps-textarea-wrap\"\n    [class.cps-textarea-wrap-error]=\"!!error\"\n    [class.clearable]=\"clearable\"\n    [class.persistent-clear]=\"persistentClear\"\n    [class.keyboard-focused]=\"isKeyboardFocused\">\n    <textarea\n      #textareaEl\n      [attr.spellcheck]=\"spellcheck\"\n      [attr.autocomplete]=\"autocomplete\"\n      [attr.aria-label]=\"ariaLabel || label || null\"\n      [attr.aria-invalid]=\"error ? 'true' : null\"\n      [attr.aria-required]=\"isRequired || null\"\n      [attr.aria-describedby]=\"describedBy\"\n      [cols]=\"cols\"\n      [rows]=\"rows\"\n      [autofocus]=\"autofocus\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      [style.width]=\"cvtWidth\"\n      [style.max-height.px]=\"maxHeightPx\"\n      [style.resize]=\"readonly || disabled ? 'none' : resizable\"\n      (mousedown)=\"onTextareaMousedown()\"\n      (blur)=\"onBlur()\"\n      (focus)=\"onFocus()\"\n      (input)=\"updateValueEvent($event)\">\n    </textarea>\n\n    @if (clearable && !disabled && !readonly) {\n      <span\n        class=\"clear-btn\"\n        role=\"button\"\n        [attr.tabindex]=\"isClearButtonVisible ? 0 : null\"\n        aria-label=\"Clear\"\n        [attr.aria-hidden]=\"isClearButtonVisible ? null : 'true'\"\n        [style.visibility]=\"isClearButtonVisible ? 'visible' : 'hidden'\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"onClear($event)\"\n        (keydown.enter)=\"onClear($event)\"\n        (keydown.space)=\"onClear($event)\">\n        <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n      </span>\n    }\n\n    @if (resizable === 'vertical' && !disabled && !readonly) {\n      <div\n        class=\"cps-textarea-resize-handle\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Vertically resize textarea\"\n        aria-description=\"Use up and down arrow keys to resize\"\n        (keydown)=\"onResizeHandleKeydown($event)\"></div>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div [id]=\"hintId\" class=\"cps-textarea-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div\n      [id]=\"errorId\"\n      class=\"cps-textarea-error\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-textarea-container{width:100%;gap:.2rem!important;display:flex!important;flex-direction:column!important;font-family:Source Sans Pro,sans-serif}:host .cps-textarea-container .cps-textarea-wrap{position:relative;overflow:hidden;border:.0625rem solid var(--cps-color-line-light);border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap:hover:has(textarea:enabled:not(:read-only)){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap:focus-within:not(:has(textarea:read-only)),:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:has(textarea:read-only){border-color:var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:before,:host .cps-textarea-container .cps-textarea-wrap.keyboard-focused:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap-error{border-color:var(--cps-state-error)!important}:host .cps-textarea-container .cps-textarea-wrap-error textarea:not(:focus){background:#fef3f2!important}:host .cps-textarea-container .cps-textarea-wrap textarea{display:block;font-family:Source Sans Pro,sans-serif;font-size:1rem;color:var(--cps-color-text-dark);background:#fff;padding:.375rem .75rem;line-height:1.5;min-height:2.375rem;border:none;transition-property:border-color;transition-duration:.2s;appearance:none;border-radius:0;width:100%}:host .cps-textarea-container .cps-textarea-wrap textarea:focus{outline:0}:host .cps-textarea-container .cps-textarea-wrap textarea:read-only{cursor:default}:host .cps-textarea-container .cps-textarea-wrap textarea:disabled{color:var(--cps-color-text-mild);background-color:var(--cps-color-bg-disabled);opacity:1;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap textarea:focus+.clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap:hover .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle{position:absolute;bottom:0;right:0;width:1.5rem;height:1.5rem;pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{content:\"\";position:absolute;border-radius:.25rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before{inset:-.0625rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{inset:0;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{margin-left:.6875rem;margin-top:.6875rem}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible{position:absolute;bottom:0;right:0}:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .cps-textarea-resize-handle:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn{position:absolute;top:.4375rem;right:.4375rem;display:flex;cursor:pointer;color:var(--cps-state-error);padding:.25rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn cps-icon{opacity:0;transition-duration:.2s}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:hover cps-icon{opacity:1!important}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus{outline:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{outline:none;position:relative}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before{inset:.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{inset:.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible.suppress-focus-visible:after{display:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible{position:absolute;top:.4375rem;right:.4375rem}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:before,:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible:after{pointer-events:none}:host .cps-textarea-container .cps-textarea-wrap .clear-btn:focus-visible cps-icon{opacity:1}:host .cps-textarea-container .persistent-clear .clear-btn cps-icon{opacity:.5}:host .cps-textarea-container .clearable>textarea{padding-right:2.2rem}:host .cps-textarea-container .cps-textarea-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default}:host .cps-textarea-container .cps-textarea-label{color:var(--cps-color-text-dark);font-size:.875rem;align-items:center;display:inline-flex;font-weight:600}:host .cps-textarea-container .cps-textarea-label .cps-textarea-label-info-circle{margin-left:.5rem}:host .cps-textarea-container .cps-textarea-label-disabled{color:var(--cps-color-text-mild)}:host .cps-textarea-container ::placeholder{font-family:Source Sans Pro,sans-serif;color:var(--cps-color-text-mild);font-style:italic;opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }] }, { type: i0.ElementRef }], propDecorators: { label: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], rows: [{
@@ -11867,10 +12068,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], autofocus: [{
                 type: Input
+            }], spellcheck: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
             }], hint: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], readonly: [{
+                type: Input
             }], width: [{
                 type: Input
             }], clearable: [{
@@ -11883,6 +12090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Input
             }], resizable: [{
                 type: Input
+            }], maxHeight: [{
+                type: Input
             }], infoTooltip: [{
                 type: Input
             }], infoTooltipClass: [{
@@ -11903,6 +12112,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                 type: Output
             }], blurred: [{
                 type: Output
+            }], _textareaEl: [{
+                type: ViewChild,
+                args: ['textareaEl']
             }] } });
 
 /**
@@ -14677,7 +14889,7 @@ class CpsTreeTableComponent {
                 // eslint-disable-next-line no-use-before-define
                 deps: [CpsTreeTableComponent]
             }
-        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "colgroupTemplate", first: true, predicate: ["colgroup"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [showGridlines]=\"bordered\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  @if (colgroupTemplate) {\n    <ng-template pTemplate=\"colgroup\">\n      <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n    </ng-template>\n  }\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-treetable-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-treetable-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-treetable-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-treetable-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-treetable-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-treetable-tbar-export-btn ml-2\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-button\n                label=\"Export\"\n                [disabled]=\"exportBtnDisabled\"\n                color=\"prepared\"\n                type=\"solid\"\n                icon=\"export\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onExportData()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-treetable-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-treetable-coltoggle-menu\">\n                  <div\n                    class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-check\">\n                      </span>\n                      <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-treetable-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-treetable-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: { $implicit: columns }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n        @if (selectable) {\n          <th\n            cpsTTHdrSelectable\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: { $implicit: columns }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            class=\"cps-treetable-row-menu-cell\"\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      @if (selectable) {\n        <td [cpsTTRowSelectable]=\"rowNode\"></td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td\n                  [cpsTTRowToggler]=\"rowNode\"\n                  [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n              @if (i > 0) {\n                <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n            }\n          } @else {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td [cpsTTRowToggler]=\"rowNode\">\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n              @if (i > 0) {\n                <td>\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-treetable-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <cps-icon icon=\"angle-left\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <cps-icon icon=\"angle-right\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th,:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ 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: "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: TreeTableModule }, { kind: "component", type: i2$2.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { 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"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbar"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "nestedHeaderTemplate", first: true, predicate: ["nestedHeader"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["body"], descendants: true }, { propertyName: "colgroupTemplate", first: true, predicate: ["colgroup"], descendants: true }], viewQueries: [{ propertyName: "primengTreeTable", first: true, predicate: ["primengTreeTable"], descendants: true, static: true }, { propertyName: "globalFilterComp", first: true, predicate: ["globalFilterComp"], descendants: true }, { propertyName: "colToggleMenu", first: true, predicate: ["colToggleMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [showGridlines]=\"bordered\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  @if (colgroupTemplate) {\n    <ng-template pTemplate=\"colgroup\">\n      <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n    </ng-template>\n  }\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-treetable-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-treetable-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-treetable-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-treetable-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-treetable-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-treetable-tbar-export-btn ml-2\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-button\n                label=\"Export\"\n                [disabled]=\"exportBtnDisabled\"\n                color=\"prepared\"\n                type=\"solid\"\n                icon=\"export\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onExportData()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-treetable-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-treetable-coltoggle-menu\">\n                  <div\n                    class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-check\">\n                      </span>\n                      <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-treetable-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-treetable-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: { $implicit: columns }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n        @if (selectable) {\n          <th\n            cpsTTHdrSelectable\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: { $implicit: columns }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            class=\"cps-treetable-row-menu-cell\"\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      @if (selectable) {\n        <td [cpsTTRowSelectable]=\"rowNode\"></td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td\n                  [cpsTTRowToggler]=\"rowNode\"\n                  [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n              @if (i > 0) {\n                <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n            }\n          } @else {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td [cpsTTRowToggler]=\"rowNode\">\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n              @if (i > 0) {\n                <td>\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-treetable-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <cps-icon icon=\"angle-left\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <cps-icon icon=\"angle-right\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th,:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"], dependencies: [{ 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: "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: TreeTableModule }, { kind: "component", type: i2$2.TreeTable, selector: "p-treeTable, p-treetable, p-tree-table", inputs: ["columns", "styleClass", "tableStyle", "tableStyleClass", "autoLayout", "lazy", "lazyLoadOnInit", "paginator", "rows", "first", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "customSort", "selectionMode", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "compareSelectionBy", "rowHover", "loading", "loadingIcon", "showLoader", "scrollable", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "frozenColumns", "resizableColumns", "columnResizeMode", "reorderableColumns", "contextMenu", "rowTrackBy", "filters", "globalFilterFields", "filterDelay", "filterMode", "filterLocale", "paginatorLocale", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "value", "virtualRowHeight", "selectionKeys", "showGridlines"], outputs: ["selectionChange", "contextMenuSelectionChange", "onFilter", "onNodeExpand", "onNodeCollapse", "onPage", "onSort", "onLazyLoad", "sortFunction", "onColResize", "onColReorder", "onNodeSelect", "onNodeUnselect", "onContextMenuSelect", "onHeaderCheckboxToggle", "onEditInit", "onEditComplete", "onEditCancel", "selectionKeysChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$2.TTRow, selector: "[ttRow]", inputs: ["ttRow"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "ariaLabel", "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: "component", type: CpsButtonComponent, selector: "cps-button", inputs: ["color", "contentColor", "borderRadius", "type", "label", "ariaLabel", "icon", "iconPosition", "size", "width", "height", "disabled", "loading"], outputs: ["clicked"] }, { 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"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsLoaderComponent, selector: "cps-loader", inputs: ["fullScreen", "opacity", "labelColor", "showLabel"] }, { kind: "directive", type: CpsTreeTableColumnSortableDirective, selector: "[cpsTTColSortable]", inputs: ["cpsTTColSortable"] }, { kind: "directive", type: CpsTreeTableColumnFilterDirective, selector: "[cpsTTColFilter]", inputs: ["cpsTTColFilter", "filterType", "filterPersistent", "filterShowClearButton", "filterShowApplyButton", "filterShowCloseButton", "filterShowMatchModes", "filterMatchModes", "filterShowOperator", "filterHeaderTitle", "filterHideOnClear", "filterCategoryOptions", "filterAsButtonToggle", "filterSingleSelection", "filterPlaceholder"], exportAs: ["cpsTTColFilter"] }, { kind: "directive", type: CpsTreeTableHeaderSelectableDirective, selector: "[cpsTTHdrSelectable]" }, { kind: "directive", type: CpsTreeTableRowSelectableDirective, selector: "[cpsTTRowSelectable]", inputs: ["cpsTTRowSelectable"] }, { kind: "directive", type: CpsTreetableRowTogglerDirective, selector: "[cpsTTRowToggler]", inputs: ["cpsTTRowToggler"] }, { kind: "directive", type: CpsTreeTableColumnResizableDirective, selector: "[cpsTTColResizable]", inputs: ["cpsTTColResizableDisabled"] }, { kind: "directive", type: TreeTableUnsortDirective, selector: "[ttWithUnsort]" }, { kind: "component", type: TableRowMenuComponent, selector: "table-row-menu", inputs: ["showRowRemoveButton", "customItems", "showRowEditButton"], outputs: ["editRowBtnClicked", "removeRowBtnClicked"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: CpsTreeTableDetectFilterTypePipe, name: "cpsTTDetectFilterType" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTreeTableComponent, decorators: [{
             type: Component,
@@ -14709,7 +14921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                             // eslint-disable-next-line no-use-before-define
                             deps: [CpsTreeTableComponent]
                         }
-                    ], template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [showGridlines]=\"bordered\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  @if (colgroupTemplate) {\n    <ng-template pTemplate=\"colgroup\">\n      <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n    </ng-template>\n  }\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-treetable-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-treetable-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-treetable-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-treetable-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-treetable-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-treetable-tbar-export-btn ml-2\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-button\n                label=\"Export\"\n                [disabled]=\"exportBtnDisabled\"\n                color=\"prepared\"\n                type=\"solid\"\n                icon=\"export\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onExportData()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-treetable-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-treetable-coltoggle-menu\">\n                  <div\n                    class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-check\">\n                      </span>\n                      <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-treetable-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-treetable-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: { $implicit: columns }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n        @if (selectable) {\n          <th\n            cpsTTHdrSelectable\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: { $implicit: columns }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            class=\"cps-treetable-row-menu-cell\"\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      @if (selectable) {\n        <td [cpsTTRowSelectable]=\"rowNode\"></td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td\n                  [cpsTTRowToggler]=\"rowNode\"\n                  [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n              @if (i > 0) {\n                <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n            }\n          } @else {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td [cpsTTRowToggler]=\"rowNode\">\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n              @if (i > 0) {\n                <td>\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-treetable-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <cps-icon icon=\"angle-left\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <cps-icon icon=\"angle-right\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th,:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
+                    ], template: "<p-treeTable\n  #primengTreeTable\n  ttWithUnsort\n  [ngClass]=\"{\n    'cps-treetable-loading': loading,\n    'cps-treetable-flex': defScrollHeight === 'flex',\n    'cps-treetable-nonvirtual': !virtualScroll,\n    'cps-treetable-autolayout-calced': autoLayout && scrollable\n  }\"\n  [value]=\"data\"\n  [autoLayout]=\"autoLayout && !scrollable\"\n  [scrollable]=\"scrollable\"\n  [scrollHeight]=\"scrollHeight\"\n  [virtualScroll]=\"virtualScroll\"\n  [virtualScrollItemSize]=\"virtualScrollItemSize\"\n  [virtualScrollOptions]=\"{\n    numToleratedItems: numToleratedItems,\n    autoSize: false\n  }\"\n  [columns]=\"selectedColumns\"\n  [loading]=\"loading\"\n  [rowHover]=\"rowHover\"\n  [lazy]=\"lazy\"\n  [(selection)]=\"selectedRows\"\n  (selectionChange)=\"onSelectionChanged($event)\"\n  compareSelectionBy=\"deepEquals\"\n  [lazyLoadOnInit]=\"lazyLoadOnInit\"\n  [styleClass]=\"styleClass\"\n  [tableStyle]=\"tableStyle\"\n  [tableStyleClass]=\"tableStyleClass\"\n  [customSort]=\"customSort\"\n  [sortMode]=\"sortMode\"\n  [globalFilterFields]=\"globalFilterFields\"\n  [paginator]=\"paginator\"\n  [showCurrentPageReport]=\"true\"\n  [alwaysShowPaginator]=\"alwaysShowPaginator\"\n  [rows]=\"rows\"\n  [first]=\"first\"\n  [totalRecords]=\"totalRecords\"\n  [resetPageOnSort]=\"resetPageOnSort\"\n  [resizableColumns]=\"resizableColumns\"\n  [columnResizeMode]=\"columnResizeMode\"\n  [showGridlines]=\"bordered\"\n  currentPageReportTemplate=\"{first} - {last} of {totalRecords}\"\n  (onPage)=\"onPageChange($event)\"\n  (onSort)=\"onSort($event)\"\n  (onFilter)=\"onFilter($event)\"\n  (onLazyLoad)=\"onLazyLoaded($event)\"\n  (sortFunction)=\"onSortFunction($event)\"\n  (onNodeExpand)=\"onNodeExpanded($event)\"\n  (onNodeCollapse)=\"onNodeCollapsed($event)\"\n  (onNodeSelect)=\"onNodeSelected($event)\"\n  (onNodeUnselect)=\"onNodeUnselected($event)\">\n  @if (colgroupTemplate) {\n    <ng-template pTemplate=\"colgroup\">\n      <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n    </ng-template>\n  }\n  @if (hasToolbar) {\n    <ng-template pTemplate=\"caption\">\n      @if (toolbarTemplate) {\n        <ng-container *ngTemplateOutlet=\"toolbarTemplate\"></ng-container>\n      }\n      @if (!toolbarTemplate) {\n        <div class=\"cps-treetable-tbar-left\">\n          @if (toolbarIcon) {\n            <div class=\"cps-treetable-tbar-icon\">\n              <cps-icon\n                [icon]=\"toolbarIcon\"\n                [color]=\"toolbarIconColor\"></cps-icon>\n            </div>\n          }\n          <div class=\"cps-treetable-tbar-title\">{{ toolbarTitle }}</div>\n          @if (showGlobalFilter) {\n            <div class=\"cps-treetable-tbar-global-filter\">\n              <cps-input\n                #globalFilterComp\n                ariaLabel=\"Global filter\"\n                prefixIcon=\"search\"\n                [placeholder]=\"globalFilterPlaceholder\"\n                (valueChanged)=\"onFilterGlobal($event)\"\n                [clearable]=\"true\"\n                [disabled]=\"loading\"\n                [appearance]=\"\n                  toolbarSize === 'small' ? 'underlined' : 'outlined'\n                \"\n                [hideDetails]=\"true\">\n              </cps-input>\n            </div>\n          }\n        </div>\n        <div class=\"cps-treetable-tbar-right\">\n          @if (showRemoveBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                label=\"Remove\"\n                [disabled]=\"removeBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                icon=\"remove\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"removeSelected()\">\n              </cps-button>\n            </div>\n          }\n          @if (showAdditionalBtnOnSelect && selectedRows.length > 0) {\n            <div class=\"cps-treetable-tbar-btn-on-select\">\n              <cps-button\n                [label]=\"additionalBtnOnSelectTitle\"\n                [disabled]=\"additionalBtnOnSelectDisabled\"\n                color=\"prepared\"\n                type=\"borderless\"\n                [icon]=\"additionalBtnOnSelectIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickAdditionalBtnOnSelect()\">\n              </cps-button>\n            </div>\n          }\n          @if (showActionBtn) {\n            <div class=\"cps-treetable-tbar-action-btn\">\n              <cps-button\n                [label]=\"actionBtnTitle\"\n                [disabled]=\"actionBtnDisabled\"\n                color=\"prepared\"\n                type=\"outlined\"\n                [icon]=\"actionBtnIcon\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onClickActionBtn()\">\n              </cps-button>\n            </div>\n          }\n          @if (showExportBtn) {\n            <div\n              class=\"cps-treetable-tbar-export-btn ml-2\"\n              [ngClass]=\"{ 'btn-disabled': exportBtnDisabled }\">\n              <cps-button\n                label=\"Export\"\n                [disabled]=\"exportBtnDisabled\"\n                color=\"prepared\"\n                type=\"solid\"\n                icon=\"export\"\n                [size]=\"toolbarSize\"\n                (clicked)=\"onExportData()\">\n              </cps-button>\n            </div>\n          }\n          @if (showColumnsToggleBtn && columns.length > 0) {\n            <div\n              class=\"cps-treetable-tbar-coltoggle-btn\"\n              [ngClass]=\"{ 'btn-disabled': columnsToggleBtnDisabled }\">\n              <cps-icon\n                icon=\"columns\"\n                size=\"normal\"\n                [color]=\"\n                  columnsToggleBtnDisabled\n                    ? 'text-lightest'\n                    : 'prepared-lighten1'\n                \"\n                (click)=\"onColumnsToggle($event)\"></cps-icon>\n              <cps-menu #colToggleMenu [withArrow]=\"false\">\n                <div class=\"cps-treetable-coltoggle-menu\">\n                  <div\n                    class=\"cps-treetable-coltoggle-menu-item select-all-option\"\n                    [class.allselected]=\"\n                      selectedColumns.length === columns.length\n                    \"\n                    (click)=\"toggleAllColumns()\">\n                    <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-check\">\n                      </span>\n                      <span class=\"cps-treetable-coltoggle-menu-item-label\"\n                        >Show all columns</span\n                      >\n                    </span>\n                  </div>\n                  @for (col of columns; track col) {\n                    <div\n                      class=\"cps-treetable-coltoggle-menu-item\"\n                      (click)=\"onSelectColumn(col)\"\n                      [class.selected]=\"isColumnSelected(col)\">\n                      <span class=\"cps-treetable-coltoggle-menu-item-left\">\n                        <span\n                          class=\"cps-treetable-coltoggle-menu-item-check\"></span>\n                        <span class=\"cps-treetable-coltoggle-menu-item-label\">{{\n                          col[colHeaderName]\n                        }}</span>\n                      </span>\n                    </div>\n                  }\n                </div>\n              </cps-menu>\n            </div>\n          }\n          @if (showDataReloadBtn) {\n            <div\n              class=\"cps-treetable-tbar-reload-btn\"\n              [ngClass]=\"{ 'btn-disabled': dataReloadBtnDisabled }\">\n              <cps-icon\n                icon=\"refresh\"\n                size=\"18\"\n                [color]=\"\n                  dataReloadBtnDisabled ? 'text-light' : 'prepared-lighten1'\n                \"\n                (click)=\"onReloadData()\">\n              </cps-icon>\n            </div>\n          }\n        </div>\n      }\n    </ng-template>\n  }\n\n  @if (nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <ng-container\n        *ngTemplateOutlet=\"\n          nestedHeaderTemplate;\n          context: { $implicit: columns }\n        \"></ng-container>\n    </ng-template>\n  }\n\n  @if (!nestedHeaderTemplate; as columns) {\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr>\n        <!-- <th style=\"width: 3rem\" *ngIf=\"reorderableRows\"></th> -->\n        @if (selectable) {\n          <th\n            cpsTTHdrSelectable\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n        @if (headerTemplate) {\n          <ng-container\n            *ngTemplateOutlet=\"\n              headerTemplate;\n              context: { $implicit: columns }\n            \"></ng-container>\n        }\n        @if (!headerTemplate && columns.length > 0) {\n          @if (sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColSortable]=\"col[colFieldName]\"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n          @if (!sortable) {\n            @if (filterableByColumns) {\n              @for (col of columns; track col) {\n                <th\n                  [cpsTTColFilter]=\"col[colFieldName]\"\n                  [filterType]=\"\n                    col[colFilterTypeName] ??\n                    (autoColumnFilterType\n                      ? (data | cpsTTDetectFilterType: col[colFieldName])\n                      : 'text')\n                  \"\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            } @else {\n              @for (col of columns; track col) {\n                <th\n                  cpsTTColResizable\n                  [cpsTTColResizableDisabled]=\"!resizableColumns\">\n                  {{ col[colHeaderName] }}\n                </th>\n              }\n            }\n          }\n        }\n        @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n          <th\n            class=\"cps-treetable-row-menu-cell\"\n            cpsTTColResizable\n            [cpsTTColResizableDisabled]=\"!resizableColumns\"></th>\n        }\n      </tr>\n    </ng-template>\n  }\n\n  <ng-template\n    pTemplate=\"body\"\n    let-rowData=\"rowData\"\n    let-columns=\"columns\"\n    let-rowNode\n    let-rowIndex=\"rowIndex\">\n    <tr\n      [ttRow]=\"rowNode\"\n      [ngClass]=\"{\n        'cps-treetable-row-selected':\n          selectable && primengTreeTable.isSelected(rowNode.node)\n      }\">\n      <!-- <td *ngIf=\"reorderableRows\" class=\"cps-table-row-drag-handle-cell\">\n        <span class=\"cps-table-row-drag-handle\" pReorderableRowHandle>\u2630</span>\n      </td> -->\n      @if (selectable) {\n        <td [cpsTTRowSelectable]=\"rowNode\"></td>\n      }\n      @if (bodyTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            bodyTemplate;\n            context: {\n              $implicit: rowNode,\n              rowIndex: rowIndex,\n              columns: columns,\n              rowData: rowData\n            }\n          \">\n        </ng-container>\n      }\n      @if (!bodyTemplate) {\n        @if (columns.length > 0) {\n          @if (renderDataAsHTML) {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td\n                  [cpsTTRowToggler]=\"rowNode\"\n                  [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n              @if (i > 0) {\n                <td [innerHTML]=\"rowData[col[colFieldName]]\"></td>\n              }\n            }\n          } @else {\n            @for (col of columns; track col; let i = $index) {\n              @if (i === 0) {\n                <td [cpsTTRowToggler]=\"rowNode\">\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n              @if (i > 0) {\n                <td>\n                  {{\n                    col[colDateFormatName]\n                      ? (rowData[col[colFieldName]]\n                        | date: col[colDateFormatName])\n                      : rowData[col[colFieldName]]\n                  }}\n                </td>\n              }\n            }\n          }\n        }\n      }\n      @if (showRowMenu && (showRowRemoveButton || showRowEditButton)) {\n        <td class=\"cps-treetable-row-menu-cell\">\n          <table-row-menu\n            (editRowBtnClicked)=\"onEditRowClicked(rowNode.node)\"\n            (removeRowBtnClicked)=\"onRemoveRowClicked(rowNode.node)\"\n            [showRowRemoveButton]=\"showRowRemoveButton\"\n            [showRowEditButton]=\"showRowEditButton\"\n            [customItems]=\"rowMenuItems\">\n          </table-row-menu>\n        </td>\n      }\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"emptymessage\">\n    <tr>\n      <td\n        colspan=\"100\"\n        class=\"cps-treetable-empty-message-td\"\n        [ngStyle]=\"{ height: emptyBodyHeight }\">\n        {{ emptyMessage }}\n      </td>\n    </tr>\n  </ng-template>\n  <ng-template pTemplate=\"loadingicon\">\n    <cps-loader [fullScreen]=\"false\" opacity=\"0\"></cps-loader>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorleft\">\n    <div class=\"cps-table-paginator-itms-per-page\">\n      <span class=\"cps-table-paginator-items-per-page-title\"\n        >Rows per page:\n      </span>\n      <cps-select\n        ariaLabel=\"Set rows per page\"\n        [options]=\"rowOptions\"\n        [hideDetails]=\"true\"\n        [(ngModel)]=\"rows\"\n        (valueChanged)=\"onRowsPerPageChanged()\"\n        [returnObject]=\"false\"\n        optionsClass=\"cps-paginator-page-options\">\n      </cps-select>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"paginatorfirstpagelinkicon\">\n    <cps-icon icon=\"menu-shrink\" size=\"normal\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorpreviouspagelinkicon\">\n    <cps-icon icon=\"angle-left\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatornextpagelinkicon\">\n    <cps-icon icon=\"angle-right\"></cps-icon>\n  </ng-template>\n  <ng-template pTemplate=\"paginatorlastpagelinkicon\">\n    <cps-icon icon=\"menu-expand\" size=\"normal\"></cps-icon>\n  </ng-template>\n</p-treeTable>\n", styles: [":host ::ng-deep .p-treetable{position:relative}:host ::ng-deep .p-component,:host ::ng-deep .p-component *{box-sizing:border-box}:host ::ng-deep .p-component{font-family:Source Sans Pro,sans-serif;font-size:14px;font-weight:400}:host ::ng-deep .p-treetable-scrollable-wrapper{position:relative;background:#fff}:host ::ng-deep .p-treetable-wrapper{background:#fff}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-normal .p-treetable-scrollable-wrapper{height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable.cps-tbar-small .p-treetable-scrollable-wrapper{height:calc(100% - 43px)}:host ::ng-deep .cps-treetable-nonvirtual.cps-treetable-flex .p-treetable-flex-scrollable .p-treetable-scrollable-wrapper .p-treetable-scrollable-view .p-treetable-scrollable-header{display:contents}:host ::ng-deep .p-treetable .p-treetable-scrollable-header,:host ::ng-deep .p-treetable .p-treetable-scrollable-footer{background:#fff}:host ::ng-deep .p-treetable-scrollable-header,:host ::ng-deep .p-treetable-scrollable-footer{overflow:hidden}:host ::ng-deep .p-treetable table{border-collapse:collapse;width:100%;table-layout:fixed}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 1px;font-weight:400;color:var(--cps-color-text-mild);background:#fff;transition:box-shadow .2s;overflow:hidden}:host ::ng-deep .p-treetable-scrollable-body{overflow:auto!important;position:relative}:host ::ng-deep .cps-treetable-flex .p-treetable-scrollable-body{height:100%}:host ::ng-deep .p-treetable .p-treetable-tbody{background:#fff}:host ::ng-deep .p-treetable .p-treetable-tbody>tr{background:#fff;color:var(--cps-color-text-dark);transition:box-shadow .2s}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.cps-treetable-row-selected{background-color:var(--cps-color-highlight-active)!important}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td{text-align:left;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem}:host ::ng-deep p-treetable:not(.cps-treetable-autolayout-calced) .p-treetable .p-treetable-tbody>tr>td{overflow:hidden}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){opacity:0;border-left-color:#fff}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable.p-treetable-striped .p-treetable-scrollable-body .p-treetable-tbody>tr:nth-child(odd)>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-bg-light)}:host ::ng-deep .cps-treetable-autolayout-calced .p-treetable .p-treetable-scrollable-body .p-treetable-tbody>tr:hover>td:not(.cps-treetable-row-toggler-cell):not(.cps-treetable-selectable-cell):not(.cps-treetable-row-menu-cell):not(.cps-treetable-empty-message-td){border-left-color:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:first-child{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 0}:host ::ng-deep .p-treetable-auto-layout table{table-layout:auto}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler{width:auto;height:auto;color:var(--cps-color-text-dark);border:0 none;background:transparent;border-radius:50%;margin-right:.5rem;padding:0}:host ::ng-deep .p-treetable-toggler{cursor:pointer;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;position:relative}:host ::ng-deep .p-ripple{overflow:hidden;position:relative}:host ::ng-deep .p-paginator-page:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-paginator-page{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:14px;font-family:Source Sans Pro,sans-serif;border-radius:6px}:host ::ng-deep input[type=button],:host ::ng-deep input[type=submit],:host ::ng-deep input[type=reset],:host ::ng-deep input[type=file]::-webkit-file-upload-button,:host ::ng-deep button{border-radius:0}:host ::ng-deep .p-treetable .p-treetable-tbody>tr:focus{outline:0 none;outline-offset:-.15rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover{color:var(--cps-color-calm);border-color:transparent;background:unset}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus{outline:0 none;outline-offset:0;box-shadow:unset}:host ::ng-deep .p-treetable .p-paginator{border-width:0 1px 1px 1px;border-radius:0}:host ::ng-deep .p-paginator{background:#fff;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:var(--cps-color-text-dark);padding:1rem;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-paginator-content-start{margin-right:auto}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page{display:inline-flex;align-items:center}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-table-paginator-items-per-page-title{font-family:Source Sans Pro,sans-serif;font-size:14px;margin-right:12px;cursor:default}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box{min-height:32px!important;background:transparent!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-items{font-size:14px!important}:host ::ng-deep .p-paginator-content-start .cps-table-paginator-itms-per-page .cps-select-box .cps-select-box-chevron .cps-icon{width:14px;height:14px}:host ::ng-deep .p-paginator .p-paginator-current{background-color:transparent;border:0 none;color:var(--cps-color-text-dark);min-width:3rem;margin:.143rem;padding:0 .5rem;font-family:Source Sans Pro,sans-serif;font-size:14px;height:unset}:host ::ng-deep .p-paginator-page,:host ::ng-deep .p-paginator-next,:host ::ng-deep .p-paginator-last,:host ::ng-deep .p-paginator-first,:host ::ng-deep .p-paginator-prev,:host ::ng-deep .p-paginator-current{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;-webkit-user-select:none;user-select:none;overflow:hidden;position:relative}:host ::ng-deep .p-paginator-current{cursor:default}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):hover,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-first:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-next:not(.p-disabled):not(.p-paginator-page-selected):active,:host ::ng-deep .p-paginator .p-paginator-last:not(.p-disabled):not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-first,:host ::ng-deep .p-paginator .p-paginator-prev,:host ::ng-deep .p-paginator .p-paginator-next,:host ::ng-deep .p-paginator .p-paginator-last{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-disabled,:host ::ng-deep .p-disabled *{cursor:default!important;pointer-events:none}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page.p-paginator-page-selected{background:var(--cps-color-calm);border-color:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):hover{background:var(--cps-color-highlight-hover);border-color:unset}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page:not(.p-paginator-page-selected):active{background:var(--cps-color-highlight-active)}:host ::ng-deep .p-paginator .p-paginator-pages .p-paginator-page{background-color:transparent;border:1px solid var(--cps-color-text-dark);border-radius:4px;color:var(--cps-color-text-dark);min-width:32px;height:32px;margin:.143rem;transition:box-shadow .2s}:host ::ng-deep .p-paginator-element:focus{z-index:1;position:relative}:host ::ng-deep span.p-paginator-icon,:host ::ng-deep span.p-paginator-first-icon,:host ::ng-deep span.p-paginator-prev-icon,:host ::ng-deep span.p-paginator-last-icon,:host ::ng-deep span.p-paginator-next-icon{display:contents}:host ::ng-deep .p-disabled,:host ::ng-deep .p-component:disabled{opacity:.4}:host ::ng-deep .cps-treetable-empty-message-td{text-align:center!important;font-weight:600;background:#fff}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-header{border-width:1px 1px 0 1px}:host ::ng-deep .p-treetable .p-treetable-header{font-weight:600;display:flex;justify-content:space-between;align-items:center;padding:0 10px!important;border:unset;background:unset;border-top:1px solid var(--cps-color-line-mid);border-right:1px solid var(--cps-color-line-mid);border-left:4px solid var(--cps-color-surprise)!important;border-radius:4px 4px 0 0;font-size:16px;line-height:150%;background-color:#fff;color:var(--cps-color-text-darkest);overflow:auto}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-global-filter{margin-left:12px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-icon{display:flex;margin-right:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-left .cps-treetable-tbar-title{cursor:default}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right{display:flex;align-items:center}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-btn-on-select{margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-action-btn{margin-right:4px;margin-left:8px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn{display:contents}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn cps-icon{margin-left:12px;margin-right:4px}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon{cursor:pointer}:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-coltoggle-btn:not(.btn-disabled) cps-icon:hover .cps-icon,:host ::ng-deep .p-treetable .p-treetable-header .cps-treetable-tbar-right .cps-treetable-tbar-reload-btn:not(.btn-disabled) cps-icon:hover .cps-icon{color:var(--cps-color-prepared)!important}:host ::ng-deep .cps-tbar-small.p-treetable .p-treetable-header{height:43px}:host ::ng-deep .cps-tbar-normal.p-treetable .p-treetable-header{height:72px}:host ::ng-deep .p-treetable .p-treetable-footer{background:#fff;color:#343a40;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;padding:1rem;font-weight:700}:host ::ng-deep .p-treetable .p-treetable-tfoot>tr>td{text-align:left;padding:1rem;border:1px solid var(--cps-color-line-mid);border-width:0 0 1px 0;font-weight:700;color:#343a40;background:#fff}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-up{border-bottom-color:var(--cps-color-text-mild)}:host ::ng-deep .p-treetable .p-sortable-column:not(.p-highlight):hover .cps-sortable-column-icon.sort-unsorted .sort-unsorted-arrow-down{border-top-color:var(--cps-color-text-mild)}:host ::ng-deep .p-icon-wrapper{display:inline-flex}:host ::ng-deep .p-icon{display:inline-block;width:1rem;height:1rem}:host ::ng-deep .p-treetable .p-sortable-column .cps-sortable-column-badge{display:inline-flex;align-items:center;justify-content:center;font-size:12px;vertical-align:top;color:var(--cps-color-calm);margin-left:.25rem}:host ::ng-deep .p-link{text-align:left;background-color:transparent;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column{cursor:pointer;-webkit-user-select:none;user-select:none}:host ::ng-deep .p-treetable .p-sortable-column:focus{box-shadow:none;outline:0 none}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler.p-icon{width:2rem;height:2rem}:host ::ng-deep .p-treetable .p-treetable-tbody>tr.p-highlight{background:#eff6ff;color:#1d4ed8}:host ::ng-deep .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-highlight):hover{background:var(--cps-color-highlight-hover)}:host ::ng-deep .p-treetable-hoverable-rows .p-treetable-tbody>tr{cursor:auto}:host ::ng-deep .p-treetable .p-column-resizer-helper{background:var(--cps-color-calm);width:1px}:host ::ng-deep .p-treetable .p-treetable-mask.p-overlay-mask{position:absolute;display:flex;align-items:center;justify-content:center;z-index:1001;top:0;left:0;width:100%;height:100%;background-color:#fff;transition-duration:.2s;border:1px solid var(--cps-color-line-mid)}:host ::ng-deep .p-treetable.cps-tbar-small .p-treetable-mask.p-overlay-mask{top:43px;height:calc(100% - 43px)}:host ::ng-deep .p-treetable.cps-tbar-normal .p-treetable-mask.p-overlay-mask{top:72px;height:calc(100% - 72px)}:host ::ng-deep .cps-treetable-loading .p-treetable{min-height:200px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-normal{min-height:272px}:host ::ng-deep .cps-treetable-loading .p-treetable.cps-tbar-small{min-height:243px}:host ::ng-deep .cps-table-col-filter-menu-open .cps-table-col-filter-menu-button{color:var(--cps-color-text-dark)}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-footer{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-top{border-width:0 1px 0 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-bottom{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th,:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-thead>tr>th{border-width:1px 0 1px 1px}:host ::ng-deep .p-treetable .p-treetable-thead>tr>th:last-child{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td{border-width:0 0 1px 1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tfoot>tr>td{border-width:1px}:host ::ng-deep .p-treetable.p-treetable-gridlines .p-treetable-tbody>tr>td:last-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td:only-child{border-width:0 1px 1px 1px}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-thead>tr>th{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tbody>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-sm .p-treetable-footer{padding:.5rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-thead>tr>th{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tbody>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-lg .p-treetable-footer{padding:1.25rem}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(odd){background:var(--cps-color-bg-light)}:host ::ng-deep .p-treetable.p-treetable-striped .p-treetable-tbody>tr:nth-child(2n){background:#fff}:host ::ng-deep .cps-treetable-row-menu-cell{width:55px;border-left:none!important}:host ::ng-deep .cps-treetable-selectable-cell{width:55px;text-align:center!important}:host ::ng-deep .p-checkbox{display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;vertical-align:bottom;position:relative;width:18px;height:18px}:host ::ng-deep .p-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host ::ng-deep .p-hidden-accessible input,:host ::ng-deep .p-hidden-accessible select{transform:scale(0)}:host ::ng-deep .p-checkbox .p-checkbox-box{background:#fff;width:18px;height:18px;color:var(--cps-color-text-dark);border:2px solid var(--cps-color-text-mild);border-radius:2px;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}:host ::ng-deep .p-checkbox-box{display:flex;justify-content:center;align-items:center}:host ::ng-deep .p-checkbox.p-checkbox-checked .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm)}:host ::ng-deep .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm);background:var(--cps-color-calm);color:#fff}:host ::ng-deep .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box{border-color:var(--cps-color-calm)}:host ::ng-deep .p-checkbox .p-checkbox-box .p-icon{width:14px;height:14px}:host ::ng-deep .p-checkbox .p-checkbox-box .p-checkbox-icon{transition-duration:.2s;color:#fff;font-size:14px}:host ::ng-deep .p-checkbox .p-checkbox-box minusicon .p-checkbox-icon{color:var(--cps-color-calm);width:12px}:host ::ng-deep .p-treetable .p-treetable-tbody>tr>td p-treetablecheckbox .p-checkbox{margin-right:0}::ng-deep .p-scrollbar-measure{width:100px;height:100px;overflow:scroll;position:absolute;top:-9999px}.cps-treetable-coltoggle-menu{display:block;max-height:242px;overflow-x:hidden;background:#fff}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item{padding:12px;justify-content:space-between;display:flex;cursor:pointer}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item:hover{background:var(--cps-color-highlight-hover)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-text-dark)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-left{display:flex;align-items:center;margin-right:8px}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check{background-color:transparent;border:0;width:16px;height:16px;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:8px;opacity:0}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item-check:after{color:var(--cps-color-calm);top:4px;left:1px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected{font-weight:600}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-label,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-label{color:var(--cps-color-calm)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected .cps-treetable-coltoggle-menu-item-check,.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.allselected .cps-treetable-coltoggle-menu-item-check{opacity:1}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected{background:var(--cps-color-highlight-selected)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.highlighten{background:var(--cps-color-highlight-active)}.cps-treetable-coltoggle-menu .cps-treetable-coltoggle-menu-item.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-treetable-coltoggle-menu .select-all-option{border-bottom:1px solid lightgrey;font-weight:600}::ng-deep .cps-select-options-menu.cps-paginator-page-options .cps-select-options-option{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]