@acorex/components 22.1.0-next.31 → 22.1.0-next.33

package/fesm2022/acorex-components-calendar.mjs

@@ -1,10 +1,8 @@
 import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent, AXRippleDirective, AXValuableComponent, AXComponent } from '@acorex/cdk/common';
 import { AXCalendarService, AXDateTimeRange, AXDateTimeModule } from '@acorex/core/date-time';
-import * as i2 from '@acorex/core/format';
-import { AXFormatService, AXFormatModule } from '@acorex/core/format';
 import { AXUnsubscriber } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Input, Output, Injectable, input, linkedSignal, computed, signal, effect, forwardRef, HostListener, HostBinding, ViewEncapsulation, Component, ViewChild, NgModule } from '@angular/core';
+import { inject, EventEmitter, Input, Output, Injectable, input, linkedSignal, computed, signal, effect, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
@@ -12,7 +10,9 @@ import { AXLocaleService } from '@acorex/core/locale';
 import { AXTranslationService, AXTranslatorPipe } from '@acorex/core/translation';
 import { AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXTooltipDirective } from '@acorex/components/tooltip';
-import { isPlatformBrowser, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import * as i2 from '@acorex/core/format';
+import { AXFormatService, AXFormatModule } from '@acorex/core/format';
+import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 
 function getCalendarYearBounds(options) {
     const past = typeof options.yearRange === 'number' ? options.yearRange : options.yearRange.past;
@@ -159,10 +159,10 @@ class MXCalendarBaseComponent extends MXBaseComponent {
         this.setOption({ name: 'holidayDates', value: v });
     }
     render() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MXCalendarBaseComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MXCalendarBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
             type: Injectable
         }], propDecorators: { interface: [{
                 type: Input
@@ -228,24 +228,32 @@ const CALENDAR_OUTPUTS = [
  * @category Components
  */
 class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
+    weekdayLabel(index) {
+        const labelLength = this.localeService.activeProfile().calendar.week.weekdayLabelLength ?? 2;
+        const short = this.translateService.translateSync(`@acorex:dateTime.weekdays.short.${index}`);
+        const shortChars = [...short];
+        if (shortChars.length >= labelLength) {
+            return shortChars.slice(0, labelLength).join('');
+        }
+        const long = this.translateService.translateSync(`@acorex:dateTime.weekdays.long.${index}`);
+        return [...long.replace(/\s/g, '')].slice(0, labelLength).join('');
+    }
     get displayRange() {
-        return this.views.length > 0
-            ? new AXDateTimeRange(this.views[0]?.range.startTime, this.views[this.views.length - 1]?.range.endTime)
-            : null;
+        if (!this.views.length || !this._viewStartDate) {
+            return null;
+        }
+        if (this.activeView === 'day') {
+            const lastMonth = this._viewStartDate.add('month', this.count - 1);
+            return new AXDateTimeRange(this._viewStartDate.startOf('month'), lastMonth.endOf('month'));
+        }
+        return new AXDateTimeRange(this.views[0]?.range.startTime, this.views[this.views.length - 1]?.range.endTime);
     }
     #holidayEffect;
     /**
      *  @ignore
      */
     _initValues() {
-        this._today = this.calendarService.create(new Date(), this.calendar());
-    }
-    /**
-     * Maps a date to a 1-based grid column using the active week layout.
-     */
-    _getWeekColumn(date) {
-        const columnIndex = this.weekLayout().indexOf(date.weekdayIndex);
-        return columnIndex >= 0 ? columnIndex + 1 : date.dayOfWeek;
+        this._today = this.calendarService.create(new Date(), this.calendarSystem());
     }
     /**
      * Defers refresh so explicit `type` input can sync after locale profile changes.
@@ -294,6 +302,9 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         this.isRtl = this.localeService.isRtl;
         this.calendar = linkedSignal(() => this.localeService.activeProfile().calendar.system, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
+        /** Explicit `type` input wins over the locale profile calendar. */
+        this.calendarSystem = computed(() => this.type || this.calendar(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "calendarSystem" }] : /* istanbul ignore next */ []));
         /** Week column order from the active locale profile (0 = Sun … 6 = Sat). */
         this.weekLayout = computed(() => {
             const custom = this.weekdays();
@@ -307,7 +318,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         /**
          *  @ignore
          */
-        this._today = this.calendarService.create(new Date(), this.calendar());
+        this._today = this.calendarService.create(new Date(), this.calendarSystem());
         /**
          *  @ignore
          */
@@ -355,7 +366,9 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             const rangeKey = this._viewRangeKey();
             if (!func || !rangeKey || !this._viewStartDate)
                 return;
-            const displayRange = this._setDisplayRange(this._viewStartDate);
+            const displayRange = this.activeView === 'day'
+                ? this._getDayGridRange(this._viewStartDate.startOf('month')).range
+                : this._setDisplayRange(this._viewStartDate);
             const loadRange = {
                 from: displayRange.startTime.date,
                 end: displayRange.endTime.date,
@@ -388,7 +401,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         });
         this.minValueChange.subscribe((e) => {
             if (this._viewStartDate.isBefore(e)) {
-                this._viewStartDate = this.calendarService.create(e, this.calendar());
+                this._viewStartDate = this.calendarService.create(e, this.calendarSystem());
                 this.render();
             }
         });
@@ -407,7 +420,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                 this.navTo(this.value);
             }
             else if (this.minValue) {
-                const min = this.calendarService.create(this.minValue, this.calendar());
+                const min = this.calendarService.create(this.minValue, this.calendarSystem());
                 this.navTo(this._today.isBefore(min) ? this.minValue : this._today);
             }
             else {
@@ -458,20 +471,18 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     _updateSelectOptions() {
         if (!this._viewStartDate)
             return;
-        this._monthOptions = Array.from({ length: 12 }, (_, i) => {
-            const date = this._viewStartDate.set('month', i + 1);
-            return {
-                id: i + 1,
-                text: `@acorex:${this.getMonthName(date, 'short')}`,
-            };
-        });
+        const calendarName = this.calendarSystem();
+        this._monthOptions = Array.from({ length: 12 }, (_, i) => ({
+            id: i + 1,
+            text: this.monthLabel(calendarName, i),
+        }));
         const referenceYear = this._today.year;
         const { minYear, maxYear } = getCalendarYearBounds({
             referenceYear,
             yearRange: this.yearRange(),
             minValue: this.minValue,
             maxValue: this.maxValue,
-            getYear: (date) => this.calendarService.create(date, this.calendar()).year,
+            getYear: (date) => this.calendarService.create(date, this.calendarSystem()).year,
         });
         this._yearOptions = [];
         for (let year = minYear; year <= maxYear; year++) {
@@ -481,13 +492,18 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         const yearId = this._viewStartDate.year;
         this._selectedMonthOption = this._monthOptions.find((month) => month.id === monthId) ?? {
             id: monthId,
-            text: `@acorex:${this.getMonthName(this._viewStartDate, 'short')}`,
+            text: this.monthLabel(calendarName, monthId - 1),
         };
         this._selectedYearOption = this._yearOptions.find((year) => year.id === yearId) ?? {
             id: yearId,
             text: String(yearId),
         };
     }
+    _createMonthDate(year, month, day) {
+        const monthStart = this.calendarService.create({ year, month, day: 1 }, this.calendar());
+        const safeDay = Math.min(day, monthStart.endOf('month').dayOfMonth);
+        return this.calendarService.create({ year, month, day: safeDay }, this.calendar());
+    }
     /**
      *  @ignore
      */
@@ -498,7 +514,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         if (month == null)
             return;
         this._navUserInteraction = true;
-        this.navTo(this._viewStartDate.set('month', month));
+        this.navTo(this._createMonthDate(this._viewStartDate.year, month, this._viewStartDate.dayOfMonth));
         this._navUserInteraction = false;
     }
     /**
@@ -525,6 +541,21 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             return val.id ?? null;
         return val != null ? Number(val) : null;
     }
+    /**
+     * Builds the day grid for a single month (no leading/trailing days from adjacent months).
+     */
+    _getDayGridRange(current) {
+        const monthStart = current.startOf('month');
+        const monthEnd = current.endOf('month');
+        const daysInMonth = monthEnd.dayOfMonth;
+        const startsOn = this.localeService.activeProfile().calendar.week.startsOn;
+        const firstDayOffset = (monthStart.weekdayIndex - startsOn + 7) % 7;
+        const weekCount = Math.ceil((firstDayOffset + daysInMonth) / 7);
+        return {
+            range: new AXDateTimeRange(monthStart, monthEnd),
+            weekCount,
+        };
+    }
     /**
      *  @ignore
      */
@@ -538,11 +569,11 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     year: min,
                     month: 1,
                     day: 1,
-                }, this.calendar()), this.calendarService.create({
+                }, this.calendarSystem()), this.calendarService.create({
                     year: max,
                     month: 12,
                     day: 28,
-                }, this.calendar()));
+                }, this.calendarSystem()));
             }
             case 'month':
                 return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
@@ -554,14 +585,18 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
      *  @ignore
      */
     dayView(i, applyCellClass) {
-        const current = this._viewStartDate.add('month', i);
+        const monthAnchor = this._viewStartDate.startOf('month').add('month', i);
+        const monthStart = monthAnchor;
+        const { range, weekCount } = this._getDayGridRange(monthAnchor);
         const view = {
-            range: this._setDisplayRange(current),
+            range,
             slots: [],
+            weekCount,
         };
         this.views.push(view);
+        const startsOn = this.localeService.activeProfile().calendar.week.startsOn;
         const a = view.range.enumerate('day');
-        view.slots = a.map((d, i) => {
+        view.slots = a.map((d) => {
             let selected = false;
             if (this.depth === 'day') {
                 selected = this.value && d.equal(this.value, 'day');
@@ -603,6 +638,10 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     'ax-state-holiday': r.holiday,
                     // 'ax-state-focused': focused,
                 };
+                if (d.compare(monthStart, 'day') === 0) {
+                    const columnStart = ((d.weekdayIndex - startsOn + 7) % 7) + 1;
+                    r.cssClass[`ax-column-start-${columnStart}`] = true;
+                }
                 if (holidayInfo?.cssClass) {
                     holidayInfo.cssClass.split(' ').forEach((c) => {
                         if (c)
@@ -610,8 +649,6 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     });
                 }
             }
-            // ax-column-start-1 … ax-column-start-7 (first day of month grid offset)
-            r.cssClass[`ax-column-start-${this._getWeekColumn(view.range.startTime)}`] = i == 0;
             if (this.cellClass)
                 applyCellClass(r);
             return r;
@@ -733,7 +770,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         }
         else if (this.activeView == 'month' && this.depth == 'day') {
             this.activeView = 'day';
-            this._footPrint.month = this.calendarService.create(slot.date.date, this.calendar()).monthOfYear;
+            this._footPrint.month = this.calendarService.create(slot.date.date, this.calendarSystem()).monthOfYear;
             this.navTo(slot.date);
         }
         else if (this.activeView == 'month' && this.depth == 'month') {
@@ -741,7 +778,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         }
         else if (this.activeView == 'year' && (this.depth == 'day' || this.depth == 'month')) {
             this.activeView = 'month';
-            this._footPrint.year = this.calendarService.create(slot.date.date, this.calendar()).year;
+            this._footPrint.year = this.calendarService.create(slot.date.date, this.calendarSystem()).year;
             this.navTo(slot.date);
         }
         else if (this.activeView == 'year' && this.depth == 'year') {
@@ -786,7 +823,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         if (!value || !this.calendarService.isValidDate(value)) {
             return null;
         }
-        const v = this.calendarService.convert(value, this.calendar());
+        const v = this.calendarService.convert(value, this.calendarSystem());
         if (this.isDisabled(v)) {
             return null;
         }
@@ -802,36 +839,26 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
      *  @ignore
      */
     internalValueChanged(value) {
-        const val = this.calendarService.create(value, this.calendar());
+        const val = this.calendarService.create(value, this.calendarSystem());
+        let viewChanged = false;
         if (!this._viewStartDate ||
             val.compare(this.displayRange?.startTime, this.activeView) == -1 ||
             val.compare(this.displayRange?.endTime, this.activeView) == 1) {
-            this._viewStartDate = this.calendarService.create(value, this.calendar());
+            this._viewStartDate = this.calendarService.create(value, this.calendarSystem());
             if (this.minValue && this._viewStartDate.isBefore(this.minValue)) {
-                this._viewStartDate = this.calendarService.create(this.minValue, this.calendar());
+                this._viewStartDate = this.calendarService.create(this.minValue, this.calendarSystem());
             }
+            viewChanged = true;
         }
         this._footPrint.year = val.year;
         this._footPrint.month = val.monthOfYear;
         this._footPrint.day = val.dayOfMonth;
-        if (isPlatformBrowser(this.platformID)) {
-            const calendarSlots = Array.from(this.getHostElement().querySelectorAll('.ax-calendar-slot'));
-            const selectedSlot = this.getHostElement().querySelector('.ax-state-selected');
-            if (selectedSlot) {
-                selectedSlot.classList.remove('ax-state-selected');
-            }
-            else {
-                this.render();
-            }
-            calendarSlots.forEach((element) => {
-                element = element;
-                if (element.textContent == this._footPrint.day) {
-                    element.classList.add('ax-state-selected');
-                }
-            });
-        }
-        const oldVal = this.oldValue() ? this.calendarService.create(this.oldValue(), this.calendar()) : null;
-        if (!oldVal || oldVal.monthOfYear !== val.monthOfYear || oldVal.year !== val.year) {
+        const oldVal = this.oldValue() ? this.calendarService.create(this.oldValue(), this.calendarSystem()) : null;
+        if (viewChanged ||
+            !oldVal ||
+            oldVal.monthOfYear !== val.monthOfYear ||
+            oldVal.year !== val.year ||
+            oldVal.dayOfMonth !== val.dayOfMonth) {
             this.render();
         }
         this.oldValue.set(value);
@@ -908,7 +935,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
      * @returns void
      */
     navTo(date) {
-        const val = this.calendarService.convert(date, this.calendar());
+        const val = this.calendarService.convert(date, this.calendarSystem());
         this._viewStartDate = val.startOf();
         this.render();
         //to make sure its rendred and displayRange is not null
@@ -943,7 +970,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     _setDate(value) {
         if (this.readonly || this.disabled)
             return;
-        this.commitValue(this.calendarService.convert(value, this.calendar()).startOf().date, true);
+        this.commitValue(this.calendarService.convert(value, this.calendarSystem()).startOf().date, true);
     }
     /**
      *  @ignore
@@ -987,7 +1014,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         if (this.weekend().length) {
             return this.weekend().includes(date.weekdayIndex);
         }
-        const weekend = this.calendarService.resolveCalendar(this.calendar()).weekend;
+        const weekend = this.calendarService.resolveCalendar(this.calendarSystem()).weekend;
         return weekend.includes(date.weekdayIndex);
     }
     /**
@@ -1001,7 +1028,8 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         };
         if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
             if (e.ctrlKey) {
-                e.code === 'ArrowRight' ? this.next() : this.prev();
+                const moveForward = this.isRtl() ? e.code === 'ArrowLeft' : e.code === 'ArrowRight';
+                moveForward ? this.next() : this.prev();
                 setTimeout(() => {
                     this.focus();
                 }, 50);
@@ -1022,10 +1050,36 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
      *  @ignore
      */
     getMonthName(date, style) {
-        return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
+        const system = this.calendarSystem();
+        const monthIndex = this.calendarService.create(date.date, system).monthOfYear - 1;
+        return this.monthLabel(system, monthIndex, style);
+    }
+    monthLabel(system, monthIndex0, style = 'short') {
+        const key = `dateTime.months.${system}.${style}.${monthIndex0}`;
+        const translated = this.translateService.translateSync(key);
+        if (translated && translated !== key && !translated.startsWith('dateTime.months.')) {
+            return translated;
+        }
+        return this.fallbackMonthName(system, monthIndex0, style);
+    }
+    fallbackMonthName(system, monthIndex0, style) {
+        try {
+            const locale = this.localeService.activeProfile().localeInfo.code;
+            const intlCalendar = system === 'solar-hijri' ? 'persian' : 'gregory';
+            const date = system === 'solar-hijri'
+                ? this.calendarService.create({ year: 1400, month: monthIndex0 + 1, day: 15 }, system).date
+                : new Date(2000, monthIndex0, 15);
+            return new Intl.DateTimeFormat(locale, {
+                month: style,
+                calendar: intlCalendar,
+            }).format(date);
+        }
+        catch {
+            return String(monthIndex0 + 1);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, yearRange: { classPropertyName: "yearRange", publicName: "yearRange", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, yearRange: { classPropertyName: "yearRange", publicName: "yearRange", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarComponent),
@@ -1037,11 +1091,11 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXCalendarComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for (v of views; let i = $index, first = $first, last = $last; track i) {\n    @switch (activeView) {\n      @case ('year') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }} -\n                {{ v.range.endTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon ax-next\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !yearCellTemplate }\">\n          @for (slot of v.slots; track slot.date.date.getTime()) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (yearCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"yearCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div>\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @case ('month') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !monthCellTemplate }\">\n          @for (slot of v.slots; track slot.date.date.getTime()) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (monthCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"monthCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'MMMM YYYY' } | async\">\n                  {{ `@acorex:${getMonthName(slot.date, 'short')}` | translate | async }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @default {\n        @if (showNavigation && look() === 'select' && last) {\n          <div class=\"ax-calendar-view-header ax-calendar-day-nav\">\n            <button\n              type=\"button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              [attr.readonly]=\"readonly ? '' : null\"\n              class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-prev\"\n              (click)=\"_handlePrevClick()\"\n              [title]=\"'@acorex:common.actions.prev' | translate | async\"\n            >\n              <i\n                class=\"ax-icon\"\n                [ngClass]=\"{\n                  'ax-icon-chevron-left': !isRtl(),\n                  'ax-icon-chevron-right': isRtl(),\n                }\"\n              ></i>\n            </button>\n            <div class=\"ax-calendar-day-nav-center\">\n              <ax-select-box\n                class=\"ax-calendar-month-select ax-sm\"\n                look=\"none\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [dataSource]=\"_monthOptions\"\n                textField=\"text\"\n                valueField=\"id\"\n                [ngModel]=\"_selectedMonthOption\"\n                [isItemTruncated]=\"false\"\n                dropdownWidth=\"110\"\n                [maxVisibleItems]=\"12\"\n                [itemHeight]=\"32\"\n                (onValueChanged)=\"_handleMonthSelectChanged($event)\"\n                (click)=\"$event.stopPropagation()\"\n              ></ax-select-box>\n              <ax-select-box\n                class=\"ax-calendar-year-select ax-sm\"\n                look=\"none\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [dataSource]=\"_yearOptions\"\n                textField=\"text\"\n                valueField=\"id\"\n                [ngModel]=\"_selectedYearOption\"\n                [isItemTruncated]=\"false\"\n                dropdownWidth=\"72\"\n                [maxVisibleItems]=\"10\"\n                [itemHeight]=\"32\"\n                (onValueChanged)=\"_handleYearSelectChanged($event)\"\n                (click)=\"$event.stopPropagation()\"\n              ></ax-select-box>\n            </div>\n            <button\n              type=\"button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              [attr.readonly]=\"readonly ? '' : null\"\n              class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-next\"\n              (click)=\"_handleNextClick()\"\n              [title]=\"'@acorex:common.actions.next' | translate | async\"\n            >\n              <i\n                class=\"ax-icon\"\n                [ngClass]=\"{\n                  'ax-icon-chevron-right': !isRtl(),\n                  'ax-icon-chevron-left': isRtl(),\n                }\"\n              ></i>\n            </button>\n          </div>\n        }\n        @if (showNavigation && look() === 'classic') {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'MMMM' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-week\">\n          @for (d of weekLayout(); track d) {\n            <div>{{ '@acorex:dateTime.weekdays.short.' + d | translate | async }}</div>\n          }\n        </div>\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !dayCellTemplate }\">\n          @for (slot of v.slots; track slot.date.date.getTime()) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              [class.ax-has-holiday-color]=\"!!slot.holidayColor\"\n              [style.--ax-calendar-holiday-color]=\"slot.holidayColor ?? null\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\n              [axTooltip]=\"slot.tooltip ?? ''\"\n              [axTooltipDisabled]=\"!slot.tooltip\"\n              [title]=\"\n                !slot.tooltip ? (slot.date | format: 'date' : { calendar: calendar(), format: 'long' } | async) : ''\n              \"\n            >\n              @if (dayCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"dayCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div class=\"ax-calendar-day-slot-content\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties;html[dir=rtl] ax-calendar .ax-calendar-header-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}@layer components{ax-calendar{display:block;width:100%;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar ax-popover{display:none}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:50%}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-inline:calc(var(--spacing, .25rem) * 1);padding-top:calc(var(--spacing, .25rem) * 1)}ax-calendar .ax-calendar-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex;align-items:center}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;align-items:center;justify-content:center}@media(min-width:48rem){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1}@media(min-width:48rem){ax-calendar .ax-calendar-body>div{width:calc(var(--spacing, .25rem) * 80)}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex;align-items:center}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:calc(var(--spacing, .25rem) * 1);padding:calc(var(--spacing, .25rem) * 4)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-holiday){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-color: color-mix(in oklab, rgba(var(--ax-sys-color-primary-surface)) 50%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: color-mix(in srgb, #000 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-color: color-mix(in oklab, var(--color-black, #000) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in srgb, #fff 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in oklab, var(--color-white, #fff) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:70%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:5%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{--tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-inset-ring-color: rgba(var(--ax-sys-color-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday:not(.ax-has-holiday-color){border-color:rgba(var(--ax-sys-color-danger-600))!important;--tw-inset-ring-color: rgba(var(--ax-sys-color-danger-600)) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color{border-color:var(--ax-calendar-holiday-color)!important;--tw-inset-ring-color: var(--ax-calendar-holiday-color) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color:not(.ax-state-selected){color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color){background-color:var(--color-danger)!important;color:var(--color-on-danger)!important;border-color:var(--color-border-danger)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-sys-color-danger-600))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color):hover:not(.ax-state-disabled,.ax-state-selected){background-color:var(--color-danger);color:var(--color-on-danger);border-color:var(--color-border-danger)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple{background-color:rgba(var(--ax-sys-color-on-danger-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-danger-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color{color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:hover:not(.ax-state-disabled){color:var(--ax-calendar-holiday-color)!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 14%,transparent)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){border-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-ripple{background-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-ripple{background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 30%,transparent)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-calendar-day-slot-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .75rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 1);grid-template-columns:auto 1fr auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-icon{font-size:.875rem}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-calendar-day-nav-prev{justify-self:start}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-calendar-day-nav-center{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-calendar-day-nav-next{justify-self:end}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select{display:inline-block;width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-icon{font-size:.75rem}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-editor-container{gap:0}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) ax-dropdown-box.ax-editor-container{width:auto;justify-content:flex-start}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container{width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset}ax-calendar .ax-calendar-footer{display:flex;align-items:center;justify-content:center;margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar .ax-calendar-footer .ax-today-button{display:block;width:100%;cursor:pointer;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1}.ax-overlay-pane ax-calendar{--tw-border-style: none;border-style:none}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-frame\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    @for (v of views; let i = $index, first = $first, last = $last; track i) {\n      @switch (activeView) {\n        @case ('year') {\n          @if (showNavigation) {\n            <div class=\"ax-calendar-view-header\" dir=\"ltr\">\n              <div class=\"ax-calendar-header-info\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                  (click)=\"_handleNavClick($event, 'year')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }} -\n                  {{ v.range.endTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }}\n                </button>\n              </div>\n              @if (last) {\n                <div class=\"ax-calendar-header-buttons\">\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon ax-next\"\n                    (click)=\"_handlePrevClick()\"\n                    [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n                  </button>\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                    (click)=\"_handleNextClick()\"\n                    [title]=\"'@acorex:common.actions.next' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !yearCellTemplate }\">\n            @for (slot of v.slots; track slot.date.date.getTime()) {\n              <button\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [class.ax-state-disabled]=\"disabled\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                @if (yearCellTemplate) {\n                  <div>\n                    <ng-container\n                      [ngTemplateOutlet]=\"yearCellTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                    >\n                    </ng-container>\n                  </div>\n                } @else {\n                  <div>\n                    {{ slot.text }}\n                  </div>\n                }\n              </button>\n            }\n          </div>\n        }\n        @case ('month') {\n          @if (showNavigation) {\n            <div class=\"ax-calendar-view-header\" dir=\"ltr\">\n              <div class=\"ax-calendar-header-info\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded\"\n                  (click)=\"_handleNavClick($event, 'year')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }}\n                </button>\n              </div>\n              @if (last) {\n                <div class=\"ax-calendar-header-buttons\">\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                    (click)=\"_handlePrevClick()\"\n                    [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n                  </button>\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                    (click)=\"_handleNextClick()\"\n                    [title]=\"'@acorex:common.actions.next' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !monthCellTemplate }\">\n            @for (slot of v.slots; track slot.date.date.getTime()) {\n              <button\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [class.ax-state-disabled]=\"disabled\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                @if (monthCellTemplate) {\n                  <div>\n                    <ng-container\n                      [ngTemplateOutlet]=\"monthCellTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                    >\n                    </ng-container>\n                  </div>\n                } @else {\n                  <div\n                    [title]=\"slot.date | format: 'date' : { calendar: calendarSystem(), format: 'MMMM YYYY' } | async\"\n                  >\n                    {{ getMonthName(slot.date, 'short') }}\n                  </div>\n                }\n              </button>\n            }\n          </div>\n        }\n        @default {\n          @if (showNavigation && look() === 'select' && last) {\n            <div class=\"ax-calendar-view-header ax-calendar-day-nav\" dir=\"ltr\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-prev\"\n                (click)=\"_handlePrevClick()\"\n                [title]=\"'@acorex:common.actions.prev' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <div class=\"ax-calendar-day-nav-center\">\n                <ax-select-box\n                  class=\"ax-calendar-month-select ax-sm\"\n                  look=\"none\"\n                  [disabled]=\"disabled\"\n                  [readonly]=\"readonly\"\n                  [dataSource]=\"_monthOptions\"\n                  textField=\"text\"\n                  valueField=\"id\"\n                  [ngModel]=\"_selectedMonthOption\"\n                  [isItemTruncated]=\"false\"\n                  dropdownWidth=\"50\"\n                  [maxVisibleItems]=\"12\"\n                  [itemHeight]=\"32\"\n                  (onValueChanged)=\"_handleMonthSelectChanged($event)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></ax-select-box>\n                <ax-select-box\n                  class=\"ax-calendar-year-select ax-sm\"\n                  look=\"none\"\n                  [disabled]=\"disabled\"\n                  [readonly]=\"readonly\"\n                  [dataSource]=\"_yearOptions\"\n                  textField=\"text\"\n                  valueField=\"id\"\n                  [ngModel]=\"_selectedYearOption\"\n                  [isItemTruncated]=\"false\"\n                  dropdownWidth=\"40\"\n                  [maxVisibleItems]=\"10\"\n                  [itemHeight]=\"32\"\n                  (onValueChanged)=\"_handleYearSelectChanged($event)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></ax-select-box>\n              </div>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-next\"\n                (click)=\"_handleNextClick()\"\n                [title]=\"'@acorex:common.actions.next' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          }\n          @if (showNavigation && look() === 'classic' && last) {\n            <div class=\"ax-calendar-view-header ax-calendar-day-nav\" dir=\"ltr\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-prev\"\n                (click)=\"_handlePrevClick()\"\n                [title]=\"'@acorex:common.actions.prev' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <div class=\"ax-calendar-header-info ax-calendar-day-nav-center\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded\"\n                  (click)=\"_handleNavClick($event, 'year')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }}\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded\"\n                  (click)=\"_handleNavClick($event, 'month')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'MMMM' } | async }}\n                </button>\n              </div>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-next\"\n                (click)=\"_handleNextClick()\"\n                [title]=\"'@acorex:common.actions.next' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          }\n          <div class=\"ax-calendar-week\">\n            @for (d of weekLayout(); track d) {\n              <div>{{ weekdayLabel(d) }}</div>\n            }\n          </div>\n\n          <div\n            class=\"ax-calendar-slots ax-calendar-slots-day\"\n            [ngClass]=\"{ 'ax-default': !dayCellTemplate }\"\n            [style.--ax-calendar-day-rows]=\"v.weekCount ?? 5\"\n          >\n            @for (slot of v.slots; track slot.date.date.getTime()) {\n              <button\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                [class.ax-state-disabled]=\"disabled\"\n                [class.ax-has-holiday-color]=\"!!slot.holidayColor\"\n                [style.--ax-calendar-holiday-color]=\"slot.holidayColor ?? null\"\n                (click)=\"_handleSlotClick($event, slot)\"\n                [disabled]=\"disabled\"\n                [axRipple]\n                [axTooltip]=\"slot.tooltip ?? ''\"\n                [axTooltipDisabled]=\"!slot.tooltip\"\n                [title]=\"\n                  !slot.tooltip\n                    ? (slot.date | format: 'date' : { calendar: calendarSystem(), format: 'long' } | async)\n                    : ''\n                \"\n              >\n                @if (dayCellTemplate) {\n                  <div>\n                    <ng-container\n                      [ngTemplateOutlet]=\"dayCellTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                    >\n                    </ng-container>\n                  </div>\n                } @else {\n                  <div class=\"ax-calendar-day-slot-content\">\n                    {{ slot.text }}\n                  </div>\n                }\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n", styles: ["@layer properties;@layer components{ax-calendar{margin-inline:auto;display:block;width:100%;max-width:100%}@media(min-width:48rem){ax-calendar{width:calc(var(--spacing, .25rem) * 65)}}ax-calendar .ax-calendar-nav-arrow-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-calendar .ax-calendar-nav-arrow-icon{transform:none}ax-calendar .ax-calendar-frame{box-sizing:border-box;width:100%;overflow:hidden;border-radius:14px;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 2)}ax-calendar .ax-calendar-frame>ax-header{flex-shrink:0}ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer{margin-inline:calc(var(--spacing, .25rem) * -2);box-sizing:border-box;display:flex;width:calc(100% + 1rem);flex-shrink:0;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-top:calc(var(--spacing, .25rem) * 2);margin-top:var(--ax-comp-calendar-footer-margin-t)}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button{display:block;width:100%;cursor:pointer;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button.ax-state-disabled{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface));opacity:var(--ax-comp-calendar-slot-disabled-opacity);background-color:transparent}@supports (color: color-mix(in lab,red,red)){:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button.ax-state-disabled{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:is(:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:is(:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:focus,:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}ax-calendar ax-popover{display:none}ax-calendar.ax-state-disabled{cursor:not-allowed}ax-calendar.ax-state-disabled .ax-calendar-header,ax-calendar.ax-state-disabled .ax-calendar-view-header,ax-calendar.ax-state-disabled .ax-calendar-week{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar.ax-state-disabled .ax-calendar-header,ax-calendar.ax-state-disabled .ax-calendar-view-header,ax-calendar.ax-state-disabled .ax-calendar-week{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed}ax-calendar.ax-state-disabled ax-select-box.ax-calendar-month-select,ax-calendar.ax-state-disabled ax-select-box.ax-calendar-year-select{pointer-events:none;cursor:not-allowed;opacity:40%}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-inline:calc(var(--spacing, .25rem) * 1);padding-top:calc(var(--spacing, .25rem) * 1)}ax-calendar .ax-calendar-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex;align-items:center;direction:ltr}ax-calendar .ax-calendar-body{display:flex;width:100%;flex-direction:column;align-items:stretch;justify-content:center}ax-calendar .ax-calendar-body>div{width:100%}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:calc(var(--spacing, .25rem) * 4)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex;align-items:center;direction:ltr}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 2)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-color: rgba(var(--ax-sys-color-light-surface));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-color: color-mix(in oklab, rgba(var(--ax-sys-color-light-surface)) 50%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-color: color-mix(in srgb, #000 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-color: color-mix(in oklab, var(--color-black, #000) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in srgb, #fff 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in oklab, var(--color-white, #fff) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface));opacity:1;background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:hover,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:focus-visible{color:rgba(var(--ax-sys-color-on-darkest-surface));background-color:transparent!important;border-color:transparent!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:hover,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:focus-visible{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-today,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday.ax-has-holiday-color{color:rgba(var(--ax-sys-color-on-darkest-surface));background-color:transparent!important;border-color:transparent!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-today,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday.ax-has-holiday-color{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:70%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:50%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-state-today{opacity:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-sys-color-light-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-light-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday:not(.ax-has-holiday-color){border-color:rgba(var(--ax-sys-color-light-surface))!important;--tw-inset-ring-color: rgba(var(--ax-sys-color-secondary-600)) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color{border-color:var(--ax-calendar-holiday-color)!important;--tw-inset-ring-color: var(--ax-calendar-holiday-color) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color:not(.ax-state-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-secondary-50))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-secondary-50))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-sys-color-danger-600))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-on-danger-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-danger-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:hover:not(.ax-state-disabled):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--ax-calendar-holiday-color)!important}.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color):hover:not(.ax-state-disabled){background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color):hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 14%,transparent)!important}}.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color) .ax-ripple{background-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color) .ax-ripple{background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 30%,transparent)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){border-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-calendar-day-slot-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{column-gap:calc(var(--spacing, .25rem) * 0);row-gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--ax-calendar-day-rows, 5),minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .5rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 1);grid-template-columns:auto 1fr auto;direction:ltr}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-icon{font-size:.875rem}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-calendar-day-nav-prev{justify-self:start}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-calendar-day-nav-center{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-calendar-day-nav-next{justify-self:end}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select{display:inline-block;height:calc(var(--spacing, .25rem) * 5);width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-light-surface))}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-icon{font-size:.75rem}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-editor-container{gap:0}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) ax-dropdown-box.ax-editor-container{width:auto;justify-content:flex-start}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container{width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset}}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-calendar{margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%}.ax-calendar-picker ax-calendar .ax-calendar-frame{width:100%}.ax-calendar-picker ax-picker{flex:1}ax-datetime-picker ax-calendar{margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%}ax-datetime-picker ax-calendar .ax-calendar-frame{width:100%}.ax-overlay-pane ax-calendar{margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%}.ax-overlay-pane ax-calendar .ax-calendar-frame{width:100%;border-radius:0;--tw-border-style: none;border-style:none;padding:calc(var(--spacing, .25rem) * 0);background:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXDateTimeModule }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, inputs: [
+            args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                         'rtl',
                         'readonly',
                         'value',
@@ -1101,7 +1155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXSelectBoxComponent,
                         FormsModule,
                         AXTooltipDirective,
-                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for (v of views; let i = $index, first = $first, last = $last; track i) {\n    @switch (activeView) {\n      @case ('year') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }} -\n                {{ v.range.endTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon ax-next\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !yearCellTemplate }\">\n          @for (slot of v.slots; track slot.date.date.getTime()) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (yearCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"yearCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div>\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @case ('month') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !monthCellTemplate }\">\n          @for (slot of v.slots; track slot.date.date.getTime()) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (monthCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"monthCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'MMMM YYYY' } | async\">\n                  {{ `@acorex:${getMonthName(slot.date, 'short')}` | translate | async }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @default {\n        @if (showNavigation && look() === 'select' && last) {\n          <div class=\"ax-calendar-view-header ax-calendar-day-nav\">\n            <button\n              type=\"button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              [attr.readonly]=\"readonly ? '' : null\"\n              class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-prev\"\n              (click)=\"_handlePrevClick()\"\n              [title]=\"'@acorex:common.actions.prev' | translate | async\"\n            >\n              <i\n                class=\"ax-icon\"\n                [ngClass]=\"{\n                  'ax-icon-chevron-left': !isRtl(),\n                  'ax-icon-chevron-right': isRtl(),\n                }\"\n              ></i>\n            </button>\n            <div class=\"ax-calendar-day-nav-center\">\n              <ax-select-box\n                class=\"ax-calendar-month-select ax-sm\"\n                look=\"none\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [dataSource]=\"_monthOptions\"\n                textField=\"text\"\n                valueField=\"id\"\n                [ngModel]=\"_selectedMonthOption\"\n                [isItemTruncated]=\"false\"\n                dropdownWidth=\"110\"\n                [maxVisibleItems]=\"12\"\n                [itemHeight]=\"32\"\n                (onValueChanged)=\"_handleMonthSelectChanged($event)\"\n                (click)=\"$event.stopPropagation()\"\n              ></ax-select-box>\n              <ax-select-box\n                class=\"ax-calendar-year-select ax-sm\"\n                look=\"none\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [dataSource]=\"_yearOptions\"\n                textField=\"text\"\n                valueField=\"id\"\n                [ngModel]=\"_selectedYearOption\"\n                [isItemTruncated]=\"false\"\n                dropdownWidth=\"72\"\n                [maxVisibleItems]=\"10\"\n                [itemHeight]=\"32\"\n                (onValueChanged)=\"_handleYearSelectChanged($event)\"\n                (click)=\"$event.stopPropagation()\"\n              ></ax-select-box>\n            </div>\n            <button\n              type=\"button\"\n              [attr.disabled]=\"disabled ? '' : null\"\n              [attr.readonly]=\"readonly ? '' : null\"\n              class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-next\"\n              (click)=\"_handleNextClick()\"\n              [title]=\"'@acorex:common.actions.next' | translate | async\"\n            >\n              <i\n                class=\"ax-icon\"\n                [ngClass]=\"{\n                  'ax-icon-chevron-right': !isRtl(),\n                  'ax-icon-chevron-left': isRtl(),\n                }\"\n              ></i>\n            </button>\n          </div>\n        }\n        @if (showNavigation && look() === 'classic') {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'MMMM' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-week\">\n          @for (d of weekLayout(); track d) {\n            <div>{{ '@acorex:dateTime.weekdays.short.' + d | translate | async }}</div>\n          }\n        </div>\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !dayCellTemplate }\">\n          @for (slot of v.slots; track slot.date.date.getTime()) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              [class.ax-has-holiday-color]=\"!!slot.holidayColor\"\n              [style.--ax-calendar-holiday-color]=\"slot.holidayColor ?? null\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\n              [axTooltip]=\"slot.tooltip ?? ''\"\n              [axTooltipDisabled]=\"!slot.tooltip\"\n              [title]=\"\n                !slot.tooltip ? (slot.date | format: 'date' : { calendar: calendar(), format: 'long' } | async) : ''\n              \"\n            >\n              @if (dayCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"dayCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div class=\"ax-calendar-day-slot-content\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties;html[dir=rtl] ax-calendar .ax-calendar-header-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}@layer components{ax-calendar{display:block;width:100%;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar ax-popover{display:none}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:50%}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-inline:calc(var(--spacing, .25rem) * 1);padding-top:calc(var(--spacing, .25rem) * 1)}ax-calendar .ax-calendar-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex;align-items:center}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;align-items:center;justify-content:center}@media(min-width:48rem){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1}@media(min-width:48rem){ax-calendar .ax-calendar-body>div{width:calc(var(--spacing, .25rem) * 80)}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex;align-items:center}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:calc(var(--spacing, .25rem) * 1);padding:calc(var(--spacing, .25rem) * 4)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-sys-border-radius);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-holiday){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-on-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: rgba(var(--ax-sys-color-primary-surface));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-color: color-mix(in oklab, rgba(var(--ax-sys-color-primary-surface)) 50%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: color-mix(in srgb, #000 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-color: color-mix(in oklab, var(--color-black, #000) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in srgb, #fff 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in oklab, var(--color-white, #fff) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:70%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:5%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{--tw-inset-ring-shadow: inset 0 0 0 2px var(--tw-inset-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-inset-ring-color: rgba(var(--ax-sys-color-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday:not(.ax-has-holiday-color){border-color:rgba(var(--ax-sys-color-danger-600))!important;--tw-inset-ring-color: rgba(var(--ax-sys-color-danger-600)) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color{border-color:var(--ax-calendar-holiday-color)!important;--tw-inset-ring-color: var(--ax-calendar-holiday-color) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color:not(.ax-state-selected){color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color){background-color:var(--color-danger)!important;color:var(--color-on-danger)!important;border-color:var(--color-border-danger)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-sys-color-danger-600))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color):hover:not(.ax-state-disabled,.ax-state-selected){background-color:var(--color-danger);color:var(--color-on-danger);border-color:var(--color-border-danger)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple{background-color:rgba(var(--ax-sys-color-on-danger-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-danger-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color{color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:hover:not(.ax-state-disabled){color:var(--ax-calendar-holiday-color)!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 14%,transparent)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){border-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-ripple{background-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-ripple{background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 30%,transparent)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-calendar-day-slot-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .75rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 1);grid-template-columns:auto 1fr auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-icon{font-size:.875rem}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-calendar-day-nav-prev{justify-self:start}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-calendar-day-nav-center{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav .ax-calendar-day-nav-next{justify-self:end}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select{display:inline-block;width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-icon{font-size:.75rem}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-editor-container{gap:0}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) ax-dropdown-box.ax-editor-container{width:auto;justify-content:flex-start}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container{width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset}ax-calendar .ax-calendar-footer{display:flex;align-items:center;justify-content:center;margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar .ax-calendar-footer .ax-today-button{display:block;width:100%;cursor:pointer;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1}.ax-overlay-pane ax-calendar{--tw-border-style: none;border-style:none}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div class=\"ax-calendar-frame\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    @for (v of views; let i = $index, first = $first, last = $last; track i) {\n      @switch (activeView) {\n        @case ('year') {\n          @if (showNavigation) {\n            <div class=\"ax-calendar-view-header\" dir=\"ltr\">\n              <div class=\"ax-calendar-header-info\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                  (click)=\"_handleNavClick($event, 'year')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }} -\n                  {{ v.range.endTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }}\n                </button>\n              </div>\n              @if (last) {\n                <div class=\"ax-calendar-header-buttons\">\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon ax-next\"\n                    (click)=\"_handlePrevClick()\"\n                    [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n                  </button>\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                    (click)=\"_handleNextClick()\"\n                    [title]=\"'@acorex:common.actions.next' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !yearCellTemplate }\">\n            @for (slot of v.slots; track slot.date.date.getTime()) {\n              <button\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [class.ax-state-disabled]=\"disabled\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                @if (yearCellTemplate) {\n                  <div>\n                    <ng-container\n                      [ngTemplateOutlet]=\"yearCellTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                    >\n                    </ng-container>\n                  </div>\n                } @else {\n                  <div>\n                    {{ slot.text }}\n                  </div>\n                }\n              </button>\n            }\n          </div>\n        }\n        @case ('month') {\n          @if (showNavigation) {\n            <div class=\"ax-calendar-view-header\" dir=\"ltr\">\n              <div class=\"ax-calendar-header-info\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded\"\n                  (click)=\"_handleNavClick($event, 'year')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }}\n                </button>\n              </div>\n              @if (last) {\n                <div class=\"ax-calendar-header-buttons\">\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                    (click)=\"_handlePrevClick()\"\n                    [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n                  </button>\n                  <button\n                    type=\"button\"\n                    [attr.disabled]=\"disabled ? '' : null\"\n                    [attr.readonly]=\"readonly ? '' : null\"\n                    class=\"ax-general-button-icon ax-button-rounded ax-button-icon\"\n                    (click)=\"_handleNextClick()\"\n                    [title]=\"'@acorex:common.actions.next' | translate | async\"\n                  >\n                    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          }\n\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !monthCellTemplate }\">\n            @for (slot of v.slots; track slot.date.date.getTime()) {\n              <button\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [class.ax-state-disabled]=\"disabled\"\n                [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\"\n              >\n                @if (monthCellTemplate) {\n                  <div>\n                    <ng-container\n                      [ngTemplateOutlet]=\"monthCellTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                    >\n                    </ng-container>\n                  </div>\n                } @else {\n                  <div\n                    [title]=\"slot.date | format: 'date' : { calendar: calendarSystem(), format: 'MMMM YYYY' } | async\"\n                  >\n                    {{ getMonthName(slot.date, 'short') }}\n                  </div>\n                }\n              </button>\n            }\n          </div>\n        }\n        @default {\n          @if (showNavigation && look() === 'select' && last) {\n            <div class=\"ax-calendar-view-header ax-calendar-day-nav\" dir=\"ltr\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-prev\"\n                (click)=\"_handlePrevClick()\"\n                [title]=\"'@acorex:common.actions.prev' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <div class=\"ax-calendar-day-nav-center\">\n                <ax-select-box\n                  class=\"ax-calendar-month-select ax-sm\"\n                  look=\"none\"\n                  [disabled]=\"disabled\"\n                  [readonly]=\"readonly\"\n                  [dataSource]=\"_monthOptions\"\n                  textField=\"text\"\n                  valueField=\"id\"\n                  [ngModel]=\"_selectedMonthOption\"\n                  [isItemTruncated]=\"false\"\n                  dropdownWidth=\"50\"\n                  [maxVisibleItems]=\"12\"\n                  [itemHeight]=\"32\"\n                  (onValueChanged)=\"_handleMonthSelectChanged($event)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></ax-select-box>\n                <ax-select-box\n                  class=\"ax-calendar-year-select ax-sm\"\n                  look=\"none\"\n                  [disabled]=\"disabled\"\n                  [readonly]=\"readonly\"\n                  [dataSource]=\"_yearOptions\"\n                  textField=\"text\"\n                  valueField=\"id\"\n                  [ngModel]=\"_selectedYearOption\"\n                  [isItemTruncated]=\"false\"\n                  dropdownWidth=\"40\"\n                  [maxVisibleItems]=\"10\"\n                  [itemHeight]=\"32\"\n                  (onValueChanged)=\"_handleYearSelectChanged($event)\"\n                  (click)=\"$event.stopPropagation()\"\n                ></ax-select-box>\n              </div>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-next\"\n                (click)=\"_handleNextClick()\"\n                [title]=\"'@acorex:common.actions.next' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          }\n          @if (showNavigation && look() === 'classic' && last) {\n            <div class=\"ax-calendar-view-header ax-calendar-day-nav\" dir=\"ltr\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-prev\"\n                (click)=\"_handlePrevClick()\"\n                [title]=\"'@acorex:common.actions.prev' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n              </button>\n              <div class=\"ax-calendar-header-info ax-calendar-day-nav-center\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded\"\n                  (click)=\"_handleNavClick($event, 'year')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'YYYY' } | async }}\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded\"\n                  (click)=\"_handleNavClick($event, 'month')\"\n                >\n                  {{ v.range.startTime | format: 'date' : { calendar: calendarSystem(), format: 'MMMM' } | async }}\n                </button>\n              </div>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-button-icon ax-calendar-day-nav-next\"\n                (click)=\"_handleNextClick()\"\n                [title]=\"'@acorex:common.actions.next' | translate | async\"\n              >\n                <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n              </button>\n            </div>\n          }\n          <div class=\"ax-calendar-week\">\n            @for (d of weekLayout(); track d) {\n              <div>{{ weekdayLabel(d) }}</div>\n            }\n          </div>\n\n          <div\n            class=\"ax-calendar-slots ax-calendar-slots-day\"\n            [ngClass]=\"{ 'ax-default': !dayCellTemplate }\"\n            [style.--ax-calendar-day-rows]=\"v.weekCount ?? 5\"\n          >\n            @for (slot of v.slots; track slot.date.date.getTime()) {\n              <button\n                tabindex=\"0\"\n                class=\"ax-calendar-slot\"\n                [ngClass]=\"slot.cssClass\"\n                [class.ax-state-disabled]=\"disabled\"\n                [class.ax-has-holiday-color]=\"!!slot.holidayColor\"\n                [style.--ax-calendar-holiday-color]=\"slot.holidayColor ?? null\"\n                (click)=\"_handleSlotClick($event, slot)\"\n                [disabled]=\"disabled\"\n                [axRipple]\n                [axTooltip]=\"slot.tooltip ?? ''\"\n                [axTooltipDisabled]=\"!slot.tooltip\"\n                [title]=\"\n                  !slot.tooltip\n                    ? (slot.date | format: 'date' : { calendar: calendarSystem(), format: 'long' } | async)\n                    : ''\n                \"\n              >\n                @if (dayCellTemplate) {\n                  <div>\n                    <ng-container\n                      [ngTemplateOutlet]=\"dayCellTemplate\"\n                      [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                    >\n                    </ng-container>\n                  </div>\n                } @else {\n                  <div class=\"ax-calendar-day-slot-content\">\n                    {{ slot.text }}\n                  </div>\n                }\n              </button>\n            }\n          </div>\n        }\n      }\n    }\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n", styles: ["@layer properties;@layer components{ax-calendar{margin-inline:auto;display:block;width:100%;max-width:100%}@media(min-width:48rem){ax-calendar{width:calc(var(--spacing, .25rem) * 65)}}ax-calendar .ax-calendar-nav-arrow-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-calendar .ax-calendar-nav-arrow-icon{transform:none}ax-calendar .ax-calendar-frame{box-sizing:border-box;width:100%;overflow:hidden;border-radius:14px;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding:calc(var(--spacing, .25rem) * 2)}ax-calendar .ax-calendar-frame>ax-header{flex-shrink:0}ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer{margin-inline:calc(var(--spacing, .25rem) * -2);box-sizing:border-box;display:flex;width:calc(100% + 1rem);flex-shrink:0;align-items:center;justify-content:center;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-top:calc(var(--spacing, .25rem) * 2);margin-top:var(--ax-comp-calendar-footer-margin-t)}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button{display:block;width:100%;cursor:pointer;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button.ax-state-disabled{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface));opacity:var(--ax-comp-calendar-slot-disabled-opacity);background-color:transparent}@supports (color: color-mix(in lab,red,red)){:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button.ax-state-disabled{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:is(:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:is(:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:focus,:is(ax-calendar .ax-calendar-frame>ax-footer,ax-calendar .ax-calendar-frame .ax-calendar-footer) .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}ax-calendar ax-popover{display:none}ax-calendar.ax-state-disabled{cursor:not-allowed}ax-calendar.ax-state-disabled .ax-calendar-header,ax-calendar.ax-state-disabled .ax-calendar-view-header,ax-calendar.ax-state-disabled .ax-calendar-week{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar.ax-state-disabled .ax-calendar-header,ax-calendar.ax-state-disabled .ax-calendar-view-header,ax-calendar.ax-state-disabled .ax-calendar-week{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed}ax-calendar.ax-state-disabled ax-select-box.ax-calendar-month-select,ax-calendar.ax-state-disabled ax-select-box.ax-calendar-year-select{pointer-events:none;cursor:not-allowed;opacity:40%}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-inline:calc(var(--spacing, .25rem) * 1);padding-top:calc(var(--spacing, .25rem) * 1)}ax-calendar .ax-calendar-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex;align-items:center;direction:ltr}ax-calendar .ax-calendar-body{display:flex;width:100%;flex-direction:column;align-items:stretch;justify-content:center}ax-calendar .ax-calendar-body>div{width:100%}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:calc(var(--spacing, .25rem) * 4)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex;align-items:center;direction:ltr}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 2)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-color: rgba(var(--ax-sys-color-light-surface));--tw-outline-style: none;outline-style:none}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){--tw-ring-color: color-mix(in oklab, rgba(var(--ax-sys-color-light-surface)) 50%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-color: color-mix(in srgb, #000 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{--tw-ring-color: color-mix(in oklab, var(--color-black, #000) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in srgb, #fff 30%, transparent)}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){--tw-ring-color: color-mix(in oklab, var(--color-white, #fff) 30%, transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface));opacity:1;background-color:transparent!important;border-color:transparent!important;box-shadow:none!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:hover,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:focus-visible{color:rgba(var(--ax-sys-color-on-darkest-surface));background-color:transparent!important;border-color:transparent!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:hover,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled:focus-visible{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-today,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday.ax-has-holiday-color{color:rgba(var(--ax-sys-color-on-darkest-surface));background-color:transparent!important;border-color:transparent!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-today,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled.ax-state-holiday.ax-has-holiday-color{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:70%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:50%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-state-today{opacity:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-sys-color-light-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-light-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday:not(.ax-has-holiday-color){border-color:rgba(var(--ax-sys-color-light-surface))!important;--tw-inset-ring-color: rgba(var(--ax-sys-color-secondary-600)) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color{border-color:var(--ax-calendar-holiday-color)!important;--tw-inset-ring-color: var(--ax-calendar-holiday-color) !important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday.ax-has-holiday-color:not(.ax-state-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-secondary-50))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color){background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-secondary-50))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-sys-color-danger-600))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-on-danger-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color) .ax-ripple:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-danger-surface)) 30%,transparent)}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:hover:not(.ax-state-disabled):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--ax-calendar-holiday-color)!important}.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color):hover:not(.ax-state-disabled){background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color):hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 14%,transparent)!important}}.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color) .ax-ripple{background-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){.ax-dark :is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color) .ax-ripple{background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 30%,transparent)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:var(--ax-calendar-holiday-color)!important;border-color:var(--ax-calendar-holiday-color)!important}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){background-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}@supports (color: color-mix(in lab,red,red)){ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-state-selected:hover:not(.ax-state-disabled){border-color:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important}}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color .ax-calendar-day-slot-content{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{column-gap:calc(var(--spacing, .25rem) * 0);row-gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(var(--ax-calendar-day-rows, 5),minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .5rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav{display:grid;align-items:center;gap:calc(var(--spacing, .25rem) * 1);grid-template-columns:auto 1fr auto;direction:ltr}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-icon{font-size:.875rem}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-calendar-day-nav-prev{justify-self:start}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-calendar-day-nav-center{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1)}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav,ax-calendar.ax-look-classic .ax-calendar-view-header.ax-calendar-day-nav) .ax-calendar-day-nav-next{justify-self:end}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select{display:inline-block;height:calc(var(--spacing, .25rem) * 5);width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-light-surface))}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-icon{font-size:.75rem}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-editor-container{gap:0}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) ax-dropdown-box.ax-editor-container{width:auto;justify-content:flex-start}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container{width:auto;flex-shrink:0;flex-grow:0;flex-basis:auto}:is(ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select) .ax-chips-container .ax-chips{overflow:visible;text-overflow:unset}}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-calendar{margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%}.ax-calendar-picker ax-calendar .ax-calendar-frame{width:100%}.ax-calendar-picker ax-picker{flex:1}ax-datetime-picker ax-calendar{margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%}ax-datetime-picker ax-calendar .ax-calendar-frame{width:100%}.ax-overlay-pane ax-calendar{margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%}.ax-overlay-pane ax-calendar .ax-calendar-frame{width:100%;border-radius:0;--tw-border-style: none;border-style:none;padding:calc(var(--spacing, .25rem) * 0);background:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], yearRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearRange", required: false }] }], holidays: [{ type: i0.Input, args: [{ isSignal: true, alias: "holidays", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1116,7 +1170,6 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
      */
     constructor() {
         super();
-        this.formatService = inject(AXFormatService);
         this.unsubscriber = inject(AXUnsubscriber);
         this.calendar = linkedSignal(() => this.localeService.activeProfile().calendar.system, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []));
@@ -1134,53 +1187,130 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
          *  @ignore
          */
         this._calendarService = inject(AXCalendarService);
-        this._navText = '';
+        this._navText1 = '';
+        this._navText2 = '';
         /**
          *  @ignore
          */
         this._navUserInteraction = false;
-        /** w
+        /**
          *  @ignore
          */
         this.getCellClass = (date) => {
-            //const d = this._calendarService.create(date, this.type);
-            // check from value
             if (!this._calendarService.isValidDate(this.value.from)) {
                 return null;
             }
-            const from = this._calendarService.create(this.value.from, this.type);
-            if (this.value.from && date.equal(from, 'day')) {
-                return 'ax-range-start';
+            const calendar = this.calendar();
+            const from = this._calendarService.create(this.value.from, calendar).startOf('day');
+            const hasEnd = this._calendarService.isValidDate(this.value.end);
+            const end = hasEnd ? this._calendarService.create(this.value.end, calendar).startOf('day') : null;
+            const dateDay = date.startOf('day');
+            const dateMs = dateDay.date.getTime();
+            const fromMs = from.date.getTime();
+            const endMs = end?.date.getTime();
+            let rangeClass = null;
+            if (dateMs === fromMs) {
+                rangeClass = 'ax-range-start';
             }
-            // check end value
-            if (!this._calendarService.isValidDate(this.value.end)) {
+            else if (endMs != null && dateMs === endMs) {
+                rangeClass = 'ax-range-end';
+            }
+            else if (endMs != null && dateMs > fromMs && dateMs < endMs) {
+                rangeClass = 'ax-range-between';
+            }
+            if (!rangeClass) {
                 return null;
             }
-            const end = this._calendarService.create(this.value.end, this.type);
-            if (this.value.end && date.equal(end, 'day'))
-                return 'ax-range-end';
-            if (this.value.from && this.value.end && date.compare(from, 'day') > 0 && date.compare(end, 'day') < 0)
-                return 'ax-range-between';
-            return null;
+            if (!hasEnd || !end) {
+                return rangeClass;
+            }
+            const weekStart = this.localeService.activeProfile().calendar.week.startsOn;
+            const weekEnd = (weekStart + 6) % 7;
+            const classes = [rangeClass];
+            if (rangeClass !== 'ax-range-start' && date.weekdayIndex !== weekStart) {
+                classes.push('ax-range-continue-start');
+            }
+            if (rangeClass !== 'ax-range-end') {
+                const nextDay = date.add('day', 1);
+                const continuesToNextDay = date.weekdayIndex !== weekEnd && nextDay.compare(from, 'day') >= 0 && nextDay.compare(end, 'day') <= 0;
+                if (continuesToNextDay) {
+                    classes.push('ax-range-continue-end');
+                }
+            }
+            return classes.join(' ');
         };
         this.defaultValue = { from: null, end: null };
         this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
             this._refreshCalendars();
         });
+        let previousCalendar = this.localeService.activeProfile().calendar.system;
         this.localeService.profileChanged$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
+            const nextCalendar = this.localeService.activeProfile().calendar.system;
+            if (previousCalendar !== nextCalendar &&
+                (this._calendarService.isValidDate(this.value?.from) || this._calendarService.isValidDate(this.value?.end))) {
+                this.commitValue({ from: null, end: null });
+            }
+            previousCalendar = nextCalendar;
             this._refreshCalendars();
         });
         this.typeChange.pipe(this.unsubscriber.takeUntilDestroy).subscribe((value) => {
             this.calendar.set(value);
             this._refreshCalendars();
         });
+        this.translateService.langChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
+            this._scheduleNavTextSync();
+        });
     }
     /**
      *  @ignore
      */
     _refreshCalendars() {
-        this._c1?.render();
-        this._c2?.render();
+        // Defer until embedded calendars finish their own locale/calendar refresh microtasks.
+        queueMicrotask(() => {
+            queueMicrotask(() => {
+                this._ensureCalendarsReady();
+                this._syncNav1();
+                this.cdr.markForCheck();
+            });
+        });
+    }
+    /**
+     *  @ignore
+     */
+    _scheduleNavTextSync() {
+        queueMicrotask(() => {
+            this._syncNavText();
+            this.cdr.markForCheck();
+        });
+    }
+    /**
+     *  @ignore
+     */
+    _ensureCalendarsReady() {
+        const today = this._calendarService.now(this.calendar());
+        if (!this._c1?.displayRange) {
+            this._c1?.navTo(today);
+        }
+        else {
+            this._c1?.render();
+        }
+        if (!this._c2?.displayRange) {
+            const range = this._c1?.displayRange;
+            if (!range) {
+                return;
+            }
+            const monthStart = range.startTime.startOf('month');
+            const view = this._c1.activeView;
+            if (view === 'day') {
+                this._c2?.navTo(monthStart.add('month', 1));
+            }
+            else if (view === 'month') {
+                this._c2?.navTo(monthStart.add('year', 1));
+            }
+            else if (view === 'year') {
+                this._c2?.navTo(range.endTime.add('year', 4));
+            }
+        }
     }
     /**
      *  @ignore
@@ -1195,11 +1325,14 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
      *  @ignore
      */
     ngAfterViewInit() {
-        this._syncNav1();
+        queueMicrotask(() => {
+            this._c1?.render();
+            this._syncNav1();
+        });
     }
     internalValueChanged(value) {
         this._c1.render();
-        this._c2.render();
+        this._syncNav1();
     }
     /**
      *  @ignore
@@ -1211,27 +1344,38 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             isUserInteraction: true,
             nativeEvent: e,
         });
-        if (this._c1.activeView == this.depth) {
-            if (!this.value.from || (this.value.from && this.value.end)) {
-                this.commitValue({ from: e.item, end: null }, true);
-            }
-            if (this.value.from && e.item <= this.value.from) {
-                this.commitValue({ from: e.item, end: this.value.end }, true);
+        if (this._c1.activeView !== this.depth) {
+            if (e.component === this._c1) {
+                this._syncNav1();
             }
-            else if (this.value.from && !this.value.end) {
-                this.commitValue({ from: this.value.from, end: e.item }, true);
+            if (e.component === this._c2) {
+                this._syncNav2(this._calendarService.create(e.item, this.calendar()));
             }
+            this._c1.render();
+            this._syncNav1();
+            return;
+        }
+        const calendar = this.calendar();
+        const clicked = this._calendarService.create(e.item, calendar).startOf('day');
+        const hasFrom = this._calendarService.isValidDate(this.value?.from);
+        const hasEnd = this._calendarService.isValidDate(this.value?.end);
+        let next;
+        if (!hasFrom || hasEnd) {
+            next = { from: clicked.date, end: null };
         }
         else {
-            if (e.component == this._c1) {
-                this._syncNav1();
+            const fromDate = this._calendarService.create(this.value.from, calendar).startOf('day');
+            const dayCompare = clicked.compare(fromDate, 'day');
+            if (dayCompare < 0) {
+                next = { from: clicked.date, end: null };
             }
-            if (e.component == this._c2) {
-                this._syncNav2(this._calendarService.create(e.item, this.type));
+            else {
+                next = { from: fromDate.date, end: clicked.date };
             }
         }
+        this.commitValue(next, true);
         this._c1.render();
-        this._c2.render();
+        this._syncNav1();
     }
     /**
      *  @ignore
@@ -1246,6 +1390,7 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         else if (view == 'year') {
             this._c1.navTo(d1.add('year', -20));
         }
+        this._syncNav1();
         this._navUserInteraction = false;
     }
     /**
@@ -1261,6 +1406,7 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         else if (view == 'year') {
             this._c1.navTo(d1.add('year', 20));
         }
+        this._syncNav1();
         this._navUserInteraction = false;
     }
     /**
@@ -1273,15 +1419,59 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
      *  @ignore
      */
     _syncNavText() {
-        const view = this._c1.activeView;
-        const d1 = this._c1.displayRange.startTime;
-        if (view == 'day') {
-            const d2 = this._c2.displayRange.endTime;
-            this._navText = `${this.formatService.format(d1, 'datetime', { format: 'MMM yyyy' })} - ${this.formatService.format(d2, 'datetime', { format: 'MMM yyyy' })}`;
+        const view = this._c1?.activeView;
+        const d1 = this._c1?.displayRange?.startTime;
+        const d2 = this._c2?.displayRange?.startTime;
+        if (!view || !d1 || !d2) {
+            return;
+        }
+        if (view === 'day') {
+            this._navText1 = this._formatNavDate(d1);
+            this._navText2 = this._formatNavDate(d2);
+        }
+        else if (view === 'month' || view === 'year') {
+            this._navText1 = String(d1.year);
+            this._navText2 = String(d2.year);
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     *  @ignore
+     */
+    _formatNavDate(date) {
+        const system = this.calendar();
+        const monthIndex = date.monthOfYear - 1;
+        const month = this._monthLabel(system, monthIndex, 'long');
+        return `${month} ${date.year}`;
+    }
+    /**
+     *  @ignore
+     */
+    _monthLabel(system, monthIndex0, style = 'short') {
+        const key = `dateTime.months.${system}.${style}.${monthIndex0}`;
+        const translated = this.translateService.translateSync(key);
+        if (translated && translated !== key && !translated.startsWith('dateTime.months.')) {
+            return translated;
         }
-        else if (view == 'month' || view == 'year') {
-            const d2 = this._c2.displayRange.endTime;
-            this._navText = `${this.formatService.format(d1, 'datetime', { format: 'yyyy' })} - ${this.formatService.format(d2, 'datetime', { format: 'yyyy' })}`;
+        return this._fallbackMonthName(system, monthIndex0, style);
+    }
+    /**
+     *  @ignore
+     */
+    _fallbackMonthName(system, monthIndex0, style) {
+        try {
+            const locale = this.localeService.activeProfile().localeInfo.code;
+            const intlCalendar = system === 'solar-hijri' ? 'persian' : 'gregory';
+            const date = system === 'solar-hijri'
+                ? this._calendarService.create({ year: 1400, month: monthIndex0 + 1, day: 15 }, system).date
+                : new Date(2000, monthIndex0, 15);
+            return new Intl.DateTimeFormat(locale, {
+                month: style,
+                calendar: intlCalendar,
+            }).format(date);
+        }
+        catch {
+            return String(monthIndex0 + 1);
         }
     }
     /**
@@ -1316,19 +1506,29 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
      *  @ignore
      */
     _syncNav1() {
+        const range = this._c1?.displayRange;
+        if (!range) {
+            return;
+        }
         const view = (this._c2.activeView = this._c1.activeView);
-        const range = this._c1.displayRange;
-        if (view == 'day') {
-            this._c2.navTo(range.startTime.add('month', 1));
+        const monthStart = range.startTime.startOf('month');
+        if (view === 'day') {
+            this._c2.navTo(monthStart.add('month', 1));
         }
-        else if (view == 'month') {
-            this._c2.navTo(range.startTime.add('year', 1));
+        else if (view === 'month') {
+            this._c2.navTo(monthStart.add('year', 1));
         }
-        else if (view == 'year') {
+        else if (view === 'year') {
             this._c2.navTo(range.endTime.add('year', 4));
         }
         this._syncNavText();
     }
+    /**
+     *  @ignore
+     */
+    handleCalendar2Navigate() {
+        this._syncNavText();
+    }
     /**
      *  @ignore
      */
@@ -1341,8 +1541,8 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             this._c1.navTo(e.startOf('year'));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXCalendarRangeComponent, isStandalone: true, selector: "ax-calendar-range", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: AXCalendarRangeComponent, isStandalone: true, selector: "ax-calendar-range", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, host: { properties: { "class.ax-state-disabled": "disabled" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarRangeComponent),
@@ -1354,9 +1554,9 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
             },
             AXUnsubscriber,
             { provide: AXComponent, useExisting: AXCalendarRangeComponent },
-        ], viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n  <ng-content></ng-content>\n  <div class=\"ax-calendar-header-range-info\">\n    <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n      {{ _navText }}\n    </button>\n  </div>\n  <div class=\"ax-calendar-header-range-buttons\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handlePrevClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-left\"></i>\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handleNextClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-right\"></i>\n    </button>\n  </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n  <ax-calendar\n    #c1\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    [holidays]=\"holidays()\"\n    [holidayDates]=\"holidayDates\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (onNavigate)=\"handleNavigate()\"\n    (activeViewChange)=\"handleActiveViewChange1()\"\n  >\n  </ax-calendar>\n  <ax-calendar\n    #c2\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    [holidays]=\"holidays()\"\n    [holidayDates]=\"holidayDates\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["@layer properties;html[dir=rtl] ax-calendar-range .ax-calendar-header-range-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}@layer components{ax-calendar-range{display:block;gap:calc(var(--spacing, .25rem) * 2);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 0)!important}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:column}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{flex-direction:row}}ax-calendar-range ax-calendar{margin:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 0)}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:calc(var(--spacing, .25rem) * 0);padding-top:calc(var(--spacing, .25rem) * 0)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}@media(min-width:48rem){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look", "yearRange", "holidays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\" dir=\"ltr\">  <button\n    type=\"button\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    class=\"ax-general-button ax-button-icon pb-4\"\n    (click)=\"handlePrevClick()\"\n  >\n    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n  </button>\n  <div class=\"ax-calendar-header-range-info\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-calendar-range-nav-label ax-calendar-range-nav-label--start\"\n      (click)=\"handleNavClick()\"\n    >\n      {{ _navText1 }}\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-calendar-range-nav-label ax-calendar-range-nav-label--end\"\n      (click)=\"handleNavClick()\"\n    >\n      {{ _navText2 }}\n    </button>\n  </div>\n  <button\n    type=\"button\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    class=\"ax-general-button ax-button-icon pb-4\"\n    (click)=\"handleNextClick()\"\n  >\n    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n  </button>\n</div>\n\n<div class=\"ax-calendar-range-body\">\n  <div class=\"ax-calendar-range-panel ax-calendar-range-panel--start\">\n    <ax-calendar\n      #c1\n      [showNavigation]=\"false\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [cellClass]=\"getCellClass\"\n      [type]=\"type\"\n      [dayCellTemplate]=\"dayCellTemplate\"\n      [monthCellTemplate]=\"monthCellTemplate\"\n      [yearCellTemplate]=\"yearCellTemplate\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [depth]=\"depth\"\n      [look]=\"look()\"\n      [holidays]=\"holidays()\"\n      [holidayDates]=\"holidayDates\"\n      (onSlotClick)=\"handleSlotClick($event)\"\n      (onNavigate)=\"handleNavigate()\"\n      (activeViewChange)=\"handleActiveViewChange1()\"\n    >\n    </ax-calendar>\n  </div>\n  <div class=\"ax-calendar-range-panel ax-calendar-range-panel--end\">\n    <ax-calendar\n      #c2\n      [showNavigation]=\"false\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [cellClass]=\"getCellClass\"\n      [type]=\"type\"\n      [dayCellTemplate]=\"dayCellTemplate\"\n      [monthCellTemplate]=\"monthCellTemplate\"\n      [yearCellTemplate]=\"yearCellTemplate\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [depth]=\"depth\"\n      [look]=\"look()\"\n      [holidays]=\"holidays()\"\n      [holidayDates]=\"holidayDates\"\n      (onSlotClick)=\"handleSlotClick($event)\"\n      (onNavigate)=\"handleCalendar2Navigate()\"\n      (activeViewChange)=\"handleActiveViewChange2()\"\n    >\n    </ax-calendar>\n  </div>\n</div>\n\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-calendar-range{display:block;gap:calc(var(--spacing, .25rem) * 2);border-radius:14px;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-light-surface));padding:calc(var(--spacing, .25rem) * 2)}ax-calendar-range .ax-calendar-nav-arrow-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-calendar-range .ax-calendar-nav-arrow-icon{transform:none}ax-calendar-range>ax-footer{margin-inline:calc(var(--spacing, .25rem) * -2);box-sizing:border-box;width:calc(100% + 1rem);flex-shrink:0;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-top:calc(var(--spacing, .25rem) * 2);margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar-range.ax-state-disabled{cursor:not-allowed}ax-calendar-range.ax-state-disabled .ax-calendar-range-header{cursor:not-allowed}ax-calendar-range.ax-state-disabled .ax-calendar-range-header button{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar-range.ax-state-disabled .ax-calendar-range-header button{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-start,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-end,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-sys-color-on-darkest-surface));background-color:transparent!important;border-color:transparent!important;opacity:1}@supports (color: color-mix(in lab,red,red)){ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-start,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-end,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-between{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar-range .ax-calendar-range-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 0)!important;direction:ltr}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-bottom:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{flex-direction:row}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{align-items:center}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{justify-content:space-between}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{gap:calc(var(--spacing, .25rem) * 6)}}ax-calendar-range .ax-calendar-range-header .ax-calendar-range-nav-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-range-nav-label{display:flex}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-range-nav-label{width:calc(var(--spacing, .25rem) * 40)}}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{flex-direction:row}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{align-items:flex-start}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{justify-content:space-between}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{gap:calc(var(--spacing, .25rem) * 2)}}ax-calendar-range .ax-calendar-range-panel{display:flex;width:100%;flex-shrink:0;justify-content:center}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-panel{width:calc(var(--spacing, .25rem) * 58)}}ax-calendar-range ax-calendar{margin:calc(var(--spacing, .25rem) * 0);margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-calendar-range ax-calendar .ax-calendar-frame{width:100%;max-width:none;border-radius:0;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}ax-calendar-range ax-calendar .ax-calendar-body{width:100%}ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%}@media(min-width:48rem){ax-calendar-range ax-calendar .ax-calendar-body>div{width:calc(var(--spacing, .25rem) * 58)}}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-week{padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots{padding:calc(var(--spacing, .25rem) * 1)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{row-gap:calc(var(--spacing, .25rem) * 1)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color):not(.ax-range-start):not(.ax-range-end){color:rgba(var(--ax-sys-color-danger-600))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest);opacity:100%}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface));opacity:100%}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start:hover,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end:hover{background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start:not(.ax-range-continue-end),ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end:not(.ax-range-continue-start),ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between:not(.ax-range-continue-start):not(.ax-range-continue-end){border-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start.ax-range-continue-end{border-radius:0;border-start-start-radius:var(--radius-lg, .5rem);border-end-start-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end.ax-range-continue-start{border-radius:0;border-start-end-radius:var(--radius-lg, .5rem);border-end-end-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between.ax-range-continue-start.ax-range-continue-end{border-radius:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between.ax-range-continue-start:not(.ax-range-continue-end){border-radius:0;border-start-end-radius:var(--radius-lg, .5rem);border-end-end-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between:not(.ax-range-continue-start).ax-range-continue-end{border-radius:0;border-start-start-radius:var(--radius-lg, .5rem);border-end-start-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-range-end,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-range-between{opacity:100%}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface));opacity:100%;border-color:transparent!important}:is(ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-end):hover{background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-between{color:rgba(var(--ax-sys-color-danger-600));border-color:transparent!important}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-between:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-between:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);color:rgba(var(--ax-sys-color-danger-600))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:not(.ax-range-start):not(.ax-range-end):not(.ax-range-between):hover:not(.ax-state-disabled){background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:var(--ax-calendar-holiday-color)!important;border-color:transparent!important}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface));opacity:100%;border-color:transparent!important}:is(ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-end):hover{background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-between{background-color:var(--color-surface)!important;color:var(--color-on-surface)!important;border-color:var(--color-border-surface)!important;color:var(--ax-calendar-holiday-color)!important;border-color:transparent!important}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-between:hover{background-color:var(--color-surface)!important;color:var(--color-on-surface)!important;border-color:var(--color-border-surface)!important;color:var(--ax-calendar-holiday-color)!important}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays", "look", "yearRange", "holidays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
                         'rtl',
@@ -1401,7 +1601,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         },
                         AXUnsubscriber,
                         { provide: AXComponent, useExisting: AXCalendarRangeComponent },
-                    ], imports: [AXCalendarComponent], template: "<div class=\"ax-calendar-range-header\">\n  <ng-content></ng-content>\n  <div class=\"ax-calendar-header-range-info\">\n    <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n      {{ _navText }}\n    </button>\n  </div>\n  <div class=\"ax-calendar-header-range-buttons\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handlePrevClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-left\"></i>\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handleNextClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-right\"></i>\n    </button>\n  </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n  <ax-calendar\n    #c1\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    [holidays]=\"holidays()\"\n    [holidayDates]=\"holidayDates\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (onNavigate)=\"handleNavigate()\"\n    (activeViewChange)=\"handleActiveViewChange1()\"\n  >\n  </ax-calendar>\n  <ax-calendar\n    #c2\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    [look]=\"look()\"\n    [holidays]=\"holidays()\"\n    [holidayDates]=\"holidayDates\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["@layer properties;html[dir=rtl] ax-calendar-range .ax-calendar-header-range-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}@layer components{ax-calendar-range{display:block;gap:calc(var(--spacing, .25rem) * 2);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 0)!important}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:column}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{flex-direction:row}}ax-calendar-range ax-calendar{margin:calc(var(--spacing, .25rem) * 0);padding:calc(var(--spacing, .25rem) * 0)}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:calc(var(--spacing, .25rem) * 0);padding-top:calc(var(--spacing, .25rem) * 0)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-border-primary)}@media(min-width:48rem){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], host: {
+                        '[class.ax-state-disabled]': 'disabled',
+                    }, imports: [AXCalendarComponent], template: "<div class=\"ax-calendar-range-header\" dir=\"ltr\">  <button\n    type=\"button\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    class=\"ax-general-button ax-button-icon pb-4\"\n    (click)=\"handlePrevClick()\"\n  >\n    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-left\"></i>\n  </button>\n  <div class=\"ax-calendar-header-range-info\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-calendar-range-nav-label ax-calendar-range-nav-label--start\"\n      (click)=\"handleNavClick()\"\n    >\n      {{ _navText1 }}\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-calendar-range-nav-label ax-calendar-range-nav-label--end\"\n      (click)=\"handleNavClick()\"\n    >\n      {{ _navText2 }}\n    </button>\n  </div>\n  <button\n    type=\"button\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    class=\"ax-general-button ax-button-icon pb-4\"\n    (click)=\"handleNextClick()\"\n  >\n    <i class=\"ax-calendar-nav-arrow-icon ax-icon ax-icon-chevron-right\"></i>\n  </button>\n</div>\n\n<div class=\"ax-calendar-range-body\">\n  <div class=\"ax-calendar-range-panel ax-calendar-range-panel--start\">\n    <ax-calendar\n      #c1\n      [showNavigation]=\"false\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [cellClass]=\"getCellClass\"\n      [type]=\"type\"\n      [dayCellTemplate]=\"dayCellTemplate\"\n      [monthCellTemplate]=\"monthCellTemplate\"\n      [yearCellTemplate]=\"yearCellTemplate\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [depth]=\"depth\"\n      [look]=\"look()\"\n      [holidays]=\"holidays()\"\n      [holidayDates]=\"holidayDates\"\n      (onSlotClick)=\"handleSlotClick($event)\"\n      (onNavigate)=\"handleNavigate()\"\n      (activeViewChange)=\"handleActiveViewChange1()\"\n    >\n    </ax-calendar>\n  </div>\n  <div class=\"ax-calendar-range-panel ax-calendar-range-panel--end\">\n    <ax-calendar\n      #c2\n      [showNavigation]=\"false\"\n      [readonly]=\"true\"\n      [disabled]=\"disabled\"\n      [cellClass]=\"getCellClass\"\n      [type]=\"type\"\n      [dayCellTemplate]=\"dayCellTemplate\"\n      [monthCellTemplate]=\"monthCellTemplate\"\n      [yearCellTemplate]=\"yearCellTemplate\"\n      [minValue]=\"minValue\"\n      [maxValue]=\"maxValue\"\n      [depth]=\"depth\"\n      [look]=\"look()\"\n      [holidays]=\"holidays()\"\n      [holidayDates]=\"holidayDates\"\n      (onSlotClick)=\"handleSlotClick($event)\"\n      (onNavigate)=\"handleCalendar2Navigate()\"\n      (activeViewChange)=\"handleActiveViewChange2()\"\n    >\n    </ax-calendar>\n  </div>\n</div>\n\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-calendar-range{display:block;gap:calc(var(--spacing, .25rem) * 2);border-radius:14px;border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-light-surface));padding:calc(var(--spacing, .25rem) * 2)}ax-calendar-range .ax-calendar-nav-arrow-icon{direction:ltr;unicode-bidi:isolate;display:inline-block}html[dir=rtl] ax-calendar-range .ax-calendar-nav-arrow-icon{transform:none}ax-calendar-range>ax-footer{margin-inline:calc(var(--spacing, .25rem) * -2);box-sizing:border-box;width:calc(100% + 1rem);flex-shrink:0;border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-top:calc(var(--spacing, .25rem) * 2);margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar-range.ax-state-disabled{cursor:not-allowed}ax-calendar-range.ax-state-disabled .ax-calendar-range-header{cursor:not-allowed}ax-calendar-range.ax-state-disabled .ax-calendar-range-header button{cursor:not-allowed;color:rgba(var(--ax-sys-color-on-darkest-surface))}@supports (color: color-mix(in lab,red,red)){ax-calendar-range.ax-state-disabled .ax-calendar-range-header button{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-start,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-end,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-sys-color-on-darkest-surface));background-color:transparent!important;border-color:transparent!important;opacity:1}@supports (color: color-mix(in lab,red,red)){ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-start,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-end,ax-calendar-range.ax-state-disabled ax-calendar .ax-calendar-slot.ax-range-between{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-darkest-surface)) 40%,transparent)}}ax-calendar-range .ax-calendar-range-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding:calc(var(--spacing, .25rem) * 1);padding-bottom:calc(var(--spacing, .25rem) * 0)!important;direction:ltr}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-bottom:calc(var(--spacing, .25rem) * 4);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{flex-direction:row}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{align-items:center}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{justify-content:space-between}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{gap:calc(var(--spacing, .25rem) * 6)}}ax-calendar-range .ax-calendar-range-header .ax-calendar-range-nav-label{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-lightest-surface))}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-range-nav-label{display:flex}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-header .ax-calendar-range-nav-label{width:calc(var(--spacing, .25rem) * 40)}}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{flex-direction:row}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{align-items:flex-start}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{justify-content:space-between}}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-body{gap:calc(var(--spacing, .25rem) * 2)}}ax-calendar-range .ax-calendar-range-panel{display:flex;width:100%;flex-shrink:0;justify-content:center}@media(min-width:48rem){ax-calendar-range .ax-calendar-range-panel{width:calc(var(--spacing, .25rem) * 58)}}ax-calendar-range ax-calendar{margin:calc(var(--spacing, .25rem) * 0);margin-inline:calc(var(--spacing, .25rem) * 0);display:block;width:100%;padding:calc(var(--spacing, .25rem) * 0);--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-calendar-range ax-calendar .ax-calendar-frame{width:100%;max-width:none;border-radius:0;--tw-border-style: none;border-style:none;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}ax-calendar-range ax-calendar .ax-calendar-body{width:100%}ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%}@media(min-width:48rem){ax-calendar-range ax-calendar .ax-calendar-body>div{width:calc(var(--spacing, .25rem) * 58)}}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-week{padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots{padding:calc(var(--spacing, .25rem) * 1)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{row-gap:calc(var(--spacing, .25rem) * 1)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color):not(.ax-range-start):not(.ax-range-end){color:rgba(var(--ax-sys-color-danger-600))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:var(--color-darkest);color:var(--color-on-darkest);border-color:var(--color-border-darkest);opacity:100%}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface));opacity:100%}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start:hover,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end:hover{background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start:not(.ax-range-continue-end),ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end:not(.ax-range-continue-start),ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between:not(.ax-range-continue-start):not(.ax-range-continue-end){border-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start.ax-range-continue-end{border-radius:0;border-start-start-radius:var(--radius-lg, .5rem);border-end-start-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end.ax-range-continue-start{border-radius:0;border-start-end-radius:var(--radius-lg, .5rem);border-end-end-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between.ax-range-continue-start.ax-range-continue-end{border-radius:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between.ax-range-continue-start:not(.ax-range-continue-end){border-radius:0;border-start-end-radius:var(--radius-lg, .5rem);border-end-end-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between:not(.ax-range-continue-start).ax-range-continue-end{border-radius:0;border-start-start-radius:var(--radius-lg, .5rem);border-end-start-radius:var(--radius-lg, .5rem)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-range-end,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other.ax-range-between{opacity:100%}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface));opacity:100%;border-color:transparent!important}:is(ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-end):hover{background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-between{color:rgba(var(--ax-sys-color-danger-600));border-color:transparent!important}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-between:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-range-between:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);color:rgba(var(--ax-sys-color-danger-600))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color:not(.ax-range-start):not(.ax-range-end):not(.ax-range-between):hover:not(.ax-state-disabled){background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:var(--ax-calendar-holiday-color)!important;border-color:transparent!important}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-end{background-color:rgba(var(--ax-sys-color-primary-surface));color:rgba(var(--ax-sys-color-dark-surface));opacity:100%;border-color:transparent!important}:is(ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-end):hover{background-color:rgba(var(--ax-sys-color-on-lightest-surface));color:rgba(var(--ax-sys-color-dark-surface))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-between{background-color:var(--color-surface)!important;color:var(--color-on-surface)!important;border-color:var(--color-border-surface)!important;color:var(--ax-calendar-holiday-color)!important;border-color:transparent!important}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday.ax-has-holiday-color.ax-range-between:hover{background-color:var(--color-surface)!important;color:var(--color-on-surface)!important;border-color:var(--color-border-surface)!important;color:var(--ax-calendar-holiday-color)!important}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], holidays: [{ type: i0.Input, args: [{ isSignal: true, alias: "holidays", required: false }] }], _c1: [{
                 type: ViewChild,
                 args: ['c1', { static: true }]
@@ -1411,11 +1613,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }] } });
 
 class AXCalendarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarModule, imports: [AXCalendarComponent, AXCalendarRangeComponent], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarModule, imports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarModule, imports: [AXCalendarComponent, AXCalendarRangeComponent], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarModule, imports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXCalendarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXCalendarComponent, AXCalendarRangeComponent],