ngx-ntk-cron-editor
Version:
Angular cron editor
560 lines • 167 kB
JavaScript
import { Component, EventEmitter, Input, Output, } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import { distinctUntilChanged } from "rxjs";
import { defaultCronOptions } from "./models/cron-options-model";
import { Days, Months, MonthWeeks } from "./models/enums";
import Utils from "./poco/Utils";
import * as i0 from "@angular/core";
import * as i1 from "@ngx-translate/core";
import * as i2 from "./services/translateUi.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "./time-picker/time-picker.component";
export class CronEditorComponent {
set language(value) {
this._language = value;
this.translateUiService.init(value);
this.translate.use(this.language);
}
get language() {
return this._language;
}
get cron() {
return this.localCron;
}
set cron(value) {
this.localCron = value;
}
constructor(translate, translateUiService) {
this.translate = translate;
this.translateUiService = translateUiService;
this.id = ++CronEditorComponent.nextId;
this._language = 'en';
// @Input({
// transform: (value: CronOptionModel | null) => {
// if (value) return value;
// return defaultCronOptions;
// },
// })
this.options = defaultCronOptions;
// the name is an Angular convention, @Input variable name + "Change" suffix
this.cronChange = new EventEmitter();
this.selectOptions = this.getSelectOptions();
}
ngOnInit() {
if (this.options.removeSeconds) {
this.options.hideSeconds = true;
}
this.state = this.getDefaultState();
this.handleModelChange(this.cron);
}
ngOnChanges(changes) {
const newCron = changes["cron"];
if (newCron && !newCron.firstChange) {
this.handleModelChange(this.cron);
}
}
writeValue(cronExpression) {
this.handleModelChange(cronExpression);
}
registerOnChange(onChange) {
this.cronChange.subscribe({
next: (cronExpression) => {
onChange(cronExpression);
this.validate(cronExpression);
},
});
}
registerOnTouched(onTouched) {
this.cronChange.pipe(distinctUntilChanged()).subscribe(onTouched);
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
setActiveTab(tab) {
if (!this.disabled) {
this.activeTab = tab;
this.regenerateCron();
}
}
dayDisplay(day) {
return Days[day];
}
monthWeekDisplay(monthWeekNumber) {
return MonthWeeks[monthWeekNumber];
}
monthDisplay(month) {
return Months[month];
}
monthDayDisplay(month) {
if (month === "L") {
return "Last Day";
}
else if (month === "LW") {
return "Last Weekday";
}
else if (month === "1W") {
return "First Weekday";
}
else {
return `${month}${this.getOrdinalSuffix(month)} day`;
}
}
regenerateCron() {
this.isDirty = true;
const oldCron = this.localCron;
switch (this.activeTab) {
case "minutes":
this.cron = `0/${this.state.minutes.minutes} * 1/1 * ?`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.minutes.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
case "hourly":
this.cron = `${this.state.hourly.minutes} 0/${this.state.hourly.hours} 1/1 * ?`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.hourly.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
case "daily":
switch (this.state.daily.subTab) {
case "everyDays":
// tslint:disable-next-line:max-line-length
this.cron = `${this.state.daily.everyDays.minutes} ${this.hourToCron(this.state.daily.everyDays.hours, this.state.daily.everyDays.hourType)} 1/${this.state.daily.everyDays.days} * ?`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.daily.everyDays.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
case "everyWeekDay":
// tslint:disable-next-line:max-line-length
this.cron = `${this.state.daily.everyWeekDay.minutes} ${this.hourToCron(this.state.daily.everyWeekDay.hours, this.state.daily.everyWeekDay.hourType)} ? * MON-FRI`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.daily.everyWeekDay.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
default:
throw new Error("Invalid cron daily subtab selection");
}
break;
case "weekly":
const days = this.selectOptions.days
.reduce((acc, day) => (this.state.weekly[day] ? acc.concat([day]) : acc), [])
.join(",");
this.cron = `${this.state.weekly.minutes} ${this.hourToCron(this.state.weekly.hours, this.state.weekly.hourType)} ? * ${days}`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.weekly.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
case "monthly":
switch (this.state.monthly.subTab) {
case "specificDay":
const day = this.state.monthly.runOnWeekday
? `${this.state.monthly.specificDay.day}W`
: this.state.monthly.specificDay.day;
// tslint:disable-next-line:max-line-length
this.cron = `${this.state.monthly.specificDay.minutes} ${this.hourToCron(this.state.monthly.specificDay.hours, this.state.monthly.specificDay.hourType)} ${day} 1/${this.state.monthly.specificDay.months} ?`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.monthly.specificDay.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
case "specificWeekDay":
// tslint:disable-next-line:max-line-length
this.cron = `${this.state.monthly.specificWeekDay.minutes} ${this.hourToCron(this.state.monthly.specificWeekDay.hours, this.state.monthly.specificWeekDay.hourType)} ? ${this.state.monthly.specificWeekDay.startMonth}/${this.state.monthly.specificWeekDay.months} ${this.state.monthly.specificWeekDay.day}${this.state.monthly.specificWeekDay.monthWeek}`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.monthly.specificWeekDay.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
default:
throw new Error("Invalid cron monthly subtab selection");
}
break;
case "yearly":
switch (this.state.yearly.subTab) {
case "specificMonthDay":
// tslint:disable-next-line:max-line-length
const day = this.state.yearly.runOnWeekday
? `${this.state.yearly.specificMonthDay.day}W`
: this.state.yearly.specificMonthDay.day;
// tslint:disable-next-line:max-line-length
this.cron = `${this.state.yearly.specificMonthDay.minutes} ${this.hourToCron(this.state.yearly.specificMonthDay.hours, this.state.yearly.specificMonthDay.hourType)} ${day} ${this.state.yearly.specificMonthDay.month} ?`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.yearly.specificMonthDay.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
case "specificMonthWeek":
// tslint:disable-next-line:max-line-length
this.cron = `${this.state.yearly.specificMonthWeek.minutes} ${this.hourToCron(this.state.yearly.specificMonthWeek.hours, this.state.yearly.specificMonthWeek.hourType)} ? ${this.state.yearly.specificMonthWeek.month} ${this.state.yearly.specificMonthWeek.day}${this.state.yearly.specificMonthWeek.monthWeek}`;
if (!this.options.removeSeconds) {
this.cron = `${this.state.yearly.specificMonthWeek.seconds} ${this.cron}`;
}
if (!this.options.removeYears) {
this.cron = `${this.cron} *`;
}
break;
default:
throw new Error("Invalid cron yearly subtab selection");
}
break;
case "advanced":
this.cron = this.state.advanced.expression;
break;
default:
throw new Error("Invalid cron active tab selection");
}
if (oldCron !== this.cron) {
this.cronChange.emit(this.cron);
}
}
getAmPmHour(hour) {
return this.options.use24HourTime ? hour : ((hour + 11) % 12) + 1;
}
getHourType(hour) {
return this.options.use24HourTime ? undefined : hour >= 12 ? "PM" : "AM";
}
hourToCron(hour, hourType) {
if (this.options.use24HourTime) {
return hour;
}
else {
return hourType === "AM"
? hour === 12
? 0
: hour
: hour === 12
? 12
: hour + 12;
}
}
handleModelChange(cron) {
if (this.isDirty) {
this.isDirty = false;
return;
}
else {
this.isDirty = false;
}
this.validate(cron);
const oldValue = this.localCron;
let cronSeven = cron;
if (this.options.removeSeconds) {
cronSeven = `0 ${cron}`;
}
if (this.options.removeYears) {
cronSeven = `${cronSeven} *`;
}
const [seconds, minutes, hours, dayOfMonth, month, dayOfWeek] = cronSeven.split(" ");
if (cronSeven.match(/\d+ 0\/\d+ \* 1\/1 \* \? \*/)) {
this.activeTab = "minutes";
this.state.minutes.minutes = Number(minutes.substring(2));
this.state.minutes.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ 0\/\d+ 1\/1 \* \? \*/)) {
this.activeTab = "hourly";
this.state.hourly.hours = Number(hours.substring(2));
this.state.hourly.minutes = Number(minutes);
this.state.hourly.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+ 1\/\d+ \* \? \*/)) {
this.activeTab = "daily";
this.state.daily.subTab = "everyDays";
this.state.daily.everyDays.days = Number(dayOfMonth.substring(2));
const parsedHours = Number(hours);
this.state.daily.everyDays.hours = this.getAmPmHour(parsedHours);
this.state.daily.everyDays.hourType = this.getHourType(parsedHours);
this.state.daily.everyDays.minutes = Number(minutes);
this.state.daily.everyDays.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+ \? \* MON-FRI \*/)) {
this.activeTab = "daily";
this.state.daily.subTab = "everyWeekDay";
const parsedHours = Number(hours);
this.state.daily.everyWeekDay.hours = this.getAmPmHour(parsedHours);
this.state.daily.everyWeekDay.hourType = this.getHourType(parsedHours);
this.state.daily.everyWeekDay.minutes = Number(minutes);
this.state.daily.everyWeekDay.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+ \? \* (MON|TUE|WED|THU|FRI|SAT|SUN)(,(MON|TUE|WED|THU|FRI|SAT|SUN))* \*/)) {
this.activeTab = "weekly";
this.selectOptions.days.forEach((weekDay) => (this.state.weekly[weekDay] = false));
dayOfWeek
.split(",")
.forEach((weekDay) => (this.state.weekly[weekDay] = true));
const parsedHours = Number(hours);
this.state.weekly.hours = this.getAmPmHour(parsedHours);
this.state.weekly.hourType = this.getHourType(parsedHours);
this.state.weekly.minutes = Number(minutes);
this.state.weekly.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+(L|LW|W)? 1\/\d+ \?/)) {
this.activeTab = "monthly";
this.state.monthly.subTab = "specificDay";
const wIndex = dayOfMonth.indexOf("W");
if (wIndex !== -1) {
this.state.monthly.specificDay.day = dayOfMonth.split("W")[0];
this.state.monthly.runOnWeekday = true;
}
else {
this.state.monthly.specificDay.day = dayOfMonth;
this.state.monthly.runOnWeekday = false;
}
this.state.monthly.specificDay.months = Number(month.substring(2));
const parsedHours = Number(hours);
this.state.monthly.specificDay.hours = this.getAmPmHour(parsedHours);
this.state.monthly.specificDay.hourType = this.getHourType(parsedHours);
this.state.monthly.specificDay.minutes = Number(minutes);
this.state.monthly.specificDay.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+ \? \d+\/\d+ (MON|TUE|WED|THU|FRI|SAT|SUN)((#[1-5])|L) \*/)) {
const day = dayOfWeek.substr(0, 3);
const monthWeek = dayOfWeek.substr(3);
this.activeTab = "monthly";
this.state.monthly.subTab = "specificWeekDay";
this.state.monthly.specificWeekDay.monthWeek = monthWeek;
this.state.monthly.specificWeekDay.day = day;
if (month.indexOf("/") !== -1) {
const [startMonth, months] = month.split("/").map(Number);
this.state.monthly.specificWeekDay.months = months;
this.state.monthly.specificWeekDay.startMonth = startMonth;
}
const parsedHours = Number(hours);
this.state.monthly.specificWeekDay.hours = this.getAmPmHour(parsedHours);
this.state.monthly.specificWeekDay.hourType =
this.getHourType(parsedHours);
this.state.monthly.specificWeekDay.minutes = Number(minutes);
this.state.monthly.specificWeekDay.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+ (\d+|L|LW|1W) \d+ \? \*/)) {
this.activeTab = "yearly";
this.state.yearly.subTab = "specificMonthDay";
this.state.yearly.specificMonthDay.month = Number(month);
if (dayOfMonth.indexOf("W") !== -1) {
this.state.yearly.specificMonthDay.day = dayOfMonth.charAt(0);
this.state.yearly.runOnWeekday = true;
}
else {
this.state.yearly.specificMonthDay.day = dayOfMonth;
}
const parsedHours = Number(hours);
this.state.yearly.specificMonthDay.hours = this.getAmPmHour(parsedHours);
this.state.yearly.specificMonthDay.hourType =
this.getHourType(parsedHours);
this.state.yearly.specificMonthDay.minutes = Number(minutes);
this.state.yearly.specificMonthDay.seconds = Number(seconds);
}
else if (cronSeven.match(/\d+ \d+ \d+ \? \d+ (MON|TUE|WED|THU|FRI|SAT|SUN)((#[1-5])|L) \*/)) {
const day = dayOfWeek.substr(0, 3);
const monthWeek = dayOfWeek.substr(3);
this.activeTab = "yearly";
this.state.yearly.subTab = "specificMonthWeek";
this.state.yearly.specificMonthWeek.monthWeek = monthWeek;
this.state.yearly.specificMonthWeek.day = day;
this.state.yearly.specificMonthWeek.month = Number(month);
const parsedHours = Number(hours);
this.state.yearly.specificMonthWeek.hours = this.getAmPmHour(parsedHours);
this.state.yearly.specificMonthWeek.hourType =
this.getHourType(parsedHours);
this.state.yearly.specificMonthWeek.minutes = Number(minutes);
this.state.yearly.specificMonthWeek.seconds = Number(seconds);
}
else {
this.activeTab = "advanced";
this.state.advanced.expression = cron;
}
if (oldValue !== this.cron) {
this.cronChange.emit(this.cron);
}
}
validate(cron) {
this.state.validation.isValid = false;
this.state.validation.errorMessage = "";
if (!cron) {
this.state.validation.errorMessage = "Cron expression cannot be null";
return;
}
const cronParts = cron.split(" ");
let expected = 5;
if (!this.options.removeSeconds) {
expected++;
}
if (!this.options.removeYears) {
expected++;
}
if (cronParts.length !== expected) {
this.state.validation.errorMessage = `Invalid cron expression, there must be ${expected} segments`;
return;
}
this.state.validation.isValid = true;
return;
}
getDefaultAdvancedCronExpression() {
if (this.options.removeSeconds && !this.options.removeYears) {
return "15 10 L-2 * ? 2019";
}
if (!this.options.removeSeconds && this.options.removeYears) {
return "0 15 10 L-2 * ?";
}
if (this.options.removeSeconds && this.options.removeYears) {
return "15 10 L-2 * ?";
}
return "0 15 10 L-2 * ? 2019";
}
getDefaultState() {
const [defaultHours, defaultMinutes, defaultSeconds] = this.options.defaultTime.split(":").map(Number);
return {
minutes: {
minutes: 1,
seconds: 0,
},
hourly: {
hours: 1,
minutes: 0,
seconds: 0,
},
daily: {
subTab: "everyDays",
everyDays: {
days: 1,
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
everyWeekDay: {
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
},
weekly: {
MON: true,
TUE: false,
WED: false,
THU: false,
FRI: false,
SAT: false,
SUN: false,
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
monthly: {
subTab: "specificDay",
runOnWeekday: false,
specificDay: {
day: "1",
months: 1,
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
specificWeekDay: {
monthWeek: "#1",
day: "MON",
startMonth: 1,
months: 1,
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
},
yearly: {
subTab: "specificMonthDay",
runOnWeekday: false,
specificMonthDay: {
month: 1,
day: "1",
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
specificMonthWeek: {
monthWeek: "#1",
day: "MON",
month: 1,
hours: this.getAmPmHour(defaultHours),
minutes: defaultMinutes,
seconds: defaultSeconds,
hourType: this.getHourType(defaultHours),
},
},
advanced: {
expression: this.getDefaultAdvancedCronExpression(),
},
validation: {
isValid: true,
errorMessage: "",
},
};
}
getOrdinalSuffix(value) {
if (value.length > 1) {
const secondToLastDigit = value.charAt(value.length - 2);
if (secondToLastDigit === "1") {
return "th";
}
}
const lastDigit = value.charAt(value.length - 1);
switch (lastDigit) {
case "1":
return "st";
case "2":
return "nd";
case "3":
return "rd";
default:
return "th";
}
}
getSelectOptions() {
return {
months: Utils.getRange(1, 12),
monthWeeks: ["#1", "#2", "#3", "#4", "#5", "L"],
days: ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"],
minutes: Utils.getRange(0, 59),
fullMinutes: Utils.getRange(0, 59),
seconds: Utils.getRange(0, 59),
hours: Utils.getRange(1, 23),
monthDays: Utils.getRange(1, 31),
monthDaysWithLasts: [...Utils.getRange(1, 31).map(String), "L"],
hourTypes: ["AM", "PM"],
};
}
}
CronEditorComponent.nextId = 0;
CronEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CronEditorComponent, deps: [{ token: i1.TranslateService }, { token: i2.TranslateUiService }], target: i0.ɵɵFactoryTarget.Component });
CronEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CronEditorComponent, selector: "cron-editor", inputs: { language: "language", disabled: "disabled", options: "options", cron: "cron" }, outputs: { cronChange: "cronChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: CronEditorComponent,
multi: true,
},
], usesOnChanges: true, ngImport: i0, template: "<!-- Tabs -->\r\n<ul class=\"nav nav-tabs\" role=\"tablist\">\r\n <li class=\"nav-item\" *ngIf=\"!options.hideMinutesTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'minutes' }\" aria-controls=\"minutes\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('minutes')\">\r\n {{'CRON.TABS.MINUTES'|translate}}\r\n </a>\r\n </li>\r\n\r\n <li class=\"nav-item\" *ngIf=\"!options.hideHourlyTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'hourly' }\" aria-controls=\"hourly\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('hourly')\">\r\n {{'CRON.TABS.HOURLY'|translate}}\r\n </a>\r\n </li>\r\n\r\n <li class=\"nav-item\" *ngIf=\"!options.hideDailyTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'daily' }\" aria-controls=\"daily\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('daily')\">\r\n {{'CRON.TABS.DAILY'|translate}}\r\n </a>\r\n </li>\r\n\r\n <li class=\"nav-item\" *ngIf=\"!options.hideWeeklyTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'weekly' }\" aria-controls=\"weekly\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('weekly')\">\r\n {{'CRON.TABS.WEEKLY'|translate}}\r\n </a>\r\n </li>\r\n\r\n <li class=\"nav-item\" *ngIf=\"!options.hideMonthlyTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'monthly' }\" aria-controls=\"monthly\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('monthly')\">\r\n {{'CRON.TABS.MONTHLY'|translate}}\r\n </a>\r\n </li>\r\n\r\n <li class=\"nav-item\" *ngIf=\"!options.hideYearlyTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'yearly' }\" aria-controls=\"yearly\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('yearly')\">\r\n {{'CRON.TABS.YEARLY'|translate}}\r\n </a>\r\n </li>\r\n\r\n <li class=\"nav-item\" *ngIf=\"!options.hideAdvancedTab\">\r\n <a class=\"nav-link\" [ngClass]=\"{ active: activeTab === 'advanced' }\" aria-controls=\"advanced\" role=\"tab\"\r\n data-bs-toggle=\"tab\" (click)=\"setActiveTab('advanced')\">\r\n {{'CRON.TABS.ADVANCED'|translate}}\r\n </a>\r\n </li>\r\n</ul>\r\n\r\n<!-- Tab content -->\r\n<div class=\"cron-editor-container\">\r\n <div class=\"row\">\r\n <div class=\"col-12\">\r\n <div class=\"tab-content\">\r\n <!-- Minutes-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideMinutesTab\" [ngClass]=\"{ active: activeTab === 'minutes' }\">\r\n <div class=\"card card-body bg-light\">\r\n {{'CRON.MINUTES.EVERY'|translate}}\r\n <select class=\"minutes\" [disabled]=\"disabled || activeTab !== 'minutes'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.minutes.minutes\" [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let minute of selectOptions.minutes\" [ngValue]=\"minute\">\r\n {{ minute | number:'2.0' }}\r\n </option>\r\n </select>\r\n {{'CRON.MINUTES.MINUTES'|translate}}\r\n <span *ngIf=\"!options.hideSeconds\">{{'CRON.MINUTES.ON_SECOND'|translate}}</span>\r\n <select class=\"seconds\" *ngIf=\"!options.hideSeconds\" [disabled]=\"disabled || activeTab !== 'minutes'\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.minutes.seconds\" [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let second of selectOptions.seconds\" [ngValue]=\"second\">\r\n {{ second | number:'2.0' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <!-- Hourly-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideHourlyTab\" [ngClass]=\"{ active: activeTab === 'hourly' }\">\r\n <div class=\"card card-body bg-light\">\r\n {{'CRON.HOURLY.EVERY'|translate}}\r\n <select class=\"hours\" [disabled]=\"disabled || activeTab !== 'hourly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.hourly.hours\" [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let hour of selectOptions.hours\" [ngValue]=\"hour\">\r\n {{ hour }}\r\n </option>\r\n </select>\r\n {{'CRON.HOURLY.HOURS'|translate}}\r\n {{'CRON.HOURLY.ON_MINUTE'|translate}}\r\n <select class=\"minutes\" [disabled]=\"disabled || activeTab !== 'hourly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.hourly.minutes\" [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let minute of selectOptions.fullMinutes\" [ngValue]=\"minute\">\r\n {{ minute | number:'2.0' }}\r\n </option>\r\n </select>\r\n <span *ngIf=\"!options.hideSeconds\">and second</span>\r\n <select class=\"seconds\" *ngIf=\"!options.hideSeconds\" [disabled]=\"disabled || activeTab !== 'hourly'\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.hourly.seconds\" [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let second of selectOptions.seconds\" [ngValue]=\"second\">\r\n {{ second }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <!-- Daily-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideDailyTab\" [ngClass]=\"{ active: activeTab === 'daily' }\">\r\n <div class=\"card card-body bg-light\">\r\n <input type=\"radio\" name=\"daily-radio\" value=\"everyDays\" [disabled]=\"disabled\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.daily.subTab\" [ngClass]=\"state.formRadioClass\" checked=\"checked\" />\r\n {{'CRON.DAILY.EVERY'|translate}}\r\n <select class=\"days\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'daily' ||\r\n state.daily.subTab !== 'everyDays'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.daily.everyDays.days\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let monthDay of selectOptions.monthDays\" [ngValue]=\"monthDay\">\r\n {{ monthDay }}\r\n </option>\r\n </select>\r\n {{'CRON.DAILY.DAYS'|translate}}\r\n <cron-time-picker [disabled]=\"\r\n disabled ||\r\n activeTab !== 'daily' ||\r\n state.daily.subTab !== 'everyDays'\r\n \" (change)=\"regenerateCron()\" [(time)]=\"state.daily.everyDays\" [selectClass]=\"options.formSelectClass\"\r\n [use24HourTime]=\"options.use24HourTime\" [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker>\r\n </div>\r\n\r\n <div class=\"card card-body bg-light\">\r\n <input type=\"radio\" name=\"daily-radio\" value=\"everyWeekDay\" [disabled]=\"disabled\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.daily.subTab\" [ngClass]=\"state.formRadioClass\" />\r\n {{'CRON.DAILY.WORKING_DAY'|translate}}\r\n <cron-time-picker [disabled]=\"\r\n disabled ||\r\n activeTab !== 'daily' ||\r\n state.daily.subTab !== 'everyWeekDay'\r\n \" (change)=\"regenerateCron()\" [(time)]=\"state.daily.everyWeekDay\" [selectClass]=\"options.formSelectClass\"\r\n [use24HourTime]=\"options.use24HourTime\" [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker>\r\n </div>\r\n </div>\r\n\r\n <!-- Weekly-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideWeeklyTab\" [ngClass]=\"{ active: activeTab === 'weekly' }\">\r\n <div class=\"card card-body bg-light\">\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.MON\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.MON'|translate}}</label>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.TUE\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.TUE'|translate}}</label>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.WED\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.WED'|translate}}</label>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.THU\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.THU'|translate}}</label>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.FRI\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.FRI'|translate}}</label>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.SAT\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.SAT'|translate}}</label>\r\n </div>\r\n <div class=\"col-sm-6\">\r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\"\r\n [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.weekly.SUN\" [ngClass]=\"options.formCheckboxClass\" />\r\n {{'CRON.WEEK.SUN'|translate}}</label>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-sm-6\">\r\n {{'CRON.WEEKLY.AT'|translate}}\r\n <cron-time-picker [disabled]=\"disabled || activeTab !== 'weekly'\" (change)=\"regenerateCron()\"\r\n [(time)]=\"state.weekly\" [selectClass]=\"options.formSelectClass\"\r\n [use24HourTime]=\"options.use24HourTime\" [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Monthly-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideMonthlyTab\" [ngClass]=\"{ active: activeTab === 'monthly' }\">\r\n <div class=\"card card-body bg-light\">\r\n <input type=\"radio\" name=\"monthly-radio\" value=\"specificDay\" [disabled]=\"disabled\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.subTab\" [ngClass]=\"state.formRadioClass\" />\r\n On the\r\n <select class=\"month-days\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.specificDay.day\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"\r\n let monthDaysWithLast of selectOptions.monthDaysWithLasts\r\n \" [ngValue]=\"monthDaysWithLast\">\r\n {{ monthDayDisplay(monthDaysWithLast) }}\r\n </option>\r\n </select>\r\n of every\r\n <select class=\"months-small\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.specificDay.months\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let month of selectOptions.months\" [ngValue]=\"month\">\r\n {{ month }}\r\n </option>\r\n </select>\r\n month(s) at\r\n <cron-time-picker [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificDay'\r\n \" (change)=\"regenerateCron()\" [(time)]=\"state.monthly.specificDay\"\r\n [selectClass]=\"options.formSelectClass\" [use24HourTime]=\"options.use24HourTime\"\r\n [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker> \r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.runOnWeekday\"\r\n [ngClass]=\"options.formCheckboxClass\" />\r\n during the nearest weekday</label>\r\n </div>\r\n <div class=\"card card-body bg-light\">\r\n <input type=\"radio\" name=\"monthly-radio\" value=\"specificWeekDay\" [disabled]=\"disabled\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.subTab\" [ngClass]=\"state.formRadioClass\" />\r\n On the\r\n <select class=\"day-order-in-month\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificWeekDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.specificWeekDay.monthWeek\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let monthWeek of selectOptions.monthWeeks\" [ngValue]=\"monthWeek\">\r\n {{ monthWeekDisplay(monthWeek) }}\r\n </option>\r\n </select>\r\n <select class=\"week-days\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificWeekDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.specificWeekDay.day\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let day of selectOptions.days\" [ngValue]=\"day\">\r\n {{ dayDisplay(day) }}\r\n </option>\r\n </select>\r\n of every\r\n <select class=\"months-small\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificWeekDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.specificWeekDay.months\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let month of selectOptions.months\" [ngValue]=\"month\">\r\n {{ month }}\r\n </option>\r\n </select>\r\n month(s) starting in\r\n <select class=\"months\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificWeekDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.monthly.specificWeekDay.startMonth\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let month of selectOptions.months\" [ngValue]=\"month\">\r\n {{ monthDisplay(month) }}\r\n </option>\r\n </select>\r\n\r\n at\r\n <cron-time-picker [disabled]=\"\r\n disabled ||\r\n activeTab !== 'monthly' ||\r\n state.monthly.subTab !== 'specificWeekDay'\r\n \" (change)=\"regenerateCron()\" [(time)]=\"state.monthly.specificWeekDay\"\r\n [selectClass]=\"options.formSelectClass\" [use24HourTime]=\"options.use24HourTime\"\r\n [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker>\r\n </div>\r\n </div>\r\n\r\n <!-- Yearly-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideYearlyTab\" [ngClass]=\"{ active: activeTab === 'yearly' }\">\r\n <div class=\"card card-body bg-light\">\r\n <input type=\"radio\" name=\"yearly-radio\" value=\"specificMonthDay\" [disabled]=\"disabled\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.subTab\" [ngClass]=\"state.formRadioClass\" />\r\n Every\r\n <select class=\"months\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.specificMonthDay.month\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let month of selectOptions.months\" [ngValue]=\"month\">\r\n {{ monthDisplay(month) }}\r\n </option>\r\n </select>\r\n on the\r\n <select class=\"month-days\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthDay'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.specificMonthDay.day\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"\r\n let monthDaysWithLast of selectOptions.monthDaysWithLasts\r\n \" [ngValue]=\"monthDaysWithLast\">\r\n {{ monthDayDisplay(monthDaysWithLast) }}\r\n </option>\r\n </select>\r\n at\r\n <cron-time-picker [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthDay'\r\n \" (change)=\"regenerateCron()\" [(time)]=\"state.yearly.specificMonthDay\"\r\n [selectClass]=\"options.formSelectClass\" [use24HourTime]=\"options.use24HourTime\"\r\n [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker> \r\n <label class=\"advanced-cron-editor-label\"><input type=\"checkbox\" (change)=\"regenerateCron()\"\r\n [(ngModel)]=\"state.yearly.runOnWeekday\" [ngClass]=\"options.formCheckboxClass\" />\r\n during the nearest weekday</label>\r\n </div>\r\n <div class=\"card card-body bg-light\">\r\n <input type=\"radio\" name=\"yearly-radio\" value=\"specificMonthWeek\" [disabled]=\"disabled\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.subTab\" [ngClass]=\"state.formRadioClass\" />\r\n On the\r\n <select class=\"day-order-in-month\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthWeek'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.specificMonthWeek.monthWeek\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let monthWeek of selectOptions.monthWeeks\" [ngValue]=\"monthWeek\">\r\n {{ monthWeekDisplay(monthWeek) }}\r\n </option>\r\n </select>\r\n <select class=\"week-days\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthWeek'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.specificMonthWeek.day\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let day of selectOptions.days\" [ngValue]=\"day\">\r\n {{ dayDisplay(day) }}\r\n </option>\r\n </select>\r\n of\r\n <select class=\"months\" [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthWeek'\r\n \" (change)=\"regenerateCron()\" [(ngModel)]=\"state.yearly.specificMonthWeek.month\"\r\n [ngClass]=\"options.formSelectClass\">\r\n <option *ngFor=\"let month of selectOptions.months\" [ngValue]=\"month\">\r\n {{ monthDisplay(month) }}\r\n </option>\r\n </select>\r\n at\r\n <cron-time-picker [disabled]=\"\r\n disabled ||\r\n activeTab !== 'yearly' ||\r\n state.yearly.subTab !== 'specificMonthWeek'\r\n \" (change)=\"regenerateCron()\" [(time)]=\"state.yearly.specificMonthWeek\"\r\n [selectClass]=\"options.formSelectClass\" [use24HourTime]=\"options.use24HourTime\"\r\n [hideSeconds]=\"options.hideSeconds\">\r\n </cron-time-picker>\r\n </div>\r\n </div>\r\n\r\n <!-- Advanced-->\r\n <div class=\"tab-pane\" *ngIf=\"!options.hideAdvancedTab\" [ngClass]=\"{ active: activeTab === 'advanced' }\">\r\n Cron Expression\r\n <input type=\"text\" class=\"advanced-cron-editor-input\" [disabled]=\"disabled || activeTab !== 'advanced'\"\r\n (change)=\"regenerateCron()\" [(ngModel)]=\"state.advanced.expression\" [ngClass]=\"options.formInputClass\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"!state.validation.isValid\">\r\n <code>{{ state.validation.errorMessage }}</code>\r\n </div>\r\n</div>", styles: [".cron-editor-container{margin-top:10px}.cron-editor-container .cron-editor-radio{width:20px;display:inline-block}.cron-editor-container .cron-editor-select,.cron-editor-container .cron-editor-input,.cron-editor-container .cron-editor-checkbox{display:inline-block}.cron-editor-container .well-time-wrapper{padding-left:20px}.cron-editor-container .inline-block{display:inline-block}.cron-editor-container .minutes,.cron-editor-container .hours,.cron-editor-container .days,.cron-editor-container .seconds{width:70px}.cron-editor-container .months{width:120px}.cron-editor-container .month-days{width:130px}.cron-editor-container .months-small{width:60px}.cron-editor-container .day-order-in-month{width:95px}.cron-editor-container .week-days{width:120px}.cron-editor-container .advanced-cron-editor-input{width:200px}.cron-editor-container .hour-types{width:70px}.cron-editor-container .advanced-cron-editor-label{font-weight:400}.nav-tabs .nav-link{cursor:pointer}.form-control{height:auto}.card-body{min-height:20px;padding:19px;margin-bottom:20px;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[fo