@acorex/components 7.1.10 → 7.1.11

package/fesm2022/acorex-components-calendar.mjs

@@ -2,7 +2,6 @@ import { AXConfig } from '@acorex/core/config';
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Input, Output, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, ViewChild, NgModule } from '@angular/core';
 import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent } from '@acorex/components/common';
-import { AXBaseComponent } from '@acorex/components/mixin';
 import { classes } from 'polytype';
 import { AXDateTimeRange, AXDateTime, AXDateTimeModule } from '@acorex/core/dateTime';
 import * as i1 from '@angular/common';
@@ -20,15 +19,73 @@ class AXCalendarNavigateEvent extends AXRangeChangedEvent {
 */
 class AXCalendarSlotClick extends AXItemClickEvent {
 }
+// export class AXCalendarView {
+//     private _range: AXDateTimeRange;
+//     private _slots: AXCalendarViewSlot[] = [];
+//     get range(): AXDateTimeRange {
+//         return this.range;
+//     }
+//     get slots(): AXCalendarViewSlot[] {
+//         return this._slots;
+//     }
+//     constructor(
+//         private readonly startDate: AXDateTime,
+//         private readonly view: AXCalendarViewType
+//     ) {
+//         const current = this.startDate;
+//         let textFormat = 'YYYY';
+//         let tooltipFormat = 'YYYY';
+//         switch (this.view) {
+//             case 'year':
+//                 let y = current.startOf('year').year;
+//                 let min = y - (y % 10);
+//                 let max = min + 9;
+//                 this._range = new AXDateTimeRange(
+//                     AXDateTime.from({
+//                         year: min,
+//                         month: 1,
+//                         date: 1,
+//                         calendar: this.startDate.calendar.name(),
+//                     }),
+//                     AXDateTime.from({
+//                         year: max,
+//                         month: 12,
+//                         date: 28,
+//                         calendar: this.startDate.calendar.name(),
+//                     })
+//                 );
+//                 break;
+//             case 'month':
+//                 textFormat = 'MMM';
+//                 tooltipFormat = 'MMMM YYYY';
+//                 this._range = new AXDateTimeRange(
+//                     current.startOf('year'),
+//                     current.endOf('year').add('day', -1)
+//                 );
+//                 break;
+//             default:
+//                 this._range = new AXDateTimeRange(
+//                     current.startOf('month'),
+//                     current.endOf('month')
+//                 );
+//         }
+//         //
+//         this._slots = this.range.enumurate(view).map(r => ({
+//             date: r.date,
+//             tooltip: r.format()
+//         }));
+//     }
+// }
 class MXCalendarBaseComponent extends classes(MXBaseComponent) {
     interface = 'calendar';
     cellTemplate;
     cellClass;
     showNavigation = true;
+    count = 1;
     onSlotClick = new EventEmitter();
     onNavigate = new EventEmitter();
     activeViewChange = new EventEmitter();
-    _activeView = 'days';
+    _activeView = 'day';
     get activeView() {
         return this._activeView;
     }
@@ -56,7 +113,7 @@ class MXCalendarBaseComponent extends classes(MXBaseComponent) {
         });
     }
     depthChange = new EventEmitter();
-    _depth = 'days';
+    _depth = 'day';
     get depth() {
         return this._depth;
     }
@@ -129,116 +186,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                 type: Input
             }], showNavigation: [{
                 type: Input
-            }], onSlotClick: [{
-                type: Output
-            }], onNavigate: [{
-                type: Output
-            }], activeViewChange: [{
-                type: Output
-            }], activeView: [{
-                type: Input
-            }], typeChange: [{
-                type: Output
-            }], type: [{
-                type: Input
-            }], depthChange: [{
-                type: Output
-            }], depth: [{
-                type: Input
-            }], minChange: [{
-                type: Output
-            }], min: [{
-                type: Input
-            }], maxChange: [{
-                type: Output
-            }], max: [{
-                type: Input
-            }], disabledDatesChange: [{
-                type: Output
-            }], disabledDates: [{
-                type: Input
-            }], holidayDatesChange: [{
-                type: Output
-            }], holidayDates: [{
+            }], count: [{
                 type: Input
-            }] } });
-class AXCalendarBaseComponent extends AXBaseComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-    }
-    onSlotClick = new EventEmitter();
-    onNavigate = new EventEmitter();
-    activeViewChange = new EventEmitter();
-    _activeView = 'days';
-    get activeView() {
-        return this._activeView;
-    }
-    set activeView(v) {
-        this._setOption({ name: 'activeView', value: v });
-    }
-    typeChange = new EventEmitter();
-    _type = AXConfig.get(`dateTime.calendar`);
-    get type() {
-        return this._type || AXConfig.get(`dateTime.calendar`);
-    }
-    set type(v) {
-        this._setOption({
-            name: 'type',
-            value: v
-        });
-    }
-    depthChange = new EventEmitter();
-    _depth = 'days';
-    get depth() {
-        return this._depth;
-    }
-    set depth(v) {
-        this._setOption({
-            name: 'depth',
-            value: v,
-            beforeCallback: () => {
-                this._activeView = v;
-            }
-        });
-    }
-    minChange = new EventEmitter();
-    _min;
-    get min() {
-        return this._min;
-    }
-    set min(v) {
-        this._setOption({ name: 'min', value: v });
-    }
-    maxChange = new EventEmitter();
-    _max;
-    get max() {
-        return this._max;
-    }
-    set max(v) {
-        this._setOption({ name: 'max', value: v });
-    }
-    disabledDatesChange = new EventEmitter();
-    _disabledDates;
-    get disabledDates() {
-        return this._disabledDates;
-    }
-    set disabledDates(v) {
-        this._setOption({ name: 'disabledDates', value: v });
-    }
-    holidayDatesChange = new EventEmitter();
-    _holidayDates;
-    get holidayDates() {
-        return this._holidayDates;
-    }
-    set holidayDates(v) {
-        this._setOption({ name: 'holidayDates', value: v });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarBaseComponent });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { onSlotClick: [{
+            }], onSlotClick: [{
                 type: Output
             }], onNavigate: [{
                 type: Output
@@ -284,12 +234,11 @@ const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDatesChange', 'h
 
 class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
     get displayRange() {
-        const current = this._viewStartDate || this._today;
+        return new AXDateTimeRange(this.views[0].range.startTime, this.views[this.views.length - 1].range.endTime);
+    }
+    _setDisplayRange(current) {
         switch (this.activeView) {
-            case 'years':
-                // let y = current.startOf('year').year;
-                // let min = y - 3;
-                // let max = min + 11;
+            case 'year':
                 let y = current.startOf('year').year;
                 let min = y - (y % 10);
                 let max = min + 9;
@@ -304,7 +253,7 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     date: 28,
                     calendar: this._viewStartDate.calendar.name(),
                 }));
-            case 'months':
+            case 'month':
                 return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
             default:
                 return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
@@ -312,9 +261,12 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     }
     _today = new AXDateTime(new Date(), this.type);
     _viewStartDate;
-    _navText = '';
-    _todayText = '';
-    _slots = [];
+    _footPrint = {
+        year: null,
+        month: null,
+        day: null,
+    };
+    views = [];
     _dayNames = [];
     _initValues() {
         this._today = new AXDateTime(new Date(), this.type);
@@ -324,18 +276,23 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         this._initValues();
         this.navTo(this.value || this._today);
     }
-    ngOnInit() {
-        super.ngOnInit();
+    constructor() {
+        super();
         this.onValueChanged.subscribe(this._handleOnValueChanged.bind(this));
         this.onOptionChanged.subscribe(this._handleOnOptionChanged.bind(this));
+    }
+    ngOnInit() {
+        super.ngOnInit();
         this._initValues();
-        if (!this.value)
+    }
+    ngAfterViewInit() {
+        if (!this.value) {
             this.goToday();
+        }
     }
     render() {
         if (!this._viewStartDate)
             return;
-        const vr = this.displayRange;
         const applyCellClass = (slot, cellClass = this.cellClass) => {
             switch (typeof cellClass) {
                 case 'string':
@@ -349,116 +306,143 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
                     break;
             }
         };
-        // year view
-        if (this.activeView == 'years') {
-            const a = vr.enumurate('year');
-            this._slots = a.map((d, i) => {
-                const r = {};
-                r.date = d.date;
-                //
-                r.text = d.format('YYYY');
-                r.tooltip = d.format('YYYY');
-                //
-                r.today = d.equal(this._today, 'year');
-                //
-                r.selected =
-                    this.value &&
-                        this.depth == 'years' &&
-                        d.equal(this.value, 'year');
-                //
-                r.disabled =
-                    (this.min && d.compare(this.min, 'year') == -1) ||
-                        (this.max && d.compare(this.max, '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,
-                    };
-                }
-                applyCellClass(r);
-                return r;
-            });
-            this._navText = `${vr.startTime.year} - ${vr.endTime.year}`;
-            this._todayText = this._today.format('YYYY');
-        }
-        // month view
-        else if (this.activeView == 'months') {
-            const a = vr.enumurate('month');
-            this._slots = a.map((d, i) => {
-                const r = {};
-                r.date = d.date;
-                r.text = d.format('MMM');
-                r.tooltip = d.format('MMMM YYYY');
-                r.today = d.equal(this._today, 'month');
-                //
-                r.disabled =
-                    (this.min && d.compare(this.min, 'month') == -1) ||
-                        (this.max && d.compare(this.max, 'month') == 1);
-                //
-                r.selected =
-                    this.value &&
-                        this.depth == 'months' &&
-                        d.equal(this.value, 'month');
-                //
-                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-other': d.year != this._viewStartDate.year,
-                    };
-                }
-                applyCellClass(r);
-                return r;
-            });
-            this._navText = this._viewStartDate.format('YYYY');
-            this._todayText = this._today.format('MMMM YYYY');
-        }
-        // day view
-        else {
-            const a = vr.enumurate('day');
-            this._slots = a.map((d, i) => {
-                const r = {};
-                r.date = d.date;
-                r.text = d.dayOfMonth;
-                r.tooltip = d.format();
-                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.min && d.compare(this.min, 'day') == -1) ||
-                        (this.max && d.compare(this.max, 'day') == 1) ||
-                        this.isDisabled(d);
-                //
-                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
-                    };
-                }
-                r.cssClass[`ax-col-start-${vr.startTime.dayOfWeek}`] = i == 0;
-                if (this.cellClass)
+        debugger;
+        this.views = [];
+        for (let i = 0; i < this.count; i++) {
+            let unit = 'month';
+            let value = i;
+            //
+            if (this.activeView == 'day') {
+                unit = 'month';
+                value = i;
+            }
+            else if (this.activeView == 'month') {
+                unit = 'year';
+                value = i;
+            }
+            else {
+                unit = 'year';
+                value = i * 10;
+            }
+            // 
+            const current = this._viewStartDate.add(unit, value);
+            const view = {
+                range: this._setDisplayRange(current),
+                slots: []
+            };
+            this.views.push(view);
+            //
+            // year view
+            if (this.activeView == 'year') {
+                const a = view.range.enumurate('year');
+                view.slots = a.map((d, i) => {
+                    const r = {};
+                    r.date = d.date;
+                    //
+                    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.min && d.compare(this.min, 'year') == -1) ||
+                            (this.max && d.compare(this.max, '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;
-            });
-            this._navText = this._viewStartDate.format('MMMM YYYY');
-            this._todayText = this._today.format();
+                    return r;
+                });
+            }
+            // month view
+            else if (this.activeView == 'month') {
+                const a = view.range.enumurate('month');
+                view.slots = a.map((d, i) => {
+                    const r = {};
+                    r.date = d.date;
+                    r.text = d.format('MMM');
+                    r.tooltip = d.format('MMMM YYYY');
+                    r.today = d.equal(this._today, 'month');
+                    //
+                    r.disabled =
+                        (this.min && d.compare(this.min, 'month') == -1) ||
+                            (this.max && d.compare(this.max, '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;
+                });
+            }
+            // day view
+            else {
+                const a = view.range.enumurate('day');
+                view.slots = a.map((d, i) => {
+                    const r = {};
+                    r.date = d.date;
+                    r.text = d.dayOfMonth;
+                    r.tooltip = d.format();
+                    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.min && d.compare(this.min, 'day') == -1) ||
+                            (this.max && d.compare(this.max, '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,
+                        };
+                    }
+                    r.cssClass[`ax-col-start-${view.range.startTime.dayOfWeek}`] = i == 0;
+                    if (this.cellClass)
+                        applyCellClass(r);
+                    return r;
+                });
+            }
         }
         this.cdr.markForCheck();
     }
@@ -483,35 +467,38 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
             nativeEvent: e,
         });
         //
-        if (this.activeView == 'days') {
+        const val = new AXDateTime(slot.date, this.type);
+        if (this.activeView == 'day') {
             this._setDate(slot.date);
         }
-        else if (this.activeView == 'months' && this.depth == 'days') {
-            this.activeView = 'days';
+        else if (this.activeView == 'month' && this.depth == 'day') {
+            this.activeView = 'day';
+            this._footPrint.month = val.monthOfYear;
             this.navTo(slot.date);
         }
-        else if (this.activeView == 'months' && this.depth == 'months') {
+        else if (this.activeView == 'month' && this.depth == 'month') {
             this._setDate(slot.date);
         }
-        else if (this.activeView == 'years' &&
-            (this.depth == 'days' || this.depth == 'months')) {
-            this.activeView = 'months';
+        else if (this.activeView == 'year' &&
+            (this.depth == 'day' || this.depth == 'month')) {
+            this.activeView = 'month';
+            this._footPrint.year = val.year;
             this.navTo(slot.date);
         }
-        else if (this.activeView == 'years' && this.depth == 'years') {
+        else if (this.activeView == 'year' && this.depth == 'year') {
             this._setDate(slot.date);
         }
     }
-    _handleNavClick(e) {
+    _handleNavClick(e, view) {
         this.isUserInteraction = true;
-        this.toggleView();
+        this.activeView = view;
         this.isUserInteraction = false;
     }
     toggleView() {
-        if (this.activeView == 'days')
-            this.activeView = 'months';
-        else if (this.activeView == 'months')
-            this.activeView = 'years';
+        if (this.activeView == 'day')
+            this.activeView = 'month';
+        else if (this.activeView == 'month')
+            this.activeView = 'year';
     }
     _handleOnOptionChanged(e) {
         if (e.name == 'depth' ||
@@ -525,7 +512,13 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         }
     }
     _handleOnValueChanged(e) {
-        this._viewStartDate = new AXDateTime(e.value, this.type);
+        const val = new AXDateTime(e.value, this.type);
+        if (!this._viewStartDate || val.compare(this.displayRange.startTime, this.activeView) == -1 || val.compare(this.displayRange.endTime, this.activeView) == 1) {
+            this._viewStartDate = new AXDateTime(e.value, this.type);
+        }
+        this._footPrint.year = val.year;
+        this._footPrint.month = val.monthOfYear;
+        this._footPrint.day = val.dayOfMonth;
         this.render();
     }
     _handleGoToday() {
@@ -548,27 +541,31 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
     }
     _navNextPrev(prev) {
         const sign = prev ? -1 : 1;
-        if (this.activeView == 'days')
-            this.navTo(this._viewStartDate.add('month', sign * 1));
-        else if (this.activeView == 'months')
-            this.navTo(this._viewStartDate.add('year', sign * 1));
+        if (this.activeView == 'day')
+            this.navTo(this._viewStartDate.add('month', sign * 1 * this.count));
+        else if (this.activeView == 'month')
+            this.navTo(this._viewStartDate.add('year', sign * 1 * this.count));
         else
-            this.navTo(this._viewStartDate.add('year', sign * 10));
+            this.navTo(this._viewStartDate.add('year', sign * 10 * this.count));
     }
     goToday() {
         this.navTo(this._today);
     }
     navTo(date) {
-        this._viewStartDate = AXDateTime.convert(date, this._today.calendar.name()).startOf();
-        const vr = this.displayRange;
+        const val = AXDateTime.convert(date, this._today.calendar.name());
+        this._viewStartDate = val.startOf();
         this.render();
-        this.onNavigate.emit({
-            component: this,
-            isUserInteraction: this.isUserInteraction,
-            start: vr.startTime?.date,
-            end: vr.endTime?.date,
-            htmlElement: this.getHostElement(),
-        });
+        //to make sure its rendred and displayRange is not null
+        if (this.views.length > 0) {
+            const vr = this.displayRange;
+            this.onNavigate.emit({
+                component: this,
+                isUserInteraction: this.isUserInteraction,
+                start: vr.startTime?.date,
+                end: vr.endTime?.date,
+                htmlElement: this.getHostElement(),
+            });
+        }
     }
     get __hostClass() {
         const _classes = {
@@ -606,8 +603,8 @@ class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveCompo
         const weekend = AXConfig.get(`dateTime.calendars.${this.type}.weekend`);
         return weekend.includes(date.dayOfWeek);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-container *ngIf=\"showNavigation\">\n    <ng-content select=\"ax-header\"></ng-content>\n    <div class=\"ax-calendar-header\">\n      <div class=\"ax-calendar-header-info\">\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[1] }}\n          </button>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[0] }}\n          </button>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText }}\n          </button>\n        </ng-template>\n      </div>\n      <div class=\"ax-calendar-header-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handlePrevClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': !rtl,\n              'ax-icon-chevron-right': rtl\n            }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handleNextClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': rtl,\n              'ax-icon-chevron-right': !rtl\n            }\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"ax-calendar-body\">\n    <div [ngSwitch]=\"activeView\">\n      <ng-container *ngSwitchCase=\"'years'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #yearTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'months'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #monthTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <div class=\"ax-calendar-week\">\n          <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <ng-container *ngFor=\"let slot of _slots\">\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                <div >\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #dayTpl>\n                <div [title]=\"slot.tooltip\" >\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem;width:19rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:19rem}}@media (min-width: 1800px){ax-calendar{width:21rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.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{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-today){background-color:rgba(var(--ax-color-primary-300));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,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;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-width:2px;outline-style:dashed}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-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:2px;border-style:solid;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:focus-visible{border-style:dashed;outline-color:transparent}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-holiday{color:rgba(var(--ax-color-danger-500))}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));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}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-400))}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-600))}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { properties: { "class": "this.__hostClass" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views;let first = first;let last = last;\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-state-disabled\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': !rtl,\n                  'ax-icon-chevron-right': rtl\n                }\"></i>\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': rtl,\n                  'ax-icon-chevron-right': !rtl\n                }\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #yearTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': !rtl,\n                  'ax-icon-chevron-right': rtl\n                }\"></i>\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': rtl,\n                  'ax-icon-chevron-right': !rtl\n                }\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #monthTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'month')\">\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': !rtl,\n                  'ax-icon-chevron-right': rtl\n                }\"></i>\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': rtl,\n                  'ax-icon-chevron-right': !rtl\n                }\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-week\">\n            <div *ngFor=\"let d of _dayNames\">{{ d }}</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 tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\">\n                <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                  <div>\n                    <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                    </ng-container>\n                  </div>\n                </ng-container>\n                <ng-template #dayTpl>\n                  <div [title]=\"slot.tooltip\">\n                    {{ slot.text }}\n                  </div>\n                </ng-template>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.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:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}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:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}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-style:solid;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-width:2px;outline-style:dashed}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-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;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-holiday{color:rgba(var(--ax-color-danger-500))}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:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}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-400))}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-600))}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarComponent, decorators: [{
             type: Component,
@@ -626,7 +623,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                         'type',
                         'cellTemplate',
                         'cellClass',
-                        'showNavigation'
+                        'showNavigation',
+                        'count'
                     ], outputs: [
                         'onOptionChanged',
                         'valueChange',
@@ -639,9 +637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
                         'disabledDatesChange',
                         'holidayDatesChange',
                         'onNavigate',
-                        'onSlotClick'
-                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-container *ngIf=\"showNavigation\">\n    <ng-content select=\"ax-header\"></ng-content>\n    <div class=\"ax-calendar-header\">\n      <div class=\"ax-calendar-header-info\">\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[1] }}\n          </button>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText.split(' ')[0] }}\n          </button>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\n            {{ _navText }}\n          </button>\n        </ng-template>\n      </div>\n      <div class=\"ax-calendar-header-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handlePrevClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': !rtl,\n              'ax-icon-chevron-right': rtl\n            }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n          (click)=\"_handleNextClick()\">\n          <i class=\"ax-icon\" [ngClass]=\"{\n              'ax-icon-chevron-left': rtl,\n              'ax-icon-chevron-right': !rtl\n            }\"></i>\n        </button>\n      </div>\n    </div>\n  </ng-container>\n  <div class=\"ax-calendar-body\">\n    <div [ngSwitch]=\"activeView\">\n      <ng-container *ngSwitchCase=\"'years'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n            (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #yearTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'months'\">\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n              <div >\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                </ng-container>\n              </div>\n            </ng-container>\n            <ng-template #monthTpl>\n              <div [title]=\"slot.tooltip\" >\n                {{ slot.text }}\n              </div>\n            </ng-template>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngSwitchDefault>\n        <div class=\"ax-calendar-week\">\n          <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\n        </div>\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n          <ng-container *ngFor=\"let slot of _slots\">\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                <div >\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #dayTpl>\n                <div [title]=\"slot.tooltip\" >\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </ng-container>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem;width:19rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:19rem}}@media (min-width: 1800px){ax-calendar{width:21rem}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.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{margin:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-today){background-color:rgba(var(--ax-color-primary-300));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,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-today){outline-width:2px;outline-style:solid;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-width:2px;outline-style:dashed}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-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:2px;border-style:solid;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:focus-visible{border-style:dashed;outline-color:transparent}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-holiday{color:rgba(var(--ax-color-danger-500))}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));margin-top:.5rem;margin-bottom:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}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-400))}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-600))}.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"] }]
-        }], propDecorators: { __hostClass: [{
+                        'onSlotClick',
+                        'countChange'
+                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <div class=\"ax-calendar-body\">\n    <ng-container *ngFor=\"let v of views;let first = first;let last = last;\">\n      <div [ngSwitch]=\"activeView\">\n        <ng-container *ngSwitchCase=\"'year'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-state-disabled\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': !rtl,\n                  'ax-icon-chevron-right': rtl\n                }\"></i>\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': rtl,\n                  'ax-icon-chevron-right': !rtl\n                }\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else yearTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #yearTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchCase=\"'month'\">\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': !rtl,\n                  'ax-icon-chevron-right': rtl\n                }\"></i>\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': rtl,\n                  'ax-icon-chevron-right': !rtl\n                }\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\n            <div tabindex=\"0\" *ngFor=\"let slot of v.slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\">\n              <ng-container *ngIf=\"cellTemplate; else monthTpl\">\n                <div>\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                  </ng-container>\n                </div>\n              </ng-container>\n              <ng-template #monthTpl>\n                <div [title]=\"slot.tooltip\">\n                  {{ slot.text }}\n                </div>\n              </ng-template>\n            </div>\n          </div>\n        </ng-container>\n        <ng-container *ngSwitchDefault>\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'year')\">\n                {{ v.range.startTime.format('YYYY') }}\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event,'month')\">\n                {{ v.range.startTime.format('MMM') }}\n              </button>\n            </div>\n            <div class=\"ax-calendar-header-buttons\" *ngIf=\"last\">\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handlePrevClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': !rtl,\n                  'ax-icon-chevron-right': rtl\n                }\"></i>\n              </button>\n              <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n                (click)=\"_handleNextClick()\">\n                <i class=\"ax-icon\" [ngClass]=\"{\n                  'ax-icon-chevron-left': rtl,\n                  'ax-icon-chevron-right': !rtl\n                }\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"ax-calendar-week\">\n            <div *ngFor=\"let d of _dayNames\">{{ d }}</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 tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\n                (click)=\"_handleSlotClick($event, slot)\">\n                <ng-container *ngIf=\"cellTemplate; else dayTpl\">\n                  <div>\n                    <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\n                    </ng-container>\n                  </div>\n                </ng-container>\n                <ng-template #dayTpl>\n                  <div [title]=\"slot.tooltip\">\n                    {{ slot.text }}\n                  </div>\n                </ng-template>\n              </div>\n            </ng-container>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n  </div>\n  <ng-content select=\"ax-footer\"></ng-content>\n</ng-container>\n<ng-template #pickerTemplate>\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\n</ng-template>", styles: [".ax-dark ax-calendar{background:rgba(var(--ax-color-on-surface))}ax-calendar{display:block;background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));width:max-content}@media (max-width: 599px){ax-calendar{width:100%}}ax-calendar.ax-state-disabled .ax-calendar-slots{opacity:.5;cursor:default}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.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:row}ax-calendar .ax-calendar-body>div{flex:1}@media (max-width: 599px){ax-calendar .ax-calendar-body>div{width:100%}}@media (min-width: 600px){ax-calendar .ax-calendar-body>div{width:20rem}}@media (min-width: 1200px){ax-calendar .ax-calendar-body>div{width:19rem}}@media (min-width: 1800px){ax-calendar .ax-calendar-body>div{width:21rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;padding:.5rem;border-bottom:1px solid;border-bottom-color:rgba(var(--ax-color-border-default))}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:.5rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:rgba(var(--ax-color-text-default));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";padding-top:100%;float:left}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";display:block;clear:both}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-style:solid;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-width:2px;outline-style:dashed}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-col-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-col-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-color-primary-500));border-width:1px;border-style:solid;border-color:rgba(var(--ax-color-primary-200))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-style:solid;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-holiday{color:rgba(var(--ax-color-danger-500))}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:.5rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{font-size:.875rem;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;cursor:text;margin:.125rem}@media (max-width: 599px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 600px){ax-calendar .ax-calendar-body{flex-direction:column}}@media (min-width: 1200px){ax-calendar .ax-calendar-body{flex-direction:row}}@media (min-width: 1800px){ax-calendar .ax-calendar-body{flex-direction:row}}ax-calendar .ax-calendar-footer{display:flex;justify-content:center;align-items:center;margin-top:1.125rem}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;height:var(--ax-size-default);padding:0 1rem;font-size:.875rem;text-align:center;display:block;background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore));border-radius:var(--ax-rounded-border-default);cursor:pointer}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{opacity:.5;cursor:not-allowed}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-400))}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-600))}.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: function () { return []; }, propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -697,20 +696,20 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
     handlePrevClick() {
         const view = this._c1.activeView;
         const d1 = this._c1.displayRange.startTime;
-        if (view == 'days' || view == 'months') {
+        if (view == 'day' || view == 'month') {
             this._c1.prev();
         }
-        else if (view == 'years') {
+        else if (view == 'year') {
             this._c1.navTo(d1.add('year', -20));
         }
     }
     handleNextClick() {
         const view = this._c1.activeView;
         const d1 = this._c1.displayRange.startTime;
-        if (view == 'days' || view == 'months') {
+        if (view == 'day' || view == 'month') {
             this._c1.next();
         }
-        else if (view == 'years') {
+        else if (view == 'year') {
             this._c1.navTo(d1.add('year', 20));
         }
     }
@@ -720,15 +719,15 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
     _syncNavText() {
         const view = this._c1.activeView;
         const d1 = this._c1.displayRange.startTime;
-        if (view == 'days') {
+        if (view == 'day') {
             const d2 = this._c2.displayRange.endTime;
             this._navText = `${d1.format('MMM yyyy')} - ${d2.format('MMM yyyy')}`;
         }
-        else if (view == 'months') {
+        else if (view == 'month') {
             const d2 = this._c2.displayRange.endTime;
             this._navText = `${d1.format('yyyy')} - ${d2.format('yyyy')}`;
         }
-        else if (view == 'years') {
+        else if (view == 'year') {
             const d2 = this._c2.displayRange.endTime;
             this._navText = `${d1.format('yyyy')} - ${d2.format('yyyy')}`;
         }
@@ -748,28 +747,28 @@ class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractive
     _syncNav1() {
         const view = (this._c2.activeView = this._c1.activeView);
         const range = this._c1.displayRange;
-        if (view == 'days') {
+        if (view == 'day') {
             this._c2.navTo(range.startTime.add('month', 1));
         }
-        else if (view == 'months') {
+        else if (view == 'month') {
             this._c2.navTo(range.startTime.add('year', 1));
         }
-        else if (view == 'years') {
+        else if (view == 'year') {
             this._c2.navTo(range.endTime.add('year', 4));
         }
         this._syncNavText();
     }
     _syncNav2(e) {
         const view = this._c2.activeView;
-        if (view == 'months') {
+        if (view == 'month') {
             this._c1.navTo(e.add('month', -1));
         }
-        else if (view == 'years') {
+        else if (view == 'year') {
             this._c1.navTo(e.startOf('year'));
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-on-surface))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", min: "min", max: "max", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation" }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick" }, viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handlePrevClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': !rtl,\n                'ax-icon-chevron-right': rtl\n              }\"></i>\n        </button>\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\n            (click)=\"handleNextClick()\">\n            <i class=\"ax-icon\" [ngClass]=\"{\n                'ax-icon-chevron-left': rtl,\n                'ax-icon-chevron-right': !rtl\n              }\"></i>\n        </button>\n    </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\n        (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background:rgba(var(--ax-color-on-surface))}.ax-dark ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-800));color:rgba(var(--ax-color-primary-fore))}ax-calendar-range{background:rgba(var(--ax-color-surface));color:rgba(var(--ax-color-text-default));padding:.5rem}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:.25rem;padding-left:.25rem;padding-right:.25rem}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{background-color:rgba(var(--ax-color-primary-100));color:rgba(var(--ax-color-primary-500))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "min", "max", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
             type: Component,
@@ -832,5 +831,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXCalendarBaseComponent, AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
+export { AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
 //# sourceMappingURL=acorex-components-calendar.mjs.map