@datarailsshared/datarailsshared 1.6.412 → 1.6.413
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.
|
Binary file
|
|
@@ -588,7 +588,7 @@ export class DrCronFieldComponent {
|
|
|
588
588
|
} if (rf & 2) {
|
|
589
589
|
const _r3 = i0.ɵɵreference(4);
|
|
590
590
|
i0.ɵɵproperty("ngIf", !ctx.flatMode)("ngIfElse", _r3);
|
|
591
|
-
} }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, FormsModule, i2.NgControlStatus, i2.NgModel, DrTooltipModule, DrInputsModule, i3.DrButtonComponent, i4.RadioButtonComponent, i5.RadioGroupComponent, i6.DrInputComponent, i7.DrSelectComponent, DrPopoverModule, i8.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:
|
|
591
|
+
} }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, FormsModule, i2.NgControlStatus, i2.NgModel, DrTooltipModule, DrInputsModule, i3.DrButtonComponent, i4.RadioButtonComponent, i5.RadioGroupComponent, i6.DrInputComponent, i7.DrSelectComponent, DrPopoverModule, i8.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:97px;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 }); }
|
|
592
592
|
}
|
|
593
593
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrCronFieldComponent, [{
|
|
594
594
|
type: Component,
|
|
@@ -598,7 +598,7 @@ export class DrCronFieldComponent {
|
|
|
598
598
|
useExisting: forwardRef((() => DrCronFieldComponent)),
|
|
599
599
|
multi: true,
|
|
600
600
|
},
|
|
601
|
-
], 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"] }]
|
|
601
|
+
], 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:97px;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"] }]
|
|
602
602
|
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
|
|
603
603
|
type: Input
|
|
604
604
|
}], hostId: [{
|
|
@@ -17997,7 +17997,7 @@ class DrCronFieldComponent {
|
|
|
17997
17997
|
} if (rf & 2) {
|
|
17998
17998
|
const _r3 = i0.ɵɵreference(4);
|
|
17999
17999
|
i0.ɵɵproperty("ngIf", !ctx.flatMode)("ngIfElse", _r3);
|
|
18000
|
-
} }, 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:
|
|
18000
|
+
} }, 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:97px;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 }); }
|
|
18001
18001
|
}
|
|
18002
18002
|
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrCronFieldComponent, [{
|
|
18003
18003
|
type: Component,
|
|
@@ -18007,7 +18007,7 @@ class DrCronFieldComponent {
|
|
|
18007
18007
|
useExisting: forwardRef((() => DrCronFieldComponent)),
|
|
18008
18008
|
multi: true,
|
|
18009
18009
|
},
|
|
18010
|
-
], 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"] }]
|
|
18010
|
+
], 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:97px;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"] }]
|
|
18011
18011
|
}], function () { return [{ type: i0.ChangeDetectorRef }]; }, { id: [{
|
|
18012
18012
|
type: Input
|
|
18013
18013
|
}], hostId: [{
|
package/package.json
CHANGED
|
Binary file
|