@acorex/components 18.14.1-next.0 → 18.14.1-next.2

package/fesm2022/acorex-components-calendar.mjs

@@ -1,14 +1,15 @@
-import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent, AXValuableComponent } from '@acorex/components/common';
+import * as i3 from '@acorex/components/common';
+import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent, AXValuableComponent, AXRippleDirective } from '@acorex/components/common';
 import { AXCalendarService, AXDateTimeRange, AXDateTimeModule } from '@acorex/core/date-time';
 import * as i1 from '@acorex/core/utils';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Input, Output, Injectable, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, NgModule } from '@angular/core';
+import { inject, EventEmitter, Injectable, Input, Output, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { classes } from 'polytype';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@acorex/core/translation';
+import * as i4 from '@acorex/core/translation';
 import { AXTranslationModule } from '@acorex/core/translation';
 import { AXTooltipModule } from '@acorex/components/tooltip';
 
@@ -180,31 +181,6 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     get displayRange() {
         return new AXDateTimeRange(this.views[0].range.startTime, this.views[this.views.length - 1].range.endTime);
     }
-    /**
-     *  @ignore
-     */
-    _setDisplayRange(current) {
-        switch (this.activeView) {
-            case 'year': {
-                const y = current.startOf('year').year;
-                const min = y - (y % 10);
-                const max = min + 9;
-                return new AXDateTimeRange(this.calendarService.create({
-                    year: min,
-                    month: 1,
-                    date: 1,
-                }, this.type), this.calendarService.create({
-                    year: max,
-                    month: 12,
-                    date: 28,
-                }, this.type));
-            }
-            case 'month':
-                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
-            default:
-                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
-        }
-    }
     /**
      *  @ignore
      */
@@ -273,7 +249,6 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     /**
      *  @ignore
      */
-    ngOnDestroy() { }
     render() {
         if (!this._viewStartDate)
             return;
@@ -292,137 +267,175 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         };
         this.views = [];
         for (let i = 0; i < this.count; i++) {
-            let unit = 'month';
-            let value = i;
-            //
-            if (this.activeView == 'day') {
-                unit = 'month';
-                value = i;
+            switch (this.activeView) {
+                case 'day':
+                    this.dayView(i, applyCellClass);
+                    break;
+                case 'month':
+                    this.monthView(i, applyCellClass);
+                    break;
+                case 'year':
+                    this.yearView(i, applyCellClass);
+                    break;
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     *  @ignore
+     */
+    _setDisplayRange(current) {
+        switch (this.activeView) {
+            case 'year': {
+                const y = current.startOf('year').year;
+                const min = y - (y % 10);
+                const max = min + 9;
+                return new AXDateTimeRange(this.calendarService.create({
+                    year: min,
+                    month: 1,
+                    date: 1,
+                }, this.type), this.calendarService.create({
+                    year: max,
+                    month: 12,
+                    date: 28,
+                }, this.type));
             }
-            else if (this.activeView == 'month') {
-                unit = 'year';
-                value = i;
+            case 'month':
+                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
+            default:
+                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
+        }
+    }
+    /**
+     *  @ignore
+     */
+    dayView(i, applyCellClass) {
+        const current = this._viewStartDate.add('month', i);
+        const view = {
+            range: this._setDisplayRange(current),
+            slots: [],
+        };
+        this.views.push(view);
+        const a = view.range.enumurate('day');
+        view.slots = a.map((d, i) => {
+            const r = {};
+            r.date = d;
+            r.text = d.dayOfMonth;
+            r.tooltip = d.format('longDate');
+            r.today = d.equal(this._today, 'day');
+            r.selected = this.value && d.equal(this.value, 'day');
+            r.holiday = this.isHoliday(d) || this.isWeekend(d);
+            r.disabled =
+                (this.minValue && d.compare(this.minValue, 'day') == -1) ||
+                    (this.maxValue && d.compare(this.maxValue, 'day') == 1) ||
+                    this.isDisabled(d);
+            //
+            const focused = d.dayOfMonth == this._footPrint.day &&
+                d.monthOfYear == this._footPrint.month &&
+                d.year == this._footPrint.year;
+            //
+            if (r.disabled) {
+                r.cssClass = {
+                    'ax-state-disabled': true,
+                };
             }
             else {
-                unit = 'year';
-                value = i * 10;
+                r.cssClass = {
+                    'ax-state-today': r.today,
+                    'ax-state-selected': r.selected,
+                    'ax-state-holiday': r.holiday,
+                    // 'ax-state-focused': focused,
+                };
             }
+            // 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-${view.range.startTime.dayOfWeek}`] = i == 0;
+            if (this.cellClass)
+                applyCellClass(r);
+            return r;
+        });
+    }
+    /**
+     *  @ignore
+     */
+    monthView(i, applyCellClass) {
+        const current = this._viewStartDate.add('year', i);
+        const view = {
+            range: this._setDisplayRange(current),
+            slots: [],
+        };
+        this.views.push(view);
+        const a = view.range.enumurate('month');
+        view.slots = a.map((d, i) => {
+            const r = {};
+            r.date = d;
+            r.text = d.format('MMM');
+            r.tooltip = d.format('MMMM YYYY');
+            r.today = d.equal(this._today, 'month');
             //
-            const current = this._viewStartDate.add(unit, value);
-            const view = {
-                range: this._setDisplayRange(current),
-                slots: [],
-            };
-            this.views.push(view);
+            r.disabled =
+                (this.minValue && d.compare(this.minValue, 'month') == -1) ||
+                    (this.maxValue && d.compare(this.maxValue, 'month') == 1);
             //
-            // year view
-            if (this.activeView == 'year') {
-                const a = view.range.enumurate('year');
-                view.slots = a.map((d, i) => {
-                    const r = {};
-                    r.date = d;
-                    //
-                    r.text = d.format('YYYY');
-                    r.tooltip = d.format('YYYY');
-                    //
-                    r.today = d.equal(this._today, 'year');
-                    //
-                    r.selected = this.value && this.depth == 'year' && d.equal(this.value, 'year');
-                    //
-                    const focused = d.year == this._footPrint.year;
-                    //
-                    r.disabled =
-                        (this.minValue && d.compare(this.minValue, 'year') == -1) || (this.maxValue && d.compare(this.maxValue, 'year') == 1);
-                    //
-                    if (r.disabled) {
-                        r.cssClass = {
-                            'ax-state-disabled': r.disabled,
-                        };
-                    }
-                    else {
-                        r.cssClass = {
-                            'ax-state-today': r.today,
-                            'ax-state-selected': r.selected,
-                            'ax-state-focused': focused,
-                        };
-                    }
-                    applyCellClass(r);
-                    return r;
-                });
+            r.selected = this.value && this.depth == 'month' && d.equal(this.value, 'month');
+            //
+            const focused = d.monthOfYear == this._footPrint.month && d.year == this._footPrint.year;
+            //
+            if (r.disabled) {
+                r.cssClass = {
+                    'ax-state-disabled': r.disabled,
+                };
             }
-            // month view
-            else if (this.activeView == 'month') {
-                const a = view.range.enumurate('month');
-                view.slots = a.map((d, i) => {
-                    const r = {};
-                    r.date = d;
-                    r.text = d.format('MMM');
-                    r.tooltip = d.format('MMMM YYYY');
-                    r.today = d.equal(this._today, 'month');
-                    //
-                    r.disabled =
-                        (this.minValue && d.compare(this.minValue, 'month') == -1) || (this.maxValue && d.compare(this.maxValue, 'month') == 1);
-                    //
-                    r.selected = this.value && this.depth == 'month' && d.equal(this.value, 'month');
-                    //
-                    const focused = d.monthOfYear == this._footPrint.month && d.year == this._footPrint.year;
-                    //
-                    if (r.disabled) {
-                        r.cssClass = {
-                            'ax-state-disabled': r.disabled,
-                        };
-                    }
-                    else {
-                        r.cssClass = {
-                            'ax-state-today': r.today,
-                            'ax-state-selected': r.selected,
-                            'ax-state-focused': focused,
-                        };
-                    }
-                    applyCellClass(r);
-                    return r;
-                });
+            else {
+                r.cssClass = {
+                    'ax-state-today': r.today,
+                    'ax-state-selected': r.selected,
+                    'ax-state-focused': focused,
+                };
+            }
+            applyCellClass(r);
+            return r;
+        });
+    }
+    /**
+     *  @ignore
+     */
+    yearView(i, applyCellClass) {
+        const current = this._viewStartDate.add('year', i * 10);
+        const view = {
+            range: this._setDisplayRange(current),
+            slots: [],
+        };
+        this.views.push(view);
+        const a = view.range.enumurate('year');
+        view.slots = a.map((d, i) => {
+            const r = {};
+            r.date = d;
+            r.text = d.format('YYYY');
+            r.tooltip = d.format('YYYY');
+            r.today = d.equal(this._today, 'year');
+            r.selected = this.value && this.depth == 'year' && d.equal(this.value, 'year');
+            //
+            const focused = d.year == this._footPrint.year;
+            //
+            r.disabled =
+                (this.minValue && d.compare(this.minValue, 'year') == -1) ||
+                    (this.maxValue && d.compare(this.maxValue, 'year') == 1);
+            //
+            if (r.disabled) {
+                r.cssClass = {
+                    'ax-state-disabled': r.disabled,
+                };
             }
-            // day view
             else {
-                const a = view.range.enumurate('day');
-                view.slots = a.map((d, i) => {
-                    const r = {};
-                    r.date = d;
-                    r.text = d.dayOfMonth;
-                    r.tooltip = d.format('longDate');
-                    r.today = d.equal(this._today, 'day');
-                    r.selected = this.value && d.equal(this.value, 'day');
-                    r.holiday = this.isHoliday(d) || this.isWeekend(d);
-                    r.disabled =
-                        (this.minValue && d.compare(this.minValue, 'day') == -1) ||
-                            (this.maxValue && d.compare(this.maxValue, 'day') == 1) ||
-                            this.isDisabled(d);
-                    //
-                    const focused = d.dayOfMonth == this._footPrint.day && d.monthOfYear == this._footPrint.month && d.year == this._footPrint.year;
-                    //
-                    if (r.disabled) {
-                        r.cssClass = {
-                            'ax-state-disabled': true,
-                        };
-                    }
-                    else {
-                        r.cssClass = {
-                            'ax-state-today': r.today,
-                            'ax-state-selected': r.selected,
-                            'ax-state-holiday': r.holiday,
-                            //'ax-state-focused': focused,
-                        };
-                    }
-                    // 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-${view.range.startTime.dayOfWeek}`] = i == 0;
-                    if (this.cellClass)
-                        applyCellClass(r);
-                    return r;
-                });
+                r.cssClass = {
+                    'ax-state-today': r.today,
+                    'ax-state-selected': r.selected,
+                    'ax-state-focused': focused,
+                };
             }
-        }
-        this.cdr.markForCheck();
+            applyCellClass(r);
+            return r;
+        });
     }
     /**
      *  @ignore
@@ -454,13 +467,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             nativeEvent: e,
         });
         //
-        const val = this.calendarService.create(slot.date.date, this.type);
         if (this.activeView == 'day') {
             this._setDate(slot.date.date);
         }
         else if (this.activeView == 'month' && this.depth == 'day') {
             this.activeView = 'day';
-            this._footPrint.month = val.monthOfYear;
+            this._footPrint.month = this.calendarService.create(slot.date.date, this.type).monthOfYear;
             this.navTo(slot.date);
         }
         else if (this.activeView == 'month' && this.depth == 'month') {
@@ -468,7 +480,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         }
         else if (this.activeView == 'year' && (this.depth == 'day' || this.depth == 'month')) {
             this.activeView = 'month';
-            this._footPrint.year = val.year;
+            this._footPrint.year = this.calendarService.create(slot.date.date, this.type).year;
             this.navTo(slot.date);
         }
         else if (this.activeView == 'year' && this.depth == 'year') {
@@ -493,7 +505,10 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
      *  @ignore
      */
     internalOptionChanged(e) {
-        if (e.name == 'depth' || e.name == 'activeView' || e.name == 'disabledDates' || e.name == 'holidayDates') {
+        if (e.name == 'depth' ||
+            e.name == 'activeView' ||
+            e.name == 'disabledDates' ||
+            e.name == 'holidayDates') {
             this.render();
         }
         if (e.name == 'type') {
@@ -526,7 +541,20 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         this._footPrint.year = val.year;
         this._footPrint.month = val.monthOfYear;
         this._footPrint.day = val.dayOfMonth;
-        this.render();
+        const calendarSlots = Array.from(document.querySelectorAll('.ax-calendar-slot'));
+        const selectedSlot = document.querySelector('.ax-state-selected');
+        if (selectedSlot) {
+            selectedSlot.classList.remove('ax-state-selected');
+        }
+        else {
+            this.render();
+        }
+        calendarSlots.forEach((element) => {
+            element = element;
+            if (element.textContent == this._footPrint.day) {
+                element.classList.add('ax-state-selected');
+            }
+        });
     }
     /**
      *  @ignore
@@ -701,7 +729,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                 useExisting: AXCalendarComponent,
             },
             AXUnsubscriber,
-        ], 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('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\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]=\"'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]=\"'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': !cellTemplate }\">\n          @for (slot of v.slots; track slot.text) {\n            <div\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </div>\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('YYYY') }}\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]=\"'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]=\"'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-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <div\n            tabindex=\"0\"\n            *ngFor=\"let slot of v.slots\"\n            class=\"ax-calendar-slot\"\n            [class.ax-state-disabled]=\"disabled\"\n            [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\"\n          >\n            @if (cellTemplate) {\n              <div>\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                </ng-container>\n              </div>\n            } @else {\n              <div [title]=\"slot.tooltip\">\n                {{ getMonthName(slot.date, 'short') | translate | async }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @default {\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('YYYY') }}\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                {{ getMonthName(v.range.startTime, 'long') | translate | 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]=\"'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]=\"'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          <div *ngFor=\"let d of _weekdays\">{{ 'dateTime.weekdays.short.' + d | translate | async }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <ng-container *ngFor=\"let slot of v.slots\">\n            <div\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </div>\n          </ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{outline-color:rgba(var(--ax-color-primary-200))!important;background-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}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{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}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:.25rem;padding-right:.25rem;padding-top:.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}@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:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}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;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}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:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}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-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{background-color:rgba(var(--ax-color-danger-500))!important;color:rgba(var(--ax-color-danger-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}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-color-danger-500))!important;border-color:rgba(var(--ax-color-danger-500))!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-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}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-color-primary-600))}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-color-primary-500),1)}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], 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('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\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]=\"'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]=\"'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': !cellTemplate }\">\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\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('YYYY') }}\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]=\"'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]=\"'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-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <button\n            tabindex=\"0\"\n            *ngFor=\"let slot of v.slots\"\n            class=\"ax-calendar-slot\"\n            [class.ax-state-disabled]=\"disabled\"\n            [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\"\n          >\n            @if (cellTemplate) {\n              <div>\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                </ng-container>\n              </div>\n            } @else {\n              <div [title]=\"slot.tooltip\">\n                {{ getMonthName(slot.date, 'short') | translate | async }}\n              </div>\n            }\n          </button>\n        </div>\n      }\n      @default {\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('YYYY') }}\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                {{ getMonthName(v.range.startTime, 'long') | translate | 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]=\"'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]=\"'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          <div *ngFor=\"let d of _weekdays\">{{ 'dateTime.weekdays.short.' + d | translate | async }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <ng-container *ngFor=\"let slot of v.slots\">\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          </ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{outline-color:rgba(var(--ax-color-primary-200))!important;background-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-color-primary-500),.3)!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-color-danger-500),.3)!important}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}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{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}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:.25rem;padding-right:.25rem;padding-top:.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:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}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;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}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:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}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-color-primary-300),.3)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{background-color:rgba(var(--ax-color-danger-500))!important;color:rgba(var(--ax-color-danger-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}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-color-danger-500))!important;border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-color-danger-300),.3)!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-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}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-color-primary-600))}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-color-primary-500),1)}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
@@ -751,7 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: AXCalendarComponent,
                         },
                         AXUnsubscriber,
-                    ], 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('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\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]=\"'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]=\"'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': !cellTemplate }\">\n          @for (slot of v.slots; track slot.text) {\n            <div\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </div>\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('YYYY') }}\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]=\"'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]=\"'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-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <div\n            tabindex=\"0\"\n            *ngFor=\"let slot of v.slots\"\n            class=\"ax-calendar-slot\"\n            [class.ax-state-disabled]=\"disabled\"\n            [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\"\n          >\n            @if (cellTemplate) {\n              <div>\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                </ng-container>\n              </div>\n            } @else {\n              <div [title]=\"slot.tooltip\">\n                {{ getMonthName(slot.date, 'short') | translate | async }}\n              </div>\n            }\n          </div>\n        </div>\n      }\n      @default {\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('YYYY') }}\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                {{ getMonthName(v.range.startTime, 'long') | translate | 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]=\"'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]=\"'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          <div *ngFor=\"let d of _weekdays\">{{ 'dateTime.weekdays.short.' + d | translate | async }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <ng-container *ngFor=\"let slot of v.slots\">\n            <div\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </div>\n          </ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{outline-color:rgba(var(--ax-color-primary-200))!important;background-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}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{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}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:.25rem;padding-right:.25rem;padding-top:.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}@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:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}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;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}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:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}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-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{background-color:rgba(var(--ax-color-danger-500))!important;color:rgba(var(--ax-color-danger-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}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-color-danger-500))!important;border-color:rgba(var(--ax-color-danger-500))!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-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}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-color-primary-600))}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-color-primary-500),1)}.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"] }]
+                    ], 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('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\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]=\"'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]=\"'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': !cellTemplate }\">\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\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('YYYY') }}\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]=\"'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]=\"'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-month\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <button\n            tabindex=\"0\"\n            *ngFor=\"let slot of v.slots\"\n            class=\"ax-calendar-slot\"\n            [class.ax-state-disabled]=\"disabled\"\n            [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\"\n          >\n            @if (cellTemplate) {\n              <div>\n                <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                </ng-container>\n              </div>\n            } @else {\n              <div [title]=\"slot.tooltip\">\n                {{ getMonthName(slot.date, 'short') | translate | async }}\n              </div>\n            }\n          </button>\n        </div>\n      }\n      @default {\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('YYYY') }}\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                {{ getMonthName(v.range.startTime, 'long') | translate | 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]=\"'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]=\"'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          <div *ngFor=\"let d of _weekdays\">{{ 'dateTime.weekdays.short.' + d | translate | async }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n          <ng-container *ngFor=\"let slot of v.slots\">\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 (cellTemplate) {\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          </ng-container>\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{outline-color:rgba(var(--ax-color-primary-200))!important;background-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-color-primary-500),.3)!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-danger-200))!important;border-color:rgba(var(--ax-color-danger-200))!important;color:rgba(var(--ax-color-danger-fore-tint))!important}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-color-danger-500),.3)!important}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}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{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}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:.25rem;padding-right:.25rem;padding-top:.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:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}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;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}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:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}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-color-primary-300),.3)!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{background-color:rgba(var(--ax-color-danger-500))!important;color:rgba(var(--ax-color-danger-fore))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-500))}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-color-danger-500))!important;border-color:rgba(var(--ax-color-danger-500))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-color-danger-300),.3)!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-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}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-color-primary-600))}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-color-primary-500),1)}.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: () => [{ type: i1.AXUnsubscriber }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -998,11 +1026,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
-const MODULES = [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule];
+const MODULES = [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule, AXRippleDirective];
 class AXCalendarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule, AXRippleDirective], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, imports: [CommonModule, AXDateTimeModule, AXTranslationModule, AXTooltipModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXCalendarModule, decorators: [{
             type: NgModule,