@genesislcap/foundation-ui 14.246.1 → 14.247.0

package/dist/esm/scheduler-cron-builder/helpers.js

@@ -0,0 +1,330 @@
+import { CRON_LENGTH, DateOrDay, MAX_DAYS, MAX_HOURS, MAX_MINS_SEC, MAX_MONTHS, MAX_WEEK_DAYS, MAX_WEEK_NUMBER, RecurrenceType, WeekType, } from './types';
+export const formatFrequency = (freq) => {
+    return Number(freq) > 1 ? `/${freq}` : '';
+};
+/**
+ * generates a cron expression for RecurrenceType.DAILY on the basis of provided config
+ * @param config {@link DailyConfig}- the config object that contains Daily recurrence details
+ * @returns The cron expression string (e.g. `"0 30 10 ? * 2-6"` runs  on weekdays from monday-friday at 10:30
+ *
+ * @example
+ * ```ts
+ * const cron = getCronExpressionForDaily({
+ *  seconds: "0",
+ *  hours: "10",
+ *  minutes: "30",
+ *  frequency: 2,
+    weekType: 'Work week'
+ * });
+ * console.log(cron); // "0 30 10 ? * 2-6"
+ * ```
+ * @internal
+ */
+export function getCronExpressionForDaily(config, formatFrequencyInput = formatFrequency) {
+    const dayOfMonth = config.weekType === WeekType.WORK_WEEK ? '?' : `*${formatFrequencyInput(config.frequency)}`;
+    return `${config.seconds} ${config.minutes} ${config.hours} ${dayOfMonth} * ${config.weekType === WeekType.WORK_WEEK ? '2-6' : '?'}`;
+}
+/**
+ * generates a cron expression for RecurrenceType.WEEKLY on the basis of provided config
+ * @param config {@link WeeklyConfig}- the config object that contains Weekly recurrence details
+ * @returns The cron expression string (e.g. `"0 30 10 ? * 1,3"` runs every sunday and tuesday at 10:30
+ *
+ * @example
+ * ```ts
+ * const cron = getCronExpressionForWeekly({
+ *  seconds: "0",
+ *  hours: "10",
+ *  minutes: "30",
+    selectedDays: new Set(['1','3'])
+ * });
+ * console.log(cron); // "0 30 10 ? * 1,3"
+ * ```
+ * @internal
+ */
+export function getCronExpressionForWeekly(config) {
+    const daysOfWeek = [...config.selectedDays].join(',') || '*';
+    return `${config.seconds} ${config.minutes} ${config.hours} ? * ${daysOfWeek}`;
+}
+/**
+ * generates a cron expression for RecurrenceType.MONTHLY on the basis of provided config
+ * @param config {@link MonthlyConfig}- the config object that contains Monthly recurrence details
+ *  * allows user to specify either Date of the month when dateOrDay is of 'Date' type or
+ * Day of week and weekNumber when dateOrDay is of type 'Day of month'
+ * @returns The cron expression string (e.g. `"0 30 10 15 *'/4 ?"` runs every 4 months on 15th at 10:30 am)
+ *
+ * @example with dateOrDay type = 'Date'
+ * ```ts
+ * const cron = getCronExpressionForMonth({
+ *  seconds: "0",
+ *  hours: "10",
+ *  minutes: "30",
+ *  frequency: 4,
+ *  dateOrDay: {
+ *    type: "Date",
+ *    dayDate: 15,
+ *  }
+ * });
+ * console.log(cron); // "0 30 10 15 *'/4 ?"
+ * ```
+ * @example with dateOrDay type = 'Day of month'
+ * Runs on second friday of every 4th month at 10:30
+ * ```ts
+ * const cron = getCronExpressionForMonth({
+ *  seconds: "0",
+ *  hours: "10",
+ *  minutes: "30",
+ *  frequency: 4,
+ *  dateOrDay: {
+ *    type: "Day of month",
+ *    weekNumber: 2,
+ *    day: '5'
+ *  }
+ * });
+ * console.log(cron); // "0 30 10 ? *'/4 5#2"
+ * ```
+ */
+/** @internal */
+export function getCronExpressionForMonth(config, formatFrequencyInput = formatFrequency) {
+    const { dateOrDay, minutes, hours, seconds, frequency: freq } = config;
+    const frequency = formatFrequencyInput(freq);
+    if (dateOrDay.type === DateOrDay.DATE) {
+        return `${seconds} ${minutes} ${hours} ${dateOrDay.dayDate} *${frequency} ?`;
+    }
+    else if (dateOrDay.weekNumber === '-1') {
+        return `${seconds} ${minutes} ${hours} ? *${frequency} ${dateOrDay.day}L`;
+    }
+    else {
+        return `${config.seconds} ${minutes} ${hours} ? *${frequency} ${dateOrDay.day}#${dateOrDay.weekNumber}`;
+    }
+}
+/**
+ * generates a cron expression for RecurrenceType.YEARLY on the basis of provided config
+ * @param config {@link YearlyConfig}- the config object that contains Yearly recurrence details
+ * allows user to specify either Date of the month and month when dateOrDay is of 'Date' type or
+ * Day of week, weekNumber and month when dateOrDay is of type 'Day of month'
+ * @returns The cron expression string (e.g. `"0 30 10 15 3 ?"` runs every year on March 15 at 10:30 am)
+ *
+ * @example with dateOrDay type = 'Date'
+ * ```ts
+ * const cron = getCronExpressionForYear({
+ *  seconds: "0",
+ *  hours: "10",
+ *  minutes: "30",
+ *  frequency: 2,
+ *  dateOrDay: {
+ *    type: "Date",
+ *    month: '3',
+ *    dayDate: 15,
+ *  }
+ * });
+ * console.log(cron); // "0 30 10 15 3 ?"
+ * ```
+ * @example with dateOrDay type = 'Day of month'
+ * Runs on second friday of march, every 2 years
+ * ```ts
+ * const cron = getCronExpressionForYear({
+ *  seconds: "0",
+ *  hours: "10",
+ *  minutes: "30",
+ *  frequency: 2,
+ *  dateOrDay: {
+ *    type: "Day of month",
+ *    month: '3',
+ *    weekNumber: 2,
+ * day: '5'
+ *  }
+ * });
+ * console.log(cron); // "0 30 10 ? 3 5#2"
+ * ```
+ * @internal
+ */
+export function getCronExpressionForYear(config) {
+    const { dateOrDay, minutes, seconds, hours } = config;
+    if (dateOrDay.type === DateOrDay.DATE) {
+        return `${seconds} ${minutes} ${hours} ${dateOrDay.dayDate} ${dateOrDay.month} ?`;
+    }
+    else if (dateOrDay.weekNumber === '-1') {
+        return `${seconds} ${minutes} ${hours} ? ${dateOrDay.month} ${dateOrDay.day}L`;
+    }
+    else {
+        return `${seconds} ${minutes} ${hours} ? ${dateOrDay.month} ${dateOrDay.day}#${dateOrDay.weekNumber}`;
+    }
+}
+/**
+ * @internal
+ */
+export const isInRange = (val, min, max) => {
+    const numVal = Number(val);
+    return !isNaN(numVal) && numVal <= max && numVal >= min;
+};
+/**
+ * @internal
+ */
+export function isValidValue(val, minVal, maxVal, checkSpecial = false, isValueInRange = isInRange) {
+    if (val === '*')
+        return true;
+    // support for ? and L in day of month
+    if (checkSpecial && (val === '?' || val === 'L'))
+        return true;
+    if (checkSpecial && val.endsWith('L')) {
+        return isValueInRange(val.slice(0, -1), minVal, maxVal); // Ensure it's a valid weekday number (0-7)
+    }
+    // support if it's a step value (*/n)
+    if (val.startsWith('*/')) {
+        return isValueInRange(val.substring(2), 1, maxVal);
+    }
+    // Support `Day_of_Week#WeekNumber` (e.g., `6#3` means "the third Friday of the month")
+    if (checkSpecial && val.includes('#')) {
+        const [weekday, weekNumber] = val.split('#');
+        return (isValueInRange(weekday, minVal, maxVal) && isValueInRange(weekNumber, 1, MAX_WEEK_NUMBER));
+    }
+    // Check if it's a single number e.g. 12,13
+    if (isValueInRange(val, minVal, maxVal))
+        return true;
+    // Check if it's a range (e.g., 2-6)
+    if (val.includes('-')) {
+        const [start, end] = val.split('-');
+        return isValueInRange(start, minVal, maxVal) && isValueInRange(end, minVal, maxVal);
+    }
+    // Check if it's a list (e.g., 1,2,3)
+    if (val.includes(',')) {
+        return val
+            .split(',')
+            .every((part) => isValidValue(part, minVal, maxVal, checkSpecial, isValueInRange));
+    }
+    return false;
+}
+/**
+ * used to validate cron expression,
+ * checks no of parts should be exactly 6 and verify each part
+ * @internal */
+export const isValidCron = (cron, isValid = isValidValue) => {
+    const cronParts = cron.trim().split(' ');
+    // Ensure it has exactly 6 part
+    if (cronParts.length != CRON_LENGTH)
+        return false;
+    const [second, minute, hour, dayOfMonth, month, dayOfWeek] = cronParts;
+    // Validate each part
+    return (isValid(second, 0, MAX_MINS_SEC - 1) &&
+        isValid(minute, 0, MAX_MINS_SEC - 1) &&
+        isValid(hour, 0, MAX_HOURS - 1) &&
+        isValid(dayOfMonth, 1, MAX_DAYS, true) && // Allow `L` and `?`
+        isValid(month, 1, MAX_MONTHS) &&
+        isValid(dayOfWeek, 0, MAX_WEEK_DAYS, true) // Allow `L`, `?`, and `#`
+    );
+};
+/**
+ * similar to {@link getCronExpressionForDaily}
+ * this is used to generate cronConfig object for Daily recurrence from cron string parts passed as params
+ *  @internal */
+export function buildConfigForDailyRecurrence(dayOfMonth, dayOfWeek) {
+    return {
+        type: RecurrenceType.DAILY,
+        frequency: dayOfMonth.startsWith('*/') ? dayOfMonth.split('*/')[1] : '1',
+        weekType: dayOfWeek === '?' ? WeekType.WEEK : WeekType.WORK_WEEK,
+    };
+}
+/**
+ * similar to {@link getCronExpressionForWeekly}
+ * this is used to generate cronConfig object for weekly recurrence from cron string parts passed as params
+ *  @internal */
+export function buildConfigForWeeklyRecurrence(dayOfWeek) {
+    return {
+        type: RecurrenceType.WEEKLY,
+        selectedDays: dayOfWeek !== '*' ? new Set(dayOfWeek.split(',')) : new Set(),
+    };
+}
+/**
+ * used to build dateOrDay object for yearly and monthly recurrence
+ *  @internal */
+export const getDateOrDay = (type, dayOfMonth, mon, dayOfWeek) => {
+    let dayOrDate;
+    if (dayOfMonth === '?') {
+        dayOrDate = {
+            type: DateOrDay.DAY_OF_MONTH,
+            day: dayOfWeek.split(/[L#]/)[0],
+            weekNumber: dayOfWeek.includes('#') ? dayOfWeek.split('#')[1] : '-1',
+        };
+    }
+    else {
+        dayOrDate = {
+            type: DateOrDay.DATE,
+            dayDate: dayOfMonth,
+        };
+    }
+    if (type === RecurrenceType.YEARLY) {
+        dayOrDate['month'] = mon;
+    }
+    return dayOrDate;
+};
+/**
+ * similar to {@link getCronExpressionForYearly}
+ * this is used to generate cronConfig object for yearly recurrence from cron string parts passed as params
+ *  @internal */
+export function buildConfigForYearlyRecurrence(dayOfMonth, mon, dayOfWeek, getDateOrDayConfig = getDateOrDay) {
+    return {
+        type: RecurrenceType.YEARLY,
+        frequency: dayOfWeek.split('/').length === 2 ? dayOfWeek.split('/')[1] : '1',
+        dateOrDay: getDateOrDayConfig(RecurrenceType.YEARLY, dayOfMonth, mon, dayOfWeek.split('/')[0]),
+    };
+}
+/**
+ * similar to {@link getCronExpressionForMonth}
+ * this is used to generate cronConfig object for monthly recurrence from cron string parts passed as params
+ *  @internal */
+export function buildConfigForMonthlyRecurrence(dayOfMonth, mon, dayOfWeek, getDateOrDayConfig = getDateOrDay) {
+    return {
+        type: RecurrenceType.MONTHLY,
+        frequency: mon.startsWith('*/') ? mon.split('*/')[1] : '1',
+        dateOrDay: getDateOrDayConfig(RecurrenceType.MONTHLY, dayOfMonth, mon, dayOfWeek.split('/')[0]),
+    };
+}
+/**
+ *
+ * @param cron - cron expression representing either Daily, weekly, monthly or yearly recurrence
+ * @returns the cron config of a specific recurrence after determining the recurrenceType
+ *
+ * @example
+ * ```ts
+ * const config = parseCronExpression('0 30 10 ? * 2-6');
+ * console.log(config); // {type: 'Daily', frequency: 2, weekType: 'Work week', time: '10:30'}
+ * ```
+ * @internal
+ */
+export function parseCronExpression(cron, methods) {
+    if (!cron)
+        return;
+    const cronParts = cron.split(' ');
+    const [seconds, minutes, hours, dayOfMonth, month, dayOfWeek] = cronParts;
+    if (dayOfWeek !== '?' && dayOfMonth !== '?') {
+        throw new Error('Support for specifying both a day-of-week AND a day-of-month parameter is not implemented');
+    }
+    if (dayOfWeek === '2-6' ||
+        (dayOfWeek === '?' && (dayOfMonth === '*' || dayOfMonth.startsWith('*')))) {
+        return Object.assign({ hours,
+            minutes,
+            seconds }, methods.buildConfigForDailyRecurrence(dayOfMonth, dayOfWeek));
+    }
+    else if (/^([1-7](,[1-7])*)$/.test(dayOfWeek) || dayOfWeek === '*') {
+        return Object.assign({ hours,
+            minutes,
+            seconds }, methods.buildConfigForWeeklyRecurrence(dayOfWeek));
+    }
+    else if (dayOfWeek.includes('L') ||
+        dayOfWeek.includes('#') ||
+        (/^([1-9]|[12]\d|3[01])$/.test(dayOfMonth) && dayOfWeek === '?')) {
+        if (month != '*' && !month.startsWith('*/')) {
+            return Object.assign({ hours,
+                minutes,
+                seconds }, methods.buildConfigForYearlyRecurrence(dayOfMonth, month, dayOfWeek));
+        }
+        else {
+            return Object.assign({ hours,
+                minutes,
+                seconds }, methods.buildConfigForMonthlyRecurrence(dayOfMonth, month, dayOfWeek));
+        }
+    }
+    else {
+        throw new Error('Invalid Cron Expression');
+    }
+}

package/dist/esm/scheduler-cron-builder/index.js

@@ -0,0 +1,3 @@
+export * from './scheduler-cron-builder';
+export * from './scheduler-cron-builder.template';
+export * from './scheduler-cron-builder.styles';

package/dist/esm/scheduler-cron-builder/monthly-yearly-recurrence/monthly-yearly-recurrence.js

@@ -0,0 +1,130 @@
+import { __decorate } from "tslib";
+import { EventEmitter } from '@genesislcap/foundation-events';
+import { customElement, observable } from '@microsoft/fast-element';
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { CronBuilderEvents, DateOrDay, RecurrenceType, } from '../types';
+import { monthlyYearlyRecurrenceStyles as styles } from './monthly-yearly-recurrence.styles';
+import { monthlyYearlyRecurrenceTemplate as template } from './monthly-yearly-recurrence.template';
+let MonthlyYearlyRecurrence = class MonthlyYearlyRecurrence extends EventEmitter(FoundationElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * This variable is used with `MONTHLY` & `YEARLY` recurrence Type
+         * Used to determine if the event should occur either at
+         * 1. specific date of the month [1-31].(e.g. 2nd of every month)
+         * 2. specific day of the week in the provided week (e.g. 2nd(week number) Tuesday of every month)
+         *
+         * See {@link DateOrDay}
+         * @internal
+         */
+        this.dayOrDate = DateOrDay.DATE;
+        /**
+         * This variable is used with both `YEARLY` and `MONTHLY` recurrence Type
+         * Used to specify the week number when `day of month` option is selected {@link DateOrDay.DAY_OF_MONTH}
+         * allows user to select from 1st,2nd,3rd,4th or last week options
+         * @defaultValue `1` for First Week
+         * @internal
+         */
+        this.weekNumber = '1';
+        /**
+         * This variable is used with both `YEARLY` and `MONTHLY` recurrence Type
+         * Used to specify the day of week(Mon-Sunday) when `day of month` option is selected {@link DateOrDay.DAY_OF_MONTH}
+         * allows user to select from 1st,2nd,3rd,4th or last week options
+         * @defaultValue `1` for Monday
+         * @internal
+         */
+        this.day = '1'; // Monday, Tuesday, etc.
+        /**
+         * This variable is used with `YEARLY` recurrence Type
+         * Used to set the month (1-12) on which the event should occur
+         * Should be between 1-12 similar to the no of months(Jan-Dec)
+         * @defaultValue `1` for January
+         * @internal
+         */
+        this.selectedMonth = '1';
+    }
+    configChanged() {
+        this.dayOrDate = this.config.dateOrDay.type || DateOrDay.DATE;
+        this.setFieldsFromConfig();
+    }
+    /**
+     * used to set fields from the parent config,
+     * @internal
+     * */
+    setFieldsFromConfig() {
+        if (this.config.type === RecurrenceType.YEARLY) {
+            this.selectedMonth = this.config.dateOrDay.month;
+        }
+        if (this.config.dateOrDay.type === DateOrDay.DAY_OF_MONTH) {
+            this.weekNumber = this.config.dateOrDay.weekNumber || '1';
+            this.day = this.config.dateOrDay.day || '1';
+        }
+        else {
+            this.dayDate = this.config.dateOrDay.dayDate || '1';
+        }
+    }
+    /**
+     * used to construct dateOrDay type for updating cron expression for monthly or yearly recurrence
+     * see {@link MonthlyDateDay} {@link YearlyDateDay} for details
+     * @internal
+     * */
+    getDayOrDateConfig() {
+        let dayDateConfig;
+        if (this.dayOrDate === DateOrDay.DATE) {
+            dayDateConfig = {
+                type: DateOrDay.DATE,
+                dayDate: this.dayDate || '1',
+            };
+        }
+        else {
+            dayDateConfig = {
+                type: DateOrDay.DAY_OF_MONTH,
+                day: this.day || '1',
+                weekNumber: this.weekNumber || '1',
+            };
+        }
+        return dayDateConfig;
+    }
+    /**
+     * emits an event to update cron config and cron expression for monthly or yearly config
+     * @internal
+     * */
+    updateCronConfig() {
+        if (this.config.type === RecurrenceType.MONTHLY) {
+            this.config = Object.assign(Object.assign({}, this.config), { dateOrDay: this.getDayOrDateConfig() });
+        }
+        else {
+            this.config = Object.assign(Object.assign({}, this.config), { dateOrDay: Object.assign(Object.assign({}, this.getDayOrDateConfig()), { month: this.selectedMonth || '1' }) });
+        }
+        this.$emit(CronBuilderEvents.updateCronConfig, this.config);
+    }
+};
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "prefix", void 0);
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "config", void 0);
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "dayOrDate", void 0);
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "dayDate", void 0);
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "weekNumber", void 0);
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "day", void 0);
+__decorate([
+    observable
+], MonthlyYearlyRecurrence.prototype, "selectedMonth", void 0);
+MonthlyYearlyRecurrence = __decorate([
+    customElement({
+        name: 'monthly-yearly-recurrence',
+        template,
+        styles,
+    })
+], MonthlyYearlyRecurrence);
+export { MonthlyYearlyRecurrence };

package/dist/esm/scheduler-cron-builder/monthly-yearly-recurrence/monthly-yearly-recurrence.styles.js

@@ -0,0 +1,25 @@
+import { css } from '@microsoft/fast-element';
+import { inputControls } from '../scheduler-cron-builder.styles';
+export const monthlyYearlyRecurrenceStyles = css `
+  ${inputControls}
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 4px);
+  }
+
+  .weekdays-row {
+    display: flex;
+    gap: calc(var(--design-unit) * 3px);
+  }
+
+  .day-of-month-row {
+    display: flex;
+    gap: calc(var(--design-unit) * 4px);
+    width: 100%;
+  }
+
+  .day-date-number-field::part(root) {
+    width: 40%;
+  }
+`;

package/dist/esm/scheduler-cron-builder/monthly-yearly-recurrence/monthly-yearly-recurrence.template.js

@@ -0,0 +1,92 @@
+import { sync, whenElse } from '@genesislcap/foundation-utils';
+import { html, repeat, when } from '@microsoft/fast-element';
+import { DateOrDay, daysOfWeek, months, RecurrenceType, weekNumber } from '../types';
+const dayOrDateTemplate = (prefix) => html `
+<div class="input-container">
+    <label class="label">On</label>
+    <${prefix}-select
+      data-test-id="select-day-or-date"
+      :value=${sync((x) => x.dayOrDate)}
+      @change="${(x) => x.updateCronConfig()}"
+    >
+      <${prefix}-option data-test-id="${DateOrDay.DATE}">
+        ${DateOrDay.DATE}
+      </${prefix}-option>
+      <${prefix}-option data-test-id="${DateOrDay.DAY_OF_MONTH}">
+        ${DateOrDay.DAY_OF_MONTH}
+      </${prefix}-option>
+    </${prefix}-select>
+  </div> 
+`;
+const monthTemplate = (prefix) => html `
+  <div class="input-container">
+    <label class="label">Month</label>
+    <${prefix}-select data-test-id="month-dropdown" :value=${sync((x) => x.selectedMonth)} @change="${(x) => x.updateCronConfig()}" >
+      ${repeat(() => months, html `
+          <${prefix}-option value="${(x) => x.value}">
+            ${(x) => x.label}
+          </${prefix}-option>
+        `)}
+    </${prefix}-select>
+  </div>
+`;
+const dateTemplate = (prefix) => html `
+  <div class="row">
+    ${when((x) => x.config.type === RecurrenceType.YEARLY, html `
+        ${monthTemplate(prefix)}
+      `)}
+    <div class="input-container">
+    <label class="label"> ${(x) => (x.config.type === RecurrenceType.MONTHLY ? 'Day date' : 'Day')}</label>
+    <${prefix}-select  data-test-id="day-date-dropdown" :value=${sync((x) => x.dayDate)} @change="${(x) => x.updateCronConfig()}" >
+      ${repeat(() => Array.from({ length: 31 }, (_, i) => i + 1), html `
+          <${prefix}-option value="${(x) => x}">
+            ${(x) => x}
+          </${prefix}-option>
+        `)}
+    </${prefix}-select>
+  </div>
+  </div>
+
+`;
+const dayOfMonthTemplate = (prefix) => html `
+  <div class="day-of-month-row">
+  ${when((x) => x.config.type === RecurrenceType.YEARLY, html `
+      ${monthTemplate(prefix)}
+    `)}
+    <div class="input-container">
+      <label class="label">Day of Month</label>
+      <${prefix}-select
+        data-test-id="select-week-number"
+        :value=${sync((x) => x.weekNumber)}
+        @change="${(x) => x.updateCronConfig()}"
+      >
+      ${repeat(() => weekNumber, html `
+          <${prefix}-option value="${(x) => x.value}">
+            ${(x) => x.label}
+          </${prefix}-option>
+        `)}
+      </${prefix}-select>
+    </div> 
+    <div class="input-container">
+      <label class="label">Day</label>
+      <${prefix}-select
+        data-test-id="select-week-day"
+        :value=${sync((x) => x.day)}
+        @change="${(x) => x.updateCronConfig()}"
+      >
+      ${repeat(() => daysOfWeek, html `
+          <${prefix}-option value="${(x) => x.value}">
+            ${(x) => x.label}
+          </${prefix}-option>
+        `)}
+      </${prefix}-select>
+    </div> 
+  </div>
+`;
+export const getPrefixedMonthlyYearlyRecurrence = (prefix) => html `
+  ${dayOrDateTemplate(prefix)}
+  ${whenElse((x) => x.dayOrDate === DateOrDay.DATE, dateTemplate(prefix), dayOfMonthTemplate(prefix))}
+`;
+export const monthlyYearlyRecurrenceTemplate = html `
+  ${(x) => getPrefixedMonthlyYearlyRecurrence(x.prefix)}
+`;