@praxisui/cron-builder 6.0.0-beta.0 → 8.0.0-beta.0

package/README.md

@@ -93,35 +93,10 @@ Inputs/Outputs:
 - `previewOccurrences?: number` – number of preview dates to show.
 - `validators?: { invalidCronMessage?: string }` – customize error messages.
 
-## CommonJS/ESM Notes
-
-This component dynamically imports `cron-parser`, `cronstrue` and `cron-validator`. Some versions of these, or their transitive deps (e.g. `luxon`), may emit CommonJS warnings in Angular builds.
-
-If you want to suppress warnings in your app build, add them to `allowedCommonJsDependencies`:
-
-```json
-// angular.json
-{
-  "projects": {
-    "your-app": {
-      "architect": {
-        "build": {
-          "options": {
-            "allowedCommonJsDependencies": [
-              "cron-parser",
-              "cronstrue",
-              "cron-validator",
-              "luxon"
-            ]
-          }
-        }
-      }
-    }
-  }
-}
-```
+## Build Notes
 
-Note: Depending on your Angular CLI version, the warning behavior can vary. The above option is supported in current CLI releases when using the application builder.
+The builder resolves validation, humanized descriptions and occurrence preview inside the library runtime.
+Apps consuming `@praxisui/cron-builder` should not need `allowedCommonJsDependencies` entries just to use the component.
 
 ## Compatibility
 

package/fesm2022/praxisui-cron-builder.mjs

@@ -30,10 +30,405 @@ import { PraxisIconDirective } from '@praxisui/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-// Lazy module singletons
-let _cronValidator;
-let _cronstrue;
-let _cronParser;
+const MONTH_NAMES = {
+    JAN: 1,
+    FEB: 2,
+    MAR: 3,
+    APR: 4,
+    MAY: 5,
+    JUN: 6,
+    JUL: 7,
+    AUG: 8,
+    SEP: 9,
+    OCT: 10,
+    NOV: 11,
+    DEC: 12,
+};
+const WEEKDAY_NAMES = {
+    SUN: 0,
+    MON: 1,
+    TUE: 2,
+    WED: 3,
+    THU: 4,
+    FRI: 5,
+    SAT: 6,
+};
+const WEEKDAY_LABELS_EN = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+const zonedFormatters = new Map();
+const timeFormatters = new Map();
+function getTimeFormatter(locale) {
+    const key = locale || 'en-US';
+    if (!timeFormatters.has(key)) {
+        timeFormatters.set(key, new Intl.DateTimeFormat(key, {
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true,
+            timeZone: 'UTC',
+        }));
+    }
+    return timeFormatters.get(key);
+}
+function getZonedFormatter(timeZone) {
+    const key = timeZone || 'UTC';
+    if (!zonedFormatters.has(key)) {
+        zonedFormatters.set(key, new Intl.DateTimeFormat('en-US', {
+            timeZone: key,
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            weekday: 'short',
+            hour12: false,
+        }));
+    }
+    return zonedFormatters.get(key);
+}
+function normalizeToken(token) {
+    return token.trim().toUpperCase();
+}
+function normalizeValue(raw, aliases) {
+    const normalized = normalizeToken(raw);
+    return normalized.replace(/[A-Z]{3}/g, (match) => {
+        const resolved = aliases[match];
+        return resolved == null ? match : String(resolved);
+    });
+}
+function makeAnyField() {
+    return { any: true, values: new Set(), nthWeekday: null };
+}
+function parseSimpleNumber(value, min, max) {
+    if (!/^\d+$/.test(value)) {
+        return null;
+    }
+    const parsed = Number(value);
+    if (!Number.isInteger(parsed) || parsed < min || parsed > max) {
+        return null;
+    }
+    return parsed;
+}
+function addRange(values, start, end, step, min, max) {
+    if (step < 1 || start > end || start < min || end > max) {
+        return false;
+    }
+    for (let current = start; current <= end; current += step) {
+        values.add(current);
+    }
+    return true;
+}
+function parseCronField(raw, min, max, aliases = {}, options) {
+    const token = normalizeValue(raw, aliases);
+    if (token === '*' || (options?.allowQuestion && token === '?')) {
+        return makeAnyField();
+    }
+    const field = { any: false, values: new Set(), nthWeekday: null };
+    for (const piece of token.split(',')) {
+        const current = piece.trim();
+        if (!current) {
+            return null;
+        }
+        if (options?.allowNthWeekday && current.includes('#')) {
+            const [weekdayRaw, nthRaw] = current.split('#');
+            const weekday = parseSimpleNumber(weekdayRaw, min, max);
+            const nth = parseSimpleNumber(nthRaw, 1, 5);
+            if (weekday == null || nth == null) {
+                return null;
+            }
+            field.nthWeekday = {
+                weekday: options.weekdayField ? normalizeWeekday(weekday) : weekday,
+                nth,
+            };
+            continue;
+        }
+        const [base, stepRaw] = current.split('/');
+        const step = stepRaw == null ? 1 : parseSimpleNumber(stepRaw, 1, max - min + 1);
+        if (step == null) {
+            return null;
+        }
+        if (base === '*') {
+            if (!addRange(field.values, min, max, step, min, max)) {
+                return null;
+            }
+            continue;
+        }
+        if (base.includes('-')) {
+            const [startRaw, endRaw] = base.split('-');
+            const start = parseSimpleNumber(startRaw, min, max);
+            const end = parseSimpleNumber(endRaw, min, max);
+            if (start == null || end == null) {
+                return null;
+            }
+            if (!addRange(field.values, normalizeWeekday(start, options?.weekdayField), normalizeWeekday(end, options?.weekdayField), step, min, max)) {
+                return null;
+            }
+            continue;
+        }
+        const single = parseSimpleNumber(base, min, max);
+        if (single == null) {
+            return null;
+        }
+        const normalizedSingle = normalizeWeekday(single, options?.weekdayField);
+        if (stepRaw == null) {
+            field.values.add(normalizedSingle);
+            continue;
+        }
+        if (!addRange(field.values, normalizedSingle, max, step, min, max)) {
+            return null;
+        }
+    }
+    return field.values.size > 0 || field.nthWeekday != null ? field : null;
+}
+function normalizeWeekday(value, weekdayField = false) {
+    if (!weekdayField) {
+        return value;
+    }
+    return value === 7 ? 0 : value;
+}
+function getZonedDateParts(date, timeZone) {
+    const formatter = getZonedFormatter(timeZone || 'UTC');
+    const parts = formatter.formatToParts(date);
+    const record = Object.fromEntries(parts.map((part) => [part.type, part.value]));
+    return {
+        year: Number(record.year),
+        month: Number(record.month),
+        day: Number(record.day),
+        hour: Number(record.hour),
+        minute: Number(record.minute),
+        second: Number(record.second),
+        weekday: WEEKDAY_NAMES[record.weekday.toUpperCase()] ?? 0,
+    };
+}
+function isNthWeekdayInMonth(parts, nthWeekday) {
+    if (parts.weekday !== nthWeekday.weekday) {
+        return false;
+    }
+    const occurrence = Math.floor((parts.day - 1) / 7) + 1;
+    return occurrence === nthWeekday.nth;
+}
+function matchesField(field, value, parts) {
+    if (field.any) {
+        return true;
+    }
+    if (field.nthWeekday) {
+        return isNthWeekdayInMonth(parts, field.nthWeekday);
+    }
+    return field.values.has(value);
+}
+function matchesDay(parsed, parts) {
+    const domAny = parsed.dayOfMonth.any;
+    const dowAny = parsed.dayOfWeek.any && parsed.dayOfWeek.nthWeekday == null;
+    const domMatch = matchesField(parsed.dayOfMonth, parts.day, parts);
+    const dowMatch = matchesField(parsed.dayOfWeek, parts.weekday, parts);
+    if (domAny && dowAny) {
+        return true;
+    }
+    if (domAny) {
+        return dowMatch;
+    }
+    if (dowAny) {
+        return domMatch;
+    }
+    return domMatch || dowMatch;
+}
+function parseCronExpression(expression) {
+    const trimmed = expression.trim();
+    if (!trimmed) {
+        return null;
+    }
+    const parts = trimmed.split(/\s+/);
+    if (parts.length !== 5 && parts.length !== 6) {
+        return null;
+    }
+    const hasSeconds = parts.length === 6;
+    const [secondsRaw, minutesRaw, hoursRaw, domRaw, monthRaw, dowRaw] = hasSeconds
+        ? parts
+        : ['0', ...parts];
+    const seconds = parseCronField(secondsRaw, 0, 59);
+    const minutes = parseCronField(minutesRaw, 0, 59);
+    const hours = parseCronField(hoursRaw, 0, 23);
+    const dayOfMonth = parseCronField(domRaw, 1, 31, {}, { allowQuestion: true });
+    const month = parseCronField(monthRaw, 1, 12, MONTH_NAMES);
+    const dayOfWeek = parseCronField(dowRaw, 0, 7, WEEKDAY_NAMES, {
+        allowQuestion: true,
+        allowNthWeekday: true,
+        weekdayField: true,
+    });
+    if (!seconds || !minutes || !hours || !dayOfMonth || !month || !dayOfWeek) {
+        return null;
+    }
+    return {
+        raw: trimmed,
+        hasSeconds,
+        seconds,
+        minutes,
+        hours,
+        dayOfMonth,
+        month,
+        dayOfWeek,
+    };
+}
+function isValidCronExpression(expression) {
+    return parseCronExpression(expression) != null;
+}
+function formatTime(hours, minutes, locale) {
+    const seed = new Date(Date.UTC(2024, 0, 1, hours, minutes, 0));
+    return getTimeFormatter(locale || 'en-US').format(seed);
+}
+function formatWeekdayList(days) {
+    if (days.length === 0) {
+        return '';
+    }
+    if (days.length === 2 && days[0] + 1 === days[1]) {
+        return `${WEEKDAY_LABELS_EN[days[0]]} through ${WEEKDAY_LABELS_EN[days[1]]}`;
+    }
+    if (days.length === 5 && days.join(',') === '1,2,3,4,5') {
+        return 'Monday through Friday';
+    }
+    if (days.length === 7) {
+        return 'every day';
+    }
+    return days.map((day) => WEEKDAY_LABELS_EN[day]).join(', ');
+}
+function ordinal(value) {
+    if (value % 100 >= 11 && value % 100 <= 13) {
+        return `${value}th`;
+    }
+    switch (value % 10) {
+        case 1:
+            return `${value}st`;
+        case 2:
+            return `${value}nd`;
+        case 3:
+            return `${value}rd`;
+        default:
+            return `${value}th`;
+    }
+}
+function humanizeCronExpression(expression, locale = 'en-US') {
+    const parsed = parseCronExpression(expression);
+    if (!parsed) {
+        return '';
+    }
+    const minutes = parsed.minutes.values;
+    const hours = parsed.hours.values;
+    const dom = parsed.dayOfMonth.values;
+    const dow = parsed.dayOfWeek.values;
+    const nthWeekday = parsed.dayOfWeek.nthWeekday;
+    const secondsIsZero = parsed.seconds.any || parsed.seconds.values.size === 1 && parsed.seconds.values.has(0);
+    if (secondsIsZero &&
+        parsed.minutes.any &&
+        parsed.hours.any &&
+        parsed.dayOfMonth.any &&
+        parsed.month.any &&
+        parsed.dayOfWeek.any) {
+        return 'Every minute';
+    }
+    if (secondsIsZero &&
+        !parsed.minutes.any &&
+        minutes.size > 1 &&
+        hours.size === 24 &&
+        parsed.dayOfMonth.any &&
+        parsed.month.any &&
+        parsed.dayOfWeek.any) {
+        const orderedMinutes = Array.from(minutes).sort((a, b) => a - b);
+        const step = orderedMinutes[1] - orderedMinutes[0];
+        const isRegularStep = orderedMinutes.every((value, index) => index === 0 || value - orderedMinutes[index - 1] === step);
+        if (isRegularStep && orderedMinutes[0] === 0) {
+            return `Every ${step} minutes`;
+        }
+    }
+    if (parsed.seconds.any &&
+        !parsed.minutes.any &&
+        minutes.size === 1 &&
+        !parsed.hours.any &&
+        hours.size === 1 &&
+        parsed.month.any &&
+        parsed.dayOfMonth.any &&
+        parsed.dayOfWeek.any) {
+        return `At ${formatTime(Array.from(hours)[0], Array.from(minutes)[0], locale)}`;
+    }
+    if (minutes.size === 1 && hours.size === 1 && parsed.month.any && parsed.dayOfMonth.any && parsed.dayOfWeek.any) {
+        return `At ${formatTime(Array.from(hours)[0], Array.from(minutes)[0], locale)}`;
+    }
+    if (minutes.size === 1 && hours.size === 1 && parsed.month.any && parsed.dayOfMonth.any && !parsed.dayOfWeek.any && nthWeekday == null) {
+        const orderedDays = Array.from(dow).sort((a, b) => a - b);
+        return `At ${formatTime(Array.from(hours)[0], Array.from(minutes)[0], locale)}, ${formatWeekdayList(orderedDays)}`;
+    }
+    if (minutes.size === 1 && hours.size === 1 && parsed.month.any && !parsed.dayOfMonth.any && parsed.dayOfWeek.any) {
+        return `At ${formatTime(Array.from(hours)[0], Array.from(minutes)[0], locale)}, on day ${Array.from(dom)[0]} of the month`;
+    }
+    if (minutes.size === 1 && hours.size === 1 && parsed.month.any && nthWeekday) {
+        return `At ${formatTime(Array.from(hours)[0], Array.from(minutes)[0], locale)}, on the ${ordinal(nthWeekday.nth)} ${WEEKDAY_LABELS_EN[nthWeekday.weekday]} of the month`;
+    }
+    const fields = parsed.hasSeconds
+        ? [
+            fieldToString(parsed.seconds),
+            fieldToString(parsed.minutes),
+            fieldToString(parsed.hours),
+            fieldToString(parsed.dayOfMonth),
+            fieldToString(parsed.month),
+            fieldToString(parsed.dayOfWeek),
+        ]
+        : [
+            fieldToString(parsed.minutes),
+            fieldToString(parsed.hours),
+            fieldToString(parsed.dayOfMonth),
+            fieldToString(parsed.month),
+            fieldToString(parsed.dayOfWeek),
+        ];
+    return `Runs on schedule ${fields.join(' ')}`;
+}
+function fieldToString(field) {
+    if (field.any) {
+        return '*';
+    }
+    if (field.nthWeekday) {
+        return `${field.nthWeekday.weekday}#${field.nthWeekday.nth}`;
+    }
+    return Array.from(field.values).sort((a, b) => a - b).join(',');
+}
+function roundCandidate(date, hasSeconds) {
+    const rounded = new Date(date.getTime());
+    if (hasSeconds) {
+        rounded.setMilliseconds(0);
+        rounded.setSeconds(rounded.getSeconds() + 1);
+    }
+    else {
+        rounded.setSeconds(0, 0);
+        rounded.setMinutes(rounded.getMinutes() + 1);
+    }
+    return rounded;
+}
+function matchesCron(parsed, date, timeZone) {
+    const parts = getZonedDateParts(date, timeZone || 'UTC');
+    return (matchesField(parsed.month, parts.month, parts) &&
+        matchesDay(parsed, parts) &&
+        matchesField(parsed.hours, parts.hour, parts) &&
+        matchesField(parsed.minutes, parts.minute, parts) &&
+        matchesField(parsed.seconds, parts.second, parts));
+}
+function getNextCronOccurrences(expression, count, options) {
+    const parsed = parseCronExpression(expression);
+    if (!parsed || count <= 0) {
+        return [];
+    }
+    const timeZone = options?.timeZone || 'UTC';
+    const results = [];
+    const stepMs = parsed.hasSeconds ? 1000 : 60_000;
+    let cursor = roundCandidate(options?.currentDate ?? new Date(), parsed.hasSeconds);
+    let iterations = 0;
+    const maxIterations = parsed.hasSeconds ? 250_000 : 50_000;
+    while (results.length < count && iterations < maxIterations) {
+        if (matchesCron(parsed, cursor, timeZone)) {
+            results.push(new Date(cursor.getTime()));
+        }
+        cursor = new Date(cursor.getTime() + stepMs);
+        iterations += 1;
+    }
+    return results;
+}
+
 class PdxCronBuilderComponent {
     // Tipos auxiliares para Typed Forms
     fb = inject(NonNullableFormBuilder);
@@ -201,58 +596,26 @@ class PdxCronBuilderComponent {
         }
     }
     validate(cron) {
-        (async () => {
-            try {
-                _cronValidator = _cronValidator || (await import('cron-validator'));
-                const ok = await _cronValidator.isValidCron?.(cron, { alias: true, allowBlankDay: true });
-                this.error = ok
-                    ? null
-                    : this.metadata.validators?.invalidCronMessage || 'Invalid CRON expression';
-            }
-            catch {
-                // On import/validation failure, do a minimal sanity check and do not block UX
-                this.error = /\S+ \S+ \S+ \S+ \S+/.test(cron) ? null : 'Invalid CRON expression';
-            }
-        })();
+        this.error = isValidCronExpression(cron)
+            ? null
+            : this.metadata.validators?.invalidCronMessage || 'Invalid CRON expression';
     }
     humanize(cron) {
         if (this.error) {
             this.humanized = '';
             return;
         }
-        (async () => {
-            try {
-                _cronstrue = _cronstrue || (await import('cronstrue'));
-                this.humanized = _cronstrue.toString?.(cron, { locale: this.metadata.locale }) || '';
-            }
-            catch {
-                this.humanized = '';
-            }
-        })();
+        this.humanized = humanizeCronExpression(cron, this.metadata.locale || 'en-US');
     }
     generatePreview(cron) {
         if (this.error || !this.metadata.previewOccurrences) {
             this.preview = [];
             return;
         }
-        (async () => {
-            try {
-                _cronParser = _cronParser || (await import('cron-parser'));
-                const parse = _cronParser.parse || _cronParser.default?.parse;
-                const interval = parse?.(cron, {
-                    currentDate: this.metadata.previewFrom ?? new Date(),
-                    tz: this.metadata.timezone,
-                });
-                const next = [];
-                for (let i = 0; i < (this.metadata.previewOccurrences ?? 5); i++) {
-                    next.push(interval.next().toDate());
-                }
-                this.preview = next;
-            }
-            catch {
-                this.preview = [];
-            }
-        })();
+        this.preview = getNextCronOccurrences(cron, this.metadata.previewOccurrences ?? 5, {
+            currentDate: this.metadata.previewFrom ?? new Date(),
+            timeZone: this.metadata.timezone,
+        });
     }
     parseCronString(cron) {
         const parts = cron.trim().split(/\s+/);
@@ -384,7 +747,7 @@ class PdxCronBuilderComponent {
                 useExisting: forwardRef(() => PdxCronBuilderComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"cron-builder-container\" (focusout)=\"onTouched()\">\n  @if (metadata.mode === 'both') {\n    <mat-tab-group\n      [selectedIndex]=\"selectedTabIndex\"\n      (selectedTabChange)=\"onTabChange($event)\"\n    >\n      <mat-tab label=\"Simple\"></mat-tab>\n      <mat-tab label=\"Advanced\"></mat-tab>\n    </mat-tab-group>\n  }\n\n  @if (value) {\n    <div class=\"cron-expression\">\n    <mat-form-field appearance=\"outline\" class=\"cron-expression-field\">\n      <mat-label>CRON Expression</mat-label>\n      <input matInput [value]=\"value\" readonly />\n      <button\n        mat-icon-button\n        matSuffix\n        (click)=\"copyCron()\"\n        [matTooltip]=\"'Copy to clipboard'\"\n        aria-label=\"Copy CRON expression\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-button (click)=\"importCron()\">Import CRON</button>\n    </div>\n  }\n\n  @switch (activeTab) {\n    @case ('simple') {\n      <div [formGroup]=\"simpleForm\" class=\"simple-mode\">\n      <mat-form-field appearance=\"outline\" class=\"preset-select\">\n        <mat-label>Preset</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"everyNMinutes\">A cada X min</mat-option>\n          <mat-option value=\"dailyAt\">Diariamente \u00E0s</mat-option>\n          <mat-option value=\"weekly\">Semanal (dias marcados) \u00E0s</mat-option>\n          <mat-option value=\"monthlyDay\">Mensal (dia N) \u00E0s</mat-option>\n          <mat-option value=\"monthlyNthWeekday\">\n            Mensal (N-\u00E9sima 2\u00AA-feira) \u00E0s\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n\n        @switch (simpleControls.type.value) {\n          @case ('everyNMinutes') {\n            <div class=\"preset-body\">\n          <mat-slider\n            formControlName=\"everyN\"\n            min=\"1\"\n            max=\"60\"\n            step=\"1\"\n            thumbLabel\n          ></mat-slider>\n          <div class=\"cron-hint\">\n                A cada {{ simpleControls.everyN.value }} minutos\n          </div>\n            </div>\n          }\n\n          @case ('dailyAt') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"dailyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Diariamente \u00E0s {{ simpleControls.dailyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('weekly') {\n            <div class=\"preset-body\">\n          <mat-chip-listbox formControlName=\"weeklyDays\" multiple>\n              @for (day of weeklyDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"weeklyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Semanalmente \u00E0s {{ simpleControls.weeklyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyDay') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dia</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              formControlName=\"monthlyDay\"\n              min=\"1\"\n              max=\"31\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"monthlyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Dia {{ simpleControls.monthlyDay.value }} \u00E0s\n                {{ simpleControls.monthlyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyNthWeekday') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>N-\u00E9sima</mat-label>\n            <mat-select formControlName=\"nth\">\n                @for (nth of nthOrderOptions; track nth) {\n                  <mat-option [value]=\"nth\">{{ nth }}\u00AA</mat-option>\n                }\n            </mat-select>\n          </mat-form-field>\n          <mat-chip-listbox formControlName=\"nthDay\">\n              @for (day of nthDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"nthTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                {{ simpleControls.nth.value }}\u00AA\n                {{ weekdayLabels[simpleControls.nthDay.value] }}\n                \u00E0s\n                {{ simpleControls.nthTime.value }}\n          </div>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @case ('advanced') {\n      <div [formGroup]=\"form\">\n        <div class=\"cron-fields\">\n          @if (metadata.fields?.minutes) {\n            <mat-form-field>\n              <mat-label>Minutes</mat-label>\n              <input matInput formControlName=\"minutes\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.hours) {\n            <mat-form-field>\n              <mat-label>Hours</mat-label>\n              <input matInput formControlName=\"hours\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dom) {\n            <mat-form-field>\n              <mat-label>Day of Month</mat-label>\n              <input matInput formControlName=\"dayOfMonth\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.month) {\n            <mat-form-field>\n              <mat-label>Month</mat-label>\n              <input matInput formControlName=\"month\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dow) {\n            <mat-form-field>\n              <mat-label>Day of Week</mat-label>\n              <input matInput formControlName=\"dayOfWeek\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.seconds) {\n            <mat-form-field>\n              <mat-label>Seconds</mat-label>\n              <input matInput formControlName=\"seconds\" />\n            </mat-form-field>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"cron-feedback\">\n    <mat-form-field appearance=\"outline\" class=\"timezone-field\">\n      <mat-label>Timezone</mat-label>\n      <mat-select [formControl]=\"timezoneControl\">\n        @for (tz of timezoneOptions; track tz) {\n          <mat-option [value]=\"tz\">\n            {{ tz }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    @if (humanized) {\n      <div class=\"humanized-description\" aria-live=\"polite\">\n        {{ humanized }}\n      <button\n        mat-icon-button\n        class=\"copy-humanized\"\n        (click)=\"copyHumanized()\"\n        [matTooltip]=\"'Copy description'\"\n        aria-label=\"Copy description\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"cron-error\">{{ error }}</div>\n    }\n\n    @if (preview.length > 0) {\n      <div class=\"preview-section\">\n        <h4>Next Occurrences:</h4>\n        <mat-list>\n          @for (date of preview; track $index) {\n            <mat-list-item>\n              {{\n                date\n                  | date\n                    : \"full\"\n                    : timezoneControl.value\n                    : metadata.locale || \"pt-BR\"\n              }}\n            </mat-list-item>\n          }\n        </mat-list>\n      </div>\n    }\n  </div>\n\n  @if (metadata.hint) {\n    <div class=\"cron-hint\">{{ metadata.hint }}</div>\n  }\n</div>\n", styles: [":host{display:block}.cron-expression-field{width:100%}.cron-expression{margin-bottom:1rem}.simple-mode{display:flex;flex-direction:column;gap:1rem}.preset-body{display:flex;flex-direction:column;gap:.5rem}.cron-feedback{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.humanized-description{display:flex;align-items:center;gap:.5rem}.timezone-field{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i9.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i10.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i10.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0, template: "<div class=\"cron-builder-container\" (focusout)=\"onTouched()\">\n  @if (metadata.mode === 'both') {\n    <mat-tab-group\n      [selectedIndex]=\"selectedTabIndex\"\n      (selectedTabChange)=\"onTabChange($event)\"\n    >\n      <mat-tab label=\"Simple\"></mat-tab>\n      <mat-tab label=\"Advanced\"></mat-tab>\n    </mat-tab-group>\n  }\n\n  @if (value) {\n    <div class=\"cron-expression\">\n    <mat-form-field appearance=\"outline\" class=\"cron-expression-field\">\n      <mat-label>CRON Expression</mat-label>\n      <input matInput [value]=\"value\" readonly />\n      <button\n        mat-icon-button\n        matSuffix\n        (click)=\"copyCron()\"\n        [matTooltip]=\"'Copy to clipboard'\"\n        aria-label=\"Copy CRON expression\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-button (click)=\"importCron()\">Import CRON</button>\n    </div>\n  }\n\n  @switch (activeTab) {\n    @case ('simple') {\n      <div [formGroup]=\"simpleForm\" class=\"simple-mode\">\n      <mat-form-field appearance=\"outline\" class=\"preset-select\">\n        <mat-label>Preset</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"everyNMinutes\">A cada X min</mat-option>\n          <mat-option value=\"dailyAt\">Diariamente \u00E0s</mat-option>\n          <mat-option value=\"weekly\">Semanal (dias marcados) \u00E0s</mat-option>\n          <mat-option value=\"monthlyDay\">Mensal (dia N) \u00E0s</mat-option>\n          <mat-option value=\"monthlyNthWeekday\">\n            Mensal (N-\u00E9sima 2\u00AA-feira) \u00E0s\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n\n        @switch (simpleControls.type.value) {\n          @case ('everyNMinutes') {\n            <div class=\"preset-body\">\n          <mat-slider\n            min=\"1\"\n            max=\"60\"\n            step=\"1\"\n            thumbLabel\n          >\n            <input matSliderThumb formControlName=\"everyN\" />\n          </mat-slider>\n          <div class=\"cron-hint\">\n                A cada {{ simpleControls.everyN.value }} minutos\n          </div>\n            </div>\n          }\n\n          @case ('dailyAt') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"dailyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Diariamente \u00E0s {{ simpleControls.dailyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('weekly') {\n            <div class=\"preset-body\">\n          <mat-chip-listbox formControlName=\"weeklyDays\" multiple>\n              @for (day of weeklyDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"weeklyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Semanalmente \u00E0s {{ simpleControls.weeklyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyDay') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dia</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              formControlName=\"monthlyDay\"\n              min=\"1\"\n              max=\"31\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"monthlyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Dia {{ simpleControls.monthlyDay.value }} \u00E0s\n                {{ simpleControls.monthlyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyNthWeekday') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>N-\u00E9sima</mat-label>\n            <mat-select formControlName=\"nth\">\n                @for (nth of nthOrderOptions; track nth) {\n                  <mat-option [value]=\"nth\">{{ nth }}\u00AA</mat-option>\n                }\n            </mat-select>\n          </mat-form-field>\n          <mat-chip-listbox formControlName=\"nthDay\">\n              @for (day of nthDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"nthTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                {{ simpleControls.nth.value }}\u00AA\n                {{ weekdayLabels[simpleControls.nthDay.value] }}\n                \u00E0s\n                {{ simpleControls.nthTime.value }}\n          </div>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @case ('advanced') {\n      <div [formGroup]=\"form\">\n        <div class=\"cron-fields\">\n          @if (metadata.fields?.minutes) {\n            <mat-form-field>\n              <mat-label>Minutes</mat-label>\n              <input matInput formControlName=\"minutes\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.hours) {\n            <mat-form-field>\n              <mat-label>Hours</mat-label>\n              <input matInput formControlName=\"hours\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dom) {\n            <mat-form-field>\n              <mat-label>Day of Month</mat-label>\n              <input matInput formControlName=\"dayOfMonth\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.month) {\n            <mat-form-field>\n              <mat-label>Month</mat-label>\n              <input matInput formControlName=\"month\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dow) {\n            <mat-form-field>\n              <mat-label>Day of Week</mat-label>\n              <input matInput formControlName=\"dayOfWeek\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.seconds) {\n            <mat-form-field>\n              <mat-label>Seconds</mat-label>\n              <input matInput formControlName=\"seconds\" />\n            </mat-form-field>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"cron-feedback\">\n    <mat-form-field appearance=\"outline\" class=\"timezone-field\">\n      <mat-label>Timezone</mat-label>\n      <mat-select [formControl]=\"timezoneControl\">\n        @for (tz of timezoneOptions; track tz) {\n          <mat-option [value]=\"tz\">\n            {{ tz }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    @if (humanized) {\n      <div class=\"humanized-description\" aria-live=\"polite\">\n        {{ humanized }}\n      <button\n        mat-icon-button\n        class=\"copy-humanized\"\n        (click)=\"copyHumanized()\"\n        [matTooltip]=\"'Copy description'\"\n        aria-label=\"Copy description\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"cron-error\">{{ error }}</div>\n    }\n\n    @if (preview.length > 0) {\n      <div class=\"preview-section\">\n        <h4>Next Occurrences:</h4>\n        <mat-list>\n          @for (date of preview; track $index) {\n            <mat-list-item>\n              {{\n                date\n                  | date\n                    : \"full\"\n                    : timezoneControl.value\n                    : metadata.locale || \"pt-BR\"\n              }}\n            </mat-list-item>\n          }\n        </mat-list>\n      </div>\n    }\n  </div>\n\n  @if (metadata.hint) {\n    <div class=\"cron-hint\">{{ metadata.hint }}</div>\n  }\n</div>\n", styles: [":host{display:block}.cron-expression-field{width:100%}.cron-expression{margin-bottom:1rem}.simple-mode{display:flex;flex-direction:column;gap:1rem}.preset-body{display:flex;flex-direction:column;gap:.5rem}.cron-feedback{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.humanized-description{display:flex;align-items:center;gap:.5rem}.timezone-field{width:250px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i5.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i9.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i9.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i10.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i10.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PdxCronBuilderComponent, decorators: [{
             type: Component,
@@ -410,7 +773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             useExisting: forwardRef(() => PdxCronBuilderComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"cron-builder-container\" (focusout)=\"onTouched()\">\n  @if (metadata.mode === 'both') {\n    <mat-tab-group\n      [selectedIndex]=\"selectedTabIndex\"\n      (selectedTabChange)=\"onTabChange($event)\"\n    >\n      <mat-tab label=\"Simple\"></mat-tab>\n      <mat-tab label=\"Advanced\"></mat-tab>\n    </mat-tab-group>\n  }\n\n  @if (value) {\n    <div class=\"cron-expression\">\n    <mat-form-field appearance=\"outline\" class=\"cron-expression-field\">\n      <mat-label>CRON Expression</mat-label>\n      <input matInput [value]=\"value\" readonly />\n      <button\n        mat-icon-button\n        matSuffix\n        (click)=\"copyCron()\"\n        [matTooltip]=\"'Copy to clipboard'\"\n        aria-label=\"Copy CRON expression\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-button (click)=\"importCron()\">Import CRON</button>\n    </div>\n  }\n\n  @switch (activeTab) {\n    @case ('simple') {\n      <div [formGroup]=\"simpleForm\" class=\"simple-mode\">\n      <mat-form-field appearance=\"outline\" class=\"preset-select\">\n        <mat-label>Preset</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"everyNMinutes\">A cada X min</mat-option>\n          <mat-option value=\"dailyAt\">Diariamente \u00E0s</mat-option>\n          <mat-option value=\"weekly\">Semanal (dias marcados) \u00E0s</mat-option>\n          <mat-option value=\"monthlyDay\">Mensal (dia N) \u00E0s</mat-option>\n          <mat-option value=\"monthlyNthWeekday\">\n            Mensal (N-\u00E9sima 2\u00AA-feira) \u00E0s\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n\n        @switch (simpleControls.type.value) {\n          @case ('everyNMinutes') {\n            <div class=\"preset-body\">\n          <mat-slider\n            formControlName=\"everyN\"\n            min=\"1\"\n            max=\"60\"\n            step=\"1\"\n            thumbLabel\n          ></mat-slider>\n          <div class=\"cron-hint\">\n                A cada {{ simpleControls.everyN.value }} minutos\n          </div>\n            </div>\n          }\n\n          @case ('dailyAt') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"dailyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Diariamente \u00E0s {{ simpleControls.dailyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('weekly') {\n            <div class=\"preset-body\">\n          <mat-chip-listbox formControlName=\"weeklyDays\" multiple>\n              @for (day of weeklyDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"weeklyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Semanalmente \u00E0s {{ simpleControls.weeklyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyDay') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dia</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              formControlName=\"monthlyDay\"\n              min=\"1\"\n              max=\"31\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"monthlyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Dia {{ simpleControls.monthlyDay.value }} \u00E0s\n                {{ simpleControls.monthlyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyNthWeekday') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>N-\u00E9sima</mat-label>\n            <mat-select formControlName=\"nth\">\n                @for (nth of nthOrderOptions; track nth) {\n                  <mat-option [value]=\"nth\">{{ nth }}\u00AA</mat-option>\n                }\n            </mat-select>\n          </mat-form-field>\n          <mat-chip-listbox formControlName=\"nthDay\">\n              @for (day of nthDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"nthTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                {{ simpleControls.nth.value }}\u00AA\n                {{ weekdayLabels[simpleControls.nthDay.value] }}\n                \u00E0s\n                {{ simpleControls.nthTime.value }}\n          </div>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @case ('advanced') {\n      <div [formGroup]=\"form\">\n        <div class=\"cron-fields\">\n          @if (metadata.fields?.minutes) {\n            <mat-form-field>\n              <mat-label>Minutes</mat-label>\n              <input matInput formControlName=\"minutes\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.hours) {\n            <mat-form-field>\n              <mat-label>Hours</mat-label>\n              <input matInput formControlName=\"hours\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dom) {\n            <mat-form-field>\n              <mat-label>Day of Month</mat-label>\n              <input matInput formControlName=\"dayOfMonth\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.month) {\n            <mat-form-field>\n              <mat-label>Month</mat-label>\n              <input matInput formControlName=\"month\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dow) {\n            <mat-form-field>\n              <mat-label>Day of Week</mat-label>\n              <input matInput formControlName=\"dayOfWeek\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.seconds) {\n            <mat-form-field>\n              <mat-label>Seconds</mat-label>\n              <input matInput formControlName=\"seconds\" />\n            </mat-form-field>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"cron-feedback\">\n    <mat-form-field appearance=\"outline\" class=\"timezone-field\">\n      <mat-label>Timezone</mat-label>\n      <mat-select [formControl]=\"timezoneControl\">\n        @for (tz of timezoneOptions; track tz) {\n          <mat-option [value]=\"tz\">\n            {{ tz }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    @if (humanized) {\n      <div class=\"humanized-description\" aria-live=\"polite\">\n        {{ humanized }}\n      <button\n        mat-icon-button\n        class=\"copy-humanized\"\n        (click)=\"copyHumanized()\"\n        [matTooltip]=\"'Copy description'\"\n        aria-label=\"Copy description\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"cron-error\">{{ error }}</div>\n    }\n\n    @if (preview.length > 0) {\n      <div class=\"preview-section\">\n        <h4>Next Occurrences:</h4>\n        <mat-list>\n          @for (date of preview; track $index) {\n            <mat-list-item>\n              {{\n                date\n                  | date\n                    : \"full\"\n                    : timezoneControl.value\n                    : metadata.locale || \"pt-BR\"\n              }}\n            </mat-list-item>\n          }\n        </mat-list>\n      </div>\n    }\n  </div>\n\n  @if (metadata.hint) {\n    <div class=\"cron-hint\">{{ metadata.hint }}</div>\n  }\n</div>\n", styles: [":host{display:block}.cron-expression-field{width:100%}.cron-expression{margin-bottom:1rem}.simple-mode{display:flex;flex-direction:column;gap:1rem}.preset-body{display:flex;flex-direction:column;gap:.5rem}.cron-feedback{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.humanized-description{display:flex;align-items:center;gap:.5rem}.timezone-field{width:250px}\n"] }]
+                    ], template: "<div class=\"cron-builder-container\" (focusout)=\"onTouched()\">\n  @if (metadata.mode === 'both') {\n    <mat-tab-group\n      [selectedIndex]=\"selectedTabIndex\"\n      (selectedTabChange)=\"onTabChange($event)\"\n    >\n      <mat-tab label=\"Simple\"></mat-tab>\n      <mat-tab label=\"Advanced\"></mat-tab>\n    </mat-tab-group>\n  }\n\n  @if (value) {\n    <div class=\"cron-expression\">\n    <mat-form-field appearance=\"outline\" class=\"cron-expression-field\">\n      <mat-label>CRON Expression</mat-label>\n      <input matInput [value]=\"value\" readonly />\n      <button\n        mat-icon-button\n        matSuffix\n        (click)=\"copyCron()\"\n        [matTooltip]=\"'Copy to clipboard'\"\n        aria-label=\"Copy CRON expression\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n      </button>\n    </mat-form-field>\n    <button mat-button (click)=\"importCron()\">Import CRON</button>\n    </div>\n  }\n\n  @switch (activeTab) {\n    @case ('simple') {\n      <div [formGroup]=\"simpleForm\" class=\"simple-mode\">\n      <mat-form-field appearance=\"outline\" class=\"preset-select\">\n        <mat-label>Preset</mat-label>\n        <mat-select formControlName=\"type\">\n          <mat-option value=\"everyNMinutes\">A cada X min</mat-option>\n          <mat-option value=\"dailyAt\">Diariamente \u00E0s</mat-option>\n          <mat-option value=\"weekly\">Semanal (dias marcados) \u00E0s</mat-option>\n          <mat-option value=\"monthlyDay\">Mensal (dia N) \u00E0s</mat-option>\n          <mat-option value=\"monthlyNthWeekday\">\n            Mensal (N-\u00E9sima 2\u00AA-feira) \u00E0s\n          </mat-option>\n        </mat-select>\n      </mat-form-field>\n\n        @switch (simpleControls.type.value) {\n          @case ('everyNMinutes') {\n            <div class=\"preset-body\">\n          <mat-slider\n            min=\"1\"\n            max=\"60\"\n            step=\"1\"\n            thumbLabel\n          >\n            <input matSliderThumb formControlName=\"everyN\" />\n          </mat-slider>\n          <div class=\"cron-hint\">\n                A cada {{ simpleControls.everyN.value }} minutos\n          </div>\n            </div>\n          }\n\n          @case ('dailyAt') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"dailyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Diariamente \u00E0s {{ simpleControls.dailyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('weekly') {\n            <div class=\"preset-body\">\n          <mat-chip-listbox formControlName=\"weeklyDays\" multiple>\n              @for (day of weeklyDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"weeklyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Semanalmente \u00E0s {{ simpleControls.weeklyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyDay') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Dia</mat-label>\n            <input\n              matInput\n              type=\"number\"\n              formControlName=\"monthlyDay\"\n              min=\"1\"\n              max=\"31\"\n            />\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"monthlyTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                Dia {{ simpleControls.monthlyDay.value }} \u00E0s\n                {{ simpleControls.monthlyTime.value }}\n          </div>\n            </div>\n          }\n\n          @case ('monthlyNthWeekday') {\n            <div class=\"preset-body\">\n          <mat-form-field appearance=\"outline\">\n            <mat-label>N-\u00E9sima</mat-label>\n            <mat-select formControlName=\"nth\">\n                @for (nth of nthOrderOptions; track nth) {\n                  <mat-option [value]=\"nth\">{{ nth }}\u00AA</mat-option>\n                }\n            </mat-select>\n          </mat-form-field>\n          <mat-chip-listbox formControlName=\"nthDay\">\n              @for (day of nthDayOptions; track day) {\n                <mat-chip-option [value]=\"day\">\n                  {{ weekdayLabels[day] }}\n                </mat-chip-option>\n              }\n          </mat-chip-listbox>\n          <mat-form-field appearance=\"outline\">\n            <mat-label>Hora</mat-label>\n            <input matInput type=\"time\" formControlName=\"nthTime\" />\n          </mat-form-field>\n          <div class=\"cron-hint\">\n                {{ simpleControls.nth.value }}\u00AA\n                {{ weekdayLabels[simpleControls.nthDay.value] }}\n                \u00E0s\n                {{ simpleControls.nthTime.value }}\n          </div>\n            </div>\n          }\n        }\n      </div>\n    }\n\n    @case ('advanced') {\n      <div [formGroup]=\"form\">\n        <div class=\"cron-fields\">\n          @if (metadata.fields?.minutes) {\n            <mat-form-field>\n              <mat-label>Minutes</mat-label>\n              <input matInput formControlName=\"minutes\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.hours) {\n            <mat-form-field>\n              <mat-label>Hours</mat-label>\n              <input matInput formControlName=\"hours\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dom) {\n            <mat-form-field>\n              <mat-label>Day of Month</mat-label>\n              <input matInput formControlName=\"dayOfMonth\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.month) {\n            <mat-form-field>\n              <mat-label>Month</mat-label>\n              <input matInput formControlName=\"month\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.dow) {\n            <mat-form-field>\n              <mat-label>Day of Week</mat-label>\n              <input matInput formControlName=\"dayOfWeek\" />\n            </mat-form-field>\n          }\n          @if (metadata.fields?.seconds) {\n            <mat-form-field>\n              <mat-label>Seconds</mat-label>\n              <input matInput formControlName=\"seconds\" />\n            </mat-form-field>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  <div class=\"cron-feedback\">\n    <mat-form-field appearance=\"outline\" class=\"timezone-field\">\n      <mat-label>Timezone</mat-label>\n      <mat-select [formControl]=\"timezoneControl\">\n        @for (tz of timezoneOptions; track tz) {\n          <mat-option [value]=\"tz\">\n            {{ tz }}\n          </mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n\n    @if (humanized) {\n      <div class=\"humanized-description\" aria-live=\"polite\">\n        {{ humanized }}\n      <button\n        mat-icon-button\n        class=\"copy-humanized\"\n        (click)=\"copyHumanized()\"\n        [matTooltip]=\"'Copy description'\"\n        aria-label=\"Copy description\"\n      >\n        <mat-icon [praxisIcon]=\"'content_copy'\"></mat-icon>\n        </button>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"cron-error\">{{ error }}</div>\n    }\n\n    @if (preview.length > 0) {\n      <div class=\"preview-section\">\n        <h4>Next Occurrences:</h4>\n        <mat-list>\n          @for (date of preview; track $index) {\n            <mat-list-item>\n              {{\n                date\n                  | date\n                    : \"full\"\n                    : timezoneControl.value\n                    : metadata.locale || \"pt-BR\"\n              }}\n            </mat-list-item>\n          }\n        </mat-list>\n      </div>\n    }\n  </div>\n\n  @if (metadata.hint) {\n    <div class=\"cron-hint\">{{ metadata.hint }}</div>\n  }\n</div>\n", styles: [":host{display:block}.cron-expression-field{width:100%}.cron-expression{margin-bottom:1rem}.simple-mode{display:flex;flex-direction:column;gap:1rem}.preset-body{display:flex;flex-direction:column;gap:.5rem}.cron-feedback{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.humanized-description{display:flex;align-items:center;gap:.5rem}.timezone-field{width:250px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { metadata: [{
                 type: Input
             }] } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/cron-builder",
-  "version": "6.0.0-beta.0",
+  "version": "8.0.0-beta.0",
   "description": "Cron expression builder utilities and components for Praxis UI.",
   "peerDependencies": {
     "@angular/common": "^20.1.0",
@@ -8,7 +8,7 @@
     "@angular/forms": "^20.1.0",
     "@angular/cdk": "^20.1.0",
     "@angular/material": "^20.1.0",
-    "@praxisui/core": "^6.0.0-beta.0"
+    "@praxisui/core": "^8.0.0-beta.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",