@acorex/components 21.0.0-next.3 → 21.0.0-next.31

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

@@ -0,0 +1,2339 @@
+import { MXValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import * as i0 from '@angular/core';
+import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, effect, computed, InjectionToken, inject, Injectable, forwardRef } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AXSwitchComponent } from '@acorex/components/switch';
+import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
+import { AsyncPipe, DatePipe } from '@angular/common';
+import { AXNumberBoxComponent } from '@acorex/components/number-box';
+import { AXSelectBoxComponent } from '@acorex/components/select-box';
+import * as i1 from '@acorex/components/selection-list';
+import { AXSelectionListModule } from '@acorex/components/selection-list';
+import { AXDateTimeBoxComponent } from '@acorex/components/datetime-box';
+import * as i2 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXButtonComponent } from '@acorex/components/button';
+import * as i3 from '@acorex/components/chips';
+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: "20.3.12", ngImport: i0, type: AXSchedulerPickerIntervalSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", 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: "20.3.12", 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
+ */
+/**
+ * Days of the week (0-6: Sunday-Saturday)
+ */
+const AX_SCHEDULER_PICKER_DAYS_OF_WEEK = Object.freeze([
+    { id: 0, text: 'Sunday', key: 'sunday', rruleKey: 'SU' },
+    { id: 1, text: 'Monday', key: 'monday', rruleKey: 'MO' },
+    { id: 2, text: 'Tuesday', key: 'tuesday', rruleKey: 'TU' },
+    { id: 3, text: 'Wednesday', key: 'wednesday', rruleKey: 'WE' },
+    { id: 4, text: 'Thursday', key: 'thursday', rruleKey: 'TH' },
+    { id: 5, text: 'Friday', key: 'friday', rruleKey: 'FR' },
+    { id: 6, text: 'Saturday', key: 'saturday', rruleKey: 'SA' },
+]);
+/**
+ * Months of the year (0-11: January-December)
+ */
+const AX_SCHEDULER_PICKER_MONTHS = Object.freeze([
+    { id: 0, text: 'January', key: 'january' },
+    { id: 1, text: 'February', key: 'february' },
+    { id: 2, text: 'March', key: 'march' },
+    { id: 3, text: 'April', key: 'april' },
+    { id: 4, text: 'May', key: 'may' },
+    { id: 5, text: 'June', key: 'june' },
+    { id: 6, text: 'July', key: 'july' },
+    { id: 7, text: 'August', key: 'august' },
+    { id: 8, text: 'September', key: 'september' },
+    { id: 9, text: 'October', key: 'october' },
+    { id: 10, text: 'November', key: 'november' },
+    { id: 11, text: 'December', key: 'december' },
+]);
+/**
+ * Occurrence positions (1st, 2nd, 3rd, 4th, Last)
+ */
+const AX_SCHEDULER_PICKER_OCCURRENCE_POSITIONS = Object.freeze([
+    { value: 1, text: 'First', key: 'first' },
+    { value: 2, text: 'Second', key: 'second' },
+    { value: 3, text: 'Third', key: 'third' },
+    { value: 4, text: 'Fourth', key: 'fourth' },
+    { value: -1, text: 'Last', key: 'last' },
+]);
+/**
+ * RRule day keys mapping (for RRule library)
+ */
+const AX_SCHEDULER_PICKER_RRULE_DAY_KEYS = Object.freeze(AX_SCHEDULER_PICKER_DAYS_OF_WEEK.map((d) => d.rruleKey));
+/**
+ * Translation keys for days of week
+ */
+const AX_SCHEDULER_PICKER_DAY_TRANSLATION_KEYS = Object.freeze(AX_SCHEDULER_PICKER_DAYS_OF_WEEK.map((d) => d.key));
+/**
+ * Translation keys for months
+ */
+const AX_SCHEDULER_PICKER_MONTH_TRANSLATION_KEYS = Object.freeze(AX_SCHEDULER_PICKER_MONTHS.map((m) => m.key));
+/**
+ * Default first day of week (0 = Sunday)
+ */
+const AX_SCHEDULER_PICKER_DEFAULT_FIRST_DAY_OF_WEEK = 0;
+/**
+ * Default time format
+ */
+const AX_SCHEDULER_PICKER_DEFAULT_TIME_FORMAT = '24h';
+/**
+ * Default time precision
+ */
+const AX_SCHEDULER_PICKER_DEFAULT_TIME_PRECISION = 'minutes';
+/**
+ * Default locale
+ */
+const AX_SCHEDULER_PICKER_DEFAULT_LOCALE = 'en-US';
+/**
+ * Weekday range for daily mode (Monday-Friday)
+ */
+const AX_SCHEDULER_PICKER_WEEKDAY_START = 1; // Monday
+const AX_SCHEDULER_PICKER_WEEKDAY_END = 5; // Friday
+/**
+ * Default occurrences count for end condition
+ */
+const AX_SCHEDULER_PICKER_DEFAULT_OCCURRENCES = 10;
+
+class AXSchedulerPickerDailyPanelComponent {
+    constructor() {
+        this.pattern = input.required(...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.patternChange = output();
+        this.weekdayOnly = signal(false, ...(ngDevMode ? [{ debugName: "weekdayOnly" }] : []));
+        // Initialize weekdayOnly from pattern
+        effect(() => {
+            const pattern = this.pattern();
+            if (pattern?.recurrence?.byDay) {
+                // Check if byDay is [1,2,3,4,5] (weekdays only)
+                const isWeekdaysOnly = pattern.recurrence.byDay.length === 5 &&
+                    pattern.recurrence.byDay.every((d) => d >= AX_SCHEDULER_PICKER_WEEKDAY_START && d <= AX_SCHEDULER_PICKER_WEEKDAY_END);
+                this.weekdayOnly.set(isWeekdaysOnly);
+            }
+        });
+    }
+    onIntervalChange(interval) {
+        this.patternChange.emit({ interval });
+    }
+    onWeekdayOnlyChange(value) {
+        this.weekdayOnly.set(value);
+        // Emit recurrence with weekday filter (Mon-Fri)
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byDay: value ? [AX_SCHEDULER_PICKER_WEEKDAY_START, 2, 3, 4, AX_SCHEDULER_PICKER_WEEKDAY_END] : undefined,
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerDailyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", 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"] }]
+        }], 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 {
+    constructor() {
+        this.pattern = input.required(...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.patternChange = output();
+    }
+    onIntervalChange(interval) {
+        this.patternChange.emit({ interval });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerHourlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXSchedulerPickerHourlyPanelComponent, isStandalone: true, selector: "ax-scheduler-picker-hourly-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-hourly-panel">
+      @if (config().options?.showInterval) {
+        <ax-scheduler-picker-interval-selector
+          [interval]="pattern()?.interval || 1"
+          [config]="config()"
+          (intervalChange)="onIntervalChange($event)"
+        />
+      }
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-hourly-panel{display:flex;flex-direction:column;gap:.75rem}\n"], dependencies: [{ kind: "component", type: AXSchedulerPickerIntervalSelectorComponent, selector: "ax-scheduler-picker-interval-selector", inputs: ["interval", "config"], outputs: ["intervalChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerHourlyPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-hourly-panel', template: `
+    <div class="ax-scheduler-picker-hourly-panel">
+      @if (config().options?.showInterval) {
+        <ax-scheduler-picker-interval-selector
+          [interval]="pattern()?.interval || 1"
+          [config]="config()"
+          (intervalChange)="onIntervalChange($event)"
+        />
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerPickerIntervalSelectorComponent], styles: [".ax-scheduler-picker-hourly-panel{display:flex;flex-direction:column;gap:.75rem}\n"] }]
+        }], 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 AXSchedulerPickerDaySelectorComponent {
+    constructor() {
+        /**
+         * Selected day numbers (1-31)
+         */
+        this.days = input(...(ngDevMode ? [undefined, { debugName: "days" }] : []));
+        /**
+         * Emits when day selection changes
+         */
+        this.daysChange = output();
+        this.dayItems = Array.from({ length: 31 }, (_, i) => ({
+            id: i + 1,
+            text: String(i + 1),
+        }));
+    }
+    /**
+     * Handle day selection change
+     */
+    onDaysChange(event) {
+        const selectedDays = Array.isArray(event.value) ? event.value : [event.value];
+        this.daysChange.emit(selectedDays.sort((a, b) => a - b));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerDaySelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXSchedulerPickerDaySelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-day-selector", inputs: { days: { classPropertyName: "days", publicName: "days", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { daysChange: "daysChange" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-day-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.selectDays' | translate | async }}
+      </label>
+      <ax-select-box
+        [dataSource]="dayItems"
+        textField="text"
+        valueField="id"
+        [multiple]="true"
+        [value]="days()"
+        (onValueChanged)="onDaysChange($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-day-selector{display:flex;flex-direction:column;gap:.5rem}.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-select-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "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: "20.3.12", ngImport: i0, type: AXSchedulerPickerDaySelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-day-selector', template: `
+    <div class="ax-scheduler-picker-day-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.selectDays' | translate | async }}
+      </label>
+      <ax-select-box
+        [dataSource]="dayItems"
+        textField="text"
+        valueField="id"
+        [multiple]="true"
+        [value]="days()"
+        (onValueChanged)="onDaysChange($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSelectBoxComponent, AXTranslatorPipe, AsyncPipe], styles: [".ax-scheduler-picker-day-selector{display:flex;flex-direction:column;gap:.5rem}.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-select-box{width:100%}\n"] }]
+        }], propDecorators: { days: [{ type: i0.Input, args: [{ isSignal: true, alias: "days", required: false }] }], daysChange: [{ type: i0.Output, args: ["daysChange"] }] } });
+
+class AXSchedulerPickerOccurrenceSelectorComponent {
+    constructor() {
+        /**
+         * Current occurrence selection (position + day)
+         */
+        this.occurrence = input(...(ngDevMode ? [undefined, { debugName: "occurrence" }] : []));
+        /**
+         * Emits when occurrence selection changes
+         */
+        this.occurrenceChange = output();
+        this.selectedPosition = signal(1, ...(ngDevMode ? [{ debugName: "selectedPosition" }] : []));
+        this.selectedDay = signal(1, ...(ngDevMode ? [{ debugName: "selectedDay" }] : []));
+        this.positions = AX_SCHEDULER_PICKER_OCCURRENCE_POSITIONS.map((pos) => ({
+            ...pos,
+            text: `@acorex:schedulerPicker.positions.${pos.key}`,
+        }));
+        this.days = AX_SCHEDULER_PICKER_DAYS_OF_WEEK.map((d) => ({
+            value: d.id,
+            text: `@acorex:schedulerPicker.days.${d.key}`,
+        }));
+        // Sync input with internal state
+        effect(() => {
+            const occ = this.occurrence();
+            if (occ) {
+                this.selectedPosition.set(occ.position);
+                this.selectedDay.set(occ.day);
+            }
+        });
+    }
+    /**
+     * Handle position selection change
+     */
+    onPositionChangeEvent(event) {
+        this.selectedPosition.set(event.value);
+        this.emitChange();
+    }
+    /**
+     * Handle day selection change
+     */
+    onDayChangeEvent(event) {
+        const day = event.value;
+        this.selectedDay.set(day);
+        this.emitChange();
+    }
+    emitChange() {
+        this.occurrenceChange.emit({
+            position: this.selectedPosition(),
+            day: this.selectedDay(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerOccurrenceSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXSchedulerPickerOccurrenceSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-occurrence-selector", inputs: { occurrence: { classPropertyName: "occurrence", publicName: "occurrence", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { occurrenceChange: "occurrenceChange" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-occurrence-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.occurrence' | translate | async }}
+      </label>
+
+      <div class="ax-scheduler-picker-row">
+        <ax-select-box
+          [value]="selectedPosition()"
+          [dataSource]="positions"
+          textField="text"
+          valueField="value"
+          (onValueChanged)="onPositionChangeEvent($event)"
+        />
+        <ax-select-box
+          [value]="selectedDay()"
+          [dataSource]="days"
+          textField="text"
+          valueField="value"
+          (onValueChanged)="onDayChangeEvent($event)"
+        />
+      </div>
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-occurrence-selector{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-row{display:flex;gap:.5rem}.ax-scheduler-picker-row>*{flex:1}.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: 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: "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: "20.3.12", ngImport: i0, type: AXSchedulerPickerOccurrenceSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-occurrence-selector', template: `
+    <div class="ax-scheduler-picker-occurrence-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.occurrence' | translate | async }}
+      </label>
+
+      <div class="ax-scheduler-picker-row">
+        <ax-select-box
+          [value]="selectedPosition()"
+          [dataSource]="positions"
+          textField="text"
+          valueField="value"
+          (onValueChanged)="onPositionChangeEvent($event)"
+        />
+        <ax-select-box
+          [value]="selectedDay()"
+          [dataSource]="days"
+          textField="text"
+          valueField="value"
+          (onValueChanged)="onDayChangeEvent($event)"
+        />
+      </div>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSelectBoxComponent, AXTranslatorPipe, AsyncPipe], styles: [".ax-scheduler-picker-occurrence-selector{display:flex;flex-direction:column;gap:.5rem}.ax-scheduler-picker-row{display:flex;gap:.5rem}.ax-scheduler-picker-row>*{flex:1}.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: { occurrence: [{ type: i0.Input, args: [{ isSignal: true, alias: "occurrence", required: false }] }], occurrenceChange: [{ type: i0.Output, args: ["occurrenceChange"] }] } });
+
+class AXSchedulerPickerMonthlyPanelComponent {
+    constructor() {
+        this.pattern = input.required(...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.patternChange = output();
+        this.selectedDays = signal([], ...(ngDevMode ? [{ debugName: "selectedDays" }] : []));
+        this.occurrence = signal(null, ...(ngDevMode ? [{ debugName: "occurrence" }] : []));
+        // Initialize state from pattern
+        effect(() => {
+            const pattern = this.pattern();
+            if (pattern?.recurrence) {
+                if (pattern.recurrence.byDay) {
+                    this.selectedDays.set(pattern.recurrence.byDay);
+                }
+                if (pattern.recurrence.byOccurrence && pattern.recurrence.byOccurrence.length > 0) {
+                    const occ = pattern.recurrence.byOccurrence[0];
+                    this.occurrence.set({ position: occ.position, day: occ.dayOfWeek });
+                }
+            }
+        });
+    }
+    onIntervalChange(interval) {
+        this.patternChange.emit({ interval });
+    }
+    onDaysChange(days) {
+        this.selectedDays.set(days);
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byDay: days,
+                byOccurrence: undefined, // Clear occurrence when using specific days
+            },
+        });
+    }
+    onOccurrenceChange(occurrence) {
+        this.occurrence.set(occurrence);
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byOccurrence: [{ position: occurrence.position, dayOfWeek: occurrence.day }],
+                byDay: undefined, // Clear days when using occurrence
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerMonthlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerMonthlyPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-monthly-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        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"] }]
+        }], 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"] }] } });
+
+/**
+ * Helper function to reorder days based on first day of week
+ */
+function reorderDaysByFirstDay(firstDayOfWeek = AX_SCHEDULER_PICKER_DEFAULT_FIRST_DAY_OF_WEEK) {
+    return [...AX_SCHEDULER_PICKER_DAYS_OF_WEEK.slice(firstDayOfWeek), ...AX_SCHEDULER_PICKER_DAYS_OF_WEEK.slice(0, firstDayOfWeek)];
+}
+/**
+ * Get RRule day key by day index
+ */
+function getRRuleDayKey(dayIndex) {
+    return AX_SCHEDULER_PICKER_RRULE_DAY_KEYS[dayIndex] || 'MO';
+}
+/**
+ * Get day translation key by index
+ */
+function getDayTranslationKey(dayIndex) {
+    return AX_SCHEDULER_PICKER_DAY_TRANSLATION_KEYS[dayIndex] || 'monday';
+}
+/**
+ * Get month translation key by index
+ */
+function getMonthTranslationKey(monthIndex) {
+    return AX_SCHEDULER_PICKER_MONTH_TRANSLATION_KEYS[monthIndex] || 'january';
+}
+/**
+ * Normalize date to midnight for consistent comparison
+ */
+function normalizeDate(date) {
+    const normalized = new Date(date);
+    normalized.setHours(0, 0, 0, 0);
+    return normalized;
+}
+/**
+ * Check if two dates are the same day (ignoring time)
+ */
+function isSameDate(date1, date2) {
+    return normalizeDate(date1).getTime() === normalizeDate(date2).getTime();
+}
+/**
+ * Check if date exists in array (day comparison only)
+ */
+function dateExistsInArray(date, dates) {
+    const normalized = normalizeDate(date);
+    return dates.some((d) => normalizeDate(d).getTime() === normalized.getTime());
+}
+
+/**
+ * Weekly recurrence panel
+ */
+class AXSchedulerPickerWeeklyPanelComponent {
+    constructor() {
+        this.pattern = input.required(...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.patternChange = output();
+        this.selectedDays = signal([], ...(ngDevMode ? [{ debugName: "selectedDays" }] : []));
+        this.dayItems = computed(() => {
+            const firstDay = this.config().firstDayOfWeek || 0;
+            const days = reorderDaysByFirstDay(firstDay);
+            return days.map((day) => ({
+                ...day,
+                text: `@acorex:schedulerPicker.days.${day.key}`,
+            }));
+        }, ...(ngDevMode ? [{ debugName: "dayItems" }] : []));
+        // Initialize selectedDays from pattern
+        effect(() => {
+            const pattern = this.pattern();
+            if (pattern?.recurrence?.byDay) {
+                this.selectedDays.set(pattern.recurrence.byDay);
+            }
+        });
+    }
+    onIntervalChange(interval) {
+        this.patternChange.emit({ interval });
+    }
+    onDaysChange(event) {
+        const days = event.value;
+        this.selectedDays.set(days);
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byDay: days,
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerWeeklyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerWeeklyPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-weekly-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        FormsModule,
+                        AXSelectionListModule,
+                        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"] }]
+        }], 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 {
+    constructor() {
+        /**
+         * Selected month indices (0-11)
+         */
+        this.months = input(...(ngDevMode ? [undefined, { debugName: "months" }] : []));
+        /**
+         * Emits when month selection changes
+         */
+        this.monthsChange = output();
+        this.monthItems = AX_SCHEDULER_PICKER_MONTHS.map((month) => ({
+            ...month,
+            text: `@acorex:schedulerPicker.months.${month.key}`,
+        }));
+    }
+    /**
+     * Handle month selection change
+     */
+    onMonthsChange(event) {
+        const selectedMonths = Array.isArray(event.value) ? event.value : [event.value];
+        this.monthsChange.emit(selectedMonths.sort((a, b) => a - b));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerMonthSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXSchedulerPickerMonthSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-month-selector", inputs: { months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { monthsChange: "monthsChange" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-month-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.selectMonths' | translate | async }}
+      </label>
+      <ax-select-box
+        [dataSource]="monthItems"
+        textField="text"
+        valueField="id"
+        [multiple]="true"
+        [value]="months()"
+        (onValueChanged)="onMonthsChange($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-month-selector{display:flex;flex-direction:column;gap:.5rem}.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-select-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "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: "20.3.12", ngImport: i0, type: AXSchedulerPickerMonthSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-month-selector', template: `
+    <div class="ax-scheduler-picker-month-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.selectMonths' | translate | async }}
+      </label>
+      <ax-select-box
+        [dataSource]="monthItems"
+        textField="text"
+        valueField="id"
+        [multiple]="true"
+        [value]="months()"
+        (onValueChanged)="onMonthsChange($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSelectBoxComponent, AXTranslatorPipe, AsyncPipe], styles: [".ax-scheduler-picker-month-selector{display:flex;flex-direction:column;gap:.5rem}.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-select-box{width:100%}\n"] }]
+        }], propDecorators: { months: [{ type: i0.Input, args: [{ isSignal: true, alias: "months", required: false }] }], monthsChange: [{ type: i0.Output, args: ["monthsChange"] }] } });
+
+class AXSchedulerPickerYearlyPanelComponent {
+    constructor() {
+        this.pattern = input.required(...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.patternChange = output();
+        this.selectedMonths = signal([], ...(ngDevMode ? [{ debugName: "selectedMonths" }] : []));
+        this.selectedDays = signal([], ...(ngDevMode ? [{ debugName: "selectedDays" }] : []));
+        this.occurrence = signal(null, ...(ngDevMode ? [{ debugName: "occurrence" }] : []));
+        // Initialize state from pattern
+        effect(() => {
+            const pattern = this.pattern();
+            if (pattern?.recurrence) {
+                if (pattern.recurrence.byMonth) {
+                    this.selectedMonths.set(pattern.recurrence.byMonth);
+                }
+                if (pattern.recurrence.byDay) {
+                    this.selectedDays.set(pattern.recurrence.byDay);
+                }
+                if (pattern.recurrence.byOccurrence && pattern.recurrence.byOccurrence.length > 0) {
+                    const occ = pattern.recurrence.byOccurrence[0];
+                    this.occurrence.set({ position: occ.position, day: occ.dayOfWeek });
+                }
+            }
+        });
+    }
+    onIntervalChange(interval) {
+        this.patternChange.emit({ interval });
+    }
+    onMonthsChange(months) {
+        this.selectedMonths.set(months);
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byMonth: months,
+            },
+        });
+    }
+    onDaysChange(days) {
+        this.selectedDays.set(days);
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byDay: days,
+                byOccurrence: undefined, // Clear occurrence when using specific date
+            },
+        });
+    }
+    onOccurrenceChange(occurrence) {
+        this.occurrence.set(occurrence);
+        this.patternChange.emit({
+            recurrence: {
+                ...this.pattern()?.recurrence,
+                byOccurrence: [{ position: occurrence.position, dayOfWeek: occurrence.day }],
+                byDay: undefined, // Clear days when using occurrence
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerYearlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerYearlyPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-yearly-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AXSchedulerPickerIntervalSelectorComponent,
+                        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"] }]
+        }], 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"] }] } });
+
+/**
+ * Hourly mode default configuration
+ */
+const AXSchedulerPickerHourlyDefaultConfig = {
+    mode: 'hourly',
+    showEndConditions: true,
+    showExclusions: false,
+    showInclusions: false,
+    defaultInterval: 1,
+    minInterval: 1,
+    maxInterval: 23,
+    firstDayOfWeek: 0,
+    options: {
+        showInterval: true,
+    },
+};
+/**
+ * Daily mode default configuration
+ */
+const AXSchedulerPickerDailyDefaultConfig = {
+    mode: 'daily',
+    showEndConditions: true,
+    showExclusions: false,
+    showInclusions: false,
+    defaultInterval: 1,
+    minInterval: 1,
+    maxInterval: 365,
+    firstDayOfWeek: 0,
+    options: {
+        showInterval: true,
+        showWeekdaysOnly: true,
+    },
+};
+/**
+ * Weekly mode default configuration
+ */
+const AXSchedulerPickerWeeklyDefaultConfig = {
+    mode: 'weekly',
+    showEndConditions: true,
+    showExclusions: false,
+    showInclusions: false,
+    defaultInterval: 1,
+    minInterval: 1,
+    maxInterval: 52,
+    firstDayOfWeek: 0,
+    options: {
+        showInterval: true,
+        showWeekdaySelection: true,
+    },
+};
+/**
+ * Monthly mode default configuration
+ */
+const AXSchedulerPickerMonthlyDefaultConfig = {
+    mode: 'monthly',
+    showEndConditions: true,
+    showExclusions: false,
+    showInclusions: false,
+    defaultInterval: 1,
+    minInterval: 1,
+    maxInterval: 12,
+    firstDayOfWeek: 0,
+    options: {
+        showInterval: true,
+        recurrenceMode: 'specificDays',
+    },
+};
+/**
+ * Yearly mode default configuration
+ */
+const AXSchedulerPickerYearlyDefaultConfig = {
+    mode: 'yearly',
+    showEndConditions: true,
+    showExclusions: false,
+    showInclusions: false,
+    defaultInterval: 1,
+    minInterval: 1,
+    maxInterval: 10,
+    firstDayOfWeek: 0,
+    options: {
+        showInterval: true,
+        recurrenceMode: 'specificDate',
+    },
+};
+/**
+ * Injection tokens for each mode configuration
+ */
+const AX_SCHEDULER_PICKER_HOURLY_CONFIG = new InjectionToken('AX_SCHEDULER_PICKER_HOURLY_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXSchedulerPickerHourlyDefaultConfig,
+});
+const AX_SCHEDULER_PICKER_DAILY_CONFIG = new InjectionToken('AX_SCHEDULER_PICKER_DAILY_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXSchedulerPickerDailyDefaultConfig,
+});
+const AX_SCHEDULER_PICKER_WEEKLY_CONFIG = new InjectionToken('AX_SCHEDULER_PICKER_WEEKLY_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXSchedulerPickerWeeklyDefaultConfig,
+});
+const AX_SCHEDULER_PICKER_MONTHLY_CONFIG = new InjectionToken('AX_SCHEDULER_PICKER_MONTHLY_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXSchedulerPickerMonthlyDefaultConfig,
+});
+const AX_SCHEDULER_PICKER_YEARLY_CONFIG = new InjectionToken('AX_SCHEDULER_PICKER_YEARLY_CONFIG', {
+    providedIn: 'root',
+    factory: () => AXSchedulerPickerYearlyDefaultConfig,
+});
+/**
+ * Helper function to get default config by mode
+ */
+function getDefaultSchedulerPickerConfig(mode) {
+    switch (mode) {
+        case 'hourly':
+            return AXSchedulerPickerHourlyDefaultConfig;
+        case 'daily':
+            return AXSchedulerPickerDailyDefaultConfig;
+        case 'weekly':
+            return AXSchedulerPickerWeeklyDefaultConfig;
+        case 'monthly':
+            return AXSchedulerPickerMonthlyDefaultConfig;
+        case 'yearly':
+            return AXSchedulerPickerYearlyDefaultConfig;
+        default:
+            throw new Error(`Unknown mode: ${mode}`);
+    }
+}
+
+/**
+ * Service for scheduler picker utilities
+ * Handles conversions, calculations, and validation
+ */
+class AXSchedulerPickerService {
+    constructor() {
+        this.translationService = inject(AXTranslationService);
+    }
+    /**
+     * Calculate next N occurrences from pattern
+     * Uses lazy-loaded rrule library for complex calculations
+     */
+    async calculateOccurrences(pattern, count, startFrom) {
+        const { RRule } = await import('rrule');
+        const rruleObj = this.toRRuleObject(pattern, RRule);
+        if (!rruleObj) {
+            return [];
+        }
+        const start = startFrom || new Date();
+        return rruleObj.after(start, true) ? rruleObj.all((date, i) => i < count) : [];
+    }
+    /**
+     * Convert pattern to cron expression
+     * Uses lazy-loaded cron-parser library
+     */
+    async toCronExpression(pattern) {
+        // Lazy load cron-parser if needed for validation
+        const { parseExpression } = await import('cron-parser');
+        // Build cron expression based on pattern
+        const parts = ['*', '*', '*', '*', '*'];
+        switch (pattern.mode) {
+            case 'hourly':
+                if (pattern.recurrence.byMinute) {
+                    parts[0] = pattern.recurrence.byMinute.join(',');
+                }
+                if (pattern.recurrence.byHour) {
+                    parts[1] = pattern.recurrence.byHour.join(',');
+                }
+                else {
+                    parts[1] = `*/${pattern.interval}`;
+                }
+                break;
+            case 'daily':
+                parts[2] = `*/${pattern.interval}`;
+                break;
+            case 'weekly':
+                if (pattern.recurrence.byDay) {
+                    parts[4] = pattern.recurrence.byDay.join(',');
+                }
+                break;
+            case 'monthly':
+                if (pattern.recurrence.byDay) {
+                    parts[2] = pattern.recurrence.byDay.join(',');
+                }
+                break;
+            case 'yearly':
+                if (pattern.recurrence.byDay) {
+                    parts[2] = pattern.recurrence.byDay.join(',');
+                }
+                if (pattern.recurrence.byMonth) {
+                    parts[3] = pattern.recurrence.byMonth.join(',');
+                }
+                break;
+        }
+        const cronExpr = parts.join(' ');
+        // Validate the cron expression
+        try {
+            parseExpression(cronExpr);
+            return cronExpr;
+        }
+        catch {
+            // Return default cron if generation fails
+            return '* * * * *';
+        }
+    }
+    /**
+     * Convert cron expression to pattern
+     * Parses standard cron format: minute hour day month weekday
+     */
+    async fromCronExpression(cron) {
+        try {
+            const { parseExpression } = await import('cron-parser');
+            const parsed = parseExpression(cron);
+            const fields = parsed.fields;
+            // Analyze cron fields to determine mode
+            const minutePattern = this.analyzeCronField(fields.minute);
+            const hourPattern = this.analyzeCronField(fields.hour);
+            const dayPattern = this.analyzeCronField(fields.dayOfMonth);
+            const monthPattern = this.analyzeCronField(fields.month);
+            const weekdayPattern = this.analyzeCronField(fields.dayOfWeek);
+            // Determine mode based on which fields have intervals/values
+            let mode = 'daily';
+            let interval = 1;
+            const recurrence = {};
+            // Hourly mode: */N in hour field or specific hours
+            if (hourPattern.isInterval && !dayPattern.hasValues && !monthPattern.hasValues) {
+                mode = 'hourly';
+                interval = hourPattern.interval || 1;
+                if (minutePattern.hasValues) {
+                    recurrence.byMinute = minutePattern.values;
+                }
+                if (hourPattern.hasValues) {
+                    recurrence.byHour = hourPattern.values;
+                }
+            }
+            // Yearly mode: specific months or */N in month field
+            else if (monthPattern.hasValues || monthPattern.isInterval) {
+                mode = 'yearly';
+                interval = monthPattern.interval || 1;
+                if (monthPattern.hasValues) {
+                    recurrence.byMonth = monthPattern.values;
+                }
+                if (dayPattern.hasValues) {
+                    recurrence.byDay = dayPattern.values;
+                }
+            }
+            // Monthly mode: */N in day field or specific days
+            else if (dayPattern.isInterval || (dayPattern.hasValues && !weekdayPattern.hasValues)) {
+                mode = 'monthly';
+                interval = dayPattern.interval || 1;
+                if (dayPattern.hasValues) {
+                    recurrence.byDay = dayPattern.values;
+                }
+            }
+            // Weekly mode: specific weekdays
+            else if (weekdayPattern.hasValues) {
+                mode = 'weekly';
+                interval = 1;
+                recurrence.byDay = weekdayPattern.values;
+            }
+            // Daily mode: default fallback
+            else {
+                mode = 'daily';
+                interval = 1;
+            }
+            return {
+                mode,
+                interval,
+                startCondition: { type: 'now', startDate: new Date() },
+                recurrence,
+                endCondition: { type: 'never' },
+            };
+        }
+        catch (error) {
+            console.error('[SchedulerPicker] Failed to parse cron expression:', error);
+            return null;
+        }
+    }
+    /**
+     * Analyze a cron field to extract interval and values
+     */
+    analyzeCronField(field) {
+        if (!field || field.length === 0) {
+            return { hasValues: false, values: [], isInterval: false, interval: null };
+        }
+        // Check if it's an interval pattern (e.g., */2 produces [0,2,4,6...])
+        const isInterval = field.length > 1 && field.length < 60;
+        let interval = null;
+        if (isInterval && field.length >= 2) {
+            // Calculate interval from difference between consecutive values
+            interval = field[1] - field[0];
+            // Verify it's consistent
+            const isConsistent = field.every((val, idx) => idx === 0 || val - field[idx - 1] === interval);
+            if (!isConsistent) {
+                interval = null;
+            }
+        }
+        return {
+            hasValues: field.length > 0 && field.length < 60, // Exclude wildcard (all values)
+            values: field,
+            isInterval: interval !== null,
+            interval,
+        };
+    }
+    /**
+     * Convert pattern to RRule string (iCalendar format)
+     */
+    async toRRule(pattern) {
+        const { RRule } = await import('rrule');
+        const rruleObj = this.toRRuleObject(pattern, RRule);
+        return rruleObj ? rruleObj.toString() : '';
+    }
+    /**
+     * Convert RRule string to pattern
+     */
+    async fromRRule(rruleStr) {
+        try {
+            const { RRule, rrulestr } = await import('rrule');
+            const rrule = rrulestr(rruleStr);
+            // Convert RRule options back to our pattern
+            const options = rrule.origOptions;
+            let mode = 'daily';
+            if (options.freq === RRule.HOURLY)
+                mode = 'hourly';
+            else if (options.freq === RRule.DAILY)
+                mode = 'daily';
+            else if (options.freq === RRule.WEEKLY)
+                mode = 'weekly';
+            else if (options.freq === RRule.MONTHLY)
+                mode = 'monthly';
+            else if (options.freq === RRule.YEARLY)
+                mode = 'yearly';
+            return {
+                mode,
+                interval: options.interval || 1,
+                startCondition: { type: 'now', startDate: new Date() },
+                recurrence: {
+                    byDay: options.byweekday,
+                    byMonth: options.bymonth,
+                    byHour: options.byhour,
+                    byMinute: options.byminute,
+                },
+                endCondition: {
+                    type: options.count ? 'afterOccurrences' : options.until ? 'byDate' : 'never',
+                    occurrences: options.count,
+                    endDate: options.until,
+                },
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Generate human-readable description
+     * Uses lazy-loaded cronstrue library for i18n
+     */
+    async toNaturalLanguage(pattern, locale) {
+        const lang = locale || 'en-US';
+        // Build natural language string based on pattern
+        const parts = [];
+        // Interval part
+        const intervalKey = `@acorex:schedulerPicker.naturalLanguage.every${pattern.mode.charAt(0).toUpperCase() + pattern.mode.slice(1)}`;
+        const intervalText = await this.translationService.translateAsync(intervalKey, {
+            params: { count: pattern.interval },
+        });
+        parts.push(intervalText);
+        // Recurrence part
+        if (pattern.mode === 'weekly' && pattern.recurrence.byDay) {
+            const days = await this.getDayNames(pattern.recurrence.byDay);
+            parts.push(await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.onDays', {
+                params: { days: days.join(', ') },
+            }));
+        }
+        if (pattern.mode === 'monthly') {
+            if (pattern.recurrence.byOccurrence && pattern.recurrence.byOccurrence.length > 0) {
+                // e.g., "on the 2nd Monday"
+                const occ = pattern.recurrence.byOccurrence[0];
+                const positionText = await this.getOccurrencePositionText(occ.position);
+                const dayName = await this.translationService.translateAsync(`@acorex:schedulerPicker.days.${getDayTranslationKey(occ.dayOfWeek)}`);
+                const onThe = await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.onThe');
+                parts.push(`${onThe} ${positionText} ${dayName}`);
+            }
+            else if (pattern.recurrence.byDay && pattern.recurrence.byDay.length > 0) {
+                // e.g., "on day 15" or "on days 1, 15, 30"
+                const dayList = pattern.recurrence.byDay.join(', ');
+                const onDayKey = pattern.recurrence.byDay.length > 1 ? '@acorex:schedulerPicker.naturalLanguage.onDaysPlural' : '@acorex:schedulerPicker.naturalLanguage.onDay';
+                const onDay = await this.translationService.translateAsync(onDayKey);
+                parts.push(`${onDay} ${dayList}`);
+            }
+        }
+        if (pattern.mode === 'yearly') {
+            const yearlyParts = [];
+            // Month part
+            if (pattern.recurrence.byMonth && pattern.recurrence.byMonth.length > 0) {
+                const months = await this.getMonthNames(pattern.recurrence.byMonth);
+                const inWord = await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.in');
+                yearlyParts.push(`${inWord} ${months.join(', ')}`);
+            }
+            // Day/Occurrence part
+            if (pattern.recurrence.byOccurrence && pattern.recurrence.byOccurrence.length > 0) {
+                // e.g., "on the 2nd Monday"
+                const occ = pattern.recurrence.byOccurrence[0];
+                const positionText = await this.getOccurrencePositionText(occ.position);
+                const dayName = await this.translationService.translateAsync(`@acorex:schedulerPicker.days.${getDayTranslationKey(occ.dayOfWeek)}`);
+                const onThe = await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.onThe');
+                yearlyParts.push(`${onThe} ${positionText} ${dayName}`);
+            }
+            else if (pattern.recurrence.byDay && pattern.recurrence.byDay.length > 0) {
+                // e.g., "on day 15" or "on days 1, 15, 30"
+                const dayList = pattern.recurrence.byDay.join(', ');
+                const onDayKey = pattern.recurrence.byDay.length > 1 ? '@acorex:schedulerPicker.naturalLanguage.onDaysPlural' : '@acorex:schedulerPicker.naturalLanguage.onDay';
+                const onDay = await this.translationService.translateAsync(onDayKey);
+                yearlyParts.push(`${onDay} ${dayList}`);
+            }
+            if (yearlyParts.length > 0) {
+                parts.push(yearlyParts.join(' '));
+            }
+        }
+        // Start condition part
+        if (pattern.startCondition.type === 'byDate' && pattern.startCondition.startDate) {
+            parts.push(await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.startingFrom', {
+                params: { date: pattern.startCondition.startDate.toLocaleDateString(lang) },
+            }));
+        }
+        // End condition part
+        if (pattern.endCondition.type === 'afterOccurrences') {
+            parts.push(await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.forOccurrences', {
+                params: { count: pattern.endCondition.occurrences },
+            }));
+        }
+        else if (pattern.endCondition.type === 'byDate' && pattern.endCondition.endDate) {
+            parts.push(await this.translationService.translateAsync('@acorex:schedulerPicker.naturalLanguage.until', {
+                params: { date: pattern.endCondition.endDate.toLocaleDateString(lang) },
+            }));
+        }
+        return parts.join(' ');
+    }
+    /**
+     * Validate pattern against config and rules
+     */
+    async validatePattern(pattern, settings) {
+        const errors = [];
+        // Required fields
+        if (!pattern.mode) {
+            errors.push({
+                field: 'mode',
+                code: 'required',
+                message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.modeRequired'),
+            });
+        }
+        if (!pattern.interval || pattern.interval < 1) {
+            errors.push({
+                field: 'interval',
+                code: 'required',
+                message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.intervalRequired'),
+            });
+        }
+        // Interval constraints
+        if (settings.minInterval && pattern.interval < settings.minInterval) {
+            errors.push({
+                field: 'interval',
+                code: 'outOfRange',
+                message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.intervalTooSmall', {
+                    params: { min: settings.minInterval },
+                }),
+                params: { min: settings.minInterval },
+            });
+        }
+        if (settings.maxInterval && pattern.interval > settings.maxInterval) {
+            errors.push({
+                field: 'interval',
+                code: 'outOfRange',
+                message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.intervalTooLarge', {
+                    params: { max: settings.maxInterval },
+                }),
+                params: { max: settings.maxInterval },
+            });
+        }
+        // Mode-specific recurrence validation
+        if (pattern.mode === 'monthly') {
+            const hasByDay = pattern.recurrence.byDay && pattern.recurrence.byDay.length > 0;
+            const hasByOccurrence = pattern.recurrence.byOccurrence && pattern.recurrence.byOccurrence.length > 0;
+            // Conflict: Cannot have both day of month and occurrence pattern
+            if (hasByDay && hasByOccurrence) {
+                errors.push({
+                    field: 'recurrence',
+                    code: 'conflict',
+                    message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.cannotCombineDayAndOccurrence'),
+                });
+            }
+        }
+        // Yearly mode: Validate occurrence conflicts
+        if (pattern.mode === 'yearly') {
+            const hasByDay = pattern.recurrence.byDay && pattern.recurrence.byDay.length > 0;
+            const hasByOccurrence = pattern.recurrence.byOccurrence && pattern.recurrence.byOccurrence.length > 0;
+            if (hasByDay && hasByOccurrence) {
+                errors.push({
+                    field: 'recurrence',
+                    code: 'conflict',
+                    message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.cannotCombineDayAndOccurrence'),
+                });
+            }
+        }
+        // Validate exclusions and inclusions size for performance
+        const maxDateArraySize = 1000; // Prevent excessive memory usage
+        if (pattern.exclusions && pattern.exclusions.length > maxDateArraySize) {
+            errors.push({
+                field: 'exclusions',
+                code: 'outOfRange',
+                message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.tooManyExclusions', {
+                    params: { max: maxDateArraySize },
+                }),
+                params: { max: maxDateArraySize },
+            });
+        }
+        if (pattern.inclusions && pattern.inclusions.length > maxDateArraySize) {
+            errors.push({
+                field: 'inclusions',
+                code: 'outOfRange',
+                message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.tooManyInclusions', {
+                    params: { max: maxDateArraySize },
+                }),
+                params: { max: maxDateArraySize },
+            });
+        }
+        // End date validation
+        if (pattern.endCondition.type === 'byDate' && pattern.endCondition.endDate) {
+            if (pattern.endCondition.endDate < new Date()) {
+                errors.push({
+                    field: 'endCondition.endDate',
+                    code: 'pastDate',
+                    message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.endDateInPast'),
+                });
+            }
+            if (settings.maxDate && pattern.endCondition.endDate > settings.maxDate) {
+                errors.push({
+                    field: 'endCondition.endDate',
+                    code: 'outOfRange',
+                    message: await this.translationService.translateAsync('@acorex:schedulerPicker.validation.endDateTooFar', {
+                        params: { maxDate: settings.maxDate.toLocaleDateString() },
+                    }),
+                    params: { maxDate: settings.maxDate },
+                });
+            }
+        }
+        // Custom validators
+        if (settings.customValidators) {
+            for (const validator of settings.customValidators) {
+                const error = validator(pattern, settings);
+                if (error) {
+                    errors.push(error);
+                }
+            }
+        }
+        return errors;
+    }
+    /**
+     * Check if a specific date matches the pattern
+     */
+    async isDateMatch(pattern, date) {
+        const { RRule } = await import('rrule');
+        const rruleObj = this.toRRuleObject(pattern, RRule);
+        if (!rruleObj) {
+            return false;
+        }
+        // Check if date is in the generated occurrences
+        const occurrences = rruleObj.between(new Date(date.getTime() - 1000), new Date(date.getTime() + 1000), true);
+        return occurrences.length > 0;
+    }
+    /**
+     * Get next occurrence from a specific date
+     */
+    async getNextOccurrence(pattern, from) {
+        const { RRule } = await import('rrule');
+        const rruleObj = this.toRRuleObject(pattern, RRule);
+        if (!rruleObj) {
+            return null;
+        }
+        return rruleObj.after(from, false) || null;
+    }
+    /**
+     * Convert pattern to RRule object
+     * Helper method for RRule operations
+     */
+    toRRuleObject(pattern, RRule) {
+        const options = {
+            interval: pattern.interval,
+        };
+        // Set frequency
+        switch (pattern.mode) {
+            case 'hourly':
+                options.freq = RRule.HOURLY;
+                break;
+            case 'daily':
+                options.freq = RRule.DAILY;
+                break;
+            case 'weekly':
+                options.freq = RRule.WEEKLY;
+                break;
+            case 'monthly':
+                options.freq = RRule.MONTHLY;
+                break;
+            case 'yearly':
+                options.freq = RRule.YEARLY;
+                break;
+        }
+        // Set recurrence rules
+        if (pattern.recurrence.byDay) {
+            if (pattern.mode === 'weekly') {
+                options.byweekday = pattern.recurrence.byDay;
+            }
+            else if (pattern.mode === 'monthly' || pattern.mode === 'yearly') {
+                options.bymonthday = pattern.recurrence.byDay;
+            }
+        }
+        if (pattern.recurrence.byMonth) {
+            options.bymonth = pattern.recurrence.byMonth;
+        }
+        if (pattern.recurrence.byHour) {
+            options.byhour = pattern.recurrence.byHour;
+        }
+        if (pattern.recurrence.byMinute) {
+            options.byminute = pattern.recurrence.byMinute;
+        }
+        // Set occurrence rules
+        if (pattern.recurrence.byOccurrence) {
+            // RRule format for "first Monday" etc.
+            options.byweekday = pattern.recurrence.byOccurrence.map((occ) => {
+                return RRule[this.getDayName(occ.dayOfWeek)].nth(occ.position);
+            });
+        }
+        // Set end condition
+        switch (pattern.endCondition.type) {
+            case 'afterOccurrences':
+                options.count = pattern.endCondition.occurrences;
+                break;
+            case 'byDate':
+                options.until = pattern.endCondition.endDate;
+                break;
+        }
+        try {
+            return new RRule(options);
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Get day name constant for RRule
+     */
+    getDayName(dayIndex) {
+        return getRRuleDayKey(dayIndex);
+    }
+    /**
+     * Get localized day names
+     */
+    async getDayNames(dayIndices) {
+        return Promise.all(dayIndices.map((index) => this.translationService.translateAsync(`@acorex:schedulerPicker.days.${getDayTranslationKey(index)}`)));
+    }
+    /**
+     * Get localized month names
+     */
+    async getMonthNames(monthIndices) {
+        const monthKeys = [
+            'january',
+            'february',
+            'march',
+            'april',
+            'may',
+            'june',
+            'july',
+            'august',
+            'september',
+            'october',
+            'november',
+            'december',
+        ];
+        return Promise.all(monthIndices.map((index) => this.translationService.translateAsync(`@acorex:schedulerPicker.months.${monthKeys[index]}`)));
+    }
+    /**
+     * Get text for occurrence position
+     */
+    async getOccurrencePositionText(position) {
+        const ordinalKeys = {
+            1: '1st',
+            2: '2nd',
+            3: '3rd',
+            4: '4th',
+            '-1': 'last',
+        };
+        const key = ordinalKeys[position] || '1st';
+        return this.translationService.translateAsync(`@acorex:schedulerPicker.ordinals.${key}`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+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: "20.3.12", ngImport: i0, type: AXSchedulerPickerStartConditionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: "20.3.12", 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" }] : []));
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.endConditionChange = output();
+        this.selectedType = signal('never', ...(ngDevMode ? [{ debugName: "selectedType" }] : []));
+        this.occurrences = signal(AX_SCHEDULER_PICKER_DEFAULT_OCCURRENCES, ...(ngDevMode ? [{ debugName: "occurrences" }] : []));
+        this.endDate = signal(null, ...(ngDevMode ? [{ debugName: "endDate" }] : []));
+        this.endTypeItems = [
+            { id: 'never', text: '@acorex:schedulerPicker.endCondition.never' },
+            { id: 'afterOccurrences', text: '@acorex:schedulerPicker.endCondition.afterOccurrences' },
+            { id: 'byDate', text: '@acorex:schedulerPicker.endCondition.byDate' },
+        ];
+        // Sync input with internal state
+        effect(() => {
+            const condition = this.endCondition();
+            if (condition) {
+                this.selectedType.set(condition.type);
+                if (condition.type === 'afterOccurrences' && condition.occurrences) {
+                    this.occurrences.set(condition.occurrences);
+                }
+                if (condition.type === 'byDate' && condition.endDate) {
+                    this.endDate.set(condition.endDate);
+                }
+            }
+        });
+    }
+    onTypeChange(event) {
+        this.selectedType.set(event.value);
+        this.emitChange();
+    }
+    onOccurrencesChange(value) {
+        this.occurrences.set(value);
+        this.emitChange();
+    }
+    onDateChange(value) {
+        this.endDate.set(value);
+        this.emitChange();
+    }
+    emitChange() {
+        const type = this.selectedType();
+        let condition;
+        switch (type) {
+            case 'afterOccurrences':
+                condition = { type: 'afterOccurrences', occurrences: this.occurrences() };
+                break;
+            case 'byDate':
+                condition = { type: 'byDate', endDate: this.endDate() || new Date() };
+                break;
+            default:
+                condition = { type: 'never' };
+        }
+        this.endConditionChange.emit(condition);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerEndConditionSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerEndConditionSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-end-condition-selector', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        FormsModule,
+                        AXSelectionListModule,
+                        AXNumberBoxComponent,
+                        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"] }]
+        }], 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 {
+    constructor() {
+        this.exclusions = input(...(ngDevMode ? [undefined, { debugName: "exclusions" }] : []));
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.exclusionsChange = output();
+        this.newExclusionDate = signal(null, ...(ngDevMode ? [{ debugName: "newExclusionDate" }] : []));
+        this.exclusionList = signal([], ...(ngDevMode ? [{ debugName: "exclusionList" }] : []));
+        // Sync input with internal list
+        effect(() => {
+            const exclusions = this.exclusions();
+            this.exclusionList.set(exclusions || []);
+        });
+    }
+    addExclusion() {
+        const date = this.newExclusionDate();
+        if (date) {
+            // Normalize date to midnight
+            const normalized = normalizeDate(date);
+            // Check for duplicates
+            if (!dateExistsInArray(normalized, this.exclusionList())) {
+                const updated = [...this.exclusionList(), normalized];
+                this.exclusionList.set(updated);
+                this.exclusionsChange.emit(updated);
+            }
+            this.newExclusionDate.set(null);
+        }
+    }
+    removeExclusion(date) {
+        const normalized = normalizeDate(date);
+        const updated = this.exclusionList().filter((d) => normalizeDate(d).getTime() !== normalized.getTime());
+        this.exclusionList.set(updated);
+        this.exclusionsChange.emit(updated);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerExclusionManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXSchedulerPickerExclusionManagerComponent, isStandalone: true, selector: "ax-scheduler-picker-exclusion-manager", inputs: { exclusions: { classPropertyName: "exclusions", publicName: "exclusions", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { exclusionsChange: "exclusionsChange" }, host: { classAttribute: "ax-scheduler-picker-exclusion-manager-host" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-exclusion-manager">
+      <div class="ax-scheduler-picker-section-header">
+        <label class="ax-scheduler-picker-label">
+          <i class="ax-icon ax-icon-calendar-remove"></i>
+          {{ '@acorex:schedulerPicker.labels.excludeDates' | translate | async }}
+        </label>
+        @if (exclusionList().length > 0) {
+          <ax-badge [text]="exclusionList().length.toString()"></ax-badge>
+        }
+      </div>
+
+      <div class="ax-scheduler-picker-add-section">
+        <ax-datetime-box
+          class="ax-scheduler-picker-date-input"
+          [value]="newExclusionDate()"
+          mode="date"
+          (valueChange)="newExclusionDate.set($event)"
+          [placeholder]="'@acorex:schedulerPicker.placeholders.selectExclusionDate' | translate | async"
+        />
+        <ax-button
+          mode="success"
+          [text]="'@acorex:common.actions.add' | translate | async"
+          (click)="addExclusion()"
+          [disabled]="!newExclusionDate()"
+        >
+          <ax-prefix>
+            <i class="ax-icon ax-icon-plus"></i>
+          </ax-prefix>
+        </ax-button>
+      </div>
+
+      @if (exclusionList().length > 0) {
+        <div class="ax-scheduler-picker-chips-container">
+          @for (date of exclusionList(); track date.getTime()) {
+            <ax-chips [text]="date | date: 'mediumDate'" color="danger" (click)="removeExclusion(date)">
+              <ax-prefix>
+                <i class="ax-icon ax-icon-calendar"></i>
+              </ax-prefix>
+              <ax-suffix>
+                <i class="ax-icon ax-icon-close"></i>
+              </ax-suffix>
+            </ax-chips>
+          }
+        </div>
+      } @else {
+        <div class="ax-scheduler-picker-empty-state">
+          <i class="ax-icon ax-icon-calendar-check"></i>
+          <span>{{ '@acorex:schedulerPicker.messages.noExcludedDates' | translate | async }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-exclusion-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-danger-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"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXChipsModule }, { kind: "component", type: i3.AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerExclusionManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-exclusion-manager', template: `
+    <div class="ax-scheduler-picker-exclusion-manager">
+      <div class="ax-scheduler-picker-section-header">
+        <label class="ax-scheduler-picker-label">
+          <i class="ax-icon ax-icon-calendar-remove"></i>
+          {{ '@acorex:schedulerPicker.labels.excludeDates' | translate | async }}
+        </label>
+        @if (exclusionList().length > 0) {
+          <ax-badge [text]="exclusionList().length.toString()"></ax-badge>
+        }
+      </div>
+
+      <div class="ax-scheduler-picker-add-section">
+        <ax-datetime-box
+          class="ax-scheduler-picker-date-input"
+          [value]="newExclusionDate()"
+          mode="date"
+          (valueChange)="newExclusionDate.set($event)"
+          [placeholder]="'@acorex:schedulerPicker.placeholders.selectExclusionDate' | translate | async"
+        />
+        <ax-button
+          mode="success"
+          [text]="'@acorex:common.actions.add' | translate | async"
+          (click)="addExclusion()"
+          [disabled]="!newExclusionDate()"
+        >
+          <ax-prefix>
+            <i class="ax-icon ax-icon-plus"></i>
+          </ax-prefix>
+        </ax-button>
+      </div>
+
+      @if (exclusionList().length > 0) {
+        <div class="ax-scheduler-picker-chips-container">
+          @for (date of exclusionList(); track date.getTime()) {
+            <ax-chips [text]="date | date: 'mediumDate'" color="danger" (click)="removeExclusion(date)">
+              <ax-prefix>
+                <i class="ax-icon ax-icon-calendar"></i>
+              </ax-prefix>
+              <ax-suffix>
+                <i class="ax-icon ax-icon-close"></i>
+              </ax-suffix>
+            </ax-chips>
+          }
+        </div>
+      } @else {
+        <div class="ax-scheduler-picker-empty-state">
+          <i class="ax-icon ax-icon-calendar-check"></i>
+          <span>{{ '@acorex:schedulerPicker.messages.noExcludedDates' | translate | async }}</span>
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXChipsModule,
+                        FormsModule,
+                        AXDateTimeBoxComponent,
+                        AXButtonComponent,
+                        AXTranslatorPipe,
+                        AsyncPipe,
+                        DatePipe,
+                    ], host: {
+                        class: 'ax-scheduler-picker-exclusion-manager-host',
+                    }, styles: [".ax-scheduler-picker-exclusion-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-danger-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: { exclusions: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclusions", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], exclusionsChange: [{ type: i0.Output, args: ["exclusionsChange"] }] } });
+
+class AXSchedulerPickerInclusionManagerComponent {
+    constructor() {
+        this.inclusions = input(...(ngDevMode ? [undefined, { debugName: "inclusions" }] : []));
+        this.inclusionsChange = output();
+        this.newInclusionDate = signal(null, ...(ngDevMode ? [{ debugName: "newInclusionDate" }] : []));
+        this.inclusionList = signal([], ...(ngDevMode ? [{ debugName: "inclusionList" }] : []));
+        // Sync input with internal list
+        effect(() => {
+            const inclusions = this.inclusions();
+            this.inclusionList.set(inclusions || []);
+        });
+    }
+    addInclusion() {
+        const date = this.newInclusionDate();
+        if (date) {
+            // Normalize date to midnight
+            const normalized = normalizeDate(date);
+            // Check for duplicates
+            if (!dateExistsInArray(normalized, this.inclusionList())) {
+                const updated = [...this.inclusionList(), normalized];
+                this.inclusionList.set(updated);
+                this.inclusionsChange.emit(updated);
+            }
+            this.newInclusionDate.set(null);
+        }
+    }
+    removeInclusion(date) {
+        const normalized = normalizeDate(date);
+        const updated = this.inclusionList().filter((d) => normalizeDate(d).getTime() !== normalized.getTime());
+        this.inclusionList.set(updated);
+        this.inclusionsChange.emit(updated);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerInclusionManagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXSchedulerPickerInclusionManagerComponent, isStandalone: true, selector: "ax-scheduler-picker-inclusion-manager", inputs: { inclusions: { classPropertyName: "inclusions", publicName: "inclusions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inclusionsChange: "inclusionsChange" }, host: { classAttribute: "ax-scheduler-picker-inclusion-manager-host" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-inclusion-manager">
+      <div class="ax-scheduler-picker-section-header">
+        <label class="ax-scheduler-picker-label">
+          <i class="ax-icon ax-icon-calendar-add"></i>
+          {{ '@acorex:schedulerPicker.labels.includeDates' | translate | async }}
+        </label>
+        @if (inclusionList().length > 0) {
+          <ax-badge [text]="inclusionList().length.toString()"></ax-badge>
+        }
+      </div>
+
+      <div class="ax-scheduler-picker-add-section">
+        <ax-datetime-box
+          class="ax-scheduler-picker-date-input"
+          [value]="newInclusionDate()"
+          mode="date"
+          (valueChange)="newInclusionDate.set($event)"
+          [placeholder]="'@acorex:schedulerPicker.placeholders.selectInclusionDate' | translate | async"
+        />
+        <ax-button
+          mode="success"
+          (click)="addInclusion()"
+          [disabled]="!newInclusionDate()"
+          [text]="'@acorex:common.actions.add' | translate | async"
+        >
+          <ax-prefix>
+            <i class="ax-icon ax-icon-plus"></i>
+          </ax-prefix>
+        </ax-button>
+      </div>
+
+      @if (inclusionList().length > 0) {
+        <div class="ax-scheduler-picker-chips-container">
+          @for (date of inclusionList(); track date.getTime()) {
+            <ax-chips [text]="date | date: 'mediumDate'" color="success" (click)="removeInclusion(date)">
+              <ax-prefix>
+                <i class="ax-icon ax-icon-calendar"></i>
+              </ax-prefix>
+              <ax-suffix>
+                <i class="ax-icon ax-icon-close"></i>
+              </ax-suffix>
+            </ax-chips>
+          }
+        </div>
+      } @else {
+        <div class="ax-scheduler-picker-empty-state">
+          <i class="ax-icon ax-icon-calendar-check"></i>
+          <span>{{ '@acorex:schedulerPicker.messages.noIncludedDates' | translate | async }}</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, 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"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXChipsModule }, { kind: "component", type: i3.AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerInclusionManagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-inclusion-manager', template: `
+    <div class="ax-scheduler-picker-inclusion-manager">
+      <div class="ax-scheduler-picker-section-header">
+        <label class="ax-scheduler-picker-label">
+          <i class="ax-icon ax-icon-calendar-add"></i>
+          {{ '@acorex:schedulerPicker.labels.includeDates' | translate | async }}
+        </label>
+        @if (inclusionList().length > 0) {
+          <ax-badge [text]="inclusionList().length.toString()"></ax-badge>
+        }
+      </div>
+
+      <div class="ax-scheduler-picker-add-section">
+        <ax-datetime-box
+          class="ax-scheduler-picker-date-input"
+          [value]="newInclusionDate()"
+          mode="date"
+          (valueChange)="newInclusionDate.set($event)"
+          [placeholder]="'@acorex:schedulerPicker.placeholders.selectInclusionDate' | translate | async"
+        />
+        <ax-button
+          mode="success"
+          (click)="addInclusion()"
+          [disabled]="!newInclusionDate()"
+          [text]="'@acorex:common.actions.add' | translate | async"
+        >
+          <ax-prefix>
+            <i class="ax-icon ax-icon-plus"></i>
+          </ax-prefix>
+        </ax-button>
+      </div>
+
+      @if (inclusionList().length > 0) {
+        <div class="ax-scheduler-picker-chips-container">
+          @for (date of inclusionList(); track date.getTime()) {
+            <ax-chips [text]="date | date: 'mediumDate'" color="success" (click)="removeInclusion(date)">
+              <ax-prefix>
+                <i class="ax-icon ax-icon-calendar"></i>
+              </ax-prefix>
+              <ax-suffix>
+                <i class="ax-icon ax-icon-close"></i>
+              </ax-suffix>
+            </ax-chips>
+          }
+        </div>
+      } @else {
+        <div class="ax-scheduler-picker-empty-state">
+          <i class="ax-icon ax-icon-calendar-check"></i>
+          <span>{{ '@acorex:schedulerPicker.messages.noIncludedDates' | translate | async }}</span>
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AXDecoratorModule,
+                        AXBadgeModule,
+                        AXChipsModule,
+                        FormsModule,
+                        AXDateTimeBoxComponent,
+                        AXButtonComponent,
+                        AXTranslatorPipe,
+                        AsyncPipe,
+                        DatePipe,
+                    ], host: {
+                        class: 'ax-scheduler-picker-inclusion-manager-host',
+                    }, 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"] }] } });
+
+/**
+ * A powerful, fully customizable scheduler picker component for creating recurrence patterns
+ *
+ * ## Features
+ * - Supports 5 modes: hourly, daily, weekly, monthly, and yearly
+ * - Flexible start and end conditions
+ * - Date exclusions and inclusions
+ * - Natural language summary generation
+ * - Export to Cron and RRule (iCalendar) formats
+ * - Full i18n support
+ * - Type-safe configuration
+ *
+ * ## Basic Usage
+ * ```typescript
+ * <ax-scheduler-picker
+ *   [config]="{ mode: 'daily', showEndConditions: true }"
+ *   [(value)]="pattern"
+ *   (summaryChange)="onSummaryChange($event)"
+ * />
+ * ```
+ *
+ * ## Public API
+ * - `validatePattern()` - Manually trigger validation
+ * - `getPreview(count)` - Get next N occurrences
+ * - `toCron()` - Convert to cron expression
+ * - `toRRule()` - Convert to RRule string
+ * - `reset()` - Reset to default pattern
+ * - `clear()` - Clear all data
+ * - `validationErrors` - Signal containing current validation errors
+ *
+ * @category Components
+ */
+class AXSchedulerPickerComponent extends MXValueComponent {
+    internalValueChanged(value) {
+        if (value) {
+            this.pattern.set(value);
+        }
+        else {
+            this.initializeDefaultValue();
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * Settings for the scheduler picker
+         * Controls which options are visible and behavior
+         */
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        /**
+         * Emits when the human-readable summary changes
+         */
+        this.summaryChange = output();
+        this.service = inject(AXSchedulerPickerService);
+        /**
+         * Internal pattern value
+         */
+        this.pattern = signal(null, ...(ngDevMode ? [{ debugName: "pattern" }] : []));
+        /**
+         * Current mode derived from config
+         */
+        this.mode = computed(() => this.config().mode, ...(ngDevMode ? [{ debugName: "mode" }] : []));
+        /**
+         * Effect run counter to prevent stale async updates
+         */
+        this.effectRunId = 0;
+        /**
+         * Merged configuration with defaults
+         */
+        this.mergedConfig = computed(() => {
+            const defaultConfig = getDefaultSchedulerPickerConfig(this.config().mode);
+            return {
+                ...defaultConfig,
+                ...this.config(),
+                options: {
+                    ...defaultConfig.options,
+                    ...this.config().options,
+                },
+            };
+        }, ...(ngDevMode ? [{ debugName: "mergedConfig" }] : []));
+        /**
+         * Validation errors (public for external access)
+         */
+        this.validationErrors = signal([], ...(ngDevMode ? [{ debugName: "validationErrors" }] : []));
+        /**
+         * Human-readable summary of the pattern
+         */
+        this.summary = signal('', ...(ngDevMode ? [{ debugName: "summary" }] : []));
+        // Effect to update summary when pattern changes
+        effect(() => {
+            const currentPattern = this.pattern();
+            if (currentPattern) {
+                const runId = ++this.effectRunId;
+                this.service.toNaturalLanguage(currentPattern, this.mergedConfig().locale).then((result) => {
+                    // Only update if this is still the latest run
+                    if (runId === this.effectRunId) {
+                        this.summary.set(result);
+                        this.summaryChange.emit(result);
+                    }
+                });
+            }
+            else {
+                this.summary.set('');
+                this.summaryChange.emit('');
+            }
+        });
+    }
+    /**
+     * Initialize with default value based on mode
+     */
+    initializeDefaultValue() {
+        if (!this.value) {
+            const defaultValue = {
+                mode: this.config().mode,
+                interval: this.config().defaultInterval || 1,
+                startCondition: {
+                    type: 'now',
+                    startDate: new Date(),
+                },
+                recurrence: {},
+                endCondition: {
+                    type: 'never',
+                },
+            };
+            this.value = defaultValue;
+        }
+    }
+    /**
+     * Update pattern value
+     */
+    updatePattern(updates) {
+        const currentPattern = this.pattern();
+        if (currentPattern) {
+            const newPattern = this.mergePatternUpdates(currentPattern, updates);
+            this.pattern.set(newPattern);
+            this.value = newPattern;
+        }
+    }
+    /**
+     * Deep merge pattern updates with current pattern
+     * Preserves nested object properties that aren't being updated
+     */
+    mergePatternUpdates(current, updates) {
+        return {
+            ...current,
+            ...updates,
+            // Deep merge recurrence to preserve existing properties
+            recurrence: updates.recurrence
+                ? {
+                    ...current.recurrence,
+                    ...updates.recurrence,
+                }
+                : current.recurrence,
+            // Deep merge startCondition to preserve existing properties
+            startCondition: updates.startCondition
+                ? {
+                    ...current.startCondition,
+                    ...updates.startCondition,
+                }
+                : current.startCondition,
+            // Deep merge endCondition to preserve existing properties
+            endCondition: updates.endCondition
+                ? {
+                    ...current.endCondition,
+                    ...updates.endCondition,
+                }
+                : current.endCondition,
+        };
+    }
+    /**
+     * Manually validate the current pattern
+     *
+     * Validates the pattern against configured rules and constraints.
+     * Updates the `validationErrors` signal and component state.
+     *
+     * @returns Promise resolving to `true` if pattern is valid, `false` otherwise
+     *
+     * @example
+     * ```typescript
+     * const isValid = await schedulerPicker.validatePattern();
+     * if (!isValid) {
+     *   const errors = schedulerPicker.validationErrors();
+     *   console.log('Validation errors:', errors);
+     * }
+     * ```
+     */
+    async validatePattern() {
+        const currentPattern = this.pattern();
+        if (!currentPattern) {
+            return false;
+        }
+        const errors = await this.service.validatePattern(currentPattern, this.mergedConfig());
+        const errorMessages = errors.map((e) => e.message);
+        this.validationErrors.set(errorMessages);
+        if (errors.length > 0) {
+            this.setState('error');
+            return false;
+        }
+        else {
+            this.setState('clear');
+            return true;
+        }
+    }
+    /**
+     * Get preview of next N occurrences based on the current pattern
+     *
+     * @param count - Number of occurrences to return (default: 10)
+     * @param startFrom - Optional starting date (default: now)
+     * @returns Promise resolving to array of dates representing next occurrences
+     * @returns Empty array if pattern is invalid or not set
+     *
+     * @example
+     * ```typescript
+     * const dates = await schedulerPicker.getPreview(5);
+     * console.log('Next 5 occurrences:', dates);
+     * ```
+     */
+    async getPreview(count = 10, startFrom) {
+        const currentPattern = this.pattern();
+        if (!currentPattern) {
+            return [];
+        }
+        return await this.service.calculateOccurrences(currentPattern, count, startFrom);
+    }
+    /**
+     * Convert current pattern to cron expression
+     *
+     * @returns Promise resolving to cron expression string
+     * @returns Empty string if pattern is not set or invalid
+     *
+     * @example
+     * ```typescript
+     * const cron = await schedulerPicker.toCron();
+     * console.log('Cron expression:', cron); // "0 9 * * 1-5"
+     * ```
+     */
+    async toCron() {
+        const currentPattern = this.pattern();
+        if (!currentPattern) {
+            return '';
+        }
+        return await this.service.toCronExpression(currentPattern);
+    }
+    /**
+     * Convert current pattern to RRule string (iCalendar format)
+     *
+     * @returns Promise resolving to RRule string
+     * @returns Empty string if pattern is not set or invalid
+     *
+     * @example
+     * ```typescript
+     * const rrule = await schedulerPicker.toRRule();
+     * console.log('RRule:', rrule); // "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"
+     * ```
+     */
+    async toRRule() {
+        const currentPattern = this.pattern();
+        if (!currentPattern) {
+            return '';
+        }
+        return await this.service.toRRule(currentPattern);
+    }
+    /**
+     * Reset pattern to default value based on current mode
+     * Clears current pattern and re-initializes with mode-specific defaults
+     *
+     * @param e - Optional event parameter (inherited from base class)
+     *
+     * @example
+     * ```typescript
+     * schedulerPicker.reset();
+     * // Pattern is now reset to default for the configured mode
+     * ```
+     */
+    reset(e = false) {
+        super.reset(e);
+        this.pattern.set(null);
+        this.initializeDefaultValue();
+    }
+    /**
+     * Clear pattern completely
+     * Removes all pattern data, summary, and validation errors
+     * Sets component state to 'clear'
+     *
+     * @example
+     * ```typescript
+     * schedulerPicker.clear();
+     * // All data cleared, component is now empty
+     * ```
+     */
+    clear() {
+        this.pattern.set(null);
+        this.value = null;
+        this.summary.set('');
+        this.validationErrors.set([]);
+        this.setState('clear');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXSchedulerPickerComponent, isStandalone: true, selector: "ax-scheduler-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", summaryChange: "summaryChange" }, providers: [
+            { provide: AXComponent, useExisting: AXSchedulerPickerComponent },
+            { provide: AXFocusableComponent, useExisting: AXSchedulerPickerComponent },
+            { provide: AXValuableComponent, useExisting: AXSchedulerPickerComponent },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['disabled', 'readonly', 'tabIndex', 'value', 'state', 'name', 'id'], outputs: ['valueChange', 'stateChange', 'onValueChanged', 'onBlur', 'onFocus'], providers: [
+                        { provide: AXComponent, useExisting: AXSchedulerPickerComponent },
+                        { provide: AXFocusableComponent, useExisting: AXSchedulerPickerComponent },
+                        { provide: AXValuableComponent, useExisting: AXSchedulerPickerComponent },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXSchedulerPickerComponent),
+                            multi: true,
+                        },
+                    ], imports: [
+                        AXSchedulerPickerHourlyPanelComponent,
+                        AXSchedulerPickerDailyPanelComponent,
+                        AXSchedulerPickerWeeklyPanelComponent,
+                        AXSchedulerPickerMonthlyPanelComponent,
+                        AXSchedulerPickerYearlyPanelComponent,
+                        AXSchedulerPickerStartConditionSelectorComponent,
+                        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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], summaryChange: [{ type: i0.Output, args: ["summaryChange"] }] } });
+
+class AXSchedulerPickerTimeSelectorComponent {
+    constructor() {
+        this.time = input(...(ngDevMode ? [undefined, { debugName: "time" }] : []));
+        this.timeChange = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerTimeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXSchedulerPickerTimeSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-time-selector", inputs: { time: { classPropertyName: "time", publicName: "time", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-time-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.time' | translate | async }}
+      </label>
+      <ax-datetime-box
+        [value]="time() || '09:00'"
+        [picker]="'time'"
+        (valueChange)="timeChange.emit($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-time-selector{display:flex;flex-direction:column;gap:.5rem}.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: 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: "20.3.12", ngImport: i0, type: AXSchedulerPickerTimeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-time-selector', template: `
+    <div class="ax-scheduler-picker-time-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.time' | translate | async }}
+      </label>
+      <ax-datetime-box
+        [value]="time() || '09:00'"
+        [picker]="'time'"
+        (valueChange)="timeChange.emit($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXDateTimeBoxComponent, AXTranslatorPipe, AsyncPipe], styles: [".ax-scheduler-picker-time-selector{display:flex;flex-direction:column;gap:.5rem}.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"] }]
+        }], propDecorators: { time: [{ type: i0.Input, args: [{ isSignal: true, alias: "time", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
+
+class AXSchedulerPickerTimezoneSelectorComponent {
+    constructor() {
+        /**
+         * Current timezone value
+         */
+        this.timezone = input(...(ngDevMode ? [undefined, { debugName: "timezone" }] : []));
+        /**
+         * Emits when timezone selection changes
+         */
+        this.timezoneChange = output();
+        this.timezones = [
+            { value: 'UTC', text: 'UTC' },
+            { value: 'America/New_York', text: 'Eastern Time (ET)' },
+            { value: 'America/Chicago', text: 'Central Time (CT)' },
+            { value: 'America/Denver', text: 'Mountain Time (MT)' },
+            { value: 'America/Los_Angeles', text: 'Pacific Time (PT)' },
+            { value: 'Europe/London', text: 'London (GMT)' },
+            { value: 'Europe/Paris', text: 'Paris (CET)' },
+            { value: 'Asia/Dubai', text: 'Dubai (GST)' },
+            { value: 'Asia/Tehran', text: 'Tehran (IRST)' },
+            { value: 'Asia/Tokyo', text: 'Tokyo (JST)' },
+            { value: 'Australia/Sydney', text: 'Sydney (AEDT)' },
+        ];
+    }
+    /**
+     * Handle timezone selection change
+     */
+    onTimezoneChange(event) {
+        this.timezoneChange.emit(event.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerTimezoneSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXSchedulerPickerTimezoneSelectorComponent, isStandalone: true, selector: "ax-scheduler-picker-timezone-selector", inputs: { timezone: { classPropertyName: "timezone", publicName: "timezone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timezoneChange: "timezoneChange" }, ngImport: i0, template: `
+    <div class="ax-scheduler-picker-timezone-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.timezone' | translate | async }}
+      </label>
+      <ax-select-box
+        [value]="timezone() || 'UTC'"
+        [dataSource]="timezones"
+        textField="text"
+        valueField="value"
+        (onValueChanged)="onTimezoneChange($event)"
+      />
+    </div>
+  `, isInline: true, styles: [".ax-scheduler-picker-timezone-selector{display:flex;flex-direction:column;gap:.5rem}.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)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "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: "20.3.12", ngImport: i0, type: AXSchedulerPickerTimezoneSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-picker-timezone-selector', template: `
+    <div class="ax-scheduler-picker-timezone-selector">
+      <label class="ax-scheduler-picker-label">
+        {{ '@acorex:schedulerPicker.labels.timezone' | translate | async }}
+      </label>
+      <ax-select-box
+        [value]="timezone() || 'UTC'"
+        [dataSource]="timezones"
+        textField="text"
+        valueField="value"
+        (onValueChanged)="onTimezoneChange($event)"
+      />
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, AXSelectBoxComponent, AXTranslatorPipe, AsyncPipe], styles: [".ax-scheduler-picker-timezone-selector{display:flex;flex-direction:column;gap:.5rem}.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)}\n"] }]
+        }], propDecorators: { timezone: [{ type: i0.Input, args: [{ isSignal: true, alias: "timezone", required: false }] }], timezoneChange: [{ type: i0.Output, args: ["timezoneChange"] }] } });
+
+/**
+ * Demo configuration panel for scheduler picker
+ * Provides interactive controls to customize scheduler picker settings
+ */
+class AXSchedulerPickerConfigComponent {
+    constructor() {
+        // Outputs
+        this.configChange = output();
+        this.modeChange = output();
+        // Mode selection
+        this.selectedMode = signal('daily', ...(ngDevMode ? [{ debugName: "selectedMode" }] : []));
+        this.modeOptions = [
+            { value: 'hourly', text: 'Hourly' },
+            { value: 'daily', text: 'Daily' },
+            { value: 'weekly', text: 'Weekly' },
+            { value: 'monthly', text: 'Monthly' },
+            { value: 'yearly', text: 'Yearly' },
+        ];
+        // Configuration controls - Global
+        this.showInterval = signal(true, ...(ngDevMode ? [{ debugName: "showInterval" }] : []));
+        this.showStartCondition = signal(true, ...(ngDevMode ? [{ debugName: "showStartCondition" }] : []));
+        this.showEndConditions = signal(true, ...(ngDevMode ? [{ debugName: "showEndConditions" }] : []));
+        this.showExclusions = signal(false, ...(ngDevMode ? [{ debugName: "showExclusions" }] : []));
+        this.showInclusions = signal(false, ...(ngDevMode ? [{ debugName: "showInclusions" }] : []));
+        // Configuration controls - Mode specific
+        this.showWeekdaysOnly = signal(false, ...(ngDevMode ? [{ debugName: "showWeekdaysOnly" }] : []));
+        this.showWeekdaySelection = signal(true, ...(ngDevMode ? [{ debugName: "showWeekdaySelection" }] : []));
+        this.monthlyRecurrenceMode = signal('specificDays', ...(ngDevMode ? [{ debugName: "monthlyRecurrenceMode" }] : []));
+        this.yearlyRecurrenceMode = signal('specificDate', ...(ngDevMode ? [{ debugName: "yearlyRecurrenceMode" }] : []));
+        this.showMonthSelection = signal(true, ...(ngDevMode ? [{ debugName: "showMonthSelection" }] : []));
+        // Dynamic configuration based on selected mode
+        this.config = computed(() => {
+            const mode = this.selectedMode();
+            const baseConfig = {
+                mode,
+                showStartCondition: this.showStartCondition(),
+                showEndConditions: this.showEndConditions(),
+                showExclusions: this.showExclusions(),
+                showInclusions: this.showInclusions(),
+            };
+            switch (mode) {
+                case 'hourly':
+                    baseConfig.options = {
+                        showInterval: this.showInterval(),
+                    };
+                    break;
+                case 'daily':
+                    baseConfig.options = {
+                        showInterval: this.showInterval(),
+                        showWeekdaysOnly: this.showWeekdaysOnly(),
+                    };
+                    break;
+                case 'weekly':
+                    baseConfig.options = {
+                        showInterval: this.showInterval(),
+                        showWeekdaySelection: this.showWeekdaySelection(),
+                    };
+                    break;
+                case 'monthly':
+                    baseConfig.options = {
+                        showInterval: this.showInterval(),
+                        recurrenceMode: this.monthlyRecurrenceMode(),
+                    };
+                    break;
+                case 'yearly':
+                    baseConfig.options = {
+                        showInterval: this.showInterval(),
+                        recurrenceMode: this.yearlyRecurrenceMode(),
+                        showMonthSelection: this.showMonthSelection(),
+                    };
+                    break;
+            }
+            return baseConfig;
+        }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        // Emit config changes whenever any signal changes
+        effect(() => {
+            const currentConfig = this.config();
+            this.configChange.emit(currentConfig);
+        });
+    }
+    onModeChange(mode) {
+        this.selectedMode.set(mode);
+        this.modeChange.emit(mode);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXSchedulerPickerConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", 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"] }]
+        }], ctorParameters: () => [], propDecorators: { configChange: [{ type: i0.Output, args: ["configChange"] }], modeChange: [{ type: i0.Output, args: ["modeChange"] }] } });
+
+// Main component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXSchedulerPickerComponent, AXSchedulerPickerConfigComponent, AXSchedulerPickerDailyDefaultConfig, AXSchedulerPickerDailyPanelComponent, AXSchedulerPickerDaySelectorComponent, AXSchedulerPickerEndConditionSelectorComponent, AXSchedulerPickerExclusionManagerComponent, AXSchedulerPickerHourlyDefaultConfig, AXSchedulerPickerHourlyPanelComponent, AXSchedulerPickerInclusionManagerComponent, AXSchedulerPickerIntervalSelectorComponent, AXSchedulerPickerMonthSelectorComponent, AXSchedulerPickerMonthlyDefaultConfig, AXSchedulerPickerMonthlyPanelComponent, AXSchedulerPickerOccurrenceSelectorComponent, AXSchedulerPickerService, AXSchedulerPickerStartConditionSelectorComponent, AXSchedulerPickerTimeSelectorComponent, AXSchedulerPickerTimezoneSelectorComponent, AXSchedulerPickerWeeklyDefaultConfig, AXSchedulerPickerWeeklyPanelComponent, AXSchedulerPickerYearlyDefaultConfig, AXSchedulerPickerYearlyPanelComponent, AX_SCHEDULER_PICKER_DAILY_CONFIG, AX_SCHEDULER_PICKER_DAYS_OF_WEEK, AX_SCHEDULER_PICKER_DAY_TRANSLATION_KEYS, AX_SCHEDULER_PICKER_DEFAULT_FIRST_DAY_OF_WEEK, AX_SCHEDULER_PICKER_DEFAULT_LOCALE, AX_SCHEDULER_PICKER_DEFAULT_OCCURRENCES, AX_SCHEDULER_PICKER_DEFAULT_TIME_FORMAT, AX_SCHEDULER_PICKER_DEFAULT_TIME_PRECISION, AX_SCHEDULER_PICKER_HOURLY_CONFIG, AX_SCHEDULER_PICKER_MONTHLY_CONFIG, AX_SCHEDULER_PICKER_MONTHS, AX_SCHEDULER_PICKER_MONTH_TRANSLATION_KEYS, AX_SCHEDULER_PICKER_OCCURRENCE_POSITIONS, AX_SCHEDULER_PICKER_RRULE_DAY_KEYS, AX_SCHEDULER_PICKER_WEEKDAY_END, AX_SCHEDULER_PICKER_WEEKDAY_START, AX_SCHEDULER_PICKER_WEEKLY_CONFIG, AX_SCHEDULER_PICKER_YEARLY_CONFIG, dateExistsInArray, getDayTranslationKey, getDefaultSchedulerPickerConfig, getMonthTranslationKey, getRRuleDayKey, isSameDate, normalizeDate, reorderDaysByFirstDay };
+//# sourceMappingURL=acorex-components-scheduler-picker.mjs.map