cps-ui-kit 21.19.0 → 21.20.0

package/fesm2022/cps-ui-kit.mjs

@@ -184,6 +184,11 @@ const focusElement = (element) => {
         setTimeout(() => element.focus());
     }
 };
+const logMissingAriaLabelError = (componentName, label, ariaLabel) => {
+    if (!label?.trim() && !ariaLabel?.trim()) {
+        console.error(`${componentName}: unlabeled component must have an ariaLabel for accessibility.`);
+    }
+};
 
 const isSameDomain = (styleSheet, _window) => {
     if (!styleSheet.href) {
@@ -2326,6 +2331,7 @@ class CpsAutocompleteComponent {
             this.inputTextDebounced = this.inputText;
             this.inputChanged.emit(val);
         });
+        logMissingAriaLabelError('CpsAutocompleteComponent', this.label, this.ariaLabel);
     }
     ngOnChanges(changes) {
         if (changes.width) {
@@ -2342,9 +2348,7 @@ class CpsAutocompleteComponent {
             loadChanges.previousValue) {
             this._toggleOptions(true);
         }
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsAutocompleteComponent: unlabeled autocomplete component must have an ariaLabel for accessibility.');
-        }
+        logMissingAriaLabelError('CpsAutocompleteComponent', this.label, this.ariaLabel);
     }
     ngAfterViewInit() {
         this.resizeObserver.observe(this.autocompleteBox.nativeElement);
@@ -3179,17 +3183,16 @@ class CpsButtonToggleComponent {
         if (this.multiple && !this._value) {
             this._value = [];
         }
+        logMissingAriaLabelError('CpsButtonToggleComponent', this.label, this.ariaLabel);
     }
     ngOnChanges(changes) {
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsButtonToggleComponent: unlabeled button toggle component must have an ariaLabel for accessibility.');
-        }
         if (changes.options) {
             const hasInaccessibleOption = this.options.some((opt) => !opt.label?.trim() && !opt.ariaLabel?.trim());
             if (hasInaccessibleOption) {
                 console.error('CpsButtonToggleComponent: each unlabeled option must have an ariaLabel for accessibility.');
             }
         }
+        logMissingAriaLabelError('CpsButtonToggleComponent', this.label, this.ariaLabel);
     }
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setDisabledState(_disabled) { }
@@ -3403,6 +3406,9 @@ class CpsButtonComponent {
         this.classesList = [];
         this.enterActive = false;
     }
+    ngOnInit() {
+        logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
+    }
     ngOnChanges() {
         this.buttonColor = getCSSColor(this.color, this.document);
         this.borderRadius = convertSize(this.borderRadius);
@@ -3413,10 +3419,8 @@ class CpsButtonComponent {
         if (this.disabled || this.loading) {
             this.enterActive = false;
         }
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsButtonComponent: icon-only or unlabeled button must have an ariaLabel for accessibility.');
-        }
         this.setClasses();
+        logMissingAriaLabelError('CpsButtonComponent', this.label, this.ariaLabel);
     }
     setClasses() {
         this.classesList = ['cps-button'];
@@ -3629,11 +3633,10 @@ class CpsCheckboxComponent {
     }
     ngOnInit() {
         this.iconColor = getCSSColor(this.iconColor, this.document);
+        logMissingAriaLabelError('CpsCheckboxComponent', this.label, this.ariaLabel);
     }
     ngOnChanges() {
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
-        }
+        logMissingAriaLabelError('CpsCheckboxComponent', this.label, this.ariaLabel);
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -5323,6 +5326,7 @@ class CpsSelectComponent {
             this._checkErrors();
         });
         this.recalcVirtualListHeight();
+        logMissingAriaLabelError('CpsSelectComponent', this.label, this.ariaLabel);
     }
     ngOnChanges(changes) {
         if (changes.width) {
@@ -5337,9 +5341,7 @@ class CpsSelectComponent {
             });
             this.recalcVirtualListHeight();
         }
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsSelectComponent: unlabeled select component must have an ariaLabel for accessibility.');
-        }
+        logMissingAriaLabelError('CpsSelectComponent', this.label, this.ariaLabel);
     }
     ngAfterViewInit() {
         this.resizeObserver.observe(this.selectBox.nativeElement);
@@ -6186,11 +6188,10 @@ class CpsRadioGroupComponent {
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
+        logMissingAriaLabelError('CpsRadioGroupComponent', this.groupLabel, this.ariaLabel);
     }
     ngOnChanges() {
-        if (!this.groupLabel?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsRadioGroupComponent: unlabeled radio group component must have an ariaLabel for accessibility.');
-        }
+        logMissingAriaLabelError('CpsRadioGroupComponent', this.groupLabel, this.ariaLabel);
     }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
@@ -6799,6 +6800,11 @@ class CpsTimepickerComponent {
          * @group Props
          */
         this.label = '';
+        /**
+         * Aria label for the timepicker component, used for accessibility, it takes precedence over label.
+         * @group Props
+         */
+        this.ariaLabel = '';
         /**
          * Determines whether the timepicker is disabled.
          * @group Props
@@ -6906,6 +6912,7 @@ class CpsTimepickerComponent {
         this._statusChangesSubscription = this._control?.statusChanges?.subscribe(() => {
             this._checkErrors();
         });
+        logMissingAriaLabelError('CpsTimepickerComponent', this.label, this.ariaLabel);
     }
     ngAfterViewInit() {
         if (this.hoursField)
@@ -6915,6 +6922,9 @@ class CpsTimepickerComponent {
         if (this.secondsField)
             this.secondsField.isTimePickerField = true;
     }
+    ngOnChanges() {
+        logMissingAriaLabelError('CpsTimepickerComponent', this.label, this.ariaLabel);
+    }
     ngOnDestroy() {
         this._statusChangesSubscription?.unsubscribe();
     }
@@ -7077,7 +7087,7 @@ class CpsTimepickerComponent {
         return Array.from({ length: until + 1 - startFrom }, (_, k) => k + startFrom);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTimepickerComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], ngImport: i0, template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      ariaLabel=\"Hours\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span class=\"cps-timepicker-delimiter\">:</span>\n    }\n    @if (withSeconds) {\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"60\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-timepicker-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsTimepickerComponent, isStandalone: true, selector: "cps-timepicker", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", use24HourTime: "use24HourTime", withSeconds: "withSeconds", hint: "hint", hideDetails: "hideDetails", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", mandatoryValue: "mandatoryValue", value: "value" }, outputs: { valueChanged: "valueChanged", focused: "focused", blurred: "blurred" }, viewQueries: [{ propertyName: "hoursField", first: true, predicate: ["hoursField"], descendants: true }, { propertyName: "minutesField", first: true, predicate: ["minutesField"], descendants: true }, { propertyName: "secondsField", first: true, predicate: ["secondsField"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      [ariaLabel]=\"`Hours, ${ariaLabel || label}`\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"3.75rem\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-timepicker-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTimepickerComponent, decorators: [{
             type: Component,
@@ -7087,13 +7097,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsButtonToggleComponent,
                         CpsAutocompleteComponent,
                         CpsInfoCircleComponent
-                    ], template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      ariaLabel=\"Hours\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"60\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span class=\"cps-timepicker-delimiter\">:</span>\n    }\n    @if (withSeconds) {\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"60\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-timepicker-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:8px}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:10px;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:24px;margin:0 10px}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"] }]
+                    ], template: "<div class=\"cps-timepicker\">\n  @if (label) {\n    <div\n      class=\"cps-timepicker-label\"\n      [ngClass]=\"{ 'cps-timepicker-label-disabled': disabled }\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-timepicker-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div class=\"cps-timepicker-body\">\n    <cps-autocomplete\n      #hoursField\n      [ariaLabel]=\"`Hours, ${ariaLabel || label}`\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"hoursOptions\"\n      [withOptionsAliases]=\"!use24HourTime\"\n      [useOptionsAliasesWhenNoMatch]=\"true\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.hours\"\n      (valueChanged)=\"updateHours($event)\"\n      [externalError]=\"hoursError\"\n      placeholder=\"HH\"></cps-autocomplete>\n    <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n    <cps-autocomplete\n      #minutesField\n      ariaLabel=\"Minutes\"\n      (keypress)=\"numberOnly($event)\"\n      width=\"3.75rem\"\n      [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n      [options]=\"minutesOptions\"\n      [hideDetails]=\"true\"\n      [disabled]=\"disabled\"\n      [showChevron]=\"false\"\n      [showEmptyMessage]=\"false\"\n      (focused)=\"onFieldFocus()\"\n      (blurred)=\"onFieldBlur()\"\n      [returnObject]=\"false\"\n      [value]=\"value?.minutes\"\n      (valueChanged)=\"updateMinutes($event)\"\n      [externalError]=\"minutesError\"\n      placeholder=\"MM\"></cps-autocomplete>\n    @if (withSeconds) {\n      <span aria-hidden=\"true\" class=\"cps-timepicker-delimiter\">:</span>\n      <cps-autocomplete\n        #secondsField\n        ariaLabel=\"Seconds\"\n        (keypress)=\"numberOnly($event)\"\n        width=\"3.75rem\"\n        [emptyOptionIndex]=\"mandatoryValue ? 0 : -1\"\n        [options]=\"secondsOptions\"\n        [hideDetails]=\"true\"\n        [disabled]=\"disabled\"\n        [showChevron]=\"false\"\n        [showEmptyMessage]=\"false\"\n        (focused)=\"onFieldFocus()\"\n        (blurred)=\"onFieldBlur()\"\n        [returnObject]=\"false\"\n        [value]=\"value?.seconds\"\n        (valueChanged)=\"updateSeconds($event)\"\n        [externalError]=\"secondsError\"\n        placeholder=\"SS\"></cps-autocomplete>\n    }\n    @if (!use24HourTime) {\n      <cps-button-toggle\n        class=\"cps-timepicker-am-pm-selector\"\n        ariaLabel=\"Day period\"\n        [options]=\"dayPeriodOptions\"\n        [disabled]=\"disabled\"\n        [value]=\"value?.dayPeriod || 'AM'\"\n        (valueChanged)=\"updateDayPeriod($event)\">\n      </cps-button-toggle>\n    }\n  </div>\n  @if (!error && !hideDetails) {\n    <div class=\"cps-timepicker-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if (error && !hideDetails) {\n    <div class=\"cps-timepicker-error\">\n      {{ error }}\n    </div>\n  }\n</div>\n", styles: [":host .cps-timepicker{display:flex;flex-direction:column}:host .cps-timepicker .cps-timepicker-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);font-size:.875rem;font-weight:600}:host .cps-timepicker .cps-timepicker-label-info-circle{margin-left:.5rem}:host .cps-timepicker .cps-timepicker-label-disabled{color:var(--cps-color-text-mild)}:host .cps-timepicker-body{display:flex;flex-direction:row}:host .cps-timepicker-body .cps-timepicker-am-pm-selector{margin-left:.625rem;margin-top:0}:host .cps-timepicker-body .cps-timepicker-delimiter{color:var(--cps-color-text-lightest);font-size:1.5rem;margin:0 .625rem}:host .cps-timepicker .cps-timepicker-hint{color:var(--cps-color-text-mild);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-timepicker .cps-timepicker-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }] }], propDecorators: { label: [{
                 type: Input
+            }], ariaLabel: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], use24HourTime: [{
@@ -8396,7 +8408,7 @@ class CpsSchedulerComponent {
         return isNaN(res) ? 0 : res;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                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                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "ariaLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "ariaLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "ariaLabel", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
             type: Component,
@@ -8411,7 +8423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         CpsInputComponent,
                         CpsTimepickerComponent,
                         CpsAutocompleteComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                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                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            label=\"\"\n            data-testid=\"advanced-cron-input\"\n            [disabled]=\"disabled\"\n            width=\"500px\"\n            placeholder=\"Please enter\"\n            formControlName=\"advanced\"\n            (valueChanged)=\"regenerateCron()\">\n          </cps-input>\n        </form>\n      </div>\n    }\n  }\n\n  @if (cron && showTimeZone) {\n    <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n      <cps-autocomplete\n        label=\"Time zone\"\n        data-testid=\"timezone-select\"\n        [(ngModel)]=\"timeZone\"\n        (valueChanged)=\"onTimeZoneChanged($event)\"\n        [returnObject]=\"false\"\n        width=\"300\"\n        [options]=\"timeZoneOptions\">\n      </cps-autocomplete>\n    </div>\n  }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cps-scheduler-selector\">\n  <cps-button-toggle\n    data-testid=\"schedule-type-toggle\"\n    [options]=\"scheduleTypes\"\n    [disabled]=\"disabled\"\n    [label]=\"label\"\n    [infoTooltip]=\"infoTooltip\"\n    [(ngModel)]=\"activeScheduleType\"\n    (ngModelChange)=\"setActiveScheduleType($event)\">\n  </cps-button-toggle>\n</div>\n\n<div\n  class=\"cps-scheduler-container\"\n  [class.cps-scheduler-container-disabled]=\"disabled\">\n  @switch (activeScheduleType) {\n    @case ('Not set') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n    }\n\n    @case ('Minutes') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select minutes frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.minutes.minutes\"\n            [options]=\"selectOptions.minutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          minute(s)\n        </div>\n      </div>\n    }\n\n    @case ('Hourly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n        <div class=\"cps-scheduler-tab-pane-row\">\n          Every\n          <cps-select\n            ariaLabel=\"Select hours frequency\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-hours-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.hours\"\n            [options]=\"selectOptions.hours\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n          hour(s) on minute\n          <cps-select\n            ariaLabel=\"Select on which minute\"\n            width=\"70px\"\n            [disabled]=\"disabled\"\n            [returnObject]=\"false\"\n            [hideDetails]=\"true\"\n            data-testid=\"hourly-minutes-input\"\n            (valueChanged)=\"regenerateCron()\"\n            [(ngModel)]=\"state.hourly.minutes\"\n            [options]=\"selectOptions.fullMinutes\"\n            class=\"cps-scheduler-select-control\">\n          </cps-select>\n        </div>\n      </div>\n    }\n\n    @case ('Daily') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n        <cps-radio-group\n          ariaLabel=\"Daily schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.daily.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel: 'Repeat every N days at a specific time',\n              value: 'everyDays',\n              disabled: disabled\n            }\"\n            data-testid=\"daily-subtab-everyDays\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyDays'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select days frequency\"\n                width=\"70px\"\n                data-testid=\"daily-every-days-input\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.daily.everyDays.days\"\n                [options]=\"selectOptions.monthDays\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              day(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                data-testid=\"daily-timepicker\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyDays)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n          <cps-radio\n            data-testid=\"daily-subtab-everyWeekDay\"\n            [option]=\"{\n              ariaLabel: 'Repeat every working day at a specific time',\n              value: 'everyWeekDay',\n              disabled: disabled\n            }\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              data-testid=\"daily-weekday-config\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.daily.subTab !== 'everyWeekDay'\n              \">\n              Every working day at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.daily.everyWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Weekly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n        <div class=\"cps-scheduler-days-checkbox-group\">\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-MON\"\n            label=\"Monday\"\n            [(ngModel)]=\"state.weekly.MON\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-TUE\"\n            label=\"Tuesday\"\n            [(ngModel)]=\"state.weekly.TUE\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-WED\"\n            label=\"Wednesday\"\n            [(ngModel)]=\"state.weekly.WED\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-THU\"\n            label=\"Thursday\"\n            [(ngModel)]=\"state.weekly.THU\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-FRI\"\n            label=\"Friday\"\n            [(ngModel)]=\"state.weekly.FRI\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SAT\"\n            label=\"Saturday\"\n            [(ngModel)]=\"state.weekly.SAT\">\n          </cps-checkbox>\n          <cps-checkbox\n            (valueChanged)=\"regenerateCron()\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-SUN\"\n            label=\"Sunday\"\n            [(ngModel)]=\"state.weekly.SUN\">\n          </cps-checkbox>\n        </div>\n        <div class=\"cps-scheduler-tab-pane-row\">\n          at\n          <cps-timepicker\n            ariaLabel=\"Time\"\n            [disabled]=\"disabled\"\n            data-testid=\"weekly-timepicker\"\n            [use24HourTime]=\"use24HourTime\"\n            [mandatoryValue]=\"true\"\n            [value]=\"formatTimeValue(state.weekly)\"\n            [hideDetails]=\"true\"\n            (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n          </cps-timepicker>\n        </div>\n      </div>\n    }\n\n    @case ('Monthly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n        <cps-radio-group\n          ariaLabel=\"Monthly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.monthly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"monthly-day-select\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"70px\"\n                data-testid=\"monthly-months-input\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.monthly.specificDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"monthly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.monthly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat every N months on a weekday pattern from a chosen month at a chosen time',\n              value: 'specificWeekDay',\n              disabled: disabled\n            }\"\n            data-testid=\"monthly-subtab-specificWeekDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.monthly.subTab !== 'specificWeekDay'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"monthly-week-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"130px\"\n                data-testid=\"monthly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of every\n              <cps-select\n                ariaLabel=\"Select months frequency\"\n                width=\"90px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                data-testid=\"monthly-weekday-months-input\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n                [options]=\"selectOptions.monthsNumeric\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              month(s) starting in\n              <cps-select\n                ariaLabel=\"Select starting month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                data-testid=\"monthly-weekday-start-month-select\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.monthly.subTab !== 'specificWeekDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                data-testid=\"monthly-weekday-timepicker\"\n                [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.monthly.specificWeekDay)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Yearly') {\n      <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n        <cps-radio-group\n          ariaLabel=\"Yearly schedule frequency\"\n          [hideDetails]=\"true\"\n          [(ngModel)]=\"state.yearly.subTab\"\n          (valueChanged)=\"regenerateCron()\"\n          [vertical]=\"true\">\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected day at a chosen time, nearest weekday optional',\n              value: 'specificMonthDay',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthDay\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthDay'\n              \">\n              Every\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n                [options]=\"selectOptions.months\"\n                data-testid=\"yearly-month-select\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              on the\n              <cps-select\n                ariaLabel=\"Select day of month\"\n                width=\"120px\"\n                data-testid=\"yearly-day-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n                [options]=\"selectOptions.monthDaysWithLasts\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthDay)\n                \">\n              </cps-timepicker>\n              <cps-checkbox\n                data-testid=\"yearly-weekday-toggle\"\n                (valueChanged)=\"regenerateCron()\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthDay'\n                \"\n                label=\"During the nearest weekday\"\n                [(ngModel)]=\"state.yearly.runOnWeekday\"\n                class=\"cps-scheduler-nearest-weekday-checkbox\">\n              </cps-checkbox>\n            </div>\n          </cps-radio>\n\n          <cps-radio\n            [option]=\"{\n              ariaLabel:\n                'Repeat in a selected month on a selected weekday at a chosen time',\n              value: 'specificMonthWeek',\n              disabled: disabled\n            }\"\n            data-testid=\"yearly-subtab-specificMonthWeek\">\n            <div\n              class=\"cps-scheduler-tab-pane-row\"\n              [class.cps-scheduler-tab-pane-row-disabled]=\"\n                state.yearly.subTab !== 'specificMonthWeek'\n              \">\n              On the\n              <cps-select\n                ariaLabel=\"Select weekday occurrence\"\n                width=\"106px\"\n                data-testid=\"yearly-week-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n                [options]=\"selectOptions.monthWeeks\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              <cps-select\n                ariaLabel=\"Select weekday\"\n                width=\"120px\"\n                data-testid=\"yearly-weekday-select\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n                [options]=\"selectOptions.days\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              of\n              <cps-select\n                ariaLabel=\"Select month\"\n                width=\"120px\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [returnObject]=\"false\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"regenerateCron()\"\n                [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n                [options]=\"selectOptions.months\"\n                class=\"cps-scheduler-select-control\">\n              </cps-select>\n              at\n              <cps-timepicker\n                ariaLabel=\"Time\"\n                [disabled]=\"\n                  disabled || state.yearly.subTab !== 'specificMonthWeek'\n                \"\n                [use24HourTime]=\"use24HourTime\"\n                [mandatoryValue]=\"true\"\n                [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n                [hideDetails]=\"true\"\n                (valueChanged)=\"\n                  onTimeChanged($event, state.yearly.specificMonthWeek)\n                \">\n              </cps-timepicker>\n            </div>\n          </cps-radio>\n        </cps-radio-group>\n      </div>\n    }\n\n    @case ('Advanced') {\n      <div data-testid=\"advanced-config\">\n        <form [formGroup]=\"form\">\n          <cps-input\n            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: [{
@@ -8758,10 +8770,11 @@ class CpsTabComponent {
         this.badgeTooltip = '';
         this.active = false;
     }
+    ngOnInit() {
+        logMissingAriaLabelError('CpsTabComponent', this.label, this.ariaLabel);
+    }
     ngOnChanges() {
-        if (!this.label?.trim() && !this.ariaLabel?.trim()) {
-            console.error('CpsTabComponent: unlabeled tab component must have an ariaLabel for accessibility.');
-        }
+        logMissingAriaLabelError('CpsTabComponent', this.label, this.ariaLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CpsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CpsTabComponent, isStandalone: true, selector: "cps-tab", inputs: { label: "label", ariaLabel: "ariaLabel", icon: "icon", disabled: "disabled", tooltipText: "tooltipText", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent", badgeValue: "badgeValue", badgeTooltip: "badgeTooltip" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }