@datarailsshared/datarailsshared 1.6.391 → 1.6.395

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -17223,10 +17223,13 @@ const addOrdinalSuffix = (num) => {
     const v = num % 100;
     return num + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
 };
-const DAY_OF_MONTH_ARRAY = new Array(28).fill(null).map((v, i) => ({
-    label: addOrdinalSuffix(i + 1),
-    value: i + 1,
-}));
+const DAY_OF_MONTH_ARRAY = [
+    ...new Array(28).fill(null).map((_, i) => ({
+        label: addOrdinalSuffix(i + 1),
+        value: i + 1,
+    })),
+    { label: 'the last', value: 'L' },
+];
 class CronEditor {
     set value(value) {
         this.parseCronString(value);
@@ -17295,7 +17298,7 @@ class CronEditor {
             // Case 3: If `hour` is "*", set it to 0
             hour = [0];
         }
-        dayOfMonth = this.parseCronArray(dayOfMonth);
+        dayOfMonth = dayOfMonth === 'L' ? ['L'] : this.parseCronArray(dayOfMonth);
         month = this.parseCronArray(month);
         dayOfWeek = this.parseCronArray(dayOfWeek);
         timeZone = timeZone ? Number(timeZone) : 0;
@@ -17362,16 +17365,24 @@ class CronEditor {
     getReadableString() {
         let visibleString = 'Every ';
         switch (this.every) {
-            case CronEditorPeriod.YEAR:
-                visibleString += `${MONTH_OF_YEAR_ARRAY[this.month - 1].label} ${DAY_OF_MONTH_ARRAY[this.dayOfMonth - 1].label} `;
+            case CronEditorPeriod.YEAR: {
+                const monthLabel = MONTH_OF_YEAR_ARRAY[this.month - 1].label;
+                visibleString +=
+                    this.dayOfMonth === 'L'
+                        ? `last day of ${monthLabel} `
+                        : `${monthLabel} ${DAY_OF_MONTH_ARRAY[this.dayOfMonth - 1]?.label} `;
                 break;
-            case CronEditorPeriod.QUARTER:
+            }
+            case CronEditorPeriod.QUARTER: {
                 const month = MONTH_OF_QUARTER_ARRAY[this.month - 1].label;
-                const day = DAY_OF_MONTH_ARRAY[this.dayOfMonth - 1].label;
-                visibleString += `quarter on the ${month} month of the quarter on ${day} day `;
+                visibleString +=
+                    this.dayOfMonth === 'L'
+                        ? `quarter on the last day of the ${month} month of the quarter `
+                        : `quarter on the ${month} month of the quarter on ${DAY_OF_MONTH_ARRAY[this.dayOfMonth - 1]?.label} day `;
                 break;
+            }
             case CronEditorPeriod.MONTH:
-                visibleString += `month on day ${this.dayOfMonth} `;
+                visibleString += this.dayOfMonth === 'L' ? `month on the last day ` : `month on day ${this.dayOfMonth} `;
                 break;
             case CronEditorPeriod.WEEK:
                 const dow = typeof this.dayOfWeek === 'number' ? this.dayOfWeek : 0;
@@ -17956,14 +17967,14 @@ class DrCronFieldComponent {
                     useExisting: forwardRef((() => DrCronFieldComponent)),
                     multi: true,
                 },
-            ]), i0.ɵɵInputTransformsFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 2, consts: [["data-analytics", "dr-cron-field_input-main", "aria-label", "Schedule", "placeholder", "Select...", 3, "id", "ngModel", "drPopover", "drPopoverPosition", "disabled", "readonly", "click", "ngModelChange", 4, "ngIf", "ngIfElse"], ["recurrencePopover", ""], ["cronConfiguration", ""], ["data-analytics", "dr-cron-field_input-main", "aria-label", "Schedule", "placeholder", "Select...", 3, "id", "ngModel", "drPopover", "drPopoverPosition", "disabled", "readonly", "click", "ngModelChange"], ["prefixIcon", "", 1, "dr-icon-date"], ["suffixIcon", "", 1, "dr-icon-arrow-down"], [1, "recurrence-popup"], [1, "recurrence-popup__body"], [3, "ngTemplateOutlet"], [1, "recurrence-popup__footer"], ["data-analytics", "dr-cron-field_button-cancel", "theme", "secondary", 3, "click"], ["data-analytics", "dr-cron-field_button-save", 3, "click"], ["quarterConfig", ""], ["hourConfig", ""], ["weekConfig", ""], ["dayOfMonthSelector", ""], ["yearMonthSelector", ""], [1, "cron-configuration"], ["data-analytics", "dr-cron-field_radio-group-period", "class", "cron-configuration__every", "name", "every", 3, "ngModel", "ngModelChange", 4, "ngIf"], ["class", "cron-configuration__advanced", 4, "ngIf"], [4, "ngIf"], ["data-analytics", "dr-cron-field_select-quarter-month", "aria-label", "Quarter month", "bindLabel", "label", "bindValue", "value", 1, "month-of-quarter", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-every-x-hours", "aria-label", "Hour interval", "bindLabel", "label", "bindValue", "value", 1, "day-of-month", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-day-of-week", "aria-label", "Day of week", "bindLabel", "label", "bindValue", "value", 1, "day-of-week", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-day-of-month", "aria-label", "Day of month", "bindLabel", "label", "bindValue", "value", 1, "day-of-month", 3, "ngModel", "items", "searchable", "ngModelChange"], ["data-analytics", "dr-cron-field_select-month", "aria-label", "Month", "bindLabel", "label", "bindValue", "value", 1, "month-of-year", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_radio-group-period", "name", "every", 1, "cron-configuration__every", 3, "ngModel", "ngModelChange"], ["data-analytics", "dr-cron-field_radio-button-0", 3, "value", 4, "ngFor", "ngForOf"], ["data-analytics", "dr-cron-field_radio-button-0", 3, "value"], [1, "cron-configuration__advanced"], [1, "cron-configuration__advanced-note"], [1, "cron-configuration__advanced-label"], ["data-analytics", "dr-cron-field_input-advanced", 3, "ngModel", "ngModelChange"], ["class", "cron-configuration__advanced-error", 4, "ngIf"], [1, "cron-configuration__advanced-error"], [4, "ngIf", "ngIfElse"], ["singleRowMode", ""], [1, "cron-configuration__section", "cron-configuration__row"], [3, "ngTemplateOutlet", 4, "ngIf"], ["class", "cron-configuration__section cron-configuration__row", 4, "ngIf"], [1, "cron-configuration__section", "cron-configuration__row", "cron-configuration__row--time"], [1, "time-prefix"], [3, "ngModel", "ngModelChange"], ["class", "cron-configuration__section", 4, "ngIf"], [1, "cron-configuration__section"], ["data-analytics", "dr-cron-field_input-hour", "aria-label", "Hour", "type", "number", 1, "hours-input", 3, "ngModel", "mask", "min", "max", "ngModelChange"], [1, "time-dots"], ["data-analytics", "dr-cron-field_input-minute", "aria-label", "Minute", "type", "number", 1, "minutes-input", 3, "ngModel", "mask", "min", "max", "ngModelChange"], ["data-analytics", "dr-cron-field_select-time-period", "aria-label", "Time period", 1, "time-period-selector", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-timezone", "aria-label", "Time zone", "bindLabel", "label", "bindValue", "value", 1, "gmt-offsets", 3, "ngModel", "items", "textView", "ngModelChange"], ["labelTemplate", ""]], template: function DrCronFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            ]), i0.ɵɵInputTransformsFeature, i0.ɵɵStandaloneFeature], decls: 5, vars: 2, consts: [["data-analytics", "dr-cron-field_input-main", "aria-label", "Schedule", "placeholder", "Select...", 3, "id", "ngModel", "drPopover", "drPopoverPosition", "disabled", "readonly", "click", "ngModelChange", 4, "ngIf", "ngIfElse"], ["recurrencePopover", ""], ["cronConfiguration", ""], ["data-analytics", "dr-cron-field_input-main", "aria-label", "Schedule", "placeholder", "Select...", 3, "id", "ngModel", "drPopover", "drPopoverPosition", "disabled", "readonly", "click", "ngModelChange"], ["prefixIcon", "", 1, "dr-icon-date"], ["suffixIcon", "", 1, "dr-icon-arrow-down"], [1, "recurrence-popup"], [1, "recurrence-popup__body"], [3, "ngTemplateOutlet"], [1, "recurrence-popup__footer"], ["data-analytics", "dr-cron-field_button-cancel", "theme", "secondary", 3, "click"], ["data-analytics", "dr-cron-field_button-save", 3, "click"], ["quarterConfig", ""], ["hourConfig", ""], ["weekConfig", ""], ["dayOfMonthSelector", ""], ["yearMonthSelector", ""], [1, "cron-configuration"], ["data-analytics", "dr-cron-field_radio-group-period", "class", "cron-configuration__every", "name", "every", 3, "ngModel", "ngModelChange", 4, "ngIf"], ["class", "cron-configuration__advanced", 4, "ngIf"], [4, "ngIf"], ["data-analytics", "dr-cron-field_select-quarter-month", "aria-label", "Quarter month", "bindLabel", "label", "bindValue", "value", 1, "month-of-quarter", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-every-x-hours", "aria-label", "Hour interval", "bindLabel", "label", "bindValue", "value", 1, "hour-of-day", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-day-of-week", "aria-label", "Day of week", "bindLabel", "label", "bindValue", "value", 1, "day-of-week", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-day-of-month", "aria-label", "Day of month", "bindLabel", "label", "bindValue", "value", 1, "day-of-month", 3, "ngModel", "items", "searchable", "ngModelChange"], ["data-analytics", "dr-cron-field_select-month", "aria-label", "Month", "bindLabel", "label", "bindValue", "value", 1, "month-of-year", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_radio-group-period", "name", "every", 1, "cron-configuration__every", 3, "ngModel", "ngModelChange"], ["data-analytics", "dr-cron-field_radio-button-0", 3, "value", 4, "ngFor", "ngForOf"], ["data-analytics", "dr-cron-field_radio-button-0", 3, "value"], [1, "cron-configuration__advanced"], [1, "cron-configuration__advanced-note"], [1, "cron-configuration__advanced-label"], ["data-analytics", "dr-cron-field_input-advanced", 3, "ngModel", "ngModelChange"], ["class", "cron-configuration__advanced-error", 4, "ngIf"], [1, "cron-configuration__advanced-error"], [4, "ngIf", "ngIfElse"], ["singleRowMode", ""], [1, "cron-configuration__section", "cron-configuration__row"], [3, "ngTemplateOutlet", 4, "ngIf"], ["class", "cron-configuration__section cron-configuration__row", 4, "ngIf"], [1, "cron-configuration__section", "cron-configuration__row", "cron-configuration__row--time"], [1, "time-prefix"], [3, "ngModel", "ngModelChange"], ["class", "cron-configuration__section", 4, "ngIf"], [1, "cron-configuration__section"], ["data-analytics", "dr-cron-field_input-hour", "aria-label", "Hour", "type", "number", 1, "hours-input", 3, "ngModel", "mask", "min", "max", "ngModelChange"], [1, "time-dots"], ["data-analytics", "dr-cron-field_input-minute", "aria-label", "Minute", "type", "number", 1, "minutes-input", 3, "ngModel", "mask", "min", "max", "ngModelChange"], ["data-analytics", "dr-cron-field_select-time-period", "aria-label", "Time period", 1, "time-period-selector", 3, "ngModel", "items", "ngModelChange"], ["data-analytics", "dr-cron-field_select-timezone", "aria-label", "Time zone", "bindLabel", "label", "bindValue", "value", 1, "gmt-offsets", 3, "ngModel", "items", "textView", "ngModelChange"], ["labelTemplate", ""]], template: function DrCronFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DrCronFieldComponent_dr_input_0_Template, 3, 6, "dr-input", 0);
             i0.ɵɵtemplate(1, DrCronFieldComponent_ng_template_1_Template, 8, 1, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵtemplate(3, DrCronFieldComponent_ng_template_3_Template, 14, 5, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             const _r3 = i0.ɵɵreference(4);
             i0.ɵɵproperty("ngIf", !ctx.flatMode)("ngIfElse", _r3);
-        } }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, FormsModule, i2.NgControlStatus, i2.NgModel, DrTooltipModule, DrInputsModule, DrButtonComponent, RadioButtonComponent, RadioGroupComponent, DrInputComponent, DrSelectComponent, DrPopoverModule, DrPopoverDirective, TimePickerComponent], styles: ["[_nghost-%COMP%]   dr-input[_ngcontent-%COMP%] , [_nghost-%COMP%]   dr-input[_ngcontent-%COMP%]  input{cursor:pointer;text-overflow:ellipsis}.recurrence-popup__body[_ngcontent-%COMP%]{display:flex;flex-direction:column;flex-grow:1;padding:16px 32px}.recurrence-popup__footer[_ngcontent-%COMP%]{display:flex;align-items:center;padding:8px 16px;border-top:1px solid #dfe0e3;justify-content:flex-end}.recurrence-popup__footer[_ngcontent-%COMP%]   dr-button[_ngcontent-%COMP%]{margin-left:12px}.cron-configuration[_ngcontent-%COMP%]{display:flex;flex-direction:column;width:640px;height:auto;font-size:14px;line-height:24px;font-weight:400}.cron-configuration__every[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;margin:16px 0;gap:24px}.cron-configuration__section[_ngcontent-%COMP%]{display:flex;align-items:center;flex-wrap:nowrap;margin-bottom:8px}.cron-configuration__section[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{flex-shrink:0}.cron-configuration[_ngcontent-%COMP%]   .month-of-quarter[_ngcontent-%COMP%]{width:65px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .day-of-week[_ngcontent-%COMP%]{width:132px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .month-of-year[_ngcontent-%COMP%]{width:125px;flex-shrink:0;margin:0 0 0 8px}.cron-configuration[_ngcontent-%COMP%]   .day-of-month[_ngcontent-%COMP%]{width:75px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .hours-input[_ngcontent-%COMP%]{width:62px;flex-shrink:0;margin-left:8px}.cron-configuration[_ngcontent-%COMP%]   .minutes-input[_ngcontent-%COMP%]{width:62px;flex-shrink:0}.cron-configuration[_ngcontent-%COMP%]   .time-period-selector[_ngcontent-%COMP%]{width:64px;flex-shrink:0;margin-left:8px}.cron-configuration[_ngcontent-%COMP%]   .time-prefix[_ngcontent-%COMP%]{margin-left:4px}.cron-configuration[_ngcontent-%COMP%]   .time-dots[_ngcontent-%COMP%]{margin:0 4px}.cron-configuration[_ngcontent-%COMP%]   .gmt-offsets[_ngcontent-%COMP%]{margin-left:16px}.cron-configuration__advanced[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.cron-configuration__advanced[_ngcontent-%COMP%]   dr-input[_ngcontent-%COMP%]  input{cursor:text}.cron-configuration__advanced-error[_ngcontent-%COMP%]{color:#bf1d30}.cron-configuration--multi-row[_ngcontent-%COMP%]{width:auto}.cron-configuration--multi-row[_ngcontent-%COMP%]   .cron-configuration__row[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}.cron-configuration--multi-row[_ngcontent-%COMP%]   .cron-configuration__row--time[_ngcontent-%COMP%]{margin-top:8px}.cron-configuration--multi-row[_ngcontent-%COMP%]   .time-prefix[_ngcontent-%COMP%]{margin-left:0}"], changeDetection: 0 }); }
+        } }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, FormsModule, i2.NgControlStatus, i2.NgModel, DrTooltipModule, DrInputsModule, DrButtonComponent, RadioButtonComponent, RadioGroupComponent, DrInputComponent, DrSelectComponent, DrPopoverModule, DrPopoverDirective, TimePickerComponent], styles: ["[_nghost-%COMP%]   dr-input[_ngcontent-%COMP%] , [_nghost-%COMP%]   dr-input[_ngcontent-%COMP%]  input{cursor:pointer;text-overflow:ellipsis}.recurrence-popup__body[_ngcontent-%COMP%]{display:flex;flex-direction:column;flex-grow:1;padding:16px 32px}.recurrence-popup__footer[_ngcontent-%COMP%]{display:flex;align-items:center;padding:8px 16px;border-top:1px solid #dfe0e3;justify-content:flex-end}.recurrence-popup__footer[_ngcontent-%COMP%]   dr-button[_ngcontent-%COMP%]{margin-left:12px}.cron-configuration[_ngcontent-%COMP%]{display:flex;flex-direction:column;width:640px;height:auto;font-size:14px;line-height:24px;font-weight:400}.cron-configuration__every[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;margin:16px 0;gap:24px}.cron-configuration__section[_ngcontent-%COMP%]{display:flex;align-items:center;flex-wrap:nowrap;margin-bottom:8px}.cron-configuration__section[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{flex-shrink:0}.cron-configuration[_ngcontent-%COMP%]   .hour-of-day[_ngcontent-%COMP%]{width:62px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .month-of-quarter[_ngcontent-%COMP%]{width:65px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .day-of-week[_ngcontent-%COMP%]{width:132px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .month-of-year[_ngcontent-%COMP%]{width:125px;flex-shrink:0;margin:0 0 0 8px}.cron-configuration[_ngcontent-%COMP%]   .day-of-month[_ngcontent-%COMP%]{width:92px;flex-shrink:0;margin:0 8px}.cron-configuration[_ngcontent-%COMP%]   .hours-input[_ngcontent-%COMP%]{width:62px;flex-shrink:0;margin-left:8px}.cron-configuration[_ngcontent-%COMP%]   .minutes-input[_ngcontent-%COMP%]{width:62px;flex-shrink:0}.cron-configuration[_ngcontent-%COMP%]   .time-period-selector[_ngcontent-%COMP%]{width:64px;flex-shrink:0;margin-left:8px}.cron-configuration[_ngcontent-%COMP%]   .time-prefix[_ngcontent-%COMP%]{margin-left:4px}.cron-configuration[_ngcontent-%COMP%]   .time-dots[_ngcontent-%COMP%]{margin:0 4px}.cron-configuration[_ngcontent-%COMP%]   .gmt-offsets[_ngcontent-%COMP%]{margin-left:16px}.cron-configuration__advanced[_ngcontent-%COMP%]{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.cron-configuration__advanced[_ngcontent-%COMP%]   dr-input[_ngcontent-%COMP%]  input{cursor:text}.cron-configuration__advanced-error[_ngcontent-%COMP%]{color:#bf1d30}.cron-configuration--multi-row[_ngcontent-%COMP%]{width:auto}.cron-configuration--multi-row[_ngcontent-%COMP%]   .cron-configuration__row[_ngcontent-%COMP%]{display:flex;align-items:center;gap:8px}.cron-configuration--multi-row[_ngcontent-%COMP%]   .cron-configuration__row--time[_ngcontent-%COMP%]{margin-top:8px}.cron-configuration--multi-row[_ngcontent-%COMP%]   .time-prefix[_ngcontent-%COMP%]{margin-left:0}"], changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrCronFieldComponent, [{
         type: Component,
@@ -17973,7 +17984,7 @@ class DrCronFieldComponent {
                         useExisting: forwardRef((() => DrCronFieldComponent)),
                         multi: true,
                     },
-                ], imports: [CommonModule, FormsModule, DrTooltipModule, DrInputsModule, DrPopoverModule, TimePickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-input\n    [id]=\"id\"\n    data-analytics=\"dr-cron-field_input-main\"\n    aria-label=\"Schedule\"\n    *ngIf=\"!flatMode; else cronConfiguration\"\n    placeholder=\"Select...\"\n    (click)=\"!disabled ? openPopover() : null\"\n    [(ngModel)]=\"visibleString\"\n    [drPopover]=\"!disabled ? recurrencePopover : null\"\n    [drPopoverPosition]=\"popoverPosition\"\n    [disabled]=\"disabled\"\n    [readonly]=\"true\">\n    <i class=\"dr-icon-date\" prefixIcon></i>\n    <i class=\"dr-icon-arrow-down\" suffixIcon></i>\n</dr-input>\n\n<ng-template #recurrencePopover let-closePopover=\"closePopover\">\n    <div class=\"recurrence-popup\">\n        <div class=\"recurrence-popup__body\">\n            <ng-container [ngTemplateOutlet]=\"cronConfiguration\"></ng-container>\n        </div>\n        <div class=\"recurrence-popup__footer\">\n            <dr-button data-analytics=\"dr-cron-field_button-cancel\" theme=\"secondary\" (click)=\"closePopover()\">Cancel</dr-button>\n            <dr-button data-analytics=\"dr-cron-field_button-save\" (click)=\"update(); closePopover()\">Save</dr-button>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cronConfiguration>\n    <ng-template #quarterConfig>\n        <span>Repeat every quarter on</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-quarter-month\"\n            aria-label=\"Quarter month\"\n            [(ngModel)]=\"cronModel.month\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"MONTH_OF_QUARTER_ARRAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"month-of-quarter\"></dr-select>\n        <span>month of the quarter</span>\n    </ng-template>\n\n    <ng-template #hourConfig>\n        <span>Repeat every</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-every-x-hours\"\n            aria-label=\"Hour interval\"\n            [(ngModel)]=\"cronModel.everyXHours\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"HOURS_DIVISIBLE_INTO_DAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"day-of-month\">\n        </dr-select>\n        <span>hour(s)</span>\n    </ng-template>\n\n    <ng-template #weekConfig>\n        <span>Repeat every</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-day-of-week\"\n            aria-label=\"Day of week\"\n            [(ngModel)]=\"cronModel.dayOfWeek\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"DAY_OF_WEEK_ARRAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"day-of-week\">\n        </dr-select>\n    </ng-template>\n\n    <ng-template #dayOfMonthSelector>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-day-of-month\"\n            aria-label=\"Day of month\"\n            [(ngModel)]=\"cronModel.dayOfMonth\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"DAY_OF_MONTH_ARRAY\"\n            [searchable]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"day-of-month\">\n        </dr-select>\n    </ng-template>\n\n    <ng-template #yearMonthSelector>\n        <span>Repeat every</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-month\"\n            aria-label=\"Month\"\n            [(ngModel)]=\"cronModel.month\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"MONTH_OF_YEAR_ARRAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"month-of-year\">\n        </dr-select>\n    </ng-template>\n\n    <div class=\"cron-configuration\" [class.cron-configuration--multi-row]=\"multiRowMode\">\n        <dr-radio-group\n            data-analytics=\"dr-cron-field_radio-group-period\"\n            *ngIf=\"!hidePeriodSelector\"\n            class=\"cron-configuration__every\"\n            [ngModel]=\"isAdvancedMode ? 'advanced' : cronModel.every\"\n            (ngModelChange)=\"onEveryChange($event)\"\n            name=\"every\">\n            <dr-radio-button\n                data-analytics=\"dr-cron-field_radio-button-0\"\n                *ngFor=\"let option of cronEditorPeriodArray\"\n                [value]=\"option.value\"\n                [attr.data-analytics]=\"'dr-cron-field_radio-button-' + option.value\">\n                {{ option.label }}\n            </dr-radio-button>\n        </dr-radio-group>\n        <div *ngIf=\"isAdvancedMode\" class=\"cron-configuration__advanced\">\n            <div class=\"cron-configuration__advanced-note\">\n                Use crontab to set custom time intervals for sync frequency, such as every two weeks at 10:05.\n            </div>\n            <div class=\"cron-configuration__advanced-label\">Enter your cron expression:</div>\n            <dr-input\n                data-analytics=\"dr-cron-field_input-advanced\"\n                [(ngModel)]=\"advancedCron\"\n                (ngModelChange)=\"onAdvancedChange()\">\n            </dr-input>\n            <div *ngIf=\"advancedError\" class=\"cron-configuration__advanced-error\">{{ advancedError }}</div>\n        </div>\n\n        <ng-container *ngIf=\"!isAdvancedMode\">\n            <ng-container *ngIf=\"multiRowMode; else singleRowMode\">\n                <div class=\"cron-configuration__section cron-configuration__row\">\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\"\n                        [ngTemplateOutlet]=\"quarterConfig\"></ng-container>\n                    <span *ngIf=\"cronModel.every === cronEditorPeriod.DAY\">Repeat every day</span>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.HOUR\"\n                        [ngTemplateOutlet]=\"hourConfig\"></ng-container>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.WEEK\"\n                        [ngTemplateOutlet]=\"weekConfig\"></ng-container>\n                    <ng-container *ngIf=\"cronModel.every === cronEditorPeriod.YEAR\">\n                        <ng-container [ngTemplateOutlet]=\"yearMonthSelector\"></ng-container>\n                        <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"cronModel.every === cronEditorPeriod.MONTH\">\n                        <span>Repeat on</span>\n                        <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n                        <span>day of every month</span>\n                    </ng-container>\n                </div>\n\n                <div\n                    class=\"cron-configuration__section cron-configuration__row\"\n                    *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\">\n                    <span>on</span>\n                    <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n                    <span>day of the month</span>\n                </div>\n\n                <div class=\"cron-configuration__section cron-configuration__row cron-configuration__row--time\">\n                    <span class=\"time-prefix\">at</span>\n                    <dr-time-picker [ngModel]=\"cronModel\" (ngModelChange)=\"onTimePickerChange($event)\"> </dr-time-picker>\n                </div>\n            </ng-container>\n\n            <ng-template #singleRowMode>\n                <div *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\" class=\"cron-configuration__section\">\n                    <ng-container [ngTemplateOutlet]=\"quarterConfig\"></ng-container>\n                </div>\n                <div class=\"cron-configuration__section\">\n                    <span *ngIf=\"cronModel.every === cronEditorPeriod.DAY\"> Repeat every day </span>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.HOUR\"\n                        [ngTemplateOutlet]=\"hourConfig\"></ng-container>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.WEEK\"\n                        [ngTemplateOutlet]=\"weekConfig\"></ng-container>\n\n                    <ng-container\n                        *ngIf=\"\n                            cronModel.every !== cronEditorPeriod.WEEK &&\n                            cronModel.every !== cronEditorPeriod.HOUR &&\n                            cronModel.every !== cronEditorPeriod.DAY\n                        \">\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.MONTH\">Repeat on </span>\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\">on </span>\n                        <ng-container\n                            *ngIf=\"cronModel.every === cronEditorPeriod.YEAR\"\n                            [ngTemplateOutlet]=\"yearMonthSelector\"></ng-container>\n\n                        <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.MONTH\">day of every month </span>\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\">day of the month </span>\n                    </ng-container>\n                    <span class=\"time-prefix\">at</span>\n                    <dr-input\n                        data-analytics=\"dr-cron-field_input-hour\"\n                        aria-label=\"Hour\"\n                        [(ngModel)]=\"cronModel.hour\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [mask]=\"'00'\"\n                        [min]=\"0\"\n                        [max]=\"12\"\n                        type=\"number\"\n                        class=\"hours-input\">\n                    </dr-input>\n                    <span class=\"time-dots\">:</span>\n                    <dr-input\n                        data-analytics=\"dr-cron-field_input-minute\"\n                        aria-label=\"Minute\"\n                        [(ngModel)]=\"cronModel.minute\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [mask]=\"'00'\"\n                        [min]=\"0\"\n                        [max]=\"59\"\n                        type=\"number\"\n                        class=\"minutes-input\">\n                    </dr-input>\n                    <dr-select\n                        data-analytics=\"dr-cron-field_select-time-period\"\n                        aria-label=\"Time period\"\n                        [(ngModel)]=\"cronModel.timePeriod\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [items]=\"CRON_TIME_PERIOD_ARRAY\"\n                        class=\"time-period-selector\"></dr-select>\n                    <dr-select\n                        data-analytics=\"dr-cron-field_select-timezone\"\n                        aria-label=\"Time zone\"\n                        [(ngModel)]=\"cronModel.timeZone\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [items]=\"GMT_OFFSETS\"\n                        [textView]=\"true\"\n                        bindLabel=\"label\"\n                        bindValue=\"value\"\n                        class=\"gmt-offsets\">\n                        <ng-template #labelTemplate let-item=\"item\">\n                            {{ LOCAL_TIME_ZONE_OFFSET !== cronModel.timeZone ? item.label : 'Local Time' }}\n                        </ng-template>\n                    </dr-select>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [":host dr-input::ng-deep,:host dr-input::ng-deep input{cursor:pointer;text-overflow:ellipsis}.recurrence-popup__body{display:flex;flex-direction:column;flex-grow:1;padding:16px 32px}.recurrence-popup__footer{display:flex;align-items:center;padding:8px 16px;border-top:1px solid #dfe0e3;justify-content:flex-end}.recurrence-popup__footer dr-button{margin-left:12px}.cron-configuration{display:flex;flex-direction:column;width:640px;height:auto;font-size:14px;line-height:24px;font-weight:400}.cron-configuration__every{display:flex;align-items:center;width:100%;margin:16px 0;gap:24px}.cron-configuration__section{display:flex;align-items:center;flex-wrap:nowrap;margin-bottom:8px}.cron-configuration__section span{flex-shrink:0}.cron-configuration .month-of-quarter{width:65px;flex-shrink:0;margin:0 8px}.cron-configuration .day-of-week{width:132px;flex-shrink:0;margin:0 8px}.cron-configuration .month-of-year{width:125px;flex-shrink:0;margin:0 0 0 8px}.cron-configuration .day-of-month{width:75px;flex-shrink:0;margin:0 8px}.cron-configuration .hours-input{width:62px;flex-shrink:0;margin-left:8px}.cron-configuration .minutes-input{width:62px;flex-shrink:0}.cron-configuration .time-period-selector{width:64px;flex-shrink:0;margin-left:8px}.cron-configuration .time-prefix{margin-left:4px}.cron-configuration .time-dots{margin:0 4px}.cron-configuration .gmt-offsets{margin-left:16px}.cron-configuration__advanced{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.cron-configuration__advanced dr-input::ng-deep input{cursor:text}.cron-configuration__advanced-error{color:#bf1d30}.cron-configuration--multi-row{width:auto}.cron-configuration--multi-row .cron-configuration__row{display:flex;align-items:center;gap:8px}.cron-configuration--multi-row .cron-configuration__row--time{margin-top:8px}.cron-configuration--multi-row .time-prefix{margin-left:0}\n"] }]
+                ], imports: [CommonModule, FormsModule, DrTooltipModule, DrInputsModule, DrPopoverModule, TimePickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-input\n    [id]=\"id\"\n    data-analytics=\"dr-cron-field_input-main\"\n    aria-label=\"Schedule\"\n    *ngIf=\"!flatMode; else cronConfiguration\"\n    placeholder=\"Select...\"\n    (click)=\"!disabled ? openPopover() : null\"\n    [(ngModel)]=\"visibleString\"\n    [drPopover]=\"!disabled ? recurrencePopover : null\"\n    [drPopoverPosition]=\"popoverPosition\"\n    [disabled]=\"disabled\"\n    [readonly]=\"true\">\n    <i class=\"dr-icon-date\" prefixIcon></i>\n    <i class=\"dr-icon-arrow-down\" suffixIcon></i>\n</dr-input>\n\n<ng-template #recurrencePopover let-closePopover=\"closePopover\">\n    <div class=\"recurrence-popup\">\n        <div class=\"recurrence-popup__body\">\n            <ng-container [ngTemplateOutlet]=\"cronConfiguration\"></ng-container>\n        </div>\n        <div class=\"recurrence-popup__footer\">\n            <dr-button data-analytics=\"dr-cron-field_button-cancel\" theme=\"secondary\" (click)=\"closePopover()\">Cancel</dr-button>\n            <dr-button data-analytics=\"dr-cron-field_button-save\" (click)=\"update(); closePopover()\">Save</dr-button>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #cronConfiguration>\n    <ng-template #quarterConfig>\n        <span>Repeat every quarter on</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-quarter-month\"\n            aria-label=\"Quarter month\"\n            [(ngModel)]=\"cronModel.month\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"MONTH_OF_QUARTER_ARRAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"month-of-quarter\"></dr-select>\n        <span>month of the quarter</span>\n    </ng-template>\n\n    <ng-template #hourConfig>\n        <span>Repeat every</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-every-x-hours\"\n            aria-label=\"Hour interval\"\n            [(ngModel)]=\"cronModel.everyXHours\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"HOURS_DIVISIBLE_INTO_DAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"hour-of-day\">\n        </dr-select>\n        <span>hour(s)</span>\n    </ng-template>\n\n    <ng-template #weekConfig>\n        <span>Repeat every</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-day-of-week\"\n            aria-label=\"Day of week\"\n            [(ngModel)]=\"cronModel.dayOfWeek\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"DAY_OF_WEEK_ARRAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"day-of-week\">\n        </dr-select>\n    </ng-template>\n\n    <ng-template #dayOfMonthSelector>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-day-of-month\"\n            aria-label=\"Day of month\"\n            [(ngModel)]=\"cronModel.dayOfMonth\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"DAY_OF_MONTH_ARRAY\"\n            [searchable]=\"true\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"day-of-month\">\n        </dr-select>\n    </ng-template>\n\n    <ng-template #yearMonthSelector>\n        <span>Repeat every</span>\n        <dr-select\n            data-analytics=\"dr-cron-field_select-month\"\n            aria-label=\"Month\"\n            [(ngModel)]=\"cronModel.month\"\n            (ngModelChange)=\"onSelectionChange()\"\n            [items]=\"MONTH_OF_YEAR_ARRAY\"\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            class=\"month-of-year\">\n        </dr-select>\n    </ng-template>\n\n    <div class=\"cron-configuration\" [class.cron-configuration--multi-row]=\"multiRowMode\">\n        <dr-radio-group\n            data-analytics=\"dr-cron-field_radio-group-period\"\n            *ngIf=\"!hidePeriodSelector\"\n            class=\"cron-configuration__every\"\n            [ngModel]=\"isAdvancedMode ? 'advanced' : cronModel.every\"\n            (ngModelChange)=\"onEveryChange($event)\"\n            name=\"every\">\n            <dr-radio-button\n                data-analytics=\"dr-cron-field_radio-button-0\"\n                *ngFor=\"let option of cronEditorPeriodArray\"\n                [value]=\"option.value\"\n                [attr.data-analytics]=\"'dr-cron-field_radio-button-' + option.value\">\n                {{ option.label }}\n            </dr-radio-button>\n        </dr-radio-group>\n        <div *ngIf=\"isAdvancedMode\" class=\"cron-configuration__advanced\">\n            <div class=\"cron-configuration__advanced-note\">\n                Use crontab to set custom time intervals for sync frequency, such as every two weeks at 10:05.\n            </div>\n            <div class=\"cron-configuration__advanced-label\">Enter your cron expression:</div>\n            <dr-input\n                data-analytics=\"dr-cron-field_input-advanced\"\n                [(ngModel)]=\"advancedCron\"\n                (ngModelChange)=\"onAdvancedChange()\">\n            </dr-input>\n            <div *ngIf=\"advancedError\" class=\"cron-configuration__advanced-error\">{{ advancedError }}</div>\n        </div>\n\n        <ng-container *ngIf=\"!isAdvancedMode\">\n            <ng-container *ngIf=\"multiRowMode; else singleRowMode\">\n                <div class=\"cron-configuration__section cron-configuration__row\">\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\"\n                        [ngTemplateOutlet]=\"quarterConfig\"></ng-container>\n                    <span *ngIf=\"cronModel.every === cronEditorPeriod.DAY\">Repeat every day</span>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.HOUR\"\n                        [ngTemplateOutlet]=\"hourConfig\"></ng-container>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.WEEK\"\n                        [ngTemplateOutlet]=\"weekConfig\"></ng-container>\n                    <ng-container *ngIf=\"cronModel.every === cronEditorPeriod.YEAR\">\n                        <ng-container [ngTemplateOutlet]=\"yearMonthSelector\"></ng-container>\n                        <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n                    </ng-container>\n\n                    <ng-container *ngIf=\"cronModel.every === cronEditorPeriod.MONTH\">\n                        <span>Repeat on</span>\n                        <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n                        <span>day of every month</span>\n                    </ng-container>\n                </div>\n\n                <div\n                    class=\"cron-configuration__section cron-configuration__row\"\n                    *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\">\n                    <span>on</span>\n                    <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n                    <span>day of the month</span>\n                </div>\n\n                <div class=\"cron-configuration__section cron-configuration__row cron-configuration__row--time\">\n                    <span class=\"time-prefix\">at</span>\n                    <dr-time-picker [ngModel]=\"cronModel\" (ngModelChange)=\"onTimePickerChange($event)\"> </dr-time-picker>\n                </div>\n            </ng-container>\n\n            <ng-template #singleRowMode>\n                <div *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\" class=\"cron-configuration__section\">\n                    <ng-container [ngTemplateOutlet]=\"quarterConfig\"></ng-container>\n                </div>\n                <div class=\"cron-configuration__section\">\n                    <span *ngIf=\"cronModel.every === cronEditorPeriod.DAY\"> Repeat every day </span>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.HOUR\"\n                        [ngTemplateOutlet]=\"hourConfig\"></ng-container>\n                    <ng-container\n                        *ngIf=\"cronModel.every === cronEditorPeriod.WEEK\"\n                        [ngTemplateOutlet]=\"weekConfig\"></ng-container>\n\n                    <ng-container\n                        *ngIf=\"\n                            cronModel.every !== cronEditorPeriod.WEEK &&\n                            cronModel.every !== cronEditorPeriod.HOUR &&\n                            cronModel.every !== cronEditorPeriod.DAY\n                        \">\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.MONTH\">Repeat on </span>\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\">on </span>\n                        <ng-container\n                            *ngIf=\"cronModel.every === cronEditorPeriod.YEAR\"\n                            [ngTemplateOutlet]=\"yearMonthSelector\"></ng-container>\n\n                        <ng-container [ngTemplateOutlet]=\"dayOfMonthSelector\"></ng-container>\n\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.MONTH\">day of every month </span>\n                        <span *ngIf=\"cronModel.every === cronEditorPeriod.QUARTER\">day of the month </span>\n                    </ng-container>\n                    <span class=\"time-prefix\">at</span>\n                    <dr-input\n                        data-analytics=\"dr-cron-field_input-hour\"\n                        aria-label=\"Hour\"\n                        [(ngModel)]=\"cronModel.hour\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [mask]=\"'00'\"\n                        [min]=\"0\"\n                        [max]=\"12\"\n                        type=\"number\"\n                        class=\"hours-input\">\n                    </dr-input>\n                    <span class=\"time-dots\">:</span>\n                    <dr-input\n                        data-analytics=\"dr-cron-field_input-minute\"\n                        aria-label=\"Minute\"\n                        [(ngModel)]=\"cronModel.minute\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [mask]=\"'00'\"\n                        [min]=\"0\"\n                        [max]=\"59\"\n                        type=\"number\"\n                        class=\"minutes-input\">\n                    </dr-input>\n                    <dr-select\n                        data-analytics=\"dr-cron-field_select-time-period\"\n                        aria-label=\"Time period\"\n                        [(ngModel)]=\"cronModel.timePeriod\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [items]=\"CRON_TIME_PERIOD_ARRAY\"\n                        class=\"time-period-selector\"></dr-select>\n                    <dr-select\n                        data-analytics=\"dr-cron-field_select-timezone\"\n                        aria-label=\"Time zone\"\n                        [(ngModel)]=\"cronModel.timeZone\"\n                        (ngModelChange)=\"onSelectionChange()\"\n                        [items]=\"GMT_OFFSETS\"\n                        [textView]=\"true\"\n                        bindLabel=\"label\"\n                        bindValue=\"value\"\n                        class=\"gmt-offsets\">\n                        <ng-template #labelTemplate let-item=\"item\">\n                            {{ LOCAL_TIME_ZONE_OFFSET !== cronModel.timeZone ? item.label : 'Local Time' }}\n                        </ng-template>\n                    </dr-select>\n                </div>\n            </ng-template>\n        </ng-container>\n    </div>\n</ng-template>\n", styles: [":host dr-input::ng-deep,:host dr-input::ng-deep input{cursor:pointer;text-overflow:ellipsis}.recurrence-popup__body{display:flex;flex-direction:column;flex-grow:1;padding:16px 32px}.recurrence-popup__footer{display:flex;align-items:center;padding:8px 16px;border-top:1px solid #dfe0e3;justify-content:flex-end}.recurrence-popup__footer dr-button{margin-left:12px}.cron-configuration{display:flex;flex-direction:column;width:640px;height:auto;font-size:14px;line-height:24px;font-weight:400}.cron-configuration__every{display:flex;align-items:center;width:100%;margin:16px 0;gap:24px}.cron-configuration__section{display:flex;align-items:center;flex-wrap:nowrap;margin-bottom:8px}.cron-configuration__section span{flex-shrink:0}.cron-configuration .hour-of-day{width:62px;flex-shrink:0;margin:0 8px}.cron-configuration .month-of-quarter{width:65px;flex-shrink:0;margin:0 8px}.cron-configuration .day-of-week{width:132px;flex-shrink:0;margin:0 8px}.cron-configuration .month-of-year{width:125px;flex-shrink:0;margin:0 0 0 8px}.cron-configuration .day-of-month{width:92px;flex-shrink:0;margin:0 8px}.cron-configuration .hours-input{width:62px;flex-shrink:0;margin-left:8px}.cron-configuration .minutes-input{width:62px;flex-shrink:0}.cron-configuration .time-period-selector{width:64px;flex-shrink:0;margin-left:8px}.cron-configuration .time-prefix{margin-left:4px}.cron-configuration .time-dots{margin:0 4px}.cron-configuration .gmt-offsets{margin-left:16px}.cron-configuration__advanced{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.cron-configuration__advanced dr-input::ng-deep input{cursor:text}.cron-configuration__advanced-error{color:#bf1d30}.cron-configuration--multi-row{width:auto}.cron-configuration--multi-row .cron-configuration__row{display:flex;align-items:center;gap:8px}.cron-configuration--multi-row .cron-configuration__row--time{margin-top:8px}.cron-configuration--multi-row .time-prefix{margin-left:0}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
             type: Input
         }], hostId: [{