@meshmakers/shared-ui 3.5.300 → 3.5.360

package/fesm2022/meshmakers-shared-ui.mjs

@@ -7306,8 +7306,6 @@ class CronBuilderComponent {
     // --- Internal state ---
     expression = signal('0 * * * * *', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expression" }] : /* istanbul ignore next */ []));
-    selectedTabIndex = signal(3, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedTabIndex" }] : /* istanbul ignore next */ [])); // Default to Daily tab
     copiedRecently = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "copiedRecently" }] : /* istanbul ignore next */ []));
     suppressOnChange = true; // Suppress onChange until user interacts
@@ -7411,6 +7409,22 @@ class CronBuilderComponent {
     tabIndexToType = [
         'seconds', 'minutes', 'hourly', 'daily', 'weekly', 'monthly', 'custom'
     ];
+    visibleTypes = computed(() => {
+        const config = this.mergedConfig();
+        return this.tabIndexToType.filter(type => (!config.scheduleTypes || config.scheduleTypes.includes(type)) && (type !== 'custom' || !!config.allowCustom));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTypes" }] : /* istanbul ignore next */ []));
+    selectedTab = computed(() => {
+        const visible = this.visibleTypes();
+        const type = this.scheduleType();
+        if (visible.includes(type))
+            return type;
+        return visible.includes('custom') ? 'custom' : visible[0];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+    shows(type) {
+        return this.visibleTypes().includes(type);
+    }
     constructor() {
         // Assigned here rather than as field initialisers: a class field initialised from a
         // relative import reads `undefined` under the Vitest module runner, so calling the
@@ -7439,7 +7453,6 @@ class CronBuilderComponent {
     ngOnInit() {
         const defaultType = this.mergedConfig().defaultScheduleType || 'daily';
         this.scheduleType.set(defaultType);
-        this.selectedTabIndex.set(this.tabIndexToType.indexOf(defaultType));
     }
     // --- ControlValueAccessor implementation ---
     writeValue(value) {
@@ -7460,8 +7473,7 @@ class CronBuilderComponent {
     // --- Event handlers ---
     onTabSelect(index) {
         this.suppressOnChange = false;
-        this.selectedTabIndex.set(index);
-        const type = this.tabIndexToType[index];
+        const type = this.visibleTypes()[index];
         if (type) {
             this.scheduleType.set(type);
         }
@@ -7670,7 +7682,6 @@ class CronBuilderComponent {
         if (!schedule)
             return;
         this.scheduleType.set(schedule.type);
-        this.selectedTabIndex.set(this.tabIndexToType.indexOf(schedule.type));
         // Parse custom fields first (always available)
         if (schedule.customFields) {
             this.customSecond.set(schedule.customFields.second);
@@ -7741,7 +7752,7 @@ class CronBuilderComponent {
                 useExisting: forwardRef(() => CronBuilderComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"cron-builder\" [class.disabled]=\"disabled()\">\n  <!-- Expression Preview Section -->\n  <div class=\"expression-section\">\n    <div class=\"expression-display\">\n      <div class=\"expression-label\">Cron Expression</div>\n      <div class=\"expression-value-row\">\n        <code class=\"expression-value\" [class.invalid]=\"!validationResult().isValid\">\n          {{ expression() }}\n        </code>\n        @if (mergedConfig().showCopyButton) {\n          <button\n            kendoButton\n            [svgIcon]=\"copiedRecently() ? checkIcon : copyIcon\"\n            [title]=\"copiedRecently() ? 'Copied!' : 'Copy to clipboard'\"\n            fillMode=\"flat\"\n            class=\"copy-button\"\n            [class.copied]=\"copiedRecently()\"\n            (click)=\"onCopyExpression()\"\n            [disabled]=\"disabled()\">\n          </button>\n        }\n      </div>\n      @if (!validationResult().isValid) {\n        <div class=\"validation-error\">\n          <kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon>\n          {{ validationResult().error }}\n        </div>\n      }\n    </div>\n\n    @if (mergedConfig().showHumanReadable && validationResult().isValid) {\n      <div class=\"human-readable\">\n        <kendo-svg-icon [icon]=\"clockIcon\" size=\"small\"></kendo-svg-icon>\n        <span>{{ humanReadable() }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- Preset Buttons -->\n  @if (mergedConfig().showPresets) {\n    <div class=\"presets-section\">\n      <div class=\"presets-label\">Quick Select</div>\n      <div class=\"presets-grid\">\n        @for (preset of presetsByCategory().frequent; track preset.id) {\n          <button\n            kendoButton\n            size=\"small\"\n            fillMode=\"outline\"\n            class=\"preset-button\"\n            [title]=\"preset.description\"\n            [disabled]=\"disabled()\"\n            (click)=\"onPresetSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Type Tabs -->\n  <kendo-tabstrip\n    [animate]=\"false\"\n    [tabAlignment]=\"'start'\"\n    (tabSelect)=\"onTabSelect($event.index)\">\n\n    <!-- Seconds Tab -->\n    <kendo-tabstrip-tab [title]=\"'Seconds'\" [selected]=\"selectedTabIndex() === 0\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"secondIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"secondInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onSecondIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>*/{{ secondInterval() }} * * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Minutes Tab -->\n    <kendo-tabstrip-tab [title]=\"'Minutes'\" [selected]=\"selectedTabIndex() === 1\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"minuteInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onMinuteIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>0 */{{ minuteInterval() }} * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Hourly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Hourly'\" [selected]=\"selectedTabIndex() === 2\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-row\">\n            <kendo-label text=\"At minute\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourSecondChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"time-label\">(mm:ss)</span>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Daily Tab -->\n    <kendo-tabstrip-tab [title]=\"'Daily'\" [selected]=\"selectedTabIndex() === 3\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <kendo-label text=\"On\"></kendo-label>\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'every'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('every')\">\n                Every day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekdays'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekdays')\">\n                Weekdays\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekends'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekends')\">\n                Weekends\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('specific')\">\n                Specific days\n              </button>\n            </div>\n          </div>\n\n          @if (dailyMode() === 'specific') {\n            <div class=\"form-row days-row\">\n              <div class=\"day-buttons\">\n                @for (day of weekdayAbbreviations; track day.value) {\n                  <button\n                    kendoButton\n                    [selected]=\"isDaySelected(day.value)\"\n                    [disabled]=\"disabled()\"\n                    class=\"day-button\"\n                    (click)=\"onDayToggle(day.value)\">\n                    {{ day.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Weekly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Weekly'\" [selected]=\"selectedTabIndex() === 4\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row\">\n            <kendo-label text=\"On days\"></kendo-label>\n            <div class=\"day-buttons\">\n              @for (day of weekdayAbbreviations; track day.value) {\n                <button\n                  kendoButton\n                  [selected]=\"isDaySelected(day.value)\"\n                  [disabled]=\"disabled()\"\n                  class=\"day-button\"\n                  (click)=\"onDayToggle(day.value)\">\n                  {{ day.label }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Monthly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Monthly'\" [selected]=\"selectedTabIndex() === 5\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('specific')\">\n                Specific day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'relative'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('relative')\">\n                Relative day\n              </button>\n            </div>\n          </div>\n\n          @if (monthlyMode() === 'specific') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On day\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"dayOfMonthOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"dayOfMonth()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onDayOfMonthChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n\n          @if (monthlyMode() === 'relative') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On the\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"relativeWeekOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeWeek()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeWeekChange($event)\">\n              </kendo-dropdownlist>\n              <kendo-dropdownlist\n                [data]=\"weekdayOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeDay()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeDayChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Custom/Advanced Tab -->\n    @if (mergedConfig().allowCustom) {\n      <kendo-tabstrip-tab [title]=\"'Custom'\" [selected]=\"selectedTabIndex() === 6\">\n        <ng-template kendoTabContent>\n          <div class=\"tab-content custom-tab\">\n            <div class=\"custom-fields\">\n              <div class=\"custom-field\">\n                <kendo-label text=\"Second\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customSecond()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('second', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Minute\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMinute()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('minute', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Hour\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customHour()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('hour', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-23, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Day\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfMonth', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-31, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Month\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('month', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-12, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Weekday\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfWeek()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfWeek', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-6 (Sun-Sat)</span>\n              </div>\n            </div>\n\n            <div class=\"syntax-reference\">\n              <div class=\"reference-title\">Syntax Reference</div>\n              <div class=\"reference-items\">\n                <span><code>*</code> any</span>\n                <span><code>*/N</code> every N</span>\n                <span><code>N-M</code> range</span>\n                <span><code>N,M</code> list</span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n\n  <!-- Next Executions Section -->\n  @if (mergedConfig().showNextExecutions && validationResult().isValid && nextExecutions().length > 0) {\n    <div class=\"next-executions-section\">\n      <div class=\"next-executions-label\">Next Executions</div>\n      <ul class=\"next-executions-list\">\n        @for (execution of nextExecutions(); track $index) {\n          <li>{{ formatNextExecution(execution) }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--cron-bg: var(--mm-cron-bg, #ffffff);--cron-border: var(--mm-cron-border, #e0e0e0);--cron-border-radius: var(--mm-cron-border-radius, 8px);--cron-text: var(--mm-cron-text, #333333);--cron-text-secondary: var(--mm-cron-text-secondary, #666666);--cron-accent: var(--mm-cron-accent, #616161);--cron-accent-hover: var(--mm-cron-accent-hover, #424242);--cron-preview-bg: var(--mm-cron-preview-bg, #f5f5f5);--cron-tab-active-bg: var(--mm-cron-tab-active-bg, #eeeeee);--cron-tab-active-border: var(--mm-cron-tab-active-border, #616161);--cron-error: var(--mm-cron-error, #d32f2f);--cron-success: var(--mm-cron-success, #388e3c);--cron-code-bg: var(--mm-cron-code-bg, #eeeeee);--cron-code-text: var(--mm-cron-code-text, #333333);--cron-shadow: var(--mm-cron-shadow, 0 2px 8px rgba(0, 0, 0, .1));--cron-font-family: var(--mm-cron-font-family, inherit);--cron-font-mono: var(--mm-cron-font-mono, \"Roboto Mono\", \"Consolas\", monospace);display:block;font-family:var(--cron-font-family)}.cron-builder{background:var(--cron-bg);border:1px solid var(--cron-border);border-radius:var(--cron-border-radius);padding:16px;box-shadow:var(--cron-shadow)}.cron-builder.disabled{opacity:.6;pointer-events:none}.expression-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cron-border)}.expression-display .expression-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.expression-display .expression-value-row{display:flex;align-items:center;gap:8px}.expression-display .expression-value{flex:1;font-family:var(--cron-font-mono);font-size:1.1rem;font-weight:500;padding:8px 12px;background:var(--cron-code-bg);color:var(--cron-code-text);border-radius:4px}.expression-display .expression-value.invalid{color:var(--cron-error);border:1px solid var(--cron-error)}.expression-display .copy-button{flex-shrink:0;transition:all .2s ease}.expression-display .copy-button.copied{color:var(--cron-success)!important}.expression-display .validation-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--cron-error)}.expression-display .validation-error kendo-svg-icon{flex-shrink:0}.human-readable{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cron-preview-bg);border-radius:4px;font-size:.9rem;color:var(--cron-text)}.human-readable kendo-svg-icon{color:var(--cron-accent);flex-shrink:0}.presets-section{margin-bottom:16px}.presets-section .presets-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:8px}.presets-section .preset-button{font-size:.8rem;padding:4px 12px;border-color:var(--cron-border);transition:all .2s ease}.presets-section .preset-button:hover:not(:disabled){border-color:var(--cron-accent);color:var(--cron-accent)}::ng-deep .k-tabstrip{background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{border-bottom:1px solid var(--cron-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item{color:var(--cron-text-secondary);background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items .k-item.k-active{color:var(--cron-accent);background:var(--cron-tab-active-bg);border-bottom:2px solid var(--cron-tab-active-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active){color:var(--cron-text);background:var(--cron-preview-bg)}::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:16px 0}.tab-content{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.form-row kendo-label{min-width:80px;font-weight:500;color:var(--cron-text)}.form-row kendo-dropdownlist{min-width:140px}.form-row .separator{font-size:1.2rem;font-weight:700;color:var(--cron-text-secondary)}.form-row .time-label,.form-row .suffix-text{font-size:.85rem;color:var(--cron-text-secondary)}.mode-row .mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.mode-row .mode-buttons button{transition:all .2s ease}.mode-row .mode-buttons button.k-selected,.mode-row .mode-buttons button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.days-row{padding-left:92px}.day-buttons{display:flex;flex-wrap:wrap;gap:6px}.day-buttons .day-button{min-width:48px;padding:6px 10px;font-size:.85rem;transition:all .2s ease}.day-buttons .day-button.k-selected,.day-buttons .day-button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.preview-text{font-size:.85rem;color:var(--cron-text-secondary)}.preview-text code{font-family:var(--cron-font-mono);background:var(--cron-preview-bg);padding:2px 6px;border-radius:3px}.custom-tab .custom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.custom-tab .custom-field{display:flex;flex-direction:column;gap:4px}.custom-tab .custom-field kendo-label{font-size:.8rem;font-weight:600;color:var(--cron-text-secondary)}.custom-tab .custom-field kendo-textbox{font-family:var(--cron-font-mono)}.custom-tab .custom-field .field-hint{font-size:.7rem;color:var(--cron-text-secondary)}.custom-tab .syntax-reference{margin-top:16px;padding:12px;background:var(--cron-preview-bg);border-radius:4px}.custom-tab .syntax-reference .reference-title{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.custom-tab .syntax-reference .reference-items{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--cron-text)}.custom-tab .syntax-reference .reference-items code{font-family:var(--cron-font-mono);background:var(--cron-code-bg);color:var(--cron-code-text);padding:2px 6px;border-radius:3px;margin-right:4px}.next-executions-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--cron-border)}.next-executions-section .next-executions-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.next-executions-section .next-executions-list{list-style:none;margin:0;padding:0}.next-executions-section .next-executions-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;color:var(--cron-text);font-family:var(--cron-font-mono)}.next-executions-section .next-executions-list li:before{content:\"\\25b8\";color:var(--cron-accent);font-size:.75rem}.next-executions-section .next-executions-list li:not(:last-child){border-bottom:1px dashed var(--cron-border)}@media(max-width:600px){.cron-builder{padding:12px}.form-row{flex-direction:column;align-items:flex-start}.form-row kendo-label{min-width:auto}.days-row{padding-left:0}.time-row{flex-direction:row;flex-wrap:wrap}.time-row kendo-label{width:100%;margin-bottom:8px}.custom-tab .custom-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.custom-tab .custom-fields{grid-template-columns:1fr}.presets-grid{flex-direction:column}.presets-grid .preset-button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i1$4.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i1$4.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$4.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+        ], ngImport: i0, template: "<div class=\"cron-builder\" [class.disabled]=\"disabled()\">\n  <!-- Expression Preview Section -->\n  <div class=\"expression-section\">\n    <div class=\"expression-display\">\n      <div class=\"expression-label\">Cron Expression</div>\n      <div class=\"expression-value-row\">\n        <code class=\"expression-value\" [class.invalid]=\"!validationResult().isValid\">\n          {{ expression() }}\n        </code>\n        @if (mergedConfig().showCopyButton) {\n          <button type=\"button\"\n            kendoButton\n            [svgIcon]=\"copiedRecently() ? checkIcon : copyIcon\"\n            [title]=\"copiedRecently() ? 'Copied!' : 'Copy to clipboard'\"\n            fillMode=\"flat\"\n            class=\"copy-button\"\n            [class.copied]=\"copiedRecently()\"\n            (click)=\"onCopyExpression()\"\n            [disabled]=\"disabled()\">\n          </button>\n        }\n      </div>\n      @if (!validationResult().isValid) {\n        <div class=\"validation-error\">\n          <kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon>\n          {{ validationResult().error }}\n        </div>\n      }\n    </div>\n\n    @if (mergedConfig().showHumanReadable && validationResult().isValid) {\n      <div class=\"human-readable\">\n        <kendo-svg-icon [icon]=\"clockIcon\" size=\"small\"></kendo-svg-icon>\n        <span>{{ humanReadable() }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- Preset Buttons -->\n  @if (mergedConfig().showPresets) {\n    <div class=\"presets-section\">\n      <div class=\"presets-label\">Quick Select</div>\n      <div class=\"presets-grid\">\n        @for (preset of presetsByCategory().frequent; track preset.id) {\n          <button type=\"button\"\n            kendoButton\n            size=\"small\"\n            fillMode=\"outline\"\n            class=\"preset-button\"\n            [title]=\"preset.description\"\n            [disabled]=\"disabled()\"\n            (click)=\"onPresetSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Type Tabs -->\n  <kendo-tabstrip\n    [animate]=\"false\"\n    [tabAlignment]=\"'start'\"\n    (tabSelect)=\"onTabSelect($event.index)\">\n\n    <!-- Seconds Tab -->\n    @if (shows('seconds')) {\n    <kendo-tabstrip-tab [title]=\"'Seconds'\" [selected]=\"selectedTab() === 'seconds'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"secondIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"secondInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onSecondIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>*/{{ secondInterval() }} * * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Minutes Tab -->\n    @if (shows('minutes')) {\n    <kendo-tabstrip-tab [title]=\"'Minutes'\" [selected]=\"selectedTab() === 'minutes'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"minuteInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onMinuteIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>0 */{{ minuteInterval() }} * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Hourly Tab -->\n    @if (shows('hourly')) {\n    <kendo-tabstrip-tab [title]=\"'Hourly'\" [selected]=\"selectedTab() === 'hourly'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-row\">\n            <kendo-label text=\"At minute\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourSecondChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"time-label\">(mm:ss)</span>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Daily Tab -->\n    @if (shows('daily')) {\n    <kendo-tabstrip-tab [title]=\"'Daily'\" [selected]=\"selectedTab() === 'daily'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <kendo-label text=\"On\"></kendo-label>\n            <div class=\"mode-buttons\">\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'every'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('every')\">\n                Every day\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'weekdays'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekdays')\">\n                Weekdays\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'weekends'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekends')\">\n                Weekends\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('specific')\">\n                Specific days\n              </button>\n            </div>\n          </div>\n\n          @if (dailyMode() === 'specific') {\n            <div class=\"form-row days-row\">\n              <div class=\"day-buttons\">\n                @for (day of weekdayAbbreviations; track day.value) {\n                  <button type=\"button\"\n                    kendoButton\n                    [selected]=\"isDaySelected(day.value)\"\n                    [disabled]=\"disabled()\"\n                    class=\"day-button\"\n                    (click)=\"onDayToggle(day.value)\">\n                    {{ day.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Weekly Tab -->\n    @if (shows('weekly')) {\n    <kendo-tabstrip-tab [title]=\"'Weekly'\" [selected]=\"selectedTab() === 'weekly'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row\">\n            <kendo-label text=\"On days\"></kendo-label>\n            <div class=\"day-buttons\">\n              @for (day of weekdayAbbreviations; track day.value) {\n                <button type=\"button\"\n                  kendoButton\n                  [selected]=\"isDaySelected(day.value)\"\n                  [disabled]=\"disabled()\"\n                  class=\"day-button\"\n                  (click)=\"onDayToggle(day.value)\">\n                  {{ day.label }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Monthly Tab -->\n    @if (shows('monthly')) {\n    <kendo-tabstrip-tab [title]=\"'Monthly'\" [selected]=\"selectedTab() === 'monthly'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <div class=\"mode-buttons\">\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"monthlyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('specific')\">\n                Specific day\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"monthlyMode() === 'relative'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('relative')\">\n                Relative day\n              </button>\n            </div>\n          </div>\n\n          @if (monthlyMode() === 'specific') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On day\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"dayOfMonthOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"dayOfMonth()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onDayOfMonthChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n\n          @if (monthlyMode() === 'relative') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On the\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"relativeWeekOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeWeek()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeWeekChange($event)\">\n              </kendo-dropdownlist>\n              <kendo-dropdownlist\n                [data]=\"weekdayOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeDay()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeDayChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Custom/Advanced Tab -->\n    @if (shows('custom')) {\n      <kendo-tabstrip-tab [title]=\"'Custom'\" [selected]=\"selectedTab() === 'custom'\">\n        <ng-template kendoTabContent>\n          <div class=\"tab-content custom-tab\">\n            <div class=\"custom-fields\">\n              <div class=\"custom-field\">\n                <kendo-label text=\"Second\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customSecond()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('second', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Minute\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMinute()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('minute', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Hour\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customHour()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('hour', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-23, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Day\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfMonth', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-31, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Month\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('month', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-12, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Weekday\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfWeek()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfWeek', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-6 (Sun-Sat)</span>\n              </div>\n            </div>\n\n            <div class=\"syntax-reference\">\n              <div class=\"reference-title\">Syntax Reference</div>\n              <div class=\"reference-items\">\n                <span><code>*</code> any</span>\n                <span><code>*/N</code> every N</span>\n                <span><code>N-M</code> range</span>\n                <span><code>N,M</code> list</span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n\n  <!-- Next Executions Section -->\n  @if (mergedConfig().showNextExecutions && validationResult().isValid && nextExecutions().length > 0) {\n    <div class=\"next-executions-section\">\n      <div class=\"next-executions-label\">Next Executions</div>\n      <ul class=\"next-executions-list\">\n        @for (execution of nextExecutions(); track $index) {\n          <li>{{ formatNextExecution(execution) }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--cron-bg: var(--mm-cron-bg, #ffffff);--cron-border: var(--mm-cron-border, #e0e0e0);--cron-border-radius: var(--mm-cron-border-radius, 8px);--cron-text: var(--mm-cron-text, #333333);--cron-text-secondary: var(--mm-cron-text-secondary, #666666);--cron-accent: var(--mm-cron-accent, #616161);--cron-accent-hover: var(--mm-cron-accent-hover, #424242);--cron-preview-bg: var(--mm-cron-preview-bg, #f5f5f5);--cron-tab-active-bg: var(--mm-cron-tab-active-bg, #eeeeee);--cron-tab-active-border: var(--mm-cron-tab-active-border, #616161);--cron-error: var(--mm-cron-error, #d32f2f);--cron-success: var(--mm-cron-success, #388e3c);--cron-code-bg: var(--mm-cron-code-bg, #eeeeee);--cron-code-text: var(--mm-cron-code-text, #333333);--cron-shadow: var(--mm-cron-shadow, 0 2px 8px rgba(0, 0, 0, .1));--cron-font-family: var(--mm-cron-font-family, inherit);--cron-font-mono: var(--mm-cron-font-mono, \"Roboto Mono\", \"Consolas\", monospace);display:block;font-family:var(--cron-font-family)}.cron-builder{background:var(--cron-bg);border:1px solid var(--cron-border);border-radius:var(--cron-border-radius);padding:16px;box-shadow:var(--cron-shadow)}.cron-builder.disabled{opacity:.6;pointer-events:none}.expression-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cron-border)}.expression-display .expression-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.expression-display .expression-value-row{display:flex;align-items:center;gap:8px}.expression-display .expression-value{flex:1;font-family:var(--cron-font-mono);font-size:1.1rem;font-weight:500;padding:8px 12px;background:var(--cron-code-bg);color:var(--cron-code-text);border-radius:4px}.expression-display .expression-value.invalid{color:var(--cron-error);border:1px solid var(--cron-error)}.expression-display .copy-button{flex-shrink:0;transition:all .2s ease}.expression-display .copy-button.copied{color:var(--cron-success)!important}.expression-display .validation-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--cron-error)}.expression-display .validation-error kendo-svg-icon{flex-shrink:0}.human-readable{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cron-preview-bg);border-radius:4px;font-size:.9rem;color:var(--cron-text)}.human-readable kendo-svg-icon{color:var(--cron-accent);flex-shrink:0}.presets-section{margin-bottom:16px}.presets-section .presets-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:8px}.presets-section .preset-button{font-size:.8rem;padding:4px 12px;border-color:var(--cron-border);transition:all .2s ease}.presets-section .preset-button:hover:not(:disabled){border-color:var(--cron-accent);color:var(--cron-accent)}::ng-deep .k-tabstrip{background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{border-bottom:1px solid var(--cron-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item{color:var(--cron-text-secondary);background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items .k-item.k-active{color:var(--cron-accent);background:var(--cron-tab-active-bg);border-bottom:2px solid var(--cron-tab-active-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active){color:var(--cron-text);background:var(--cron-preview-bg)}::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:16px 0}.tab-content{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.form-row kendo-label{min-width:80px;font-weight:500;color:var(--cron-text)}.form-row kendo-dropdownlist{min-width:140px}.form-row .separator{font-size:1.2rem;font-weight:700;color:var(--cron-text-secondary)}.form-row .time-label,.form-row .suffix-text{font-size:.85rem;color:var(--cron-text-secondary)}.mode-row .mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.mode-row .mode-buttons button{transition:all .2s ease}.mode-row .mode-buttons button.k-selected,.mode-row .mode-buttons button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.days-row{padding-left:92px}.day-buttons{display:flex;flex-wrap:wrap;gap:6px}.day-buttons .day-button{min-width:48px;padding:6px 10px;font-size:.85rem;transition:all .2s ease}.day-buttons .day-button.k-selected,.day-buttons .day-button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.preview-text{font-size:.85rem;color:var(--cron-text-secondary)}.preview-text code{font-family:var(--cron-font-mono);background:var(--cron-preview-bg);padding:2px 6px;border-radius:3px}.custom-tab .custom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.custom-tab .custom-field{display:flex;flex-direction:column;gap:4px}.custom-tab .custom-field kendo-label{font-size:.8rem;font-weight:600;color:var(--cron-text-secondary)}.custom-tab .custom-field kendo-textbox{font-family:var(--cron-font-mono)}.custom-tab .custom-field .field-hint{font-size:.7rem;color:var(--cron-text-secondary)}.custom-tab .syntax-reference{margin-top:16px;padding:12px;background:var(--cron-preview-bg);border-radius:4px}.custom-tab .syntax-reference .reference-title{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.custom-tab .syntax-reference .reference-items{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--cron-text)}.custom-tab .syntax-reference .reference-items code{font-family:var(--cron-font-mono);background:var(--cron-code-bg);color:var(--cron-code-text);padding:2px 6px;border-radius:3px;margin-right:4px}.next-executions-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--cron-border)}.next-executions-section .next-executions-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.next-executions-section .next-executions-list{list-style:none;margin:0;padding:0}.next-executions-section .next-executions-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;color:var(--cron-text);font-family:var(--cron-font-mono)}.next-executions-section .next-executions-list li:before{content:\"\\25b8\";color:var(--cron-accent);font-size:.75rem}.next-executions-section .next-executions-list li:not(:last-child){border-bottom:1px dashed var(--cron-border)}@media(max-width:600px){.cron-builder{padding:12px}.form-row{flex-direction:column;align-items:flex-start}.form-row kendo-label{min-width:auto}.days-row{padding-left:0}.time-row{flex-direction:row;flex-wrap:wrap}.time-row kendo-label{width:100%;margin-bottom:8px}.custom-tab .custom-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.custom-tab .custom-fields{grid-template-columns:1fr}.presets-grid{flex-direction:column}.presets-grid .preset-button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i1$4.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i1$4.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i1$4.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "ngmodule", type: DropDownListModule }, { kind: "component", type: i3.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: ButtonGroupModule }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i5.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i6.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i2.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: CronBuilderComponent, decorators: [{
             type: Component,
@@ -7761,7 +7772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             useExisting: forwardRef(() => CronBuilderComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"cron-builder\" [class.disabled]=\"disabled()\">\n  <!-- Expression Preview Section -->\n  <div class=\"expression-section\">\n    <div class=\"expression-display\">\n      <div class=\"expression-label\">Cron Expression</div>\n      <div class=\"expression-value-row\">\n        <code class=\"expression-value\" [class.invalid]=\"!validationResult().isValid\">\n          {{ expression() }}\n        </code>\n        @if (mergedConfig().showCopyButton) {\n          <button\n            kendoButton\n            [svgIcon]=\"copiedRecently() ? checkIcon : copyIcon\"\n            [title]=\"copiedRecently() ? 'Copied!' : 'Copy to clipboard'\"\n            fillMode=\"flat\"\n            class=\"copy-button\"\n            [class.copied]=\"copiedRecently()\"\n            (click)=\"onCopyExpression()\"\n            [disabled]=\"disabled()\">\n          </button>\n        }\n      </div>\n      @if (!validationResult().isValid) {\n        <div class=\"validation-error\">\n          <kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon>\n          {{ validationResult().error }}\n        </div>\n      }\n    </div>\n\n    @if (mergedConfig().showHumanReadable && validationResult().isValid) {\n      <div class=\"human-readable\">\n        <kendo-svg-icon [icon]=\"clockIcon\" size=\"small\"></kendo-svg-icon>\n        <span>{{ humanReadable() }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- Preset Buttons -->\n  @if (mergedConfig().showPresets) {\n    <div class=\"presets-section\">\n      <div class=\"presets-label\">Quick Select</div>\n      <div class=\"presets-grid\">\n        @for (preset of presetsByCategory().frequent; track preset.id) {\n          <button\n            kendoButton\n            size=\"small\"\n            fillMode=\"outline\"\n            class=\"preset-button\"\n            [title]=\"preset.description\"\n            [disabled]=\"disabled()\"\n            (click)=\"onPresetSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Type Tabs -->\n  <kendo-tabstrip\n    [animate]=\"false\"\n    [tabAlignment]=\"'start'\"\n    (tabSelect)=\"onTabSelect($event.index)\">\n\n    <!-- Seconds Tab -->\n    <kendo-tabstrip-tab [title]=\"'Seconds'\" [selected]=\"selectedTabIndex() === 0\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"secondIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"secondInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onSecondIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>*/{{ secondInterval() }} * * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Minutes Tab -->\n    <kendo-tabstrip-tab [title]=\"'Minutes'\" [selected]=\"selectedTabIndex() === 1\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"minuteInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onMinuteIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>0 */{{ minuteInterval() }} * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Hourly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Hourly'\" [selected]=\"selectedTabIndex() === 2\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-row\">\n            <kendo-label text=\"At minute\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourSecondChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"time-label\">(mm:ss)</span>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Daily Tab -->\n    <kendo-tabstrip-tab [title]=\"'Daily'\" [selected]=\"selectedTabIndex() === 3\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <kendo-label text=\"On\"></kendo-label>\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'every'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('every')\">\n                Every day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekdays'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekdays')\">\n                Weekdays\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'weekends'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekends')\">\n                Weekends\n              </button>\n              <button\n                kendoButton\n                [selected]=\"dailyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('specific')\">\n                Specific days\n              </button>\n            </div>\n          </div>\n\n          @if (dailyMode() === 'specific') {\n            <div class=\"form-row days-row\">\n              <div class=\"day-buttons\">\n                @for (day of weekdayAbbreviations; track day.value) {\n                  <button\n                    kendoButton\n                    [selected]=\"isDaySelected(day.value)\"\n                    [disabled]=\"disabled()\"\n                    class=\"day-button\"\n                    (click)=\"onDayToggle(day.value)\">\n                    {{ day.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Weekly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Weekly'\" [selected]=\"selectedTabIndex() === 4\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row\">\n            <kendo-label text=\"On days\"></kendo-label>\n            <div class=\"day-buttons\">\n              @for (day of weekdayAbbreviations; track day.value) {\n                <button\n                  kendoButton\n                  [selected]=\"isDaySelected(day.value)\"\n                  [disabled]=\"disabled()\"\n                  class=\"day-button\"\n                  (click)=\"onDayToggle(day.value)\">\n                  {{ day.label }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Monthly Tab -->\n    <kendo-tabstrip-tab [title]=\"'Monthly'\" [selected]=\"selectedTabIndex() === 5\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <div class=\"mode-buttons\">\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('specific')\">\n                Specific day\n              </button>\n              <button\n                kendoButton\n                [selected]=\"monthlyMode() === 'relative'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('relative')\">\n                Relative day\n              </button>\n            </div>\n          </div>\n\n          @if (monthlyMode() === 'specific') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On day\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"dayOfMonthOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"dayOfMonth()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onDayOfMonthChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n\n          @if (monthlyMode() === 'relative') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On the\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"relativeWeekOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeWeek()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeWeekChange($event)\">\n              </kendo-dropdownlist>\n              <kendo-dropdownlist\n                [data]=\"weekdayOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeDay()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeDayChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Custom/Advanced Tab -->\n    @if (mergedConfig().allowCustom) {\n      <kendo-tabstrip-tab [title]=\"'Custom'\" [selected]=\"selectedTabIndex() === 6\">\n        <ng-template kendoTabContent>\n          <div class=\"tab-content custom-tab\">\n            <div class=\"custom-fields\">\n              <div class=\"custom-field\">\n                <kendo-label text=\"Second\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customSecond()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('second', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Minute\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMinute()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('minute', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Hour\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customHour()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('hour', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-23, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Day\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfMonth', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-31, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Month\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('month', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-12, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Weekday\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfWeek()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfWeek', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-6 (Sun-Sat)</span>\n              </div>\n            </div>\n\n            <div class=\"syntax-reference\">\n              <div class=\"reference-title\">Syntax Reference</div>\n              <div class=\"reference-items\">\n                <span><code>*</code> any</span>\n                <span><code>*/N</code> every N</span>\n                <span><code>N-M</code> range</span>\n                <span><code>N,M</code> list</span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n\n  <!-- Next Executions Section -->\n  @if (mergedConfig().showNextExecutions && validationResult().isValid && nextExecutions().length > 0) {\n    <div class=\"next-executions-section\">\n      <div class=\"next-executions-label\">Next Executions</div>\n      <ul class=\"next-executions-list\">\n        @for (execution of nextExecutions(); track $index) {\n          <li>{{ formatNextExecution(execution) }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--cron-bg: var(--mm-cron-bg, #ffffff);--cron-border: var(--mm-cron-border, #e0e0e0);--cron-border-radius: var(--mm-cron-border-radius, 8px);--cron-text: var(--mm-cron-text, #333333);--cron-text-secondary: var(--mm-cron-text-secondary, #666666);--cron-accent: var(--mm-cron-accent, #616161);--cron-accent-hover: var(--mm-cron-accent-hover, #424242);--cron-preview-bg: var(--mm-cron-preview-bg, #f5f5f5);--cron-tab-active-bg: var(--mm-cron-tab-active-bg, #eeeeee);--cron-tab-active-border: var(--mm-cron-tab-active-border, #616161);--cron-error: var(--mm-cron-error, #d32f2f);--cron-success: var(--mm-cron-success, #388e3c);--cron-code-bg: var(--mm-cron-code-bg, #eeeeee);--cron-code-text: var(--mm-cron-code-text, #333333);--cron-shadow: var(--mm-cron-shadow, 0 2px 8px rgba(0, 0, 0, .1));--cron-font-family: var(--mm-cron-font-family, inherit);--cron-font-mono: var(--mm-cron-font-mono, \"Roboto Mono\", \"Consolas\", monospace);display:block;font-family:var(--cron-font-family)}.cron-builder{background:var(--cron-bg);border:1px solid var(--cron-border);border-radius:var(--cron-border-radius);padding:16px;box-shadow:var(--cron-shadow)}.cron-builder.disabled{opacity:.6;pointer-events:none}.expression-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cron-border)}.expression-display .expression-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.expression-display .expression-value-row{display:flex;align-items:center;gap:8px}.expression-display .expression-value{flex:1;font-family:var(--cron-font-mono);font-size:1.1rem;font-weight:500;padding:8px 12px;background:var(--cron-code-bg);color:var(--cron-code-text);border-radius:4px}.expression-display .expression-value.invalid{color:var(--cron-error);border:1px solid var(--cron-error)}.expression-display .copy-button{flex-shrink:0;transition:all .2s ease}.expression-display .copy-button.copied{color:var(--cron-success)!important}.expression-display .validation-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--cron-error)}.expression-display .validation-error kendo-svg-icon{flex-shrink:0}.human-readable{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cron-preview-bg);border-radius:4px;font-size:.9rem;color:var(--cron-text)}.human-readable kendo-svg-icon{color:var(--cron-accent);flex-shrink:0}.presets-section{margin-bottom:16px}.presets-section .presets-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:8px}.presets-section .preset-button{font-size:.8rem;padding:4px 12px;border-color:var(--cron-border);transition:all .2s ease}.presets-section .preset-button:hover:not(:disabled){border-color:var(--cron-accent);color:var(--cron-accent)}::ng-deep .k-tabstrip{background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{border-bottom:1px solid var(--cron-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item{color:var(--cron-text-secondary);background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items .k-item.k-active{color:var(--cron-accent);background:var(--cron-tab-active-bg);border-bottom:2px solid var(--cron-tab-active-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active){color:var(--cron-text);background:var(--cron-preview-bg)}::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:16px 0}.tab-content{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.form-row kendo-label{min-width:80px;font-weight:500;color:var(--cron-text)}.form-row kendo-dropdownlist{min-width:140px}.form-row .separator{font-size:1.2rem;font-weight:700;color:var(--cron-text-secondary)}.form-row .time-label,.form-row .suffix-text{font-size:.85rem;color:var(--cron-text-secondary)}.mode-row .mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.mode-row .mode-buttons button{transition:all .2s ease}.mode-row .mode-buttons button.k-selected,.mode-row .mode-buttons button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.days-row{padding-left:92px}.day-buttons{display:flex;flex-wrap:wrap;gap:6px}.day-buttons .day-button{min-width:48px;padding:6px 10px;font-size:.85rem;transition:all .2s ease}.day-buttons .day-button.k-selected,.day-buttons .day-button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.preview-text{font-size:.85rem;color:var(--cron-text-secondary)}.preview-text code{font-family:var(--cron-font-mono);background:var(--cron-preview-bg);padding:2px 6px;border-radius:3px}.custom-tab .custom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.custom-tab .custom-field{display:flex;flex-direction:column;gap:4px}.custom-tab .custom-field kendo-label{font-size:.8rem;font-weight:600;color:var(--cron-text-secondary)}.custom-tab .custom-field kendo-textbox{font-family:var(--cron-font-mono)}.custom-tab .custom-field .field-hint{font-size:.7rem;color:var(--cron-text-secondary)}.custom-tab .syntax-reference{margin-top:16px;padding:12px;background:var(--cron-preview-bg);border-radius:4px}.custom-tab .syntax-reference .reference-title{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.custom-tab .syntax-reference .reference-items{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--cron-text)}.custom-tab .syntax-reference .reference-items code{font-family:var(--cron-font-mono);background:var(--cron-code-bg);color:var(--cron-code-text);padding:2px 6px;border-radius:3px;margin-right:4px}.next-executions-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--cron-border)}.next-executions-section .next-executions-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.next-executions-section .next-executions-list{list-style:none;margin:0;padding:0}.next-executions-section .next-executions-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;color:var(--cron-text);font-family:var(--cron-font-mono)}.next-executions-section .next-executions-list li:before{content:\"\\25b8\";color:var(--cron-accent);font-size:.75rem}.next-executions-section .next-executions-list li:not(:last-child){border-bottom:1px dashed var(--cron-border)}@media(max-width:600px){.cron-builder{padding:12px}.form-row{flex-direction:column;align-items:flex-start}.form-row kendo-label{min-width:auto}.days-row{padding-left:0}.time-row{flex-direction:row;flex-wrap:wrap}.time-row kendo-label{width:100%;margin-bottom:8px}.custom-tab .custom-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.custom-tab .custom-fields{grid-template-columns:1fr}.presets-grid{flex-direction:column}.presets-grid .preset-button{width:100%}}\n"] }]
+                    ], template: "<div class=\"cron-builder\" [class.disabled]=\"disabled()\">\n  <!-- Expression Preview Section -->\n  <div class=\"expression-section\">\n    <div class=\"expression-display\">\n      <div class=\"expression-label\">Cron Expression</div>\n      <div class=\"expression-value-row\">\n        <code class=\"expression-value\" [class.invalid]=\"!validationResult().isValid\">\n          {{ expression() }}\n        </code>\n        @if (mergedConfig().showCopyButton) {\n          <button type=\"button\"\n            kendoButton\n            [svgIcon]=\"copiedRecently() ? checkIcon : copyIcon\"\n            [title]=\"copiedRecently() ? 'Copied!' : 'Copy to clipboard'\"\n            fillMode=\"flat\"\n            class=\"copy-button\"\n            [class.copied]=\"copiedRecently()\"\n            (click)=\"onCopyExpression()\"\n            [disabled]=\"disabled()\">\n          </button>\n        }\n      </div>\n      @if (!validationResult().isValid) {\n        <div class=\"validation-error\">\n          <kendo-svg-icon [icon]=\"xIcon\" size=\"small\"></kendo-svg-icon>\n          {{ validationResult().error }}\n        </div>\n      }\n    </div>\n\n    @if (mergedConfig().showHumanReadable && validationResult().isValid) {\n      <div class=\"human-readable\">\n        <kendo-svg-icon [icon]=\"clockIcon\" size=\"small\"></kendo-svg-icon>\n        <span>{{ humanReadable() }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- Preset Buttons -->\n  @if (mergedConfig().showPresets) {\n    <div class=\"presets-section\">\n      <div class=\"presets-label\">Quick Select</div>\n      <div class=\"presets-grid\">\n        @for (preset of presetsByCategory().frequent; track preset.id) {\n          <button type=\"button\"\n            kendoButton\n            size=\"small\"\n            fillMode=\"outline\"\n            class=\"preset-button\"\n            [title]=\"preset.description\"\n            [disabled]=\"disabled()\"\n            (click)=\"onPresetSelect(preset)\">\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Schedule Type Tabs -->\n  <kendo-tabstrip\n    [animate]=\"false\"\n    [tabAlignment]=\"'start'\"\n    (tabSelect)=\"onTabSelect($event.index)\">\n\n    <!-- Seconds Tab -->\n    @if (shows('seconds')) {\n    <kendo-tabstrip-tab [title]=\"'Seconds'\" [selected]=\"selectedTab() === 'seconds'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"secondIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"secondInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onSecondIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>*/{{ secondInterval() }} * * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Minutes Tab -->\n    @if (shows('minutes')) {\n    <kendo-tabstrip-tab [title]=\"'Minutes'\" [selected]=\"selectedTab() === 'minutes'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"minuteInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onMinuteIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"preview-text\">\n            Generates: <code>0 */{{ minuteInterval() }} * * * *</code>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Hourly Tab -->\n    @if (shows('hourly')) {\n    <kendo-tabstrip-tab [title]=\"'Hourly'\" [selected]=\"selectedTab() === 'hourly'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row\">\n            <kendo-label text=\"Run every\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourIntervalOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourInterval()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourIntervalChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-row\">\n            <kendo-label text=\"At minute\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"hourSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onHourSecondChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"time-label\">(mm:ss)</span>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Daily Tab -->\n    @if (shows('daily')) {\n    <kendo-tabstrip-tab [title]=\"'Daily'\" [selected]=\"selectedTab() === 'daily'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <kendo-label text=\"On\"></kendo-label>\n            <div class=\"mode-buttons\">\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'every'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('every')\">\n                Every day\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'weekdays'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekdays')\">\n                Weekdays\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'weekends'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('weekends')\">\n                Weekends\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"dailyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onDailyModeChange('specific')\">\n                Specific days\n              </button>\n            </div>\n          </div>\n\n          @if (dailyMode() === 'specific') {\n            <div class=\"form-row days-row\">\n              <div class=\"day-buttons\">\n                @for (day of weekdayAbbreviations; track day.value) {\n                  <button type=\"button\"\n                    kendoButton\n                    [selected]=\"isDaySelected(day.value)\"\n                    [disabled]=\"disabled()\"\n                    class=\"day-button\"\n                    (click)=\"onDayToggle(day.value)\">\n                    {{ day.label }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Weekly Tab -->\n    @if (shows('weekly')) {\n    <kendo-tabstrip-tab [title]=\"'Weekly'\" [selected]=\"selectedTab() === 'weekly'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row\">\n            <kendo-label text=\"On days\"></kendo-label>\n            <div class=\"day-buttons\">\n              @for (day of weekdayAbbreviations; track day.value) {\n                <button type=\"button\"\n                  kendoButton\n                  [selected]=\"isDaySelected(day.value)\"\n                  [disabled]=\"disabled()\"\n                  class=\"day-button\"\n                  (click)=\"onDayToggle(day.value)\">\n                  {{ day.label }}\n                </button>\n              }\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Monthly Tab -->\n    @if (shows('monthly')) {\n    <kendo-tabstrip-tab [title]=\"'Monthly'\" [selected]=\"selectedTab() === 'monthly'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <div class=\"form-row time-row\">\n            <kendo-label text=\"At\"></kendo-label>\n            <kendo-dropdownlist\n              [data]=\"hourOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeHour()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeHourChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeMinute()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeMinuteChange($event)\">\n            </kendo-dropdownlist>\n            <span class=\"separator\">:</span>\n            <kendo-dropdownlist\n              [data]=\"minuteOptions\"\n              [textField]=\"'label'\"\n              [valueField]=\"'value'\"\n              [value]=\"timeSecond()\"\n              [valuePrimitive]=\"true\"\n              [disabled]=\"disabled()\"\n              (valueChange)=\"onTimeSecondChange($event)\">\n            </kendo-dropdownlist>\n          </div>\n\n          <div class=\"form-row mode-row\">\n            <div class=\"mode-buttons\">\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"monthlyMode() === 'specific'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('specific')\">\n                Specific day\n              </button>\n              <button type=\"button\"\n                kendoButton\n                [selected]=\"monthlyMode() === 'relative'\"\n                [disabled]=\"disabled()\"\n                (click)=\"onMonthlyModeChange('relative')\">\n                Relative day\n              </button>\n            </div>\n          </div>\n\n          @if (monthlyMode() === 'specific') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On day\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"dayOfMonthOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"dayOfMonth()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onDayOfMonthChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n\n          @if (monthlyMode() === 'relative') {\n            <div class=\"form-row\">\n              <kendo-label text=\"On the\"></kendo-label>\n              <kendo-dropdownlist\n                [data]=\"relativeWeekOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeWeek()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeWeekChange($event)\">\n              </kendo-dropdownlist>\n              <kendo-dropdownlist\n                [data]=\"weekdayOptions\"\n                [textField]=\"'label'\"\n                [valueField]=\"'value'\"\n                [value]=\"relativeDay()\"\n                [valuePrimitive]=\"true\"\n                [disabled]=\"disabled()\"\n                (valueChange)=\"onRelativeDayChange($event)\">\n              </kendo-dropdownlist>\n              <span class=\"suffix-text\">of every month</span>\n            </div>\n          }\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n    }\n\n    <!-- Custom/Advanced Tab -->\n    @if (shows('custom')) {\n      <kendo-tabstrip-tab [title]=\"'Custom'\" [selected]=\"selectedTab() === 'custom'\">\n        <ng-template kendoTabContent>\n          <div class=\"tab-content custom-tab\">\n            <div class=\"custom-fields\">\n              <div class=\"custom-field\">\n                <kendo-label text=\"Second\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customSecond()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('second', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Minute\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMinute()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('minute', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-59, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Hour\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customHour()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('hour', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-23, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Day\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfMonth', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-31, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Month\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customMonth()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('month', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">1-12, *, /</span>\n              </div>\n              <div class=\"custom-field\">\n                <kendo-label text=\"Weekday\"></kendo-label>\n                <kendo-textbox\n                  [value]=\"customDayOfWeek()\"\n                  [disabled]=\"disabled()\"\n                  (valueChange)=\"onCustomFieldChange('dayOfWeek', $event || '*')\">\n                </kendo-textbox>\n                <span class=\"field-hint\">0-6 (Sun-Sat)</span>\n              </div>\n            </div>\n\n            <div class=\"syntax-reference\">\n              <div class=\"reference-title\">Syntax Reference</div>\n              <div class=\"reference-items\">\n                <span><code>*</code> any</span>\n                <span><code>*/N</code> every N</span>\n                <span><code>N-M</code> range</span>\n                <span><code>N,M</code> list</span>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n\n  <!-- Next Executions Section -->\n  @if (mergedConfig().showNextExecutions && validationResult().isValid && nextExecutions().length > 0) {\n    <div class=\"next-executions-section\">\n      <div class=\"next-executions-label\">Next Executions</div>\n      <ul class=\"next-executions-list\">\n        @for (execution of nextExecutions(); track $index) {\n          <li>{{ formatNextExecution(execution) }}</li>\n        }\n      </ul>\n    </div>\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{--cron-bg: var(--mm-cron-bg, #ffffff);--cron-border: var(--mm-cron-border, #e0e0e0);--cron-border-radius: var(--mm-cron-border-radius, 8px);--cron-text: var(--mm-cron-text, #333333);--cron-text-secondary: var(--mm-cron-text-secondary, #666666);--cron-accent: var(--mm-cron-accent, #616161);--cron-accent-hover: var(--mm-cron-accent-hover, #424242);--cron-preview-bg: var(--mm-cron-preview-bg, #f5f5f5);--cron-tab-active-bg: var(--mm-cron-tab-active-bg, #eeeeee);--cron-tab-active-border: var(--mm-cron-tab-active-border, #616161);--cron-error: var(--mm-cron-error, #d32f2f);--cron-success: var(--mm-cron-success, #388e3c);--cron-code-bg: var(--mm-cron-code-bg, #eeeeee);--cron-code-text: var(--mm-cron-code-text, #333333);--cron-shadow: var(--mm-cron-shadow, 0 2px 8px rgba(0, 0, 0, .1));--cron-font-family: var(--mm-cron-font-family, inherit);--cron-font-mono: var(--mm-cron-font-mono, \"Roboto Mono\", \"Consolas\", monospace);display:block;font-family:var(--cron-font-family)}.cron-builder{background:var(--cron-bg);border:1px solid var(--cron-border);border-radius:var(--cron-border-radius);padding:16px;box-shadow:var(--cron-shadow)}.cron-builder.disabled{opacity:.6;pointer-events:none}.expression-section{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--cron-border)}.expression-display .expression-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.expression-display .expression-value-row{display:flex;align-items:center;gap:8px}.expression-display .expression-value{flex:1;font-family:var(--cron-font-mono);font-size:1.1rem;font-weight:500;padding:8px 12px;background:var(--cron-code-bg);color:var(--cron-code-text);border-radius:4px}.expression-display .expression-value.invalid{color:var(--cron-error);border:1px solid var(--cron-error)}.expression-display .copy-button{flex-shrink:0;transition:all .2s ease}.expression-display .copy-button.copied{color:var(--cron-success)!important}.expression-display .validation-error{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.85rem;color:var(--cron-error)}.expression-display .validation-error kendo-svg-icon{flex-shrink:0}.human-readable{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;background:var(--cron-preview-bg);border-radius:4px;font-size:.9rem;color:var(--cron-text)}.human-readable kendo-svg-icon{color:var(--cron-accent);flex-shrink:0}.presets-section{margin-bottom:16px}.presets-section .presets-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.presets-section .presets-grid{display:flex;flex-wrap:wrap;gap:8px}.presets-section .preset-button{font-size:.8rem;padding:4px 12px;border-color:var(--cron-border);transition:all .2s ease}.presets-section .preset-button:hover:not(:disabled){border-color:var(--cron-accent);color:var(--cron-accent)}::ng-deep .k-tabstrip{background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items-wrapper{border-bottom:1px solid var(--cron-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item{color:var(--cron-text-secondary);background:transparent;border:none}::ng-deep .k-tabstrip .k-tabstrip-items .k-item.k-active{color:var(--cron-accent);background:var(--cron-tab-active-bg);border-bottom:2px solid var(--cron-tab-active-border)}::ng-deep .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active){color:var(--cron-text);background:var(--cron-preview-bg)}::ng-deep .k-tabstrip .k-tabstrip-content{background:transparent;border:none;padding:16px 0}.tab-content{display:flex;flex-direction:column;gap:16px}.form-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.form-row kendo-label{min-width:80px;font-weight:500;color:var(--cron-text)}.form-row kendo-dropdownlist{min-width:140px}.form-row .separator{font-size:1.2rem;font-weight:700;color:var(--cron-text-secondary)}.form-row .time-label,.form-row .suffix-text{font-size:.85rem;color:var(--cron-text-secondary)}.mode-row .mode-buttons{display:flex;flex-wrap:wrap;gap:8px}.mode-row .mode-buttons button{transition:all .2s ease}.mode-row .mode-buttons button.k-selected,.mode-row .mode-buttons button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.days-row{padding-left:92px}.day-buttons{display:flex;flex-wrap:wrap;gap:6px}.day-buttons .day-button{min-width:48px;padding:6px 10px;font-size:.85rem;transition:all .2s ease}.day-buttons .day-button.k-selected,.day-buttons .day-button[ng-reflect-selected=true]{background:var(--cron-accent)!important;border-color:var(--cron-accent)!important;color:#fff!important}.preview-text{font-size:.85rem;color:var(--cron-text-secondary)}.preview-text code{font-family:var(--cron-font-mono);background:var(--cron-preview-bg);padding:2px 6px;border-radius:3px}.custom-tab .custom-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px}.custom-tab .custom-field{display:flex;flex-direction:column;gap:4px}.custom-tab .custom-field kendo-label{font-size:.8rem;font-weight:600;color:var(--cron-text-secondary)}.custom-tab .custom-field kendo-textbox{font-family:var(--cron-font-mono)}.custom-tab .custom-field .field-hint{font-size:.7rem;color:var(--cron-text-secondary)}.custom-tab .syntax-reference{margin-top:16px;padding:12px;background:var(--cron-preview-bg);border-radius:4px}.custom-tab .syntax-reference .reference-title{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.custom-tab .syntax-reference .reference-items{display:flex;flex-wrap:wrap;gap:16px;font-size:.85rem;color:var(--cron-text)}.custom-tab .syntax-reference .reference-items code{font-family:var(--cron-font-mono);background:var(--cron-code-bg);color:var(--cron-code-text);padding:2px 6px;border-radius:3px;margin-right:4px}.next-executions-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--cron-border)}.next-executions-section .next-executions-label{font-size:.75rem;font-weight:600;color:var(--cron-text-secondary);margin-bottom:8px}.next-executions-section .next-executions-list{list-style:none;margin:0;padding:0}.next-executions-section .next-executions-list li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:.9rem;color:var(--cron-text);font-family:var(--cron-font-mono)}.next-executions-section .next-executions-list li:before{content:\"\\25b8\";color:var(--cron-accent);font-size:.75rem}.next-executions-section .next-executions-list li:not(:last-child){border-bottom:1px dashed var(--cron-border)}@media(max-width:600px){.cron-builder{padding:12px}.form-row{flex-direction:column;align-items:flex-start}.form-row kendo-label{min-width:auto}.days-row{padding-left:0}.time-row{flex-direction:row;flex-wrap:wrap}.time-row kendo-label{width:100%;margin-bottom:8px}.custom-tab .custom-fields{grid-template-columns:repeat(2,1fr)}}@media(max-width:400px){.custom-tab .custom-fields{grid-template-columns:1fr}.presets-grid{flex-direction:column}.presets-grid .preset-button{width:100%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });