cps-ui-kit 21.6.0 → 21.8.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,9 +1,9 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, ElementRef, SecurityContext, HostListener, Directive, Pipe, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Self, Optional, HostBinding, input, computed, numberAttribute, Injectable, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf, signal } from '@angular/core';
+import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, SecurityContext, HostListener, Directive, Pipe, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Self, Optional, HostBinding, numberAttribute, booleanAttribute, Injectable, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf, signal } from '@angular/core';
 import * as i1$2 from '@angular/forms';
-import { FormsModule, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Validators, FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 import { isEqual, cloneDeep } from 'lodash-es';
@@ -65,13 +65,18 @@ const getComputedLabel = (context) => {
         parts.push(context.label.trim().replace(/\.*$/, '.')); // ensure single period
     }
     // Add error if exists and not hidden
-    const errorText = context.error || context.externalError;
+    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());
+    }
+};
 
 const isSameDomain = (styleSheet, _window) => {
     if (!styleSheet.href) {
@@ -452,69 +457,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  * @group Components
  */
 class CpsProgressLinearComponent {
-    // eslint-disable-next-line no-useless-constructor
-    constructor(document) {
-        this.document = document;
+    constructor() {
         /**
          * Width of the progress bar, of type number denoting pixels or string.
          * @group Props
+         * @default 100%
          */
-        this.width = '100%';
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /**
          * Height of the progress bar, of type number denoting pixels or string.
          * @group Props
+         * @default 0.5rem
          */
-        this.height = '0.5rem';
+        this.height = input('0.5rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
         /**
          * Color of the progress bar.
          * @group Props
+         * @default var(--cps-accent-primary)
          */
-        this.color = 'var(--cps-accent-primary)';
+        this.color = input('var(--cps-accent-primary)', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Background color of the progress bar.
          * @group Props
+         * @default white
          */
-        this.bgColor = 'white';
+        this.bgColor = input('white', ...(ngDevMode ? [{ debugName: "bgColor" }] : /* istanbul ignore next */ []));
         /**
          * Option to control the opacity of the progress bar.
          * @group Props
+         * @default 1
          */
-        this.opacity = 1;
+        this.opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
         /**
          * Border radius of the progress bar, of type number denoting pixels or string.
          * @group Props
+         * @default 0
          */
-        this.radius = 0;
-    }
-    ngOnInit() {
-        this.width = convertSize(this.width);
-        this.height = convertSize(this.height);
-        this.radius = convertSize(this.radius);
-        this.color = getCSSColor(this.color, this.document);
-        this.bgColor = getCSSColor(this.bgColor, this.document);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: "width", height: "height", color: "color", bgColor: "bgColor", opacity: "opacity", radius: "radius" }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+        this.radius = input(0, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+        this.document = inject(DOCUMENT);
+        this.cvtWidth = computed(() => convertSize(this.width()), ...(ngDevMode ? [{ debugName: "cvtWidth" }] : /* istanbul ignore next */ []));
+        this.cvtHeight = computed(() => convertSize(this.height()), ...(ngDevMode ? [{ debugName: "cvtHeight" }] : /* istanbul ignore next */ []));
+        this.cvtRadius = computed(() => convertSize(this.radius()), ...(ngDevMode ? [{ debugName: "cvtRadius" }] : /* istanbul ignore next */ []));
+        this.cssColor = computed(() => getCSSColor(this.color(), this.document), ...(ngDevMode ? [{ debugName: "cssColor" }] : /* istanbul ignore next */ []));
+        this.cssBgColor = computed(() => getCSSColor(this.bgColor(), this.document), ...(ngDevMode ? [{ debugName: "cssBgColor" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: CpsProgressLinearComponent, isStandalone: true, selector: "cps-progress-linear", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"cps-progress-linear\"\n  [style.max-width]=\"cvtWidth()\"\n  [style.height]=\"cvtHeight()\"\n  [style.border-radius]=\"cvtRadius()\"\n  [style.background]=\"cssBgColor()\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsProgressLinearComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule], selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [ngStyle]=\"{\n    'max-width': width,\n    height: height,\n    'border-radius': radius,\n    background: bgColor\n  }\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"color\"\n    [style.opacity]=\"opacity\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], opacity: [{
-                type: Input
-            }], radius: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cps-progress-linear', template: "<div\n  class=\"cps-progress-linear\"\n  [style.max-width]=\"cvtWidth()\"\n  [style.height]=\"cvtHeight()\"\n  [style.border-radius]=\"cvtRadius()\"\n  [style.background]=\"cssBgColor()\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }] } });
 
 /**
  * CpsTooltipDirective provides advisory information for a target element.
@@ -2112,11 +2105,13 @@ class CpsAutocompleteComponent {
         this.activeSingle = false;
         this.recalcVirtualListHeight();
     }
+    get isRequired() {
+        return this._control?.control?.hasValidator(Validators.required) ?? false;
+    }
     get computedLabel() {
         return getComputedLabel({
             label: this.ariaLabel || this.label,
-            error: this.error,
-            externalError: this.externalError,
+            error: this.error || this.externalError,
             hideDetails: this.hideDetails
         });
     }
@@ -2395,7 +2390,7 @@ class CpsAutocompleteComponent {
         return px / this._rootFontSizePx;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\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 &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\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]=\"optionHighlightedIndex === 0\"\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              [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\">\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    [attr.aria-invalid]=\"error || externalError ? true : null\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [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      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{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:.375rem}: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-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{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-mild);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-medium)}.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", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\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 &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\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]=\"optionHighlightedIndex === 0\"\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              [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]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [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      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{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:.375rem}: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-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{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-mild);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-medium)}.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", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
@@ -2410,7 +2405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\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 &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\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]=\"optionHighlightedIndex === 0\"\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              [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\">\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    [attr.aria-invalid]=\"error || externalError ? true : null\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [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      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{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:.375rem}: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-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{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-mild);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-medium)}.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    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\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 &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\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]=\"optionHighlightedIndex === 0\"\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              [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]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [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      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{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:.375rem}: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-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{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-mild);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-medium)}.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
                 }, {
@@ -2547,10 +2542,11 @@ class CpsButtonToggleComponent {
     get value() {
         return this._value;
     }
-    constructor(_control, document, renderer) {
+    constructor(_control, document, renderer, cdr) {
         this._control = _control;
         this.document = document;
         this.renderer = renderer;
+        this.cdr = cdr;
         /**
          * Label of the button toggle component.
          * @group Props
@@ -2643,7 +2639,10 @@ class CpsButtonToggleComponent {
         }
         this._rootFontSizePx = parseFloat(getComputedStyle(this.document.documentElement).fontSize || '16');
         if (this.document?.fonts?.ready) {
-            this.document.fonts.ready.then(() => this._setEqualWidths());
+            this.document.fonts.ready.then(() => {
+                this._setEqualWidths();
+                this.cdr.markForCheck();
+            });
         }
         else {
             this._setEqualWidths();
@@ -2733,7 +2732,7 @@ class CpsButtonToggleComponent {
     _pxToRem(px) {
         return px / this._rootFontSizePx;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", ariaLabel: "ariaLabel", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n  @if (label) {\n    <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n      <span>{{ label }}</span>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-btn-toggle-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-btn-toggle-content\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel || label || null\">\n    @for (option of options; track option.value) {\n      @if (option.tooltip) {\n        <span\n          class=\"cps-btn-toggle-option-wrapper\"\n          [cpsTooltip]=\"option.tooltip\"\n          tooltipCloseDelay=\"0\"\n          [tooltipPosition]=\"optionTooltipPosition\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              buttonTemplate;\n              context: { option }\n            \"></ng-container>\n        </span>\n      }\n      @if (!option.tooltip) {\n        <span class=\"cps-btn-toggle-option-wrapper\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              buttonTemplate;\n              context: { option }\n            \"></ng-container>\n        </span>\n      }\n    }\n  </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n  <button\n    type=\"button\"\n    class=\"cps-btn-toggle-content-option\"\n    [class.is-selected]=\"\n      option.value | checkOptionSelected: value : multiple : true : ''\n    \"\n    [disabled]=\"option.disabled || disabled\"\n    (click)=\"updateValueOnClick(option.value)\"\n    [attr.aria-pressed]=\"\n      option.value | checkOptionSelected: value : multiple : true : ''\n    \"\n    [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n    [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n    <span class=\"cps-btn-toggle-content-option-inner\">\n      @if (option.icon) {\n        <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n        </cps-icon>\n      }\n      @if (option.label) {\n        <span>{{ option.label }}</span>\n      }\n    </span>\n  </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option:hover{background:var(--cps-color-highlight-hover);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:active{background:var(--cps-color-highlight-active);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:focus-visible:not(.is-selected):not(:active){background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option:focus-visible{outline:none;position:relative}:host .cps-btn-toggle-content-option:focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-btn-toggle-content-option:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-btn-toggle-content-option:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-btn-toggle-content-option:focus-visible{z-index:1}:host .cps-btn-toggle-content-option.is-selected{background:var(--cps-color-calm);color:#fff}:host .cps-btn-toggle-content-option:disabled{background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild);cursor:default}:host .cps-btn-toggle-content-option:disabled.is-selected{background:var(--cps-color-bg-disabled-selected);color:var(--cps-color-text-medium);opacity:1}:host .cps-btn-toggle-option-wrapper:first-child .cps-btn-toggle-content-option{border-radius:.25rem 0 0 .25rem}:host .cps-btn-toggle-option-wrapper:last-child .cps-btn-toggle-content-option{border-radius:0 .25rem .25rem 0}:host .cps-btn-toggle-content-option-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
@@ -2752,7 +2751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }], propDecorators: { label: [{
+                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], ariaLabel: [{
                 type: Input
@@ -3925,21 +3924,25 @@ class CpsDividerComponent {
         /**
          * Determines whether the divider is vertically aligned.
          * @group Props
+         * @default false
          */
         this.vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
         /**
          * Color of the divider.
          * @group Props
+         * @default line-mid
          */
         this.color = input('line-mid', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         /**
          * Type of the divider.
          * @group Props
+         * @default solid
          */
         this.type = input('solid', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * Thickness of the divider, a number denoting pixels or a string.
          * @group Props
+         * @default 1px
          */
         this.thickness = input('1px', ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
         this.borderTop = computed(() => {
@@ -4190,15 +4193,20 @@ class CpsFileUploadComponent {
          */
         this.fileDesc = 'Any file';
         /**
-         * Width of the component, a number denoting pixels or a string.
+         * Aria label for the component, used for accessibility.
          * @group Props
          */
-        this.width = '100%';
+        this.ariaLabel = 'Upload file';
         /**
          * Expected file info block, explaining some extra stuff about file.
          * @group Props
          */
         this.fileInfo = '';
+        /**
+         * Whether the component is disabled.
+         * @group Props
+         */
+        this.disabled = false;
         /**
          * Callback for uploaded file processing.
          * @group Props
@@ -4214,6 +4222,12 @@ class CpsFileUploadComponent {
          * @group Props
          */
         this.fileNameTooltipOffset = 12;
+        /**
+         * Width of the component, a number denoting pixels or a string.
+         * @group Props
+         * @default 100%
+         */
+        this.width = input('100%', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         /**
          * Callback to invoke when file is uploaded.
          * @param {File} File
@@ -4226,6 +4240,24 @@ class CpsFileUploadComponent {
          * @group Emits
          */
         this.fileUploadFailed = new EventEmitter();
+        /**
+         * Callback to invoke when file is processed.
+         * @param {File} File
+         * @group Emits
+         */
+        this.fileProcessed = new EventEmitter();
+        /**
+         * Callback to invoke when file processing fails.
+         * @param {string} - file name
+         * @group Emits
+         */
+        this.fileProcessingFailed = new EventEmitter();
+        /**
+         * Callback to invoke when file processing is cancelled.
+         * @param {string} - file name
+         * @group Emits
+         */
+        this.fileProcessingCancelled = new EventEmitter();
         /**
          * Callback to invoke when uploaded file is removed.
          * @param {string} - file name
@@ -4235,18 +4267,60 @@ class CpsFileUploadComponent {
         this.isDragoverFile = false;
         this.extensionsString = '';
         this.extensionsStringAsterisks = '';
-        this.cvtWidth = '';
+        this.cvtWidth = computed(() => convertSize(this.width()), ...(ngDevMode ? [{ debugName: "cvtWidth" }] : /* istanbul ignore next */ []));
         this.isProcessingFile = false;
+        this.errorMessage = '';
+        this.dragCounter = 0;
+        this.cancelProcessing$ = new Subject();
     }
     ngOnInit() {
         this.updateExtensionsString();
-        this.cvtWidth = convertSize(this.width);
+    }
+    ngOnDestroy() {
+        this.cancelProcessing$.next();
+        this.cancelProcessing$.complete();
     }
     ngOnChanges(changes) {
         if (changes.extensions) {
             this.updateExtensionsString();
         }
     }
+    resetState() {
+        this.cancelFileProcessing();
+        this.errorMessage = '';
+        this.dragCounter = 0;
+        this.isDragoverFile = false;
+    }
+    openFilePicker() {
+        if (this.isProcessingFile)
+            return;
+        this.fileInput?.nativeElement.click();
+    }
+    onDragEnter() {
+        this.dragCounter++;
+        this.isDragoverFile = true;
+    }
+    onDragLeave() {
+        this.dragCounter--;
+        if (this.dragCounter <= 0) {
+            this.isDragoverFile = false;
+            this.dragCounter = 0;
+        }
+    }
+    onDragEnd() {
+        this.dragCounter = 0;
+        this.isDragoverFile = false;
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragoverFile = true;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragCounter = 0;
+        this.isDragoverFile = false;
+        this.tryUploadFile(event);
+    }
     updateExtensionsString() {
         this.extensions = this.extensions.map((ext) => ext.startsWith('.') ? ext.toLowerCase() : '.' + ext.toLowerCase());
         this.extensionsString = this.extensions.join(', ');
@@ -4257,7 +4331,10 @@ class CpsFileUploadComponent {
     tryUploadFile(event) {
         event.preventDefault();
         event.stopPropagation();
+        if (this.isProcessingFile)
+            return;
         this.isDragoverFile = false;
+        this.errorMessage = '';
         let file;
         if (event.type === 'drop') {
             file = event.dataTransfer?.files.item(0) ?? undefined;
@@ -4269,6 +4346,7 @@ class CpsFileUploadComponent {
             file = files.item(0) ?? undefined;
         }
         if (!this._isFileExtensionValid(file)) {
+            this.errorMessage = 'Unsupported file type';
             this.fileUploadFailed.emit(file?.name ?? '');
             return;
         }
@@ -4278,23 +4356,53 @@ class CpsFileUploadComponent {
             if (this.fileProcessingCallback) {
                 this.isProcessingFile = true;
                 this.fileProcessingCallback(this.uploadedFile)
-                    .pipe(take(1), catchError(() => {
+                    .pipe(take(1), takeUntil(this.cancelProcessing$), catchError(() => {
                     return of(false);
                 }))
                     .subscribe((res) => {
-                    if (!res)
-                        this.removeUploadedFile();
                     this.isProcessingFile = false;
+                    if (res) {
+                        this.fileProcessed.emit(this.uploadedFile);
+                    }
+                    else {
+                        this.errorMessage = 'File processing failed';
+                        this.fileProcessingFailed.emit(this.uploadedFile?.name ?? '');
+                        this.removeUploadedFile();
+                    }
                 });
             }
         }
     }
+    onRemoveUploadedFile(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.removeUploadedFile();
+        focusElement(this.dropzoneButton?.nativeElement);
+    }
+    onCancelFileProcessing(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelFileProcessing();
+        focusElement(this.dropzoneButton?.nativeElement);
+    }
+    cancelFileProcessing() {
+        this.cancelProcessing$.next();
+        this.isProcessingFile = false;
+        const name = this.uploadedFile?.name;
+        if (name) {
+            this.fileProcessingCancelled.emit(name);
+        }
+        this.removeUploadedFile();
+    }
     removeUploadedFile() {
-        const name = this.uploadedFile?.name ?? '';
+        const name = this.uploadedFile?.name;
         this.uploadedFile = undefined;
-        this.uploadedFileRemoved.emit(name);
-        if (this.fileInput) {
-            this.fileInput.nativeElement.value = '';
+        if (name) {
+            this.uploadedFileRemoved.emit(name);
+        }
+        const inputEl = this.fileInput?.nativeElement;
+        if (inputEl) {
+            inputEl.value = '';
         }
     }
     _isFileExtensionValid(file) {
@@ -4303,14 +4411,10 @@ class CpsFileUploadComponent {
         if (this.extensions.length < 1)
             return true;
         const fileNameLowerCase = file.name.toLowerCase();
-        for (const ext of this.extensions) {
-            if (fileNameLowerCase.endsWith(ext))
-                return true;
-        }
-        return false;
+        return this.extensions.some((ext) => fileNameLowerCase.endsWith(ext));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: "extensions", fileDesc: "fileDesc", width: "width", fileInfo: "fileInfo", fileProcessingCallback: "fileProcessingCallback", fileNameTooltipPosition: "fileNameTooltipPosition", fileNameTooltipOffset: ["fileNameTooltipOffset", "fileNameTooltipOffset", numberAttribute] }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon color=\"calm\" icon=\"info-circle\" size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"isProcessingFile ? 'warn' : 'success'\">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!isProcessingFile) {\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-remove-icon\"\n            icon=\"remove\"\n            color=\"error\"\n            (click)=\"removeUploadedFile()\">\n          </cps-icon>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:16px;font-size:1rem}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 60px)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer;flex-shrink:0;margin-left:8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\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: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: false, isRequired: false, transformFunction: null }, fileDesc: { classPropertyName: "fileDesc", publicName: "fileDesc", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, fileInfo: { classPropertyName: "fileInfo", publicName: "fileInfo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fileProcessingCallback: { classPropertyName: "fileProcessingCallback", publicName: "fileProcessingCallback", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipPosition: { classPropertyName: "fileNameTooltipPosition", publicName: "fileNameTooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipOffset: { classPropertyName: "fileNameTooltipOffset", publicName: "fileNameTooltipOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", fileProcessed: "fileProcessed", fileProcessingFailed: "fileProcessingFailed", fileProcessingCancelled: "fileProcessingCancelled", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "dropzoneButton", first: true, predicate: ["dropzoneButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-file-upload .sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, decorators: [{
             type: Component,
@@ -4319,15 +4423,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CpsIconComponent,
                         CpsProgressLinearComponent,
                         CpsTooltipDirective
-                    ], template: "<div class=\"cps-file-upload\" [ngStyle]=\"{ width: cvtWidth }\">\n  <div\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-uploads': uploadedFile?.name\n    }\"\n    (dragend)=\"isDragoverFile = false\"\n    (dragenter)=\"isDragoverFile = true\"\n    (dragleave)=\"isDragoverFile = false\"\n    (dragover)=\"isDragoverFile = true\"\n    (mouseleave)=\"isDragoverFile = false\"\n    (drop)=\"tryUploadFile($event)\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      title=\"\" />\n    <cps-icon icon=\"export\" size=\"large\" color=\"text-darkest\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon color=\"calm\" icon=\"info-circle\" size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"isProcessingFile ? 'warn' : 'success'\">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!isProcessingFile) {\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-remove-icon\"\n            icon=\"remove\"\n            color=\"error\"\n            (click)=\"removeUploadedFile()\">\n          </cps-icon>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload .cps-file-upload-dropzone{font-family:Source Sans Pro,sans-serif;min-height:20px;padding:2rem;text-align:center;border:2px dashed var(--cps-color-calm);position:relative;border-radius:1rem}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-uploads{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:1px dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;width:100%;height:100%;top:0;left:0}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:16px;margin:8px 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:18px;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:16px;font-size:1rem}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-2px;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:2px dashed var(--cps-color-calm);border-left:2px dashed var(--cps-color-calm);border-right:2px dashed var(--cps-color-calm);border-bottom-right-radius:16px;border-bottom-left-radius:16px;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:8px 12px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:20px;margin:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 60px)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon{cursor:pointer;flex-shrink:0;margin-left:8px}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}\n"] }]
+                    ], template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-file-upload .sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
         }], propDecorators: { extensions: [{
                 type: Input
             }], fileDesc: [{
                 type: Input
-            }], width: [{
+            }], ariaLabel: [{
                 type: Input
             }], fileInfo: [{
                 type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], fileProcessingCallback: [{
                 type: Input
             }], fileNameTooltipPosition: [{
@@ -4335,15 +4442,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }], fileNameTooltipOffset: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], fileUploaded: [{
+            }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fileUploaded: [{
                 type: Output
             }], fileUploadFailed: [{
                 type: Output
+            }], fileProcessed: [{
+                type: Output
+            }], fileProcessingFailed: [{
+                type: Output
+            }], fileProcessingCancelled: [{
+                type: Output
             }], uploadedFileRemoved: [{
                 type: Output
             }], fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
+            }], dropzoneButton: [{
+                type: ViewChild,
+                args: ['dropzoneButton']
             }] } });
 
 /**
@@ -5194,14 +5310,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 }]
         }] });
 
-let nextUniqueId = 0;
 /**
  * CpsRadioButtonComponent is an internal radio button component.
  * @group Components
  */
 class CpsRadioButtonComponent {
     constructor() {
-        this._uniqueId = `cps-radio-button-${++nextUniqueId}`;
+        /**
+         * Name attribute for the radio input, used to group buttons within the same radio group.
+         * @group Props
+         */
+        this.groupName = '';
         /**
          * Determines whether the radio button is checked.
          * @group Props
@@ -5230,15 +5349,18 @@ class CpsRadioButtonComponent {
          * @group Emits
          */
         this.focused = new EventEmitter();
+        this.inputId = generateUniqueId('cps-radio-button-input');
     }
-    get inputId() {
-        return `${this._uniqueId}-input`;
+    ngOnChanges() {
+        if (!this.option.label?.trim() && !this.option.ariaLabel?.trim()) {
+            console.error('CpsRadioButtonComponent: unlabeled radio button component must have an ariaLabel for accessibility.');
+        }
     }
     updateValue(event) {
         event.preventDefault();
-        if (this.option?.disabled)
+        if (this.option.disabled)
             return;
-        this.updateValueEvent.emit(this.option?.value);
+        this.updateValueEvent.emit(this.option.value);
     }
     onBlur() {
         this.blurred.emit();
@@ -5247,12 +5369,14 @@ class CpsRadioButtonComponent {
         this.focused.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent", blurred: "blurred", focused: "focused" }, ngImport: i0, template: "@if (option?.tooltip) {\n  <div\n    class=\"cps-radio-group-content-button\"\n    [cpsTooltip]=\"option?.tooltip || ''\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n}\n@if (!option?.tooltip) {\n  <div class=\"cps-radio-group-content-button\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n}\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    [id]=\"inputId\"\n    type=\"radio\"\n    [disabled]=\"option.disabled || groupDisabled\"\n    [value]=\"option.value\"\n    [checked]=\"checked\"\n    (change)=\"updateValue($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n  <div #contentRef class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  @if (!contentRef.innerHTML.trim()) {\n    <label\n      [for]=\"inputId\"\n      class=\"cps-radio-group-content-button-label\"\n      [ngStyle]=\"{\n        cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n      }\"\n      >{{ option.label }}\n    </label>\n  }\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsRadioButtonComponent, isStandalone: true, selector: "cps-radio-button", inputs: { groupName: "groupName", option: "option", checked: "checked", groupDisabled: "groupDisabled" }, outputs: { updateValueEvent: "updateValueEvent", blurred: "blurred", focused: "focused" }, usesOnChanges: true, ngImport: i0, template: "@if (option.tooltip) {\n  <div\n    class=\"cps-radio-group-content-button\"\n    [cpsTooltip]=\"option.tooltip || ''\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n} @else {\n  <div class=\"cps-radio-group-content-button\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n}\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <span class=\"cps-radio-input-wrapper\">\n    <input\n      type=\"radio\"\n      [id]=\"inputId\"\n      [name]=\"groupName\"\n      [attr.aria-label]=\"option.ariaLabel || null\"\n      [disabled]=\"option.disabled || groupDisabled\"\n      [value]=\"option.value\"\n      [checked]=\"checked\"\n      (change)=\"updateValue($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\" />\n  </span>\n  <div\n    #contentRef\n    class=\"content\"\n    [attr.inert]=\"!checked || option.disabled || groupDisabled ? '' : null\">\n    <ng-content></ng-content>\n  </div>\n  @if (!contentRef.innerHTML.trim() && option.label) {\n    <label\n      class=\"cps-radio-group-content-button-label\"\n      [for]=\"inputId\"\n      [style.cursor]=\"option.disabled || groupDisabled ? 'default' : 'pointer'\"\n      >{{ option.label }}\n    </label>\n  }\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-medium);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center;position:absolute;inset:0}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-light);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button input[type=radio]:focus-visible{outline:none}:host .cps-radio-group-content-button .cps-radio-input-wrapper{display:block;position:relative;width:1.25rem;height:1.25rem;flex-shrink:0}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible){outline:none;position:relative}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):before,:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):after{content:\"\";position:absolute;border-radius:50%}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):before{inset:-.1875rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-radio-group-content-button:has(input:disabled) .cps-radio-group-content-button-label{color:var(--cps-color-text-mild)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioButtonComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsTooltipDirective], selector: 'cps-radio-button', template: "@if (option?.tooltip) {\n  <div\n    class=\"cps-radio-group-content-button\"\n    [cpsTooltip]=\"option?.tooltip || ''\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n}\n@if (!option?.tooltip) {\n  <div class=\"cps-radio-group-content-button\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n}\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <input\n    [id]=\"inputId\"\n    type=\"radio\"\n    [disabled]=\"option.disabled || groupDisabled\"\n    [value]=\"option.value\"\n    [checked]=\"checked\"\n    (change)=\"updateValue($event)\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\" />\n  <div #contentRef class=\"content\">\n    <ng-content></ng-content>\n  </div>\n  @if (!contentRef.innerHTML.trim()) {\n    <label\n      [for]=\"inputId\"\n      class=\"cps-radio-group-content-button-label\"\n      [ngStyle]=\"{\n        cursor: option.disabled || groupDisabled ? 'default' : 'pointer'\n      }\"\n      >{{ option.label }}\n    </label>\n  }\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-mild);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-lightest);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-lightest)}:host .cps-radio-group-content-button input[type=radio]:disabled+.cps-radio-group-content-button-label{color:var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"] }]
-        }], propDecorators: { option: [{
+            args: [{ imports: [CommonModule, CpsTooltipDirective], selector: 'cps-radio-button', template: "@if (option.tooltip) {\n  <div\n    class=\"cps-radio-group-content-button\"\n    [cpsTooltip]=\"option.tooltip || ''\"\n    tooltipCloseDelay=\"0\"\n    tooltipPosition=\"bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n} @else {\n  <div class=\"cps-radio-group-content-button\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        optionRadioTemplate;\n        context: {\n          option: option\n        }\n      \"></ng-container>\n  </div>\n}\n\n<ng-template #optionRadioTemplate let-option=\"option\">\n  <span class=\"cps-radio-input-wrapper\">\n    <input\n      type=\"radio\"\n      [id]=\"inputId\"\n      [name]=\"groupName\"\n      [attr.aria-label]=\"option.ariaLabel || null\"\n      [disabled]=\"option.disabled || groupDisabled\"\n      [value]=\"option.value\"\n      [checked]=\"checked\"\n      (change)=\"updateValue($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\" />\n  </span>\n  <div\n    #contentRef\n    class=\"content\"\n    [attr.inert]=\"!checked || option.disabled || groupDisabled ? '' : null\">\n    <ng-content></ng-content>\n  </div>\n  @if (!contentRef.innerHTML.trim() && option.label) {\n    <label\n      class=\"cps-radio-group-content-button-label\"\n      [for]=\"inputId\"\n      [style.cursor]=\"option.disabled || groupDisabled ? 'default' : 'pointer'\"\n      >{{ option.label }}\n    </label>\n  }\n</ng-template>\n", styles: [":host .cps-radio-group-content-button{display:grid;grid-template-columns:1rem auto;align-items:center;gap:.75rem}:host .cps-radio-group-content-button-label{font-size:1rem;color:var(--cps-color-text-dark);font-style:normal;font-weight:400;line-height:1rem}:host .cps-radio-group-content-button input[type=radio]{-webkit-appearance:none;appearance:none;background-color:transparent;margin:0;cursor:pointer;font:inherit;color:var(--cps-color-text-medium);width:1.25rem;height:1.25rem;border:.15rem solid currentColor;border-radius:50%;display:grid;place-content:center;position:absolute;inset:0}:host .cps-radio-group-content-button input[type=radio]:hover,:host .cps-radio-group-content-button input[type=radio]:checked{color:var(--cps-color-calm)}:host .cps-radio-group-content-button input[type=radio]:disabled{color:var(--cps-color-text-light);cursor:default}:host .cps-radio-group-content-button input[type=radio]:before{content:\"\";width:1.25rem;height:1.25rem;border-radius:50%;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1rem 1rem var(--cps-color-calm);background-color:CanvasText}:host .cps-radio-group-content-button input[type=radio][disabled]:before{box-shadow:inset 1rem 1rem var(--cps-color-text-light)}:host .cps-radio-group-content-button input[type=radio]:checked:before{transform:scale(.5)}:host .cps-radio-group-content-button input[type=radio]:focus-visible{outline:none}:host .cps-radio-group-content-button .cps-radio-input-wrapper{display:block;position:relative;width:1.25rem;height:1.25rem;flex-shrink:0}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible){outline:none;position:relative}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):before,:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):after{content:\"\";position:absolute;border-radius:50%}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):before{inset:-.1875rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-radio-group-content-button .cps-radio-input-wrapper:has(input:focus-visible):after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-radio-group-content-button:has(input:disabled) .cps-radio-group-content-button-label{color:var(--cps-color-text-mild)}:host .cps-radio-group-content-button .cps-radio-group-content-button-label{-webkit-user-select:none;user-select:none}:host .cps-radio-group-content-button .content:empty{display:none}\n"] }]
+        }], propDecorators: { groupName: [{
+                type: Input
+            }], option: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -5296,6 +5420,11 @@ class CpsRadioGroupComponent {
          * @group Props
          */
         this.groupLabel = '';
+        /**
+         * Aria label for the radio group, used for accessibility, it takes precedence over groupLabel.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Determines whether the radio group should be vertical.
          * @group Props
@@ -5359,6 +5488,7 @@ class CpsRadioGroupComponent {
          * @group Emits
          */
         this.focused = new EventEmitter();
+        this.groupName = generateUniqueId('cps-radio-group');
         this._value = undefined;
         this.error = '';
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -5374,6 +5504,11 @@ class CpsRadioGroupComponent {
             this._checkErrors();
         });
     }
+    ngOnChanges() {
+        if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
+            console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
+        }
+    }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
     }
@@ -5406,6 +5541,16 @@ class CpsRadioGroupComponent {
         this._control?.control?.markAsTouched();
         this.focused.emit();
     }
+    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;
@@ -5427,12 +5572,12 @@ class CpsRadioGroupComponent {
         this.error = message || 'Unknown error';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioGroupComponent, 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.8", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", hint: "hint", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged", blurred: "blurred", focused: "focused" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsRadioGroupComponent, isStandalone: true, selector: "cps-radio-group", inputs: { options: "options", groupLabel: "groupLabel", ariaLabel: "ariaLabel", vertical: "vertical", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", hint: "hint", hideDetails: "hideDetails", value: "value" }, outputs: { valueChanged: "valueChanged", blurred: "blurred", focused: "focused" }, providers: [
             {
                 provide: CPS_RADIO_GROUP,
                 useExisting: CpsRadioGroupComponent
             }
-        ], ngImport: i0, template: "<div class=\"cps-radio-group\">\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    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!contentRef.innerHTML.trim()) {\n    <div\n      class=\"cps-radio-group-content\"\n      [ngClass]=\"\n        vertical\n          ? 'cps-radio-group-content-vertical'\n          : 'cps-radio-group-content-horizontal'\n      \">\n      @for (option of options; track option) {\n        <cps-radio-button\n          [option]=\"option\"\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\">\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:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}: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:4px;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:4px;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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["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]=\"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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioGroupComponent, decorators: [{
             type: Component,
@@ -5441,7 +5586,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                             provide: CPS_RADIO_GROUP,
                             useExisting: CpsRadioGroupComponent
                         }
-                    ], template: "<div class=\"cps-radio-group\">\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    [ngClass]=\"\n      vertical\n        ? 'cps-radio-group-content-vertical'\n        : 'cps-radio-group-content-horizontal'\n    \">\n    <ng-content></ng-content>\n  </div>\n\n  @if (!contentRef.innerHTML.trim()) {\n    <div\n      class=\"cps-radio-group-content\"\n      [ngClass]=\"\n        vertical\n          ? 'cps-radio-group-content-vertical'\n          : 'cps-radio-group-content-horizontal'\n      \">\n      @for (option of options; track option) {\n        <cps-radio-button\n          [option]=\"option\"\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\">\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:8px}:host .cps-radio-group-label .cps-radio-group-label-info-circle ::ng-deep cps-icon i{width:14px;height:14px}: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:4px;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:4px;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]=\"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"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -5450,6 +5595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                 type: Input
             }], groupLabel: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], vertical: [{
                 type: Input
             }], disabled: [{
@@ -5494,11 +5641,11 @@ class CpsRadioComponent {
         this.radioGroup?.updateValueEvent(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsRadioComponent, deps: [{ token: CPS_RADIO_GROUP, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { option: "option" }, ngImport: i0, template: "<cps-radio-button\n  [option]=\"option\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: CpsRadioButtonComponent, selector: "cps-radio-button", inputs: ["option", "checked", "groupDisabled"], outputs: ["updateValueEvent", "blurred", "focused"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsRadioComponent, isStandalone: true, selector: "cps-radio", inputs: { option: "option" }, ngImport: i0, template: "<cps-radio-button\n  [option]=\"option\"\n  [groupName]=\"radioGroup?.groupName || ''\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ 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.8", ngImport: i0, type: CpsRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cps-radio', imports: [CpsRadioButtonComponent], template: "<cps-radio-button\n  [option]=\"option\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'cps-radio', imports: [CpsRadioButtonComponent], template: "<cps-radio-button\n  [option]=\"option\"\n  [groupName]=\"radioGroup?.groupName || ''\"\n  [groupDisabled]=\"groupDisabled\"\n  [checked]=\"radioGroup?.value == option.value\"\n  (updateValueEvent)=\"updateValueEvent($event)\">\n  <ng-content></ng-content>\n</cps-radio-button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: CpsRadioGroupComponent, decorators: [{
                     type: Optional
                 }, {
@@ -7540,7 +7687,7 @@ class CpsSchedulerComponent {
         return isNaN(res) ? 0 : res;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", 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            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            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            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          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{ value: 'everyDays', disabled: disabled }\"\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                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                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]=\"{ value: 'everyWeekDay', disabled: disabled }\">\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                [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            [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          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{ value: 'specificDay', disabled: disabled }\"\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                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                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                [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]=\"{ value: 'specificWeekDay', disabled: disabled }\"\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                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                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                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                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                [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          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{ value: 'specificMonthDay', disabled: disabled }\"\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                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                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                [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]=\"{ value: 'specificMonthWeek', disabled: disabled }\"\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                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                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                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                [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", "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", "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", "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.8", 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            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            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            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                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                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                [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            [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                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                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                [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                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                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                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                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                [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                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                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                [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                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                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                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                [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", "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", "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.8", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
             type: Component,
@@ -7555,7 +7702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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            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            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            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          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{ value: 'everyDays', disabled: disabled }\"\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                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                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]=\"{ value: 'everyWeekDay', disabled: disabled }\">\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                [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            [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          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{ value: 'specificDay', disabled: disabled }\"\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                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                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                [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]=\"{ value: 'specificWeekDay', disabled: disabled }\"\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                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                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                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                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                [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          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{ value: 'specificMonthDay', disabled: disabled }\"\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                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                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                [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]=\"{ value: 'specificMonthWeek', disabled: disabled }\"\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                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                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                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                [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            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            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            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                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                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                [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            [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                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                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                [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                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                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                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                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                [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                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                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                [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                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                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                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                [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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], cron: [{