cps-ui-kit 21.4.0 → 21.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/cps-ui-kit.mjs
CHANGED
|
@@ -4784,6 +4784,11 @@ class CpsCheckboxComponent {
|
|
|
4784
4784
|
* @group Props
|
|
4785
4785
|
*/
|
|
4786
4786
|
this.label = '';
|
|
4787
|
+
/**
|
|
4788
|
+
* Aria label for the checkbox, used for accessibility, it takes precedence over label.
|
|
4789
|
+
* @group Props
|
|
4790
|
+
*/
|
|
4791
|
+
this.ariaLabel = '';
|
|
4787
4792
|
/**
|
|
4788
4793
|
* Determines whether checkbox is disabled.
|
|
4789
4794
|
* @group Props
|
|
@@ -4842,6 +4847,11 @@ class CpsCheckboxComponent {
|
|
|
4842
4847
|
ngOnInit() {
|
|
4843
4848
|
this.iconColor = getCSSColor(this.iconColor, this.document);
|
|
4844
4849
|
}
|
|
4850
|
+
ngOnChanges() {
|
|
4851
|
+
if (!this.label?.trim() && !this.ariaLabel?.trim()) {
|
|
4852
|
+
console.error('CpsCheckboxComponent: icon-only or unlabeled checkbox must have an ariaLabel for accessibility.');
|
|
4853
|
+
}
|
|
4854
|
+
}
|
|
4845
4855
|
registerOnChange(fn) {
|
|
4846
4856
|
this.onChange = fn;
|
|
4847
4857
|
}
|
|
@@ -4868,11 +4878,11 @@ class CpsCheckboxComponent {
|
|
|
4868
4878
|
this._elementRef?.nativeElement?.querySelector('input')?.focus();
|
|
4869
4879
|
}
|
|
4870
4880
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4871
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n <label
|
|
4881
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsCheckboxComponent, isStandalone: true, selector: "cps-checkbox", inputs: { label: "label", ariaLabel: "ariaLabel", disabled: "disabled", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", icon: "icon", iconColor: "iconColor", value: "value" }, outputs: { valueChanged: "valueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-checkbox-container\">\n <label class=\"cps-checkbox\" [class.cps-checkbox-disabled]=\"disabled\">\n <input\n type=\"checkbox\"\n class=\"cps-checkbox-input\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\"\n [attr.aria-label]=\"ariaLabel || label || null\" />\n <span class=\"cps-checkbox-indicator\" aria-hidden=\"true\"></span>\n @if (icon) {\n <cps-icon\n class=\"cps-checkbox-icon\"\n [icon]=\"icon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : iconColor\"\n aria-hidden=\"true\">\n </cps-icon>\n }\n @if (label) {\n <span class=\"cps-checkbox-label\">\n {{ label }}\n </span>\n }\n </label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-checkbox-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", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-checkbox-container .cps-checkbox-input{position:absolute;opacity:0;width:1.125rem;height:1.125rem;margin:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:1.125rem;height:1.125rem;border:.125rem solid var(--cps-color-text-medium);border-radius:.125rem}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:.625rem}:host .cps-checkbox-container .cps-checkbox-input:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox-input:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-light) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto}:host .cps-checkbox-container .cps-checkbox:not(.cps-checkbox-disabled):hover .cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator{border-color:var(--cps-color-calm);outline:none;position:relative}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before{inset:-.325rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{inset:-.45rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:.5rem}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
|
|
4872
4882
|
}
|
|
4873
4883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsCheckboxComponent, decorators: [{
|
|
4874
4884
|
type: Component,
|
|
4875
|
-
args: [{ imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n <label
|
|
4885
|
+
args: [{ imports: [CommonModule, CpsInfoCircleComponent, CpsIconComponent], selector: 'cps-checkbox', template: "<div class=\"cps-checkbox-container\">\n <label class=\"cps-checkbox\" [class.cps-checkbox-disabled]=\"disabled\">\n <input\n type=\"checkbox\"\n class=\"cps-checkbox-input\"\n [disabled]=\"disabled\"\n [checked]=\"value\"\n (change)=\"updateValueEvent($event)\"\n [attr.aria-label]=\"ariaLabel || label || null\" />\n <span class=\"cps-checkbox-indicator\" aria-hidden=\"true\"></span>\n @if (icon) {\n <cps-icon\n class=\"cps-checkbox-icon\"\n [icon]=\"icon\"\n size=\"small\"\n [color]=\"disabled ? 'text-mild' : iconColor\"\n aria-hidden=\"true\">\n </cps-icon>\n }\n @if (label) {\n <span class=\"cps-checkbox-label\">\n {{ label }}\n </span>\n }\n </label>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-checkbox-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", styles: [":host{min-width:max-content;display:inline-block}:host .cps-checkbox-container{line-height:normal;display:flex;align-items:center}:host .cps-checkbox-container .cps-checkbox{display:flex;align-items:center;font-size:1rem;font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400;color:var(--cps-color-text-dark);cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-checkbox-container .cps-checkbox-disabled{cursor:default;color:var(--cps-color-text-mild)}:host .cps-checkbox-container .cps-checkbox-input{position:absolute;opacity:0;width:1.125rem;height:1.125rem;margin:0}:host .cps-checkbox-container .cps-checkbox-indicator{position:relative;display:inline-block;width:1.125rem;height:1.125rem;border:.125rem solid var(--cps-color-text-medium);border-radius:.125rem}:host .cps-checkbox-container .cps-checkbox-label,:host .cps-checkbox-container .cps-checkbox-icon{margin-left:.625rem}:host .cps-checkbox-container .cps-checkbox-input:checked~.cps-checkbox-indicator{color:#fff;background:var(--cps-color-calm) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto;border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:disabled~.cps-checkbox-indicator{border-color:var(--cps-color-text-light)}:host .cps-checkbox-container .cps-checkbox-input:checked:disabled~.cps-checkbox-indicator{background:var(--cps-color-text-light) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgdmlld0JveD0iMCAwIDEyIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTQuNTc1IDguOTc3cy0uNDA0LS4wMDctLjUzNi0uMTY1TCAuMDU3IDUuNjRsLjgyOS0xLjIyN0w0LjQ3IDcuMjY4IDEwLjkyMS4wODZsLjkyMyAxLjEwMy02Ljg2MyA3LjY0Yy0uMTM0LS4wMDMtLjQwNi4xNDgtLjQwNi4xNDh6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+) 50% 40% no-repeat;background-size:.75rem auto}:host .cps-checkbox-container .cps-checkbox:not(.cps-checkbox-disabled):hover .cps-checkbox-indicator{border-color:var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator{border-color:var(--cps-color-calm);outline:none;position:relative}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before,:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:before{inset:-.325rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-checkbox-container .cps-checkbox-input:focus-visible~.cps-checkbox-indicator:after{inset:-.45rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-checkbox-container .cps-checkbox-info-circle{margin-left:.5rem}:host .cps-checkbox-container .cps-checkbox-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}\n"] }]
|
|
4876
4886
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
4877
4887
|
type: Self
|
|
4878
4888
|
}, {
|
|
@@ -4882,6 +4892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
4882
4892
|
args: [DOCUMENT]
|
|
4883
4893
|
}] }, { type: i0.ElementRef }], propDecorators: { label: [{
|
|
4884
4894
|
type: Input
|
|
4895
|
+
}], ariaLabel: [{
|
|
4896
|
+
type: Input
|
|
4885
4897
|
}], disabled: [{
|
|
4886
4898
|
type: Input
|
|
4887
4899
|
}], infoTooltip: [{
|
|
@@ -6294,7 +6306,7 @@ class CpsButtonToggleComponent {
|
|
|
6294
6306
|
return px / this._rootFontSizePx;
|
|
6295
6307
|
}
|
|
6296
6308
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6297
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", ariaLabel: "ariaLabel", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none
|
|
6309
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsButtonToggleComponent, isStandalone: true, selector: "cps-button-toggle", inputs: { label: "label", ariaLabel: "ariaLabel", options: "options", multiple: "multiple", disabled: "disabled", mandatory: "mandatory", equalWidths: "equalWidths", optionTooltipPosition: "optionTooltipPosition", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", _value: ["value", "_value"] }, outputs: { valueChanged: "valueChanged" }, providers: [CheckOptionSelectedPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option:hover{background:var(--cps-color-highlight-hover);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:active{background:var(--cps-color-highlight-active);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:focus-visible:not(.is-selected):not(:active){background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option:focus-visible{outline:none;position:relative}:host .cps-btn-toggle-content-option:focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-btn-toggle-content-option:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-btn-toggle-content-option:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-btn-toggle-content-option:focus-visible{z-index:1}:host .cps-btn-toggle-content-option.is-selected{background:var(--cps-color-calm);color:#fff}:host .cps-btn-toggle-content-option:disabled{background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild);cursor:default}:host .cps-btn-toggle-content-option:disabled.is-selected{background:var(--cps-color-bg-disabled-selected);color:var(--cps-color-text-medium);opacity:1}:host .cps-btn-toggle-option-wrapper:first-child .cps-btn-toggle-content-option{border-radius:.25rem 0 0 .25rem}:host .cps-btn-toggle-option-wrapper:last-child .cps-btn-toggle-content-option{border-radius:0 .25rem .25rem 0}:host .cps-btn-toggle-content-option-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
|
|
6298
6310
|
}
|
|
6299
6311
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsButtonToggleComponent, decorators: [{
|
|
6300
6312
|
type: Component,
|
|
@@ -6304,7 +6316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
6304
6316
|
CpsInfoCircleComponent,
|
|
6305
6317
|
CpsIconComponent,
|
|
6306
6318
|
CpsTooltipDirective
|
|
6307
|
-
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none
|
|
6319
|
+
], providers: [CheckOptionSelectedPipe], selector: 'cps-button-toggle', template: "<div class=\"cps-btn-toggle\">\n @if (label) {\n <div class=\"cps-btn-toggle-label\" [class.disabled]=\"disabled\">\n <span>{{ label }}</span>\n @if (infoTooltip) {\n <cps-info-circle\n class=\"cps-btn-toggle-label-info-circle\"\n size=\"xsmall\"\n [tooltipPosition]=\"infoTooltipPosition\"\n [tooltipContentClass]=\"infoTooltipClass\"\n [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n [tooltipPersistent]=\"infoTooltipPersistent\"\n [tooltipText]=\"infoTooltip\">\n </cps-info-circle>\n }\n </div>\n }\n <div\n class=\"cps-btn-toggle-content\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel || label || null\">\n @for (option of options; track option.value) {\n @if (option.tooltip) {\n <span\n class=\"cps-btn-toggle-option-wrapper\"\n [cpsTooltip]=\"option.tooltip\"\n tooltipCloseDelay=\"0\"\n [tooltipPosition]=\"optionTooltipPosition\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n @if (!option.tooltip) {\n <span class=\"cps-btn-toggle-option-wrapper\">\n <ng-container\n *ngTemplateOutlet=\"\n buttonTemplate;\n context: { option }\n \"></ng-container>\n </span>\n }\n }\n </div>\n</div>\n<ng-template #buttonTemplate let-option=\"option\">\n <button\n type=\"button\"\n class=\"cps-btn-toggle-content-option\"\n [class.is-selected]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [disabled]=\"option.disabled || disabled\"\n (click)=\"updateValueOnClick(option.value)\"\n [attr.aria-pressed]=\"\n option.value | checkOptionSelected: value : multiple : true : ''\n \"\n [attr.aria-label]=\"option.ariaLabel || option.label || null\"\n [style.min-width.rem]=\"equalWidths ? largestButtonWidthRem : null\">\n <span class=\"cps-btn-toggle-content-option-inner\">\n @if (option.icon) {\n <cps-icon [class.me-2]=\"!!option.label\" [icon]=\"option.icon\">\n </cps-icon>\n }\n @if (option.label) {\n <span>{{ option.label }}</span>\n }\n </span>\n </button>\n</ng-template>\n", styles: [":host .cps-btn-toggle{display:block}:host .cps-btn-toggle-label{color:var(--cps-color-text-dark);margin-bottom:.5rem;align-items:center;display:flex;font-weight:700;font-size:1rem;font-family:Source Sans Pro,sans-serif;cursor:default}:host .cps-btn-toggle-label.disabled{color:var(--cps-color-text-mild)}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle{margin-left:.5rem}:host .cps-btn-toggle-label .cps-btn-toggle-label-info-circle ::ng-deep cps-icon i{width:.875rem;height:.875rem}:host .cps-btn-toggle-content{display:flex;flex-wrap:nowrap}:host .cps-btn-toggle-option-wrapper{display:flex}:host .cps-btn-toggle-option-wrapper:not(:last-child) .cps-btn-toggle-content-option{border-right:0}:host .cps-btn-toggle-content-option{height:2.375rem;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;padding:.375rem .75rem;position:relative;border:.0625rem solid var(--cps-color-text-lightest);font-weight:400;font-size:1rem;font-family:Source Sans Pro,sans-serif;letter-spacing:.05em;color:var(--cps-color-text-dark);-webkit-user-select:none;user-select:none}:host .cps-btn-toggle-content-option:hover{background:var(--cps-color-highlight-hover);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:active{background:var(--cps-color-highlight-active);transition:background-color .2s ease}:host .cps-btn-toggle-content-option:focus-visible:not(.is-selected):not(:active){background:var(--cps-color-highlight-hover)}:host .cps-btn-toggle-content-option:focus-visible{outline:none;position:relative}:host .cps-btn-toggle-content-option:focus-visible:before,:host .cps-btn-toggle-content-option:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-btn-toggle-content-option:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-btn-toggle-content-option:focus-visible:after{inset:-.3125rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-btn-toggle-content-option:focus-visible{z-index:1}:host .cps-btn-toggle-content-option.is-selected{background:var(--cps-color-calm);color:#fff}:host .cps-btn-toggle-content-option:disabled{background:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild);cursor:default}:host .cps-btn-toggle-content-option:disabled.is-selected{background:var(--cps-color-bg-disabled-selected);color:var(--cps-color-text-medium);opacity:1}:host .cps-btn-toggle-option-wrapper:first-child .cps-btn-toggle-content-option{border-radius:.25rem 0 0 .25rem}:host .cps-btn-toggle-option-wrapper:last-child .cps-btn-toggle-content-option{border-radius:0 .25rem .25rem 0}:host .cps-btn-toggle-content-option-inner{display:flex;align-items:center;justify-content:center;width:100%;height:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
|
|
6308
6320
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
6309
6321
|
type: Self
|
|
6310
6322
|
}, {
|
|
@@ -13594,7 +13606,7 @@ class CpsSchedulerComponent {
|
|
|
13594
13606
|
return isNaN(res) ? 0 : res;
|
|
13595
13607
|
}
|
|
13596
13608
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSchedulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n <cps-button-toggle\n data-testid=\"schedule-type-toggle\"\n [options]=\"scheduleTypes\"\n [disabled]=\"disabled\"\n [label]=\"label\"\n [infoTooltip]=\"infoTooltip\"\n [(ngModel)]=\"activeScheduleType\"\n (ngModelChange)=\"setActiveScheduleType($event)\">\n </cps-button-toggle>\n</div>\n\n<div\n class=\"cps-scheduler-container\"\n [class.cps-scheduler-container-disabled]=\"disabled\">\n @switch (activeScheduleType) {\n @case ('Not set') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n }\n\n @case ('Minutes') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.minutes.minutes\"\n [options]=\"selectOptions.minutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n minute(s)\n </div>\n </div>\n }\n\n @case ('Hourly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-hours-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.hours\"\n [options]=\"selectOptions.hours\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n hour(s) on minute\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.minutes\"\n [options]=\"selectOptions.fullMinutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n </div>\n </div>\n }\n\n @case ('Daily') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.daily.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'everyDays', disabled: disabled }\"\n data-testid=\"daily-subtab-everyDays\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyDays'\n \">\n Every\n <cps-select\n width=\"70px\"\n data-testid=\"daily-every-days-input\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.daily.everyDays.days\"\n [options]=\"selectOptions.monthDays\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n day(s) at\n <cps-timepicker\n data-testid=\"daily-timepicker\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyDays)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n </cps-timepicker>\n </div>\n </cps-radio>\n <cps-radio\n data-testid=\"daily-subtab-everyWeekDay\"\n [option]=\"{ value: 'everyWeekDay', disabled: disabled }\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n data-testid=\"daily-weekday-config\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyWeekDay'\n \">\n Every working day at\n <cps-timepicker\n [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.daily.everyWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Weekly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n <div class=\"cps-scheduler-days-checkbox-group\">\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-MON\"\n label=\"Monday\"\n [(ngModel)]=\"state.weekly.MON\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-TUE\"\n label=\"Tuesday\"\n [(ngModel)]=\"state.weekly.TUE\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-WED\"\n label=\"Wednesday\"\n [(ngModel)]=\"state.weekly.WED\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-THU\"\n label=\"Thursday\"\n [(ngModel)]=\"state.weekly.THU\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-FRI\"\n label=\"Friday\"\n [(ngModel)]=\"state.weekly.FRI\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SAT\"\n label=\"Saturday\"\n [(ngModel)]=\"state.weekly.SAT\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SUN\"\n label=\"Sunday\"\n [(ngModel)]=\"state.weekly.SUN\">\n </cps-checkbox>\n </div>\n <div class=\"cps-scheduler-tab-pane-row\">\n at\n <cps-timepicker\n [disabled]=\"disabled\"\n data-testid=\"weekly-timepicker\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.weekly)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n </cps-timepicker>\n </div>\n </div>\n }\n\n @case ('Monthly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.monthly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificDay'\n \">\n On the\n <cps-select\n width=\"120px\"\n data-testid=\"monthly-day-select\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"70px\"\n data-testid=\"monthly-months-input\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) at\n <cps-timepicker\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.monthly.specificDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"monthly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.monthly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificWeekDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificWeekDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificWeekDay'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"monthly-week-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"130px\"\n data-testid=\"monthly-weekday-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"90px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n data-testid=\"monthly-weekday-months-input\"\n [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) starting in\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"monthly-weekday-start-month-select\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n data-testid=\"monthly-weekday-timepicker\"\n [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Yearly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.yearly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificMonthDay', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthDay'\n \">\n Every\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n [options]=\"selectOptions.months\"\n data-testid=\"yearly-month-select\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n on the\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-day-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"yearly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.yearly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificMonthWeek', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthWeek\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthWeek'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"yearly-week-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-weekday-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthWeek)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Advanced') {\n <div data-testid=\"advanced-config\">\n <form [formGroup]=\"form\">\n <cps-input\n label=\"\"\n data-testid=\"advanced-cron-input\"\n [disabled]=\"disabled\"\n width=\"500px\"\n placeholder=\"Please enter\"\n formControlName=\"advanced\"\n (valueChanged)=\"regenerateCron()\">\n </cps-input>\n </form>\n </div>\n }\n }\n\n @if (cron && showTimeZone) {\n <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n <cps-autocomplete\n label=\"Time zone\"\n data-testid=\"timezone-select\"\n [(ngModel)]=\"timeZone\"\n (valueChanged)=\"onTimeZoneChanged($event)\"\n [returnObject]=\"false\"\n width=\"300\"\n [options]=\"timeZoneOptions\">\n </cps-autocomplete>\n </div>\n }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "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 }); }
|
|
13609
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsSchedulerComponent, isStandalone: true, selector: "cps-scheduler", inputs: { label: "label", cron: "cron", timeZone: "timeZone", showNotSet: "showNotSet", showAdvanced: "showAdvanced", showMinutes: "showMinutes", showTimeZone: "showTimeZone", defaultTime: "defaultTime", use24HourTime: "use24HourTime", disabled: "disabled", infoTooltip: "infoTooltip" }, outputs: { cronChange: "cronChange", timeZoneChange: "timeZoneChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cps-scheduler-selector\">\n <cps-button-toggle\n data-testid=\"schedule-type-toggle\"\n [options]=\"scheduleTypes\"\n [disabled]=\"disabled\"\n [label]=\"label\"\n [infoTooltip]=\"infoTooltip\"\n [(ngModel)]=\"activeScheduleType\"\n (ngModelChange)=\"setActiveScheduleType($event)\">\n </cps-button-toggle>\n</div>\n\n<div\n class=\"cps-scheduler-container\"\n [class.cps-scheduler-container-disabled]=\"disabled\">\n @switch (activeScheduleType) {\n @case ('Not set') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"not-set-config\"></div>\n }\n\n @case ('Minutes') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"minutes-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.minutes.minutes\"\n [options]=\"selectOptions.minutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n minute(s)\n </div>\n </div>\n }\n\n @case ('Hourly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"hourly-config\">\n <div class=\"cps-scheduler-tab-pane-row\">\n Every\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-hours-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.hours\"\n [options]=\"selectOptions.hours\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n hour(s) on minute\n <cps-select\n width=\"70px\"\n [disabled]=\"disabled\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"hourly-minutes-input\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.hourly.minutes\"\n [options]=\"selectOptions.fullMinutes\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n </div>\n </div>\n }\n\n @case ('Daily') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"daily-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.daily.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'everyDays', disabled: disabled }\"\n data-testid=\"daily-subtab-everyDays\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyDays'\n \">\n Every\n <cps-select\n width=\"70px\"\n data-testid=\"daily-every-days-input\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.daily.everyDays.days\"\n [options]=\"selectOptions.monthDays\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n day(s) at\n <cps-timepicker\n data-testid=\"daily-timepicker\"\n [disabled]=\"disabled || state.daily.subTab !== 'everyDays'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyDays)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.daily.everyDays)\">\n </cps-timepicker>\n </div>\n </cps-radio>\n <cps-radio\n data-testid=\"daily-subtab-everyWeekDay\"\n [option]=\"{ value: 'everyWeekDay', disabled: disabled }\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n data-testid=\"daily-weekday-config\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.daily.subTab !== 'everyWeekDay'\n \">\n Every working day at\n <cps-timepicker\n [disabled]=\"disabled || state.daily.subTab !== 'everyWeekDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.daily.everyWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.daily.everyWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Weekly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"weekly-config\">\n <div class=\"cps-scheduler-days-checkbox-group\">\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-MON\"\n label=\"Monday\"\n [(ngModel)]=\"state.weekly.MON\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-TUE\"\n label=\"Tuesday\"\n [(ngModel)]=\"state.weekly.TUE\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-WED\"\n label=\"Wednesday\"\n [(ngModel)]=\"state.weekly.WED\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-THU\"\n label=\"Thursday\"\n [(ngModel)]=\"state.weekly.THU\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-FRI\"\n label=\"Friday\"\n [(ngModel)]=\"state.weekly.FRI\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SAT\"\n label=\"Saturday\"\n [(ngModel)]=\"state.weekly.SAT\">\n </cps-checkbox>\n <cps-checkbox\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled\"\n data-testid=\"weekly-SUN\"\n label=\"Sunday\"\n [(ngModel)]=\"state.weekly.SUN\">\n </cps-checkbox>\n </div>\n <div class=\"cps-scheduler-tab-pane-row\">\n at\n <cps-timepicker\n [disabled]=\"disabled\"\n data-testid=\"weekly-timepicker\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.weekly)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"onTimeChanged($event, state.weekly)\">\n </cps-timepicker>\n </div>\n </div>\n }\n\n @case ('Monthly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"monthly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.monthly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificDay'\n \">\n On the\n <cps-select\n width=\"120px\"\n data-testid=\"monthly-day-select\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"70px\"\n data-testid=\"monthly-months-input\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) at\n <cps-timepicker\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.monthly.specificDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"monthly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"disabled || state.monthly.subTab !== 'specificDay'\"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.monthly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificWeekDay', disabled: disabled }\"\n data-testid=\"monthly-subtab-specificWeekDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.monthly.subTab !== 'specificWeekDay'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"monthly-week-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"130px\"\n data-testid=\"monthly-weekday-select\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of every\n <cps-select\n width=\"90px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n data-testid=\"monthly-weekday-months-input\"\n [(ngModel)]=\"state.monthly.specificWeekDay.months\"\n [options]=\"selectOptions.monthsNumeric\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n month(s) starting in\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n data-testid=\"monthly-weekday-start-month-select\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.monthly.subTab !== 'specificWeekDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n data-testid=\"monthly-weekday-timepicker\"\n [value]=\"formatTimeValue(state.monthly.specificWeekDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.monthly.specificWeekDay)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Yearly') {\n <div class=\"cps-scheduler-tab-pane\" data-testid=\"yearly-config\">\n <cps-radio-group\n [hideDetails]=\"true\"\n [(ngModel)]=\"state.yearly.subTab\"\n (valueChanged)=\"regenerateCron()\"\n [vertical]=\"true\">\n <cps-radio\n [option]=\"{ value: 'specificMonthDay', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthDay\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthDay'\n \">\n Every\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.month\"\n [options]=\"selectOptions.months\"\n data-testid=\"yearly-month-select\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n on the\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-day-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthDay.day\"\n [options]=\"selectOptions.monthDaysWithLasts\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthDay)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthDay)\n \">\n </cps-timepicker>\n <cps-checkbox\n data-testid=\"yearly-weekday-toggle\"\n (valueChanged)=\"regenerateCron()\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthDay'\n \"\n label=\"During the nearest weekday\"\n [(ngModel)]=\"state.yearly.runOnWeekday\"\n class=\"cps-scheduler-nearest-weekday-checkbox\">\n </cps-checkbox>\n </div>\n </cps-radio>\n\n <cps-radio\n [option]=\"{ value: 'specificMonthWeek', disabled: disabled }\"\n data-testid=\"yearly-subtab-specificMonthWeek\">\n <div\n class=\"cps-scheduler-tab-pane-row\"\n [class.cps-scheduler-tab-pane-row-disabled]=\"\n state.yearly.subTab !== 'specificMonthWeek'\n \">\n On the\n <cps-select\n width=\"106px\"\n data-testid=\"yearly-week-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\n [options]=\"selectOptions.monthWeeks\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n <cps-select\n width=\"120px\"\n data-testid=\"yearly-weekday-select\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\n [options]=\"selectOptions.days\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n of\n <cps-select\n width=\"120px\"\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [returnObject]=\"false\"\n [hideDetails]=\"true\"\n (valueChanged)=\"regenerateCron()\"\n [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\n [options]=\"selectOptions.months\"\n class=\"cps-scheduler-select-control\">\n </cps-select>\n at\n <cps-timepicker\n [disabled]=\"\n disabled || state.yearly.subTab !== 'specificMonthWeek'\n \"\n [use24HourTime]=\"use24HourTime\"\n [mandatoryValue]=\"true\"\n [value]=\"formatTimeValue(state.yearly.specificMonthWeek)\"\n [hideDetails]=\"true\"\n (valueChanged)=\"\n onTimeChanged($event, state.yearly.specificMonthWeek)\n \">\n </cps-timepicker>\n </div>\n </cps-radio>\n </cps-radio-group>\n </div>\n }\n\n @case ('Advanced') {\n <div data-testid=\"advanced-config\">\n <form [formGroup]=\"form\">\n <cps-input\n label=\"\"\n data-testid=\"advanced-cron-input\"\n [disabled]=\"disabled\"\n width=\"500px\"\n placeholder=\"Please enter\"\n formControlName=\"advanced\"\n (valueChanged)=\"regenerateCron()\">\n </cps-input>\n </form>\n </div>\n }\n }\n\n @if (cron && showTimeZone) {\n <div class=\"cps-scheduler-time-zone\" data-testid=\"timezone-selector\">\n <cps-autocomplete\n label=\"Time zone\"\n data-testid=\"timezone-select\"\n [(ngModel)]=\"timeZone\"\n (valueChanged)=\"onTimeZoneChanged($event)\"\n [returnObject]=\"false\"\n width=\"300\"\n [options]=\"timeZoneOptions\">\n </cps-autocomplete>\n </div>\n }\n</div>\n", styles: [":host .cps-scheduler-selector{margin-bottom:24px}:host .cps-scheduler-container{margin-top:10px;margin-left:16px}:host .cps-scheduler-container .cps-scheduler-select-control{margin-left:8px;margin-right:8px}:host .cps-scheduler-container .cps-scheduler-days-checkbox-group{max-width:700px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-template-rows:1fr 1fr;grid-gap:20px;margin-bottom:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane{margin-bottom:28px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-radio-group ::ng-deep .cps-radio-group-content{margin-left:0!important}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row{display:flex;align-items:center}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-tab-pane-row-disabled{color:var(--cps-color-text-light)}:host .cps-scheduler-container .cps-scheduler-tab-pane .cps-scheduler-nearest-weekday-checkbox{margin-left:16px}:host .cps-scheduler-container .cps-scheduler-tab-pane cps-timepicker{margin-left:8px}:host .cps-scheduler-container-disabled{color:var(--cps-color-text-light)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CpsButtonToggleComponent, selector: "cps-button-toggle", inputs: ["label", "ariaLabel", "options", "multiple", "disabled", "mandatory", "equalWidths", "optionTooltipPosition", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsSelectComponent, selector: "cps-select", inputs: ["label", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "chips", "closableChips", "clearable", "openOnClear", "options", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "optionIcon", "optionIconColor", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "virtualScroll", "numToleratedItems", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "optionsClass", "appearance", "showChevron", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsRadioGroupComponent, selector: "cps-radio-group", inputs: ["options", "groupLabel", "vertical", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "hint", "hideDetails", "value"], outputs: ["valueChanged", "blurred", "focused"] }, { kind: "component", type: CpsRadioComponent, selector: "cps-radio", inputs: ["option"] }, { kind: "component", type: CpsCheckboxComponent, selector: "cps-checkbox", inputs: ["label", "ariaLabel", "disabled", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "icon", "iconColor", "value"], outputs: ["valueChanged"] }, { kind: "component", type: CpsInputComponent, selector: "cps-input", inputs: ["label", "hint", "placeholder", "disabled", "readonly", "width", "type", "loading", "clearable", "prefixIcon", "prefixIconClickable", "prefixIconSize", "prefixText", "hideDetails", "persistentClear", "error", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "valueToDisplay", "value"], outputs: ["valueChanged", "focused", "prefixIconClicked", "blurred", "cleared", "enterClicked"] }, { kind: "component", type: CpsTimepickerComponent, selector: "cps-timepicker", inputs: ["label", "disabled", "use24HourTime", "withSeconds", "hint", "hideDetails", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "mandatoryValue", "value"], outputs: ["valueChanged", "focused", "blurred"] }, { kind: "component", type: CpsAutocompleteComponent, selector: "cps-autocomplete", inputs: ["label", "ariaLabel", "placeholder", "hint", "returnObject", "multiple", "disabled", "width", "selectAll", "showChevron", "withOptionsAliases", "useOptionsAliasesWhenNoMatch", "optionAlias", "chips", "closableChips", "clearable", "openOnClear", "keepInitialOrder", "optionLabel", "optionValue", "optionInfo", "hideDetails", "persistentClear", "prefixIcon", "prefixIconSize", "loading", "loadingMessage", "showLoadingMessage", "emptyMessage", "showEmptyMessage", "virtualScroll", "numToleratedItems", "externalError", "infoTooltip", "infoTooltipClass", "infoTooltipMaxWidth", "infoTooltipPersistent", "infoTooltipPosition", "appearance", "emptyOptionIndex", "inputChangeDebounceTime", "validating", "value", "options"], outputs: ["valueChanged", "inputChanged", "focused", "blurred"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13598
13610
|
}
|
|
13599
13611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsSchedulerComponent, decorators: [{
|
|
13600
13612
|
type: Component,
|