@acorex/components 21.0.1-next.81 → 21.0.1-next.83

package/fesm2022/acorex-components-scheduler-picker.mjs

@@ -18,62 +18,6 @@ import { AXChipsModule } from '@acorex/components/chips';
 import * as i1$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 
-/**
- * Interval selector component
- * Allows user to select "Every X [units]"
- */
-class AXSchedulerPickerIntervalSelectorComponent {
-    constructor() {
-        /**
-         * Current interval value
-         */
-        this.interval = input.required(...(ngDevMode ? [{ debugName: "interval" }] : []));
-        /**
-         * Configuration
-         */
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-        /**
-         * Emits when interval changes
-         */
-        this.intervalChange = output();
-    }
-    /**
-     * Handle interval value change
-     */
-    onIntervalChange(value) {
-        if (value && value > 0) {
-            this.intervalChange.emit(value);
-        }
-    }
-    /**
-     * Get unit translation key based on mode
-     */
-    getUnitKey() {
-        const mode = this.config().mode;
-        const pluralKey = this.interval() === 1 ? 'singular' : 'plural';
-        switch (mode) {
-            case 'hourly':
-                return `@acorex:schedulerPicker.units.hour.${pluralKey}`;
-            case 'daily':
-                return `@acorex:schedulerPicker.units.day.${pluralKey}`;
-            case 'weekly':
-                return `@acorex:schedulerPicker.units.week.${pluralKey}`;
-            case 'monthly':
-                return `@acorex:schedulerPicker.units.month.${pluralKey}`;
-            case 'yearly':
-                return `@acorex:schedulerPicker.units.year.${pluralKey}`;
-            default:
-                return '@acorex:schedulerPicker.units.day.plural';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerIntervalSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXSchedulerPickerIntervalSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-interval-selector", inputs: { interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-interval-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.repeatEvery' | translate | async }}\n  </label>\n  <div class=\"ax-scheduler-picker-interval-input-group\">\n    <ax-number-box\n      [value]=\"interval()\"\n      [minValue]=\"config().minInterval || 1\"\n      [maxValue]=\"config().maxInterval || 999\"\n      [disabled]=\"false\"\n      (valueChange)=\"onIntervalChange($event)\"\n    />\n    <span class=\"ax-scheduler-picker-interval-unit\">\n      {{ getUnitKey() | translate | async }}\n    </span>\n  </div>\n</div>\n", styles: [".ax-scheduler-picker-interval-selector{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}.ax-scheduler-picker-interval-input-group{display:flex;align-items:center;gap:.375rem}.ax-scheduler-picker-interval-input-group ax-number-box{width:80px}.ax-scheduler-picker-interval-input-group .ax-scheduler-picker-interval-unit{color:var(--ax-comp-scheduler-picker-label-color);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerIntervalSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-scheduler-picker-interval-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXNumberBoxComponent, AXTranslatorPipe, AsyncPipe], template: "<div class=\"ax-scheduler-picker-interval-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.repeatEvery' | translate | async }}\n  </label>\n  <div class=\"ax-scheduler-picker-interval-input-group\">\n    <ax-number-box\n      [value]=\"interval()\"\n      [minValue]=\"config().minInterval || 1\"\n      [maxValue]=\"config().maxInterval || 999\"\n      [disabled]=\"false\"\n      (valueChange)=\"onIntervalChange($event)\"\n    />\n    <span class=\"ax-scheduler-picker-interval-unit\">\n      {{ getUnitKey() | translate | async }}\n    </span>\n  </div>\n</div>\n", styles: [".ax-scheduler-picker-interval-selector{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}.ax-scheduler-picker-interval-input-group{display:flex;align-items:center;gap:.375rem}.ax-scheduler-picker-interval-input-group ax-number-box{width:80px}.ax-scheduler-picker-interval-input-group .ax-scheduler-picker-interval-unit{color:var(--ax-comp-scheduler-picker-label-color);font-size:.875rem}\n"] }]
-        }], propDecorators: { interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], intervalChange: [{ type: i0.Output, args: ["intervalChange"] }] } });
-
 /**
  * Constants for scheduler picker module
  */
@@ -154,6 +98,62 @@ const AX_SCHEDULER_PICKER_WEEKDAY_END = 5; // Friday
  */
 const AX_SCHEDULER_PICKER_DEFAULT_OCCURRENCES = 10;
 
+/**
+ * Interval selector component
+ * Allows user to select "Every X [units]"
+ */
+class AXSchedulerPickerIntervalSelectorComponent {
+    constructor() {
+        /**
+         * Current interval value
+         */
+        this.interval = input.required(...(ngDevMode ? [{ debugName: "interval" }] : []));
+        /**
+         * Configuration
+         */
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        /**
+         * Emits when interval changes
+         */
+        this.intervalChange = output();
+    }
+    /**
+     * Handle interval value change
+     */
+    onIntervalChange(value) {
+        if (value && value > 0) {
+            this.intervalChange.emit(value);
+        }
+    }
+    /**
+     * Get unit translation key based on mode
+     */
+    getUnitKey() {
+        const mode = this.config().mode;
+        const pluralKey = this.interval() === 1 ? 'singular' : 'plural';
+        switch (mode) {
+            case 'hourly':
+                return `@acorex:schedulerPicker.units.hour.${pluralKey}`;
+            case 'daily':
+                return `@acorex:schedulerPicker.units.day.${pluralKey}`;
+            case 'weekly':
+                return `@acorex:schedulerPicker.units.week.${pluralKey}`;
+            case 'monthly':
+                return `@acorex:schedulerPicker.units.month.${pluralKey}`;
+            case 'yearly':
+                return `@acorex:schedulerPicker.units.year.${pluralKey}`;
+            default:
+                return '@acorex:schedulerPicker.units.day.plural';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerIntervalSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXSchedulerPickerIntervalSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-interval-selector", inputs: { interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-interval-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.repeatEvery' | translate | async }}\n  </label>\n  <div class=\"ax-scheduler-picker-interval-input-group\">\n    <ax-number-box\n      [value]=\"interval()\"\n      [minValue]=\"config().minInterval || 1\"\n      [maxValue]=\"config().maxInterval || 999\"\n      [disabled]=\"false\"\n      (valueChange)=\"onIntervalChange($event)\"\n    />\n    <span class=\"ax-scheduler-picker-interval-unit\">\n      {{ getUnitKey() | translate | async }}\n    </span>\n  </div>\n</div>\n", styles: [".ax-scheduler-picker-interval-selector{flex-direction:column;gap:.375rem;display:flex}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}.ax-scheduler-picker-interval-input-group{align-items:center;gap:.375rem;display:flex}.ax-scheduler-picker-interval-input-group ax-number-box{width:80px}.ax-scheduler-picker-interval-input-group .ax-scheduler-picker-interval-unit{color:var(--ax-comp-scheduler-picker-label-color);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerIntervalSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-interval-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXNumberBoxComponent, AXTranslatorPipe, AsyncPipe], template: "<div class=\"ax-scheduler-picker-interval-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.repeatEvery' | translate | async }}\n  </label>\n  <div class=\"ax-scheduler-picker-interval-input-group\">\n    <ax-number-box\n      [value]=\"interval()\"\n      [minValue]=\"config().minInterval || 1\"\n      [maxValue]=\"config().maxInterval || 999\"\n      [disabled]=\"false\"\n      (valueChange)=\"onIntervalChange($event)\"\n    />\n    <span class=\"ax-scheduler-picker-interval-unit\">\n      {{ getUnitKey() | translate | async }}\n    </span>\n  </div>\n</div>\n", styles: [".ax-scheduler-picker-interval-selector{flex-direction:column;gap:.375rem;display:flex}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}.ax-scheduler-picker-interval-input-group{align-items:center;gap:.375rem;display:flex}.ax-scheduler-picker-interval-input-group ax-number-box{width:80px}.ax-scheduler-picker-interval-input-group .ax-scheduler-picker-interval-unit{color:var(--ax-comp-scheduler-picker-label-color);font-size:.875rem}\n"] }]
+        }], propDecorators: { interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], intervalChange: [{ type: i0.Output, args: ["intervalChange"] }] } });
+
 class AXSchedulerPickerDailyPanelComponent {
     constructor() {
         this.pattern = input.required(...(ngDevMode ? [{ debugName: "pattern" }] : []));
@@ -185,17 +185,11 @@ class AXSchedulerPickerDailyPanelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerDailyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerDailyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-daily-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-daily-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Weekdays only switch -->\n  @if (config().options?.showWeekdaysOnly) {\n    <div class=\"ax-scheduler-picker-weekdays-only\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.weekdaysOnly' | translate | async }}\n      </label>\n      <ax-switch [value]=\"weekdayOnly()\" (valueChange)=\"onWeekdayOnlyChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-daily-panel{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-weekday-option{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0}.ax-scheduler-picker-time-selection{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerDailyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-daily-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-daily-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Weekdays only switch -->\n  @if (config().options?.showWeekdaysOnly) {\n    <div class=\"ax-scheduler-picker-weekdays-only\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.weekdaysOnly' | translate | async }}\n      </label>\n      <ax-switch [value]=\"weekdayOnly()\" (valueChange)=\"onWeekdayOnlyChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-daily-panel{flex-direction:column;gap:.5rem;display:flex}.ax-scheduler-picker-weekday-option{justify-content:space-between;align-items:center;padding:.25rem 0;display:flex}.ax-scheduler-picker-time-selection{flex-direction:column;gap:.375rem;display:flex}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerDailyPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-picker-daily-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
-                        FormsModule,
-                        AXSwitchComponent,
-                        AXTranslatorPipe,
-                        AsyncPipe,
-                        AXSchedulerPickerIntervalSelectorComponent,
-                    ], template: "<div class=\"ax-scheduler-picker-daily-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Weekdays only switch -->\n  @if (config().options?.showWeekdaysOnly) {\n    <div class=\"ax-scheduler-picker-weekdays-only\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.weekdaysOnly' | translate | async }}\n      </label>\n      <ax-switch [value]=\"weekdayOnly()\" (valueChange)=\"onWeekdayOnlyChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-daily-panel{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-weekday-option{display:flex;align-items:center;justify-content:space-between;padding:.25rem 0}.ax-scheduler-picker-time-selection{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"] }]
+            args: [{ selector: 'ax-scheduler-picker-daily-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSwitchComponent, AXTranslatorPipe, AsyncPipe, AXSchedulerPickerIntervalSelectorComponent], template: "<div class=\"ax-scheduler-picker-daily-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Weekdays only switch -->\n  @if (config().options?.showWeekdaysOnly) {\n    <div class=\"ax-scheduler-picker-weekdays-only\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.weekdaysOnly' | translate | async }}\n      </label>\n      <ax-switch [value]=\"weekdayOnly()\" (valueChange)=\"onWeekdayOnlyChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-daily-panel{flex-direction:column;gap:.5rem;display:flex}.ax-scheduler-picker-weekday-option{justify-content:space-between;align-items:center;padding:.25rem 0;display:flex}.ax-scheduler-picker-time-selection{flex-direction:column;gap:.375rem;display:flex}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], patternChange: [{ type: i0.Output, args: ["patternChange"] }] } });
 
 class AXSchedulerPickerHourlyPanelComponent {
@@ -442,7 +436,7 @@ class AXSchedulerPickerMonthlyPanelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerMonthlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerMonthlyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-monthly-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-monthly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Specific Days Mode: Calendar day picker -->\n  @if (config().options?.recurrenceMode === 'specificDays') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-monthly-panel{display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "component", type: AXSchedulerPickerDaySelectorComponent, selector: "ax-scheduler-picker-day-selector", inputs: ["days"], outputs: ["daysChange"] }, { kind: "component", type: AXSchedulerPickerOccurrenceSelectorComponent, selector: "ax-scheduler-picker-occurrence-selector", inputs: ["occurrence"], outputs: ["occurrenceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerMonthlyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-monthly-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-monthly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Specific Days Mode: Calendar day picker -->\n  @if (config().options?.recurrenceMode === 'specificDays') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-monthly-panel{flex-direction:column;gap:.5rem;display:flex}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "component", type: AXSchedulerPickerDaySelectorComponent, selector: "ax-scheduler-picker-day-selector", inputs: ["days"], outputs: ["daysChange"] }, { kind: "component", type: AXSchedulerPickerOccurrenceSelectorComponent, selector: "ax-scheduler-picker-occurrence-selector", inputs: ["occurrence"], outputs: ["occurrenceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerMonthlyPanelComponent, decorators: [{
             type: Component,
@@ -450,7 +444,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXSchedulerPickerIntervalSelectorComponent,
                         AXSchedulerPickerDaySelectorComponent,
                         AXSchedulerPickerOccurrenceSelectorComponent,
-                    ], template: "<div class=\"ax-scheduler-picker-monthly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Specific Days Mode: Calendar day picker -->\n  @if (config().options?.recurrenceMode === 'specificDays') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-monthly-panel{display:flex;flex-direction:column;gap:.5rem}\n"] }]
+                    ], template: "<div class=\"ax-scheduler-picker-monthly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Specific Days Mode: Calendar day picker -->\n  @if (config().options?.recurrenceMode === 'specificDays') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-monthly-panel{flex-direction:column;gap:.5rem;display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], patternChange: [{ type: i0.Output, args: ["patternChange"] }] } });
 
 /**
@@ -538,7 +532,7 @@ class AXSchedulerPickerWeeklyPanelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerWeeklyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerWeeklyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-weekly-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-weekly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Day selection -->\n  @if (config().options?.showWeekdaySelection) {\n    <div class=\"ax-scheduler-picker-day-selection\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.onDays' | translate | async }}\n      </label>\n      <ax-selection-list\n        [items]=\"dayItems()\"\n        [multiple]=\"true\"\n        [showControl]=\"true\"\n        [look]=\"'solid'\"\n        [direction]=\"'horizontal'\"\n        [value]=\"selectedDays()\"\n        (onValueChanged)=\"onDaysChange($event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-weekly-panel{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-day-selection,.ax-scheduler-picker-time-selection{display:flex;flex-direction:column;gap:.375rem}ax-selection-list{width:100%}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerWeeklyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-weekly-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-weekly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Day selection -->\n  @if (config().options?.showWeekdaySelection) {\n    <div class=\"ax-scheduler-picker-day-selection\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.onDays' | translate | async }}\n      </label>\n      <ax-selection-list\n        [items]=\"dayItems()\"\n        [multiple]=\"true\"\n        [showControl]=\"true\"\n        [look]=\"'solid'\"\n        [direction]=\"'horizontal'\"\n        [value]=\"selectedDays()\"\n        (onValueChanged)=\"onDaysChange($event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-weekly-panel{flex-direction:column;gap:.5rem;display:flex}.ax-scheduler-picker-day-selection,.ax-scheduler-picker-time-selection{flex-direction:column;gap:.375rem;display:flex}ax-selection-list{width:100%}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerWeeklyPanelComponent, decorators: [{
             type: Component,
@@ -548,7 +542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXTranslatorPipe,
                         AsyncPipe,
                         AXSchedulerPickerIntervalSelectorComponent,
-                    ], template: "<div class=\"ax-scheduler-picker-weekly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Day selection -->\n  @if (config().options?.showWeekdaySelection) {\n    <div class=\"ax-scheduler-picker-day-selection\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.onDays' | translate | async }}\n      </label>\n      <ax-selection-list\n        [items]=\"dayItems()\"\n        [multiple]=\"true\"\n        [showControl]=\"true\"\n        [look]=\"'solid'\"\n        [direction]=\"'horizontal'\"\n        [value]=\"selectedDays()\"\n        (onValueChanged)=\"onDaysChange($event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-weekly-panel{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-day-selection,.ax-scheduler-picker-time-selection{display:flex;flex-direction:column;gap:.375rem}ax-selection-list{width:100%}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"] }]
+                    ], template: "<div class=\"ax-scheduler-picker-weekly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Day selection -->\n  @if (config().options?.showWeekdaySelection) {\n    <div class=\"ax-scheduler-picker-day-selection\">\n      <label class=\"ax-scheduler-picker-label\">\n        {{ '@acorex:schedulerPicker.labels.onDays' | translate | async }}\n      </label>\n      <ax-selection-list\n        [items]=\"dayItems()\"\n        [multiple]=\"true\"\n        [showControl]=\"true\"\n        [look]=\"'solid'\"\n        [direction]=\"'horizontal'\"\n        [value]=\"selectedDays()\"\n        (onValueChanged)=\"onDaysChange($event)\"\n      />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-weekly-panel{flex-direction:column;gap:.5rem;display:flex}.ax-scheduler-picker-day-selection,.ax-scheduler-picker-time-selection{flex-direction:column;gap:.375rem;display:flex}ax-selection-list{width:100%}.ax-scheduler-picker-label{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], patternChange: [{ type: i0.Output, args: ["patternChange"] }] } });
 
 class AXSchedulerPickerMonthSelectorComponent {
@@ -667,7 +661,7 @@ class AXSchedulerPickerYearlyPanelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerYearlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerYearlyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-yearly-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-yearly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Month selector (independent of recurrence mode) -->\n  @if (config().options?.showMonthSelection !== false) {\n    <ax-scheduler-picker-month-selector\n      [months]=\"selectedMonths()\"\n      (monthsChange)=\"onMonthsChange($event)\"\n    />\n  }\n\n  <!-- Specific Date Mode: Day picker -->\n  @if (config().options?.recurrenceMode === 'specificDate') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Month + Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    @if (config().options?.showMonthSelection !== false) {\n      <ax-scheduler-picker-month-selector\n        [months]=\"selectedMonths()\"\n        (monthsChange)=\"onMonthsChange($event)\"\n      />\n    }\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-yearly-panel{display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "component", type: AXSchedulerPickerMonthSelectorComponent, selector: "ax-scheduler-picker-month-selector", inputs: ["months"], outputs: ["monthsChange"] }, { kind: "component", type: AXSchedulerPickerDaySelectorComponent, selector: "ax-scheduler-picker-day-selector", inputs: ["days"], outputs: ["daysChange"] }, { kind: "component", type: AXSchedulerPickerOccurrenceSelectorComponent, selector: "ax-scheduler-picker-occurrence-selector", inputs: ["occurrence"], outputs: ["occurrenceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerYearlyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-yearly-panel", inputs: { pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { patternChange: "patternChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-yearly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Month selector (independent of recurrence mode) -->\n  @if (config().options?.showMonthSelection !== false) {\n    <ax-scheduler-picker-month-selector\n      [months]=\"selectedMonths()\"\n      (monthsChange)=\"onMonthsChange($event)\"\n    />\n  }\n\n  <!-- Specific Date Mode: Day picker -->\n  @if (config().options?.recurrenceMode === 'specificDate') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Month + Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    @if (config().options?.showMonthSelection !== false) {\n      <ax-scheduler-picker-month-selector\n        [months]=\"selectedMonths()\"\n        (monthsChange)=\"onMonthsChange($event)\"\n      />\n    }\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-yearly-panel{flex-direction:column;gap:.5rem;display:flex}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }, { kind: "component", type: AXSchedulerPickerMonthSelectorComponent, selector: "ax-scheduler-picker-month-selector", inputs: ["months"], outputs: ["monthsChange"] }, { kind: "component", type: AXSchedulerPickerDaySelectorComponent, selector: "ax-scheduler-picker-day-selector", inputs: ["days"], outputs: ["daysChange"] }, { kind: "component", type: AXSchedulerPickerOccurrenceSelectorComponent, selector: "ax-scheduler-picker-occurrence-selector", inputs: ["occurrence"], outputs: ["occurrenceChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerYearlyPanelComponent, decorators: [{
             type: Component,
@@ -676,7 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXSchedulerPickerMonthSelectorComponent,
                         AXSchedulerPickerDaySelectorComponent,
                         AXSchedulerPickerOccurrenceSelectorComponent,
-                    ], template: "<div class=\"ax-scheduler-picker-yearly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Month selector (independent of recurrence mode) -->\n  @if (config().options?.showMonthSelection !== false) {\n    <ax-scheduler-picker-month-selector\n      [months]=\"selectedMonths()\"\n      (monthsChange)=\"onMonthsChange($event)\"\n    />\n  }\n\n  <!-- Specific Date Mode: Day picker -->\n  @if (config().options?.recurrenceMode === 'specificDate') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Month + Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    @if (config().options?.showMonthSelection !== false) {\n      <ax-scheduler-picker-month-selector\n        [months]=\"selectedMonths()\"\n        (monthsChange)=\"onMonthsChange($event)\"\n      />\n    }\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-yearly-panel{display:flex;flex-direction:column;gap:.5rem}\n"] }]
+                    ], template: "<div class=\"ax-scheduler-picker-yearly-panel\">\n  <!-- Interval selector -->\n  @if (config().options?.showInterval) {\n    <ax-scheduler-picker-interval-selector\n      [interval]=\"pattern()?.interval || 1\"\n      [config]=\"config()\"\n      (intervalChange)=\"onIntervalChange($event)\"\n    />\n  }\n\n  <!-- Month selector (independent of recurrence mode) -->\n  @if (config().options?.showMonthSelection !== false) {\n    <ax-scheduler-picker-month-selector\n      [months]=\"selectedMonths()\"\n      (monthsChange)=\"onMonthsChange($event)\"\n    />\n  }\n\n  <!-- Specific Date Mode: Day picker -->\n  @if (config().options?.recurrenceMode === 'specificDate') {\n    <ax-scheduler-picker-day-selector\n      [days]=\"selectedDays()\"\n      (daysChange)=\"onDaysChange($event)\"\n    />\n  }\n\n  <!-- Occurrence Mode: Month + Position + Weekday selectors -->\n  @if (config().options?.recurrenceMode === 'occurrence') {\n    @if (config().options?.showMonthSelection !== false) {\n      <ax-scheduler-picker-month-selector\n        [months]=\"selectedMonths()\"\n        (monthsChange)=\"onMonthsChange($event)\"\n      />\n    }\n    <ax-scheduler-picker-occurrence-selector\n      [occurrence]=\"occurrence()\"\n      (occurrenceChange)=\"onOccurrenceChange($event)\"\n    />\n  }\n</div>\n", styles: [".ax-scheduler-picker-yearly-panel{flex-direction:column;gap:.5rem;display:flex}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], patternChange: [{ type: i0.Output, args: ["patternChange"] }] } });
 
 /**
@@ -1380,50 +1374,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }] });
 
-class AXSchedulerPickerStartConditionSelectorComponent {
-    constructor() {
-        this.startCondition = input(...(ngDevMode ? [undefined, { debugName: "startCondition" }] : []));
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.startConditionChange = output();
-        this.selectedType = signal('now', ...(ngDevMode ? [{ debugName: "selectedType" }] : []));
-        this.startDate = signal(null, ...(ngDevMode ? [{ debugName: "startDate" }] : []));
-        this.startTypeItems = [
-            { id: 'now', text: '@acorex:schedulerPicker.startCondition.now' },
-            { id: 'byDate', text: '@acorex:schedulerPicker.startCondition.byDate' },
-        ];
-        // Initialize from input
-        effect(() => {
-            const condition = this.startCondition();
-            if (condition) {
-                this.selectedType.set(condition.type);
-                this.startDate.set(condition.startDate);
-            }
-        });
-    }
-    onTypeChange(event) {
-        this.selectedType.set(event.value);
-        this.emitChange();
-    }
-    onDateChange(value) {
-        this.startDate.set(value);
-        this.emitChange();
-    }
-    emitChange() {
-        const type = this.selectedType();
-        const condition = {
-            type,
-            startDate: type === 'byDate' ? this.startDate() || new Date() : new Date(),
-        };
-        this.startConditionChange.emit(condition);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerStartConditionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerStartConditionSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-start-condition-selector", inputs: { startCondition: { classPropertyName: "startCondition", publicName: "startCondition", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { startConditionChange: "startConditionChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-start-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.startCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"startTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.startDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"startDate()\" [picker]=\"'datetime'\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-start-condition-selector{display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerStartConditionSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ax-scheduler-picker-start-condition-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSelectionListModule, AXDateTimeBoxComponent, AXTranslatorPipe, AsyncPipe], template: "<div class=\"ax-scheduler-picker-start-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.startCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"startTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.startDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"startDate()\" [picker]=\"'datetime'\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-start-condition-selector{display:flex;flex-direction:column;gap:.5rem}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { startCondition: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCondition", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], startConditionChange: [{ type: i0.Output, args: ["startConditionChange"] }] } });
-
 class AXSchedulerPickerEndConditionSelectorComponent {
     constructor() {
         this.endCondition = input(...(ngDevMode ? [undefined, { debugName: "endCondition" }] : []));
@@ -1479,7 +1429,7 @@ class AXSchedulerPickerEndConditionSelectorComponent {
         this.endConditionChange.emit(condition);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerEndConditionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerEndConditionSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-end-condition-selector", inputs: { endCondition: { classPropertyName: "endCondition", publicName: "endCondition", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { endConditionChange: "endConditionChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-end-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.endCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"endTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'afterOccurrences') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.numberOfOccurrences' | translate | async }}\n      </label>\n      <ax-number-box [value]=\"occurrences()\" (valueChange)=\"onOccurrencesChange($event)\" />\n    </div>\n  }\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.endDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"endDate()\" mode=\"date\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-end-condition-selector{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-input-group{display:flex;flex-direction:column;gap:.375rem;padding-left:.5rem}.ax-scheduler-picker-label,.ax-scheduler-picker-sublabel{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}ax-selection-list{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerEndConditionSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-end-condition-selector", inputs: { endCondition: { classPropertyName: "endCondition", publicName: "endCondition", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { endConditionChange: "endConditionChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-end-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.endCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"endTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'afterOccurrences') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.numberOfOccurrences' | translate | async }}\n      </label>\n      <ax-number-box [value]=\"occurrences()\" (valueChange)=\"onOccurrencesChange($event)\" />\n    </div>\n  }\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.endDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"endDate()\" mode=\"date\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-end-condition-selector{flex-direction:column;gap:.5rem;display:flex}.ax-scheduler-picker-input-group{flex-direction:column;gap:.375rem;padding-left:.5rem;display:flex}.ax-scheduler-picker-label,.ax-scheduler-picker-sublabel{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}ax-selection-list{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerEndConditionSelectorComponent, decorators: [{
             type: Component,
@@ -1490,7 +1440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDateTimeBoxComponent,
                         AXTranslatorPipe,
                         AsyncPipe,
-                    ], template: "<div class=\"ax-scheduler-picker-end-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.endCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"endTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'afterOccurrences') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.numberOfOccurrences' | translate | async }}\n      </label>\n      <ax-number-box [value]=\"occurrences()\" (valueChange)=\"onOccurrencesChange($event)\" />\n    </div>\n  }\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.endDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"endDate()\" mode=\"date\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-end-condition-selector{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-input-group{display:flex;flex-direction:column;gap:.375rem;padding-left:.5rem}.ax-scheduler-picker-label,.ax-scheduler-picker-sublabel{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}ax-selection-list{width:100%}\n"] }]
+                    ], template: "<div class=\"ax-scheduler-picker-end-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.endCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"endTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'afterOccurrences') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.numberOfOccurrences' | translate | async }}\n      </label>\n      <ax-number-box [value]=\"occurrences()\" (valueChange)=\"onOccurrencesChange($event)\" />\n    </div>\n  }\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.endDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"endDate()\" mode=\"date\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-end-condition-selector{flex-direction:column;gap:.5rem;display:flex}.ax-scheduler-picker-input-group{flex-direction:column;gap:.375rem;padding-left:.5rem;display:flex}.ax-scheduler-picker-label,.ax-scheduler-picker-sublabel{color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight);margin:0}ax-selection-list{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { endCondition: [{ type: i0.Input, args: [{ isSignal: true, alias: "endCondition", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], endConditionChange: [{ type: i0.Output, args: ["endConditionChange"] }] } });
 
 class AXSchedulerPickerExclusionManagerComponent {
@@ -1806,6 +1756,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                     }, styles: [".ax-scheduler-picker-inclusion-manager{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-section-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:.375rem}.ax-scheduler-picker-label{display:flex;align-items:center;gap:.375rem;color:var(--ax-comp-scheduler-picker-label-color);font-size:var(--ax-comp-scheduler-picker-label-font-size);font-weight:var(--ax-comp-scheduler-picker-label-font-weight)}.ax-scheduler-picker-label .ax-icon{font-size:1.125rem;color:rgb(var(--ax-sys-color-success-500))}.ax-scheduler-picker-add-section{display:flex;gap:.5rem;align-items:stretch}.ax-scheduler-picker-date-input{flex:1}.ax-scheduler-picker-chips-container{display:flex;flex-wrap:wrap;gap:.375rem}.ax-scheduler-picker-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:.75rem .5rem;border:1px dashed rgb(var(--ax-sys-color-border-light-surface));border-radius:var(--ax-sys-border-radius-md);color:rgb(var(--ax-sys-color-on-darker-surface));font-size:.875rem}.ax-scheduler-picker-empty-state .ax-icon{font-size:1.5rem;opacity:.4}\n"] }]
         }], ctorParameters: () => [], propDecorators: { inclusions: [{ type: i0.Input, args: [{ isSignal: true, alias: "inclusions", required: false }] }], inclusionsChange: [{ type: i0.Output, args: ["inclusionsChange"] }] } });
 
+class AXSchedulerPickerStartConditionSelectorComponent {
+    constructor() {
+        this.startCondition = input(...(ngDevMode ? [undefined, { debugName: "startCondition" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.startConditionChange = output();
+        this.selectedType = signal('now', ...(ngDevMode ? [{ debugName: "selectedType" }] : []));
+        this.startDate = signal(null, ...(ngDevMode ? [{ debugName: "startDate" }] : []));
+        this.startTypeItems = [
+            { id: 'now', text: '@acorex:schedulerPicker.startCondition.now' },
+            { id: 'byDate', text: '@acorex:schedulerPicker.startCondition.byDate' },
+        ];
+        // Initialize from input
+        effect(() => {
+            const condition = this.startCondition();
+            if (condition) {
+                this.selectedType.set(condition.type);
+                this.startDate.set(condition.startDate);
+            }
+        });
+    }
+    onTypeChange(event) {
+        this.selectedType.set(event.value);
+        this.emitChange();
+    }
+    onDateChange(value) {
+        this.startDate.set(value);
+        this.emitChange();
+    }
+    emitChange() {
+        const type = this.selectedType();
+        const condition = {
+            type,
+            startDate: type === 'byDate' ? this.startDate() || new Date() : new Date(),
+        };
+        this.startConditionChange.emit(condition);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerStartConditionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerStartConditionSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-start-condition-selector", inputs: { startCondition: { classPropertyName: "startCondition", publicName: "startCondition", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { startConditionChange: "startConditionChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-start-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.startCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"startTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.startDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"startDate()\" [picker]=\"'datetime'\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-start-condition-selector{flex-direction:column;gap:.5rem;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i1.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXDateTimeBoxComponent, selector: "ax-datetime-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "depth", "id", "type", "look", "holidayDates", "allowTyping", "picker", "calendar", "weekend", "weekdays", "format"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "onOpened", "onClosed", "readonlyChange", "disabledChange", "formatChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerStartConditionSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-start-condition-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSelectionListModule, AXDateTimeBoxComponent, AXTranslatorPipe, AsyncPipe], template: "<div class=\"ax-scheduler-picker-start-condition-selector\">\n  <label class=\"ax-scheduler-picker-label\">\n    {{ '@acorex:schedulerPicker.labels.startCondition' | translate | async }}\n  </label>\n\n  <ax-selection-list\n    [items]=\"startTypeItems\"\n    [multiple]=\"false\"\n    [showControl]=\"true\"\n    [look]=\"'solid'\"\n    [direction]=\"'horizontal'\"\n    [value]=\"selectedType()\"\n    (onValueChanged)=\"onTypeChange($event)\"\n  />\n\n  @if (selectedType() === 'byDate') {\n    <div class=\"ax-scheduler-picker-input-group\">\n      <label class=\"ax-scheduler-picker-sublabel\">\n        {{ '@acorex:schedulerPicker.labels.startDate' | translate | async }}\n      </label>\n      <ax-datetime-box [value]=\"startDate()\" [picker]=\"'datetime'\" (valueChange)=\"onDateChange($event)\" />\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-start-condition-selector{flex-direction:column;gap:.5rem;display:flex}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { startCondition: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCondition", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], startConditionChange: [{ type: i0.Output, args: ["startConditionChange"] }] } });
+
 /**
  * A powerful, fully customizable scheduler picker component for creating recurrence patterns
  *
@@ -2112,7 +2106,7 @@ class AXSchedulerPickerComponent extends MXValueComponent {
                 useExisting: forwardRef(() => AXSchedulerPickerComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-picker\" [class.ax-disabled]=\"disabled\" [class.ax-readonly]=\"readonly\">\n  <!-- Mode-specific panel -->\n  <div class=\"ax-scheduler-picker-panel\">\n    @switch (mode()) {\n      @case ('hourly') {\n        <ax-scheduler-picker-hourly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('daily') {\n        <ax-scheduler-picker-daily-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('weekly') {\n        <ax-scheduler-picker-weekly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('monthly') {\n        <ax-scheduler-picker-monthly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('yearly') {\n        <ax-scheduler-picker-yearly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n    }\n  </div>\n\n  <!-- Start condition -->\n  @if (mergedConfig().showStartCondition && pattern()) {\n    <div class=\"ax-scheduler-picker-start-conditions\">\n      <ax-scheduler-picker-start-condition-selector\n        [startCondition]=\"pattern()!.startCondition\"\n        [config]=\"mergedConfig()\"\n        (startConditionChange)=\"updatePattern({ startCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- End conditions -->\n  @if (mergedConfig().showEndConditions && pattern()) {\n    <div class=\"ax-scheduler-picker-end-conditions\">\n      <ax-scheduler-picker-end-condition-selector\n        [endCondition]=\"pattern()!.endCondition\"\n        [config]=\"mergedConfig()\"\n        (endConditionChange)=\"updatePattern({ endCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Exclusions -->\n  @if (mergedConfig().showExclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-exclusions\">\n      <ax-scheduler-picker-exclusion-manager\n        [exclusions]=\"pattern()!.exclusions || []\"\n        [config]=\"mergedConfig()\"\n        (exclusionsChange)=\"updatePattern({ exclusions: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Inclusions -->\n  @if (mergedConfig().showInclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-inclusions\">\n      <ax-scheduler-picker-inclusion-manager\n        [inclusions]=\"pattern()!.inclusions || []\"\n        (inclusionsChange)=\"updatePattern({ inclusions: $event })\"\n      />\n    </div>\n  }\n</div>\n", styles: [":root{--ax-comp-scheduler-picker-border: 1px solid rgb(var(--ax-sys-color-border-lighter-surface));--ax-comp-scheduler-picker-border-radius: var(--ax-sys-border-radius-md);--ax-comp-scheduler-picker-padding: .5rem;--ax-comp-scheduler-picker-gap: .5rem;--ax-comp-scheduler-picker-label-color: rgb(var(--ax-sys-color-on-lighter-surface));--ax-comp-scheduler-picker-label-font-size: .875rem;--ax-comp-scheduler-picker-label-font-weight: 500;--ax-comp-scheduler-picker-summary-color: rgb(var(--ax-sys-color-on-darker-surface));--ax-comp-scheduler-picker-summary-padding: .375rem .5rem;--ax-comp-scheduler-picker-error-color: rgb(var(--ax-sys-color-danger-500));--ax-comp-scheduler-picker-error-padding: .375rem .5rem}.ax-scheduler-picker{display:flex;flex-direction:column;gap:var(--ax-comp-scheduler-picker-gap);padding:var(--ax-comp-scheduler-picker-padding)}.ax-scheduler-picker.ax-disabled{opacity:.6;pointer-events:none}.ax-scheduler-picker.ax-readonly{pointer-events:none}.ax-scheduler-picker-summary{display:flex;align-items:center;gap:.375rem;padding:var(--ax-comp-scheduler-picker-summary-padding);color:var(--ax-comp-scheduler-picker-summary-color);font-size:.875rem}.ax-scheduler-picker-summary .ax-scheduler-picker-summary-label{font-weight:var(--ax-comp-scheduler-picker-label-font-weight)}.ax-scheduler-picker-errors{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-error{padding:var(--ax-comp-scheduler-picker-error-padding);color:var(--ax-comp-scheduler-picker-error-color);font-size:.875rem}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerHourlyPanelComponent, selector: "ax-scheduler-picker-hourly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerDailyPanelComponent, selector: "ax-scheduler-picker-daily-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerWeeklyPanelComponent, selector: "ax-scheduler-picker-weekly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerMonthlyPanelComponent, selector: "ax-scheduler-picker-monthly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerYearlyPanelComponent, selector: "ax-scheduler-picker-yearly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerStartConditionSelectorComponent, selector: "ax-scheduler-picker-start-condition-selector", inputs: ["startCondition", "config"], outputs: ["startConditionChange"] }, { kind: "component", type: AXSchedulerPickerEndConditionSelectorComponent, selector: "ax-scheduler-picker-end-condition-selector", inputs: ["endCondition", "config"], outputs: ["endConditionChange"] }, { kind: "component", type: AXSchedulerPickerExclusionManagerComponent, selector: "ax-scheduler-picker-exclusion-manager", inputs: ["exclusions", "config"], outputs: ["exclusionsChange"] }, { kind: "component", type: AXSchedulerPickerInclusionManagerComponent, selector: "ax-scheduler-picker-inclusion-manager", inputs: ["inclusions"], outputs: ["inclusionsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-picker\" [class.ax-disabled]=\"disabled\" [class.ax-readonly]=\"readonly\">\n  <!-- Mode-specific panel -->\n  <div class=\"ax-scheduler-picker-panel\">\n    @switch (mode()) {\n      @case ('hourly') {\n        <ax-scheduler-picker-hourly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('daily') {\n        <ax-scheduler-picker-daily-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('weekly') {\n        <ax-scheduler-picker-weekly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('monthly') {\n        <ax-scheduler-picker-monthly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('yearly') {\n        <ax-scheduler-picker-yearly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n    }\n  </div>\n\n  <!-- Start condition -->\n  @if (mergedConfig().showStartCondition && pattern()) {\n    <div class=\"ax-scheduler-picker-start-conditions\">\n      <ax-scheduler-picker-start-condition-selector\n        [startCondition]=\"pattern()!.startCondition\"\n        [config]=\"mergedConfig()\"\n        (startConditionChange)=\"updatePattern({ startCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- End conditions -->\n  @if (mergedConfig().showEndConditions && pattern()) {\n    <div class=\"ax-scheduler-picker-end-conditions\">\n      <ax-scheduler-picker-end-condition-selector\n        [endCondition]=\"pattern()!.endCondition\"\n        [config]=\"mergedConfig()\"\n        (endConditionChange)=\"updatePattern({ endCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Exclusions -->\n  @if (mergedConfig().showExclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-exclusions\">\n      <ax-scheduler-picker-exclusion-manager\n        [exclusions]=\"pattern()!.exclusions || []\"\n        [config]=\"mergedConfig()\"\n        (exclusionsChange)=\"updatePattern({ exclusions: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Inclusions -->\n  @if (mergedConfig().showInclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-inclusions\">\n      <ax-scheduler-picker-inclusion-manager\n        [inclusions]=\"pattern()!.inclusions || []\"\n        (inclusionsChange)=\"updatePattern({ inclusions: $event })\"\n      />\n    </div>\n  }\n</div>\n", styles: [":root{--ax-comp-scheduler-picker-border:1px solid rgb(var(--ax-sys-color-border-lighter-surface));--ax-comp-scheduler-picker-border-radius:var(--ax-sys-border-radius-md);--ax-comp-scheduler-picker-padding:.5rem;--ax-comp-scheduler-picker-gap:.5rem;--ax-comp-scheduler-picker-label-color:rgb(var(--ax-sys-color-on-lighter-surface));--ax-comp-scheduler-picker-label-font-size:.875rem;--ax-comp-scheduler-picker-label-font-weight:500;--ax-comp-scheduler-picker-summary-color:rgb(var(--ax-sys-color-on-darker-surface));--ax-comp-scheduler-picker-summary-padding:.375rem .5rem;--ax-comp-scheduler-picker-error-color:rgb(var(--ax-sys-color-danger-500));--ax-comp-scheduler-picker-error-padding:.375rem .5rem}.ax-scheduler-picker{gap:var(--ax-comp-scheduler-picker-gap);padding:var(--ax-comp-scheduler-picker-padding);flex-direction:column;display:flex}.ax-scheduler-picker.ax-disabled{opacity:.6;pointer-events:none}.ax-scheduler-picker.ax-readonly{pointer-events:none}.ax-scheduler-picker-summary{padding:var(--ax-comp-scheduler-picker-summary-padding);color:var(--ax-comp-scheduler-picker-summary-color);align-items:center;gap:.375rem;font-size:.875rem;display:flex}.ax-scheduler-picker-summary .ax-scheduler-picker-summary-label{font-weight:var(--ax-comp-scheduler-picker-label-font-weight)}.ax-scheduler-picker-errors{flex-direction:column;gap:.375rem;display:flex}.ax-scheduler-picker-error{padding:var(--ax-comp-scheduler-picker-error-padding);color:var(--ax-comp-scheduler-picker-error-color);font-size:.875rem}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerHourlyPanelComponent, selector: "ax-scheduler-picker-hourly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerDailyPanelComponent, selector: "ax-scheduler-picker-daily-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerWeeklyPanelComponent, selector: "ax-scheduler-picker-weekly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerMonthlyPanelComponent, selector: "ax-scheduler-picker-monthly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerYearlyPanelComponent, selector: "ax-scheduler-picker-yearly-panel", inputs: ["pattern", "config"], outputs: ["patternChange"] }, { kind: "component", type: AXSchedulerPickerStartConditionSelectorComponent, selector: "ax-scheduler-picker-start-condition-selector", inputs: ["startCondition", "config"], outputs: ["startConditionChange"] }, { kind: "component", type: AXSchedulerPickerEndConditionSelectorComponent, selector: "ax-scheduler-picker-end-condition-selector", inputs: ["endCondition", "config"], outputs: ["endConditionChange"] }, { kind: "component", type: AXSchedulerPickerExclusionManagerComponent, selector: "ax-scheduler-picker-exclusion-manager", inputs: ["exclusions", "config"], outputs: ["exclusionsChange"] }, { kind: "component", type: AXSchedulerPickerInclusionManagerComponent, selector: "ax-scheduler-picker-inclusion-manager", inputs: ["inclusions"], outputs: ["inclusionsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerComponent, decorators: [{
             type: Component,
@@ -2135,7 +2129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXSchedulerPickerEndConditionSelectorComponent,
                         AXSchedulerPickerExclusionManagerComponent,
                         AXSchedulerPickerInclusionManagerComponent,
-                    ], template: "<div class=\"ax-scheduler-picker\" [class.ax-disabled]=\"disabled\" [class.ax-readonly]=\"readonly\">\n  <!-- Mode-specific panel -->\n  <div class=\"ax-scheduler-picker-panel\">\n    @switch (mode()) {\n      @case ('hourly') {\n        <ax-scheduler-picker-hourly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('daily') {\n        <ax-scheduler-picker-daily-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('weekly') {\n        <ax-scheduler-picker-weekly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('monthly') {\n        <ax-scheduler-picker-monthly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('yearly') {\n        <ax-scheduler-picker-yearly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n    }\n  </div>\n\n  <!-- Start condition -->\n  @if (mergedConfig().showStartCondition && pattern()) {\n    <div class=\"ax-scheduler-picker-start-conditions\">\n      <ax-scheduler-picker-start-condition-selector\n        [startCondition]=\"pattern()!.startCondition\"\n        [config]=\"mergedConfig()\"\n        (startConditionChange)=\"updatePattern({ startCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- End conditions -->\n  @if (mergedConfig().showEndConditions && pattern()) {\n    <div class=\"ax-scheduler-picker-end-conditions\">\n      <ax-scheduler-picker-end-condition-selector\n        [endCondition]=\"pattern()!.endCondition\"\n        [config]=\"mergedConfig()\"\n        (endConditionChange)=\"updatePattern({ endCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Exclusions -->\n  @if (mergedConfig().showExclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-exclusions\">\n      <ax-scheduler-picker-exclusion-manager\n        [exclusions]=\"pattern()!.exclusions || []\"\n        [config]=\"mergedConfig()\"\n        (exclusionsChange)=\"updatePattern({ exclusions: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Inclusions -->\n  @if (mergedConfig().showInclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-inclusions\">\n      <ax-scheduler-picker-inclusion-manager\n        [inclusions]=\"pattern()!.inclusions || []\"\n        (inclusionsChange)=\"updatePattern({ inclusions: $event })\"\n      />\n    </div>\n  }\n</div>\n", styles: [":root{--ax-comp-scheduler-picker-border: 1px solid rgb(var(--ax-sys-color-border-lighter-surface));--ax-comp-scheduler-picker-border-radius: var(--ax-sys-border-radius-md);--ax-comp-scheduler-picker-padding: .5rem;--ax-comp-scheduler-picker-gap: .5rem;--ax-comp-scheduler-picker-label-color: rgb(var(--ax-sys-color-on-lighter-surface));--ax-comp-scheduler-picker-label-font-size: .875rem;--ax-comp-scheduler-picker-label-font-weight: 500;--ax-comp-scheduler-picker-summary-color: rgb(var(--ax-sys-color-on-darker-surface));--ax-comp-scheduler-picker-summary-padding: .375rem .5rem;--ax-comp-scheduler-picker-error-color: rgb(var(--ax-sys-color-danger-500));--ax-comp-scheduler-picker-error-padding: .375rem .5rem}.ax-scheduler-picker{display:flex;flex-direction:column;gap:var(--ax-comp-scheduler-picker-gap);padding:var(--ax-comp-scheduler-picker-padding)}.ax-scheduler-picker.ax-disabled{opacity:.6;pointer-events:none}.ax-scheduler-picker.ax-readonly{pointer-events:none}.ax-scheduler-picker-summary{display:flex;align-items:center;gap:.375rem;padding:var(--ax-comp-scheduler-picker-summary-padding);color:var(--ax-comp-scheduler-picker-summary-color);font-size:.875rem}.ax-scheduler-picker-summary .ax-scheduler-picker-summary-label{font-weight:var(--ax-comp-scheduler-picker-label-font-weight)}.ax-scheduler-picker-errors{display:flex;flex-direction:column;gap:.375rem}.ax-scheduler-picker-error{padding:var(--ax-comp-scheduler-picker-error-padding);color:var(--ax-comp-scheduler-picker-error-color);font-size:.875rem}\n"] }]
+                    ], template: "<div class=\"ax-scheduler-picker\" [class.ax-disabled]=\"disabled\" [class.ax-readonly]=\"readonly\">\n  <!-- Mode-specific panel -->\n  <div class=\"ax-scheduler-picker-panel\">\n    @switch (mode()) {\n      @case ('hourly') {\n        <ax-scheduler-picker-hourly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('daily') {\n        <ax-scheduler-picker-daily-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('weekly') {\n        <ax-scheduler-picker-weekly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('monthly') {\n        <ax-scheduler-picker-monthly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n      @case ('yearly') {\n        <ax-scheduler-picker-yearly-panel\n          [pattern]=\"pattern()\"\n          [config]=\"$any(mergedConfig())\"\n          (patternChange)=\"updatePattern($event)\"\n        />\n      }\n    }\n  </div>\n\n  <!-- Start condition -->\n  @if (mergedConfig().showStartCondition && pattern()) {\n    <div class=\"ax-scheduler-picker-start-conditions\">\n      <ax-scheduler-picker-start-condition-selector\n        [startCondition]=\"pattern()!.startCondition\"\n        [config]=\"mergedConfig()\"\n        (startConditionChange)=\"updatePattern({ startCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- End conditions -->\n  @if (mergedConfig().showEndConditions && pattern()) {\n    <div class=\"ax-scheduler-picker-end-conditions\">\n      <ax-scheduler-picker-end-condition-selector\n        [endCondition]=\"pattern()!.endCondition\"\n        [config]=\"mergedConfig()\"\n        (endConditionChange)=\"updatePattern({ endCondition: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Exclusions -->\n  @if (mergedConfig().showExclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-exclusions\">\n      <ax-scheduler-picker-exclusion-manager\n        [exclusions]=\"pattern()!.exclusions || []\"\n        [config]=\"mergedConfig()\"\n        (exclusionsChange)=\"updatePattern({ exclusions: $event })\"\n      />\n    </div>\n  }\n\n  <!-- Inclusions -->\n  @if (mergedConfig().showInclusions && pattern()) {\n    <div class=\"ax-scheduler-picker-inclusions\">\n      <ax-scheduler-picker-inclusion-manager\n        [inclusions]=\"pattern()!.inclusions || []\"\n        (inclusionsChange)=\"updatePattern({ inclusions: $event })\"\n      />\n    </div>\n  }\n</div>\n", styles: [":root{--ax-comp-scheduler-picker-border:1px solid rgb(var(--ax-sys-color-border-lighter-surface));--ax-comp-scheduler-picker-border-radius:var(--ax-sys-border-radius-md);--ax-comp-scheduler-picker-padding:.5rem;--ax-comp-scheduler-picker-gap:.5rem;--ax-comp-scheduler-picker-label-color:rgb(var(--ax-sys-color-on-lighter-surface));--ax-comp-scheduler-picker-label-font-size:.875rem;--ax-comp-scheduler-picker-label-font-weight:500;--ax-comp-scheduler-picker-summary-color:rgb(var(--ax-sys-color-on-darker-surface));--ax-comp-scheduler-picker-summary-padding:.375rem .5rem;--ax-comp-scheduler-picker-error-color:rgb(var(--ax-sys-color-danger-500));--ax-comp-scheduler-picker-error-padding:.375rem .5rem}.ax-scheduler-picker{gap:var(--ax-comp-scheduler-picker-gap);padding:var(--ax-comp-scheduler-picker-padding);flex-direction:column;display:flex}.ax-scheduler-picker.ax-disabled{opacity:.6;pointer-events:none}.ax-scheduler-picker.ax-readonly{pointer-events:none}.ax-scheduler-picker-summary{padding:var(--ax-comp-scheduler-picker-summary-padding);color:var(--ax-comp-scheduler-picker-summary-color);align-items:center;gap:.375rem;font-size:.875rem;display:flex}.ax-scheduler-picker-summary .ax-scheduler-picker-summary-label{font-weight:var(--ax-comp-scheduler-picker-label-font-weight)}.ax-scheduler-picker-errors{flex-direction:column;gap:.375rem;display:flex}.ax-scheduler-picker-error{padding:var(--ax-comp-scheduler-picker-error-padding);color:var(--ax-comp-scheduler-picker-error-color);font-size:.875rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], summaryChange: [{ type: i0.Output, args: ["summaryChange"] }] } });
 
 class AXSchedulerPickerTimeSelectorComponent {
@@ -2322,11 +2316,11 @@ class AXSchedulerPickerConfigComponent {
         this.modeChange.emit(mode);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerConfigComponent, isStandalone: true, selector: "ax-scheduler-picker-config", outputs: { configChange: "configChange", modeChange: "modeChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-config\">\n  <h3>Configuration</h3>\n\n  <!-- Mode Selector -->\n  <div class=\"control-group\">\n    <label>Mode</label>\n    <ax-select-box\n      [dataSource]=\"modeOptions\"\n      [textField]=\"'text'\"\n      [valueField]=\"'value'\"\n      [value]=\"selectedMode()\"\n      (onValueChanged)=\"onModeChange($event.value)\"\n    />\n  </div>\n\n  <!-- Global Options -->\n  <div class=\"control-group\">\n    <label>Global Options</label>\n    <div class=\"switch-group\">\n      <span>Show Interval</span>\n      <ax-switch [(value)]=\"showInterval\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Start Condition</span>\n      <ax-switch [(value)]=\"showStartCondition\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show End Conditions</span>\n      <ax-switch [(value)]=\"showEndConditions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Exclusions</span>\n      <ax-switch [(value)]=\"showExclusions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Inclusions</span>\n      <ax-switch [(value)]=\"showInclusions\" />\n    </div>\n  </div>\n\n  <!-- Mode-Specific Options -->\n  @if (selectedMode() === 'daily') {\n    <div class=\"control-group\">\n      <label>Daily Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekdays Only</span>\n        <ax-switch [(value)]=\"showWeekdaysOnly\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'weekly') {\n    <div class=\"control-group\">\n      <label>Weekly Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekday Selection</span>\n        <ax-switch [(value)]=\"showWeekdaySelection\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'monthly') {\n    <div class=\"control-group\">\n      <label>Monthly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDays', text: 'Specific Days' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"monthlyRecurrenceMode()\"\n          (onValueChanged)=\"monthlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'yearly') {\n    <div class=\"control-group\">\n      <label>Yearly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDate', text: 'Specific Date' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"yearlyRecurrenceMode()\"\n          (onValueChanged)=\"yearlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n      <div class=\"switch-group\">\n        <span>Show Month Selection</span>\n        <ax-switch [(value)]=\"showMonthSelection\" />\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-config{background:var(--ax-sys-color-surface-container);padding:1.25rem;border-radius:var(--ax-sys-border-radius-md)}.ax-scheduler-picker-config h3{margin:0 0 1.25rem;font-size:1rem;font-weight:600;color:var(--ax-sys-color-on-surface)}.ax-scheduler-picker-config .control-group{margin-bottom:1.25rem}.ax-scheduler-picker-config .control-group:last-child{margin-bottom:0}.ax-scheduler-picker-config .control-group>label{display:block;font-size:.875rem;font-weight:500;color:var(--ax-sys-color-on-surface-variant);margin-bottom:.5rem}.ax-scheduler-picker-config .control-group ax-select-box{width:100%}.ax-scheduler-picker-config .control-subgroup{margin-bottom:.75rem}.ax-scheduler-picker-config .control-subgroup label{display:block;font-size:.8125rem;font-weight:500;color:var(--ax-sys-color-on-surface-variant);margin-bottom:.375rem}.ax-scheduler-picker-config .control-subgroup ax-select-box{width:100%}.ax-scheduler-picker-config .switch-group{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;gap:.75rem}.ax-scheduler-picker-config .switch-group span{font-size:.875rem;color:var(--ax-sys-color-on-surface)}.ax-scheduler-picker-config .switch-group ax-switch{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXSchedulerPickerConfigComponent, isStandalone: true, selector: "ax-scheduler-picker-config", outputs: { configChange: "configChange", modeChange: "modeChange" }, ngImport: i0, template: "<div class=\"ax-scheduler-picker-config\">\n  <h3>Configuration</h3>\n\n  <!-- Mode Selector -->\n  <div class=\"control-group\">\n    <label>Mode</label>\n    <ax-select-box\n      [dataSource]=\"modeOptions\"\n      [textField]=\"'text'\"\n      [valueField]=\"'value'\"\n      [value]=\"selectedMode()\"\n      (onValueChanged)=\"onModeChange($event.value)\"\n    />\n  </div>\n\n  <!-- Global Options -->\n  <div class=\"control-group\">\n    <label>Global Options</label>\n    <div class=\"switch-group\">\n      <span>Show Interval</span>\n      <ax-switch [(value)]=\"showInterval\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Start Condition</span>\n      <ax-switch [(value)]=\"showStartCondition\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show End Conditions</span>\n      <ax-switch [(value)]=\"showEndConditions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Exclusions</span>\n      <ax-switch [(value)]=\"showExclusions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Inclusions</span>\n      <ax-switch [(value)]=\"showInclusions\" />\n    </div>\n  </div>\n\n  <!-- Mode-Specific Options -->\n  @if (selectedMode() === 'daily') {\n    <div class=\"control-group\">\n      <label>Daily Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekdays Only</span>\n        <ax-switch [(value)]=\"showWeekdaysOnly\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'weekly') {\n    <div class=\"control-group\">\n      <label>Weekly Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekday Selection</span>\n        <ax-switch [(value)]=\"showWeekdaySelection\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'monthly') {\n    <div class=\"control-group\">\n      <label>Monthly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDays', text: 'Specific Days' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"monthlyRecurrenceMode()\"\n          (onValueChanged)=\"monthlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'yearly') {\n    <div class=\"control-group\">\n      <label>Yearly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDate', text: 'Specific Date' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"yearlyRecurrenceMode()\"\n          (onValueChanged)=\"yearlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n      <div class=\"switch-group\">\n        <span>Show Month Selection</span>\n        <ax-switch [(value)]=\"showMonthSelection\" />\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-config{background:var(--ax-sys-color-surface-container);border-radius:var(--ax-sys-border-radius-md);padding:1.25rem}.ax-scheduler-picker-config h3{color:var(--ax-sys-color-on-surface);margin:0 0 1.25rem;font-size:1rem;font-weight:600}.ax-scheduler-picker-config .control-group{margin-bottom:1.25rem}.ax-scheduler-picker-config .control-group:last-child{margin-bottom:0}.ax-scheduler-picker-config .control-group>label{color:var(--ax-sys-color-on-surface-variant);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}.ax-scheduler-picker-config .control-group ax-select-box{width:100%}.ax-scheduler-picker-config .control-subgroup{margin-bottom:.75rem}.ax-scheduler-picker-config .control-subgroup label{color:var(--ax-sys-color-on-surface-variant);margin-bottom:.375rem;font-size:.8125rem;font-weight:500;display:block}.ax-scheduler-picker-config .control-subgroup ax-select-box{width:100%}.ax-scheduler-picker-config .switch-group{justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 0;display:flex}.ax-scheduler-picker-config .switch-group span{color:var(--ax-sys-color-on-surface);font-size:.875rem}.ax-scheduler-picker-config .switch-group ax-switch{flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXSchedulerPickerConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-picker-config', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSelectBoxComponent, AXSwitchComponent, FormsModule], template: "<div class=\"ax-scheduler-picker-config\">\n  <h3>Configuration</h3>\n\n  <!-- Mode Selector -->\n  <div class=\"control-group\">\n    <label>Mode</label>\n    <ax-select-box\n      [dataSource]=\"modeOptions\"\n      [textField]=\"'text'\"\n      [valueField]=\"'value'\"\n      [value]=\"selectedMode()\"\n      (onValueChanged)=\"onModeChange($event.value)\"\n    />\n  </div>\n\n  <!-- Global Options -->\n  <div class=\"control-group\">\n    <label>Global Options</label>\n    <div class=\"switch-group\">\n      <span>Show Interval</span>\n      <ax-switch [(value)]=\"showInterval\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Start Condition</span>\n      <ax-switch [(value)]=\"showStartCondition\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show End Conditions</span>\n      <ax-switch [(value)]=\"showEndConditions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Exclusions</span>\n      <ax-switch [(value)]=\"showExclusions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Inclusions</span>\n      <ax-switch [(value)]=\"showInclusions\" />\n    </div>\n  </div>\n\n  <!-- Mode-Specific Options -->\n  @if (selectedMode() === 'daily') {\n    <div class=\"control-group\">\n      <label>Daily Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekdays Only</span>\n        <ax-switch [(value)]=\"showWeekdaysOnly\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'weekly') {\n    <div class=\"control-group\">\n      <label>Weekly Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekday Selection</span>\n        <ax-switch [(value)]=\"showWeekdaySelection\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'monthly') {\n    <div class=\"control-group\">\n      <label>Monthly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDays', text: 'Specific Days' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"monthlyRecurrenceMode()\"\n          (onValueChanged)=\"monthlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'yearly') {\n    <div class=\"control-group\">\n      <label>Yearly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDate', text: 'Specific Date' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"yearlyRecurrenceMode()\"\n          (onValueChanged)=\"yearlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n      <div class=\"switch-group\">\n        <span>Show Month Selection</span>\n        <ax-switch [(value)]=\"showMonthSelection\" />\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-config{background:var(--ax-sys-color-surface-container);padding:1.25rem;border-radius:var(--ax-sys-border-radius-md)}.ax-scheduler-picker-config h3{margin:0 0 1.25rem;font-size:1rem;font-weight:600;color:var(--ax-sys-color-on-surface)}.ax-scheduler-picker-config .control-group{margin-bottom:1.25rem}.ax-scheduler-picker-config .control-group:last-child{margin-bottom:0}.ax-scheduler-picker-config .control-group>label{display:block;font-size:.875rem;font-weight:500;color:var(--ax-sys-color-on-surface-variant);margin-bottom:.5rem}.ax-scheduler-picker-config .control-group ax-select-box{width:100%}.ax-scheduler-picker-config .control-subgroup{margin-bottom:.75rem}.ax-scheduler-picker-config .control-subgroup label{display:block;font-size:.8125rem;font-weight:500;color:var(--ax-sys-color-on-surface-variant);margin-bottom:.375rem}.ax-scheduler-picker-config .control-subgroup ax-select-box{width:100%}.ax-scheduler-picker-config .switch-group{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;gap:.75rem}.ax-scheduler-picker-config .switch-group span{font-size:.875rem;color:var(--ax-sys-color-on-surface)}.ax-scheduler-picker-config .switch-group ax-switch{flex-shrink:0}\n"] }]
+            args: [{ selector: 'ax-scheduler-picker-config', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSelectBoxComponent, AXSwitchComponent, FormsModule], template: "<div class=\"ax-scheduler-picker-config\">\n  <h3>Configuration</h3>\n\n  <!-- Mode Selector -->\n  <div class=\"control-group\">\n    <label>Mode</label>\n    <ax-select-box\n      [dataSource]=\"modeOptions\"\n      [textField]=\"'text'\"\n      [valueField]=\"'value'\"\n      [value]=\"selectedMode()\"\n      (onValueChanged)=\"onModeChange($event.value)\"\n    />\n  </div>\n\n  <!-- Global Options -->\n  <div class=\"control-group\">\n    <label>Global Options</label>\n    <div class=\"switch-group\">\n      <span>Show Interval</span>\n      <ax-switch [(value)]=\"showInterval\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Start Condition</span>\n      <ax-switch [(value)]=\"showStartCondition\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show End Conditions</span>\n      <ax-switch [(value)]=\"showEndConditions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Exclusions</span>\n      <ax-switch [(value)]=\"showExclusions\" />\n    </div>\n    <div class=\"switch-group\">\n      <span>Show Inclusions</span>\n      <ax-switch [(value)]=\"showInclusions\" />\n    </div>\n  </div>\n\n  <!-- Mode-Specific Options -->\n  @if (selectedMode() === 'daily') {\n    <div class=\"control-group\">\n      <label>Daily Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekdays Only</span>\n        <ax-switch [(value)]=\"showWeekdaysOnly\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'weekly') {\n    <div class=\"control-group\">\n      <label>Weekly Options</label>\n      <div class=\"switch-group\">\n        <span>Show Weekday Selection</span>\n        <ax-switch [(value)]=\"showWeekdaySelection\" />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'monthly') {\n    <div class=\"control-group\">\n      <label>Monthly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDays', text: 'Specific Days' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"monthlyRecurrenceMode()\"\n          (onValueChanged)=\"monthlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n    </div>\n  }\n  \n  @if (selectedMode() === 'yearly') {\n    <div class=\"control-group\">\n      <label>Yearly Options</label>\n      <div class=\"control-subgroup\">\n        <label>Recurrence Mode</label>\n        <ax-select-box\n          [dataSource]=\"[\n            { value: 'none', text: 'None' },\n            { value: 'specificDate', text: 'Specific Date' },\n            { value: 'occurrence', text: 'Occurrence' }\n          ]\"\n          [textField]=\"'text'\"\n          [valueField]=\"'value'\"\n          [value]=\"yearlyRecurrenceMode()\"\n          (onValueChanged)=\"yearlyRecurrenceMode.set($event.value)\"\n        />\n      </div>\n      <div class=\"switch-group\">\n        <span>Show Month Selection</span>\n        <ax-switch [(value)]=\"showMonthSelection\" />\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ax-scheduler-picker-config{background:var(--ax-sys-color-surface-container);border-radius:var(--ax-sys-border-radius-md);padding:1.25rem}.ax-scheduler-picker-config h3{color:var(--ax-sys-color-on-surface);margin:0 0 1.25rem;font-size:1rem;font-weight:600}.ax-scheduler-picker-config .control-group{margin-bottom:1.25rem}.ax-scheduler-picker-config .control-group:last-child{margin-bottom:0}.ax-scheduler-picker-config .control-group>label{color:var(--ax-sys-color-on-surface-variant);margin-bottom:.5rem;font-size:.875rem;font-weight:500;display:block}.ax-scheduler-picker-config .control-group ax-select-box{width:100%}.ax-scheduler-picker-config .control-subgroup{margin-bottom:.75rem}.ax-scheduler-picker-config .control-subgroup label{color:var(--ax-sys-color-on-surface-variant);margin-bottom:.375rem;font-size:.8125rem;font-weight:500;display:block}.ax-scheduler-picker-config .control-subgroup ax-select-box{width:100%}.ax-scheduler-picker-config .switch-group{justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 0;display:flex}.ax-scheduler-picker-config .switch-group span{color:var(--ax-sys-color-on-surface);font-size:.875rem}.ax-scheduler-picker-config .switch-group ax-switch{flex-shrink:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { configChange: [{ type: i0.Output, args: ["configChange"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }] } });
 
 // Main component