@acorex/components 20.7.40 → 20.7.42

package/fesm2022/acorex-components-calendar.mjs

@@ -4,13 +4,14 @@ 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, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, 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';
 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';
 
 function getCalendarYearBounds(options) {
@@ -244,6 +245,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     get _currentYear() {
         return this._viewStartDate?.year;
     }
+    #holidayEffect;
     /**
      *  @ignore
      */
@@ -291,6 +293,11 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
          * `minValue` and `maxValue` take priority when set.
          */
         this.yearRange = input(80, ...(ngDevMode ? [{ debugName: "yearRange" }] : []));
+        /**
+         * Optional loader for holidays scoped to the visible calendar range.
+         * Merged with holidays from `AX_DATETIME_HOLIDAYS_LOADER` via `AXCalendarService`.
+         */
+        this.holidays = input(...(ngDevMode ? [undefined, { debugName: "holidays" }] : []));
         this.isRtl = this.localeService.isRtl;
         this.calendar = linkedSignal(() => this.type ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
         /** Week column order from the active locale profile (0 = Sun … 6 = Sat). */
@@ -334,6 +341,30 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
          *  @ignore
          */
         this.oldValue = signal(null, ...(ngDevMode ? [{ debugName: "oldValue" }] : []));
+        this.internalHoliday = signal([], ...(ngDevMode ? [{ debugName: "internalHoliday" }] : []));
+        this._viewRangeKey = signal(null, ...(ngDevMode ? [{ debugName: "_viewRangeKey" }] : []));
+        this.#holidayEffect = effect(() => {
+            const func = this.holidays();
+            const rangeKey = this._viewRangeKey();
+            if (!func || !rangeKey || !this._viewStartDate)
+                return;
+            const displayRange = this._setDisplayRange(this._viewStartDate);
+            const loadRange = {
+                from: displayRange.startTime.date,
+                end: displayRange.endTime.date,
+            };
+            const result = func(loadRange);
+            if (result instanceof Promise) {
+                result.then((holidays) => {
+                    this.internalHoliday.set(holidays);
+                    this.render();
+                });
+            }
+            else {
+                this.internalHoliday.set(result);
+                this.render();
+            }
+        }, ...(ngDevMode ? [{ debugName: "#holidayEffect" }] : []));
         this.calendarService.onHolidaysChanged.pipe(unsubscriber.takeUntilDestroy).subscribe(() => {
             this.render();
         });
@@ -383,6 +414,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     render() {
         if (!this._viewStartDate)
             return;
+        this._viewRangeKey.set(`${this._viewStartDate.year}-${this._viewStartDate.monthOfYear}-${this.activeView}`);
         const applyCellClass = (slot, cellClass = this.cellClass) => {
             switch (typeof cellClass) {
                 case 'string':
@@ -528,7 +560,13 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             r.text = d.dayOfMonth;
             r.today = d.equal(this._today, 'day');
             r.selected = selected;
+            const holidayInfo = this.getHoliday(d);
             r.holiday = this.isHoliday(d) || this.isWeekend(d);
+            if (holidayInfo) {
+                r.holidayTitle = holidayInfo.title;
+                r.holidayColor = holidayInfo.color;
+                r.tooltip = holidayInfo.title ?? '';
+            }
             r.disabled =
                 (this.minValue && d.compare(this.minValue, 'day') == -1) ||
                     (this.maxValue && d.compare(this.maxValue, 'day') == 1) ||
@@ -548,6 +586,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     'ax-state-holiday': r.holiday,
                     // 'ax-state-focused': focused,
                 };
+                if (holidayInfo?.cssClass) {
+                    holidayInfo.cssClass.split(' ').forEach((c) => {
+                        if (c)
+                            r.cssClass[c] = true;
+                    });
+                }
             }
             // ax-col-start-1 ax-col-start-2 ax-col-start-3 ax-col-start-4 ax-col-start-5 ax-col-start-6 ax-col-start-7
             r.cssClass[`ax-column-start-${this._getWeekColumn(view.range.startTime)}`] = i == 0;
@@ -897,15 +941,24 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
      *  @ignore
      */
     isHoliday(date) {
-        const gh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
-        let dh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
+        const globalHolidays = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
+        const internalHolidays = this.internalHoliday().some((d) => date.equal(d.date, 'day'));
+        let localHolidays = false;
         if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
-            dh = this.holidayDates.some((d) => date.equal(d, 'day'));
+            localHolidays = this.holidayDates.some((d) => date.equal(d, 'day'));
         }
         else if (typeof this.holidayDates == 'function') {
-            dh = this.holidayDates(date.date);
+            localHolidays = this.holidayDates(date.date);
         }
-        return gh || dh;
+        return globalHolidays || internalHolidays || localHolidays;
+    }
+    /**
+     *  @ignore
+     */
+    getHoliday(date) {
+        const globalHoliday = this.calendarService.holidays.find((d) => date.equal(d.date, 'day'));
+        const internalHoliday = this.internalHoliday().find((d) => date.equal(d.date, 'day'));
+        return globalHoliday || internalHoliday;
     }
     /**
      *  @ignore
@@ -952,7 +1005,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 } }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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),
@@ -964,7 +1017,7 @@ 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 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 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.text) {\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 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 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) {\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]=\"_currentMonth\"\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]=\"_currentYear\"\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 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 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) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\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 [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'long' } | async\">\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: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}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)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}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-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}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){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-outline-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}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:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-comp-calendar-slot-today-border-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-comp-calendar-slot-holiday-today-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{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{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color))!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-holiday-ripple-color))!important}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{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.25rem}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:.25rem}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:0 0 auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-icon,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select ax-dropdown-box.ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select .ax-chips-container{flex:0 0 auto;width:auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container .ax-chips,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{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);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 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\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: "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: "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 }); }
+        ], 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 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 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.text) {\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 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 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) {\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]=\"_currentMonth\"\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]=\"_currentYear\"\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 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 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) {\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            >\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\n                  class=\"ax-calendar-day-slot-content\"\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                  {{ 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: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}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)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}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-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}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){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-outline-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}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:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-comp-calendar-slot-today-border-color))}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-comp-calendar-slot-holiday-today-border-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;border-color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{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{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}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){color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color),.12)!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color),.35)!important}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-comp-calendar-slot-holiday-ripple-color))!important}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:color-mix(in srgb,var(--ax-calendar-holiday-color) 14%,transparent)!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{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:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important;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: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{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.25rem}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:.25rem}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:0 0 auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-icon,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select ax-dropdown-box.ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select .ax-chips-container{flex:0 0 auto;width:auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container .ax-chips,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{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);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 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\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: "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: "20.3.3", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
@@ -1026,7 +1079,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
                         AXFormatModule,
                         AXSelectBoxComponent,
                         FormsModule,
-                    ], 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 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 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.text) {\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 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 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) {\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]=\"_currentMonth\"\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]=\"_currentYear\"\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 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 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) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\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 [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'long' } | async\">\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: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}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)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}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-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}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){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-outline-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}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:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-comp-calendar-slot-today-border-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-comp-calendar-slot-holiday-today-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{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{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color))!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-holiday-ripple-color))!important}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{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.25rem}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:.25rem}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:0 0 auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-icon,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select ax-dropdown-box.ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select .ax-chips-container{flex:0 0 auto;width:auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container .ax-chips,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{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);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 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
+                        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 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 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.text) {\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 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 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) {\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]=\"_currentMonth\"\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]=\"_currentYear\"\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 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 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) {\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            >\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\n                  class=\"ax-calendar-day-slot-content\"\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                  {{ 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: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}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)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}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-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}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){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-outline-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}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:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-comp-calendar-slot-today-border-color))}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-comp-calendar-slot-holiday-today-border-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;border-color:var(--ax-calendar-holiday-color)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{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{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:not(.ax-has-holiday-color){color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}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){color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color),.12)!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color),.35)!important}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-comp-calendar-slot-holiday-ripple-color))!important}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:color-mix(in srgb,var(--ax-calendar-holiday-color) 14%,transparent)!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{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:color-mix(in srgb,var(--ax-calendar-holiday-color) 82%,black)!important;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: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{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.25rem}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:.25rem}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:0 0 auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-icon,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select ax-dropdown-box.ax-editor-container,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}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container,ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-year-select .ax-chips-container{flex:0 0 auto;width:auto}ax-calendar.ax-look-select .ax-calendar-view-header.ax-calendar-day-nav ax-select-box.ax-calendar-month-select .ax-chips-container .ax-chips,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{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);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 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1048,6 +1102,10 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
          * Day view navigation style passed through to embedded calendars.
          */
         this.look = input('select', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        /**
+         * Optional loader for holidays scoped to the visible calendar range.
+         */
+        this.holidays = input(...(ngDevMode ? [undefined, { debugName: "holidays" }] : []));
         /**
          *  @ignore
          */
@@ -1245,7 +1303,7 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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 } }, 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCalendarRangeComponent),
@@ -1257,7 +1315,7 @@ 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    (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    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}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)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight: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:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}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{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\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"], 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\">\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: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}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)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight: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:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}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{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\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: "20.3.3", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
@@ -1304,7 +1362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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    (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    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}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)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight: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:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}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{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"] }]
+                    ], 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: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}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)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight: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:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}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{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { _c1: [{
                 type: ViewChild,
                 args: ['c1', { static: true }]