@acorex/components 7.0.41 → 7.1.1

package/fesm2022/acorex-components-calendar.mjs

@@ -0,0 +1,837 @@
+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';
+import { CommonModule } from '@angular/common';
+
+/**
+*  Contains native event
+* @category Events
+*/
+class AXCalendarNavigateEvent extends AXRangeChangedEvent {
+}
+/**
+*  Contains native event
+* @category Events
+*/
+class AXCalendarSlotClick extends AXItemClickEvent {
+}
+class MXCalendarBaseComponent extends classes(MXBaseComponent) {
+    interface = 'calendar';
+    cellTemplate;
+    cellClass;
+    showNavigation = true;
+    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,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    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,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    depthChange = new EventEmitter();
+    _depth = 'days';
+    get depth() {
+        return this._depth;
+    }
+    set depth(v) {
+        this.setOption({
+            name: 'depth',
+            value: v,
+            beforeCallback: () => {
+                this.activeView = v;
+            },
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    minChange = new EventEmitter();
+    _min;
+    get min() {
+        return this._min;
+    }
+    set min(v) {
+        this.setOption({
+            name: 'min',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    maxChange = new EventEmitter();
+    _max;
+    get max() {
+        return this._max;
+    }
+    set max(v) {
+        this.setOption({
+            name: 'max',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    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.0", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MXCalendarBaseComponent });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+            type: Injectable
+        }], propDecorators: { interface: [{
+                type: Input
+            }], cellTemplate: [{
+                type: Input
+            }], cellClass: [{
+                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: [{
+                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.0", 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.0", ngImport: i0, type: AXCalendarBaseComponent });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarBaseComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { 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: [{
+                type: Input
+            }] } });
+const CALENDAR_INPUTS = [
+    'depth',
+    'activeView',
+    'min',
+    'max',
+    'disabledDates',
+    'type',
+    'holidayDates',
+];
+const CALENDAR_OUTPUTS = ['depthChange', 'typeChange', 'disabledDatesChange', 'holidayDatesChange', 'onNavigate'];
+
+class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
+    get displayRange() {
+        const current = this._viewStartDate || this._today;
+        switch (this.activeView) {
+            case 'years':
+                // let y = current.startOf('year').year;
+                // let min = y - 3;
+                // let max = min + 11;
+                let y = current.startOf('year').year;
+                let min = y - (y % 10);
+                let max = min + 9;
+                return new AXDateTimeRange(AXDateTime.from({
+                    year: min,
+                    month: 1,
+                    date: 1,
+                    calendar: this._viewStartDate.calendar.name(),
+                }), AXDateTime.from({
+                    year: max,
+                    month: 12,
+                    date: 28,
+                    calendar: this._viewStartDate.calendar.name(),
+                }));
+            case 'months':
+                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
+            default:
+                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
+        }
+    }
+    _today = new AXDateTime(new Date(), this.type);
+    _viewStartDate;
+    _navText = '';
+    _todayText = '';
+    _slots = [];
+    _dayNames = [];
+    _initValues() {
+        this._today = new AXDateTime(new Date(), this.type);
+        this._dayNames = this._today.calendar.dayShortNames;
+    }
+    _refresh() {
+        this._initValues();
+        this.navTo(this.value || this._today);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.onValueChanged.subscribe(this._handleOnValueChanged.bind(this));
+        this.onOptionChanged.subscribe(this._handleOnOptionChanged.bind(this));
+        this._initValues();
+        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':
+                    cellClass.split(' ').forEach(c => slot.cssClass[c] = true);
+                    break;
+                case 'object':
+                    Object.assign(slot.cssClass, cellClass);
+                    break;
+                case 'function':
+                    applyCellClass(slot, cellClass(slot.date));
+                    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)
+                    applyCellClass(r);
+                return r;
+            });
+            this._navText = this._viewStartDate.format('MMMM YYYY');
+            this._todayText = this._today.format();
+        }
+        this.cdr.markForCheck();
+    }
+    _handlePrevClick() {
+        this.isUserInteraction = true;
+        this.prev();
+        this.isUserInteraction = false;
+    }
+    _handleNextClick() {
+        this.isUserInteraction = true;
+        this.next();
+        this.isUserInteraction = false;
+    }
+    _handleSlotClick(e, slot) {
+        if (slot.disabled || this.disabled)
+            return;
+        //
+        this.onSlotClick.emit({
+            component: this,
+            item: slot.date,
+            isUserInteraction: true,
+            nativeEvent: e,
+        });
+        //
+        if (this.activeView == 'days') {
+            this._setDate(slot.date);
+        }
+        else if (this.activeView == 'months' && this.depth == 'days') {
+            this.activeView = 'days';
+            this.navTo(slot.date);
+        }
+        else if (this.activeView == 'months' && this.depth == 'months') {
+            this._setDate(slot.date);
+        }
+        else if (this.activeView == 'years' &&
+            (this.depth == 'days' || this.depth == 'months')) {
+            this.activeView = 'months';
+            this.navTo(slot.date);
+        }
+        else if (this.activeView == 'years' && this.depth == 'years') {
+            this._setDate(slot.date);
+        }
+    }
+    _handleNavClick(e) {
+        this.isUserInteraction = true;
+        this.toggleView();
+        this.isUserInteraction = false;
+    }
+    toggleView() {
+        if (this.activeView == 'days')
+            this.activeView = 'months';
+        else if (this.activeView == 'months')
+            this.activeView = 'years';
+    }
+    _handleOnOptionChanged(e) {
+        if (e.name == 'depth' ||
+            e.name == 'activeView' ||
+            e.name == 'disabledDates' ||
+            e.name == 'holidayDates') {
+            this.render();
+        }
+        if (e.name == 'type') {
+            this._refresh();
+        }
+    }
+    _handleOnValueChanged(e) {
+        this._viewStartDate = new AXDateTime(e.value, this.type);
+        this.render();
+    }
+    _handleGoToday() {
+        this.isUserInteraction = true;
+        this._setDate(this._today.date);
+        this.goToday();
+        this.isUserInteraction = false;
+    }
+    next() {
+        this._navNextPrev(false);
+    }
+    prev() {
+        this._navNextPrev(true);
+    }
+    focus() {
+        const func = (s) => this.getHostElement().querySelector(s);
+        const div = func('.ax-calendar-slots>div.ax-state-selected') ||
+            func('.ax-calendar-slots>div');
+        div?.focus();
+    }
+    _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));
+        else
+            this.navTo(this._viewStartDate.add('year', sign * 10));
+    }
+    goToday() {
+        this.navTo(this._today);
+    }
+    navTo(date) {
+        this._viewStartDate = AXDateTime.convert(date, this._today.calendar.name()).startOf();
+        const vr = this.displayRange;
+        this.render();
+        this.onNavigate.emit({
+            component: this,
+            isUserInteraction: this.isUserInteraction,
+            start: vr.startTime?.date,
+            end: vr.endTime?.date,
+            htmlElement: this.getHostElement(),
+        });
+    }
+    get __hostClass() {
+        const _classes = {
+            'ax-state-disabled': this.disabled,
+        };
+        return Object.entries(_classes)
+            .filter(c => c[1])
+            .map(c => c[0])
+            .join(' ');
+    }
+    _setDate(value) {
+        if (this.readonly || this.disabled)
+            return;
+        this.value = AXDateTime.convert(value, this._today.calendar.name()).startOf().date;
+    }
+    isDisabled(date) {
+        if (Array.isArray(this.disabledDates) && this.disabledDates.length != 0) {
+            return this.disabledDates.some(d => date.equal(d, 'day'));
+        }
+        else if (typeof this.disabledDates == 'function') {
+            return this.disabledDates(date.date);
+        }
+        return false;
+    }
+    isHoliday(date) {
+        if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
+            return this.holidayDates.some(d => date.equal(d, 'day'));
+        }
+        else if (typeof this.holidayDates == 'function') {
+            return this.holidayDates(date.date);
+        }
+        return false;
+    }
+    isWeekend(date) {
+        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.0", ngImport: i0, type: AXCalendarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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\">\r\n  <ng-container *ngIf=\"showNavigation\">\r\n    <ng-content select=\"ax-header\"></ng-content>\r\n    <div class=\"ax-calendar-header\">\r\n      <div class=\"ax-calendar-header-info\">\r\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[1] }}\r\n          </button>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[0] }}\r\n          </button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText }}\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ax-calendar-header-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handlePrevClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': !rtl,\r\n              'ax-icon-chevron-right': rtl\r\n            }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handleNextClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': rtl,\r\n              'ax-icon-chevron-right': !rtl\r\n            }\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n      <ng-container *ngSwitchCase=\"'years'\">\r\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\r\n            (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #yearTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'months'\">\r\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\r\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #monthTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchDefault>\r\n        <div class=\"ax-calendar-week\">\r\n          <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n        </div>\r\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <ng-container *ngFor=\"let slot of _slots\">\r\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \r\n              (click)=\"_handleSlotClick($event, slot)\">\r\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\r\n                <div >\r\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #dayTpl>\r\n                <div [title]=\"slot.tooltip\" >\r\n                  {{ slot.text }}\r\n                </div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"ax-footer\"></ng-content>\r\n  <!-- <div class=\"ax-calendar-footer\">\r\n    <button\r\n      class=\"ax-today-button\"\r\n      tabindex=\"-1\"\r\n      [class.ax-state-disabled]=\"disabled\"\r\n      [attr.disabled]=\"(disabled || isDisabled(_today)?true:null)\"\r\n      (click)=\"_handleGoToday()\"\r\n      *ngIf=\"activeView == 'days'\">\r\n      {{ _todayText }}\r\n    </button>\r\n  </div> -->\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\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:18rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:18rem}}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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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'
+                    ], template: "<ng-container *ngIf=\"interface === 'calendar'; else pickerTemplate\">\r\n  <ng-container *ngIf=\"showNavigation\">\r\n    <ng-content select=\"ax-header\"></ng-content>\r\n    <div class=\"ax-calendar-header\">\r\n      <div class=\"ax-calendar-header-info\">\r\n        <ng-container *ngIf=\"activeView == 'days'; else elseTemplate\">\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[1] }}\r\n          </button>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText.split(' ')[0] }}\r\n          </button>\r\n        </ng-container>\r\n        <ng-template #elseTemplate>\r\n          <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"_handleNavClick($event)\">\r\n            {{ _navText }}\r\n          </button>\r\n        </ng-template>\r\n      </div>\r\n      <div class=\"ax-calendar-header-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handlePrevClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': !rtl,\r\n              'ax-icon-chevron-right': rtl\r\n            }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n          (click)=\"_handleNextClick()\">\r\n          <i class=\"ax-icon\" [ngClass]=\"{\r\n              'ax-icon-chevron-left': rtl,\r\n              'ax-icon-chevron-right': !rtl\r\n            }\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"ax-calendar-body\">\r\n    <div [ngSwitch]=\"activeView\">\r\n      <ng-container *ngSwitchCase=\"'years'\">\r\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"\r\n            (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else yearTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #yearTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchCase=\"'months'\">\r\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <div tabindex=\"0\" *ngFor=\"let slot of _slots\"  class=\"ax-calendar-slot\"\r\n            [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\r\n            <ng-container *ngIf=\"cellTemplate; else monthTpl\">\r\n              <div >\r\n                <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <ng-template #monthTpl>\r\n              <div [title]=\"slot.tooltip\" >\r\n                {{ slot.text }}\r\n              </div>\r\n            </ng-template>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngSwitchDefault>\r\n        <div class=\"ax-calendar-week\">\r\n          <div *ngFor=\"let d of _dayNames\">{{ d }}</div>\r\n        </div>\r\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{'ax-default':!cellTemplate}\">\r\n          <ng-container *ngFor=\"let slot of _slots\">\r\n            <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\"  \r\n              (click)=\"_handleSlotClick($event, slot)\">\r\n              <ng-container *ngIf=\"cellTemplate; else dayTpl\">\r\n                <div >\r\n                  <ng-container *ngTemplateOutlet=\"cellTemplate;context: { $implicit: {slot:slot} }\">\r\n                  </ng-container>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #dayTpl>\r\n                <div [title]=\"slot.tooltip\" >\r\n                  {{ slot.text }}\r\n                </div>\r\n              </ng-template>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n  <ng-content select=\"ax-footer\"></ng-content>\r\n  <!-- <div class=\"ax-calendar-footer\">\r\n    <button\r\n      class=\"ax-today-button\"\r\n      tabindex=\"-1\"\r\n      [class.ax-state-disabled]=\"disabled\"\r\n      [attr.disabled]=\"(disabled || isDisabled(_today)?true:null)\"\r\n      (click)=\"_handleGoToday()\"\r\n      *ngIf=\"activeView == 'days'\">\r\n      {{ _todayText }}\r\n    </button>\r\n  </div> -->\r\n</ng-container>\r\n<ng-template #pickerTemplate>\r\n  <div class=\"ax-calendar-picker\">//TODO: picker</div>\r\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:18rem}@media (max-width: 599px){ax-calendar{width:100%}}@media (min-width: 600px){ax-calendar{width:20rem}}@media (min-width: 1200px){ax-calendar{width:18rem}}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: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
+    _c1;
+    _c2;
+    _navText = "";
+    constructor() {
+        super();
+        this.defaultValue = { from: null, end: null };
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._syncNav1();
+    }
+    getCellClass = (date) => {
+        const d = new AXDateTime(date);
+        const from = new AXDateTime(this.value.from);
+        const end = new AXDateTime(this.value.end);
+        if (this.value.from && d.equal(from, 'day')) {
+            return 'ax-range-start';
+        }
+        if (this.value.end && d.equal(end, 'day'))
+            return 'ax-range-end';
+        if (this.value.from && this.value.end && (d.compare(from, 'day') > 0) && (d.compare(end, 'day') < 0))
+            return 'ax-range-between';
+        return null;
+    };
+    handleSlotClick(e) {
+        debugger;
+        if (this._c1.activeView == this.depth) {
+            if (!this.value.from || (this.value.from && this.value.end)) {
+                this.value.from = e.item;
+                this.value.end = null;
+            }
+            if (this.value.from && (e.item <= this.value.from)) {
+                this.value.from = e.item;
+            }
+            else if (this.value.from && !this.value.end) {
+                this.value.end = e.item;
+            }
+        }
+        else {
+            if (e.component == this._c1)
+                this._syncNav1();
+            if (e.component == this._c2) {
+                this._syncNav2(new AXDateTime(e.item));
+            }
+        }
+        this._c1.render();
+        this._c2.render();
+    }
+    handlePrevClick() {
+        const view = this._c1.activeView;
+        const d1 = this._c1.displayRange.startTime;
+        if (view == 'days' || view == 'months') {
+            this._c1.prev();
+        }
+        else if (view == 'years') {
+            this._c1.navTo(d1.add('year', -20));
+        }
+    }
+    handleNextClick() {
+        const view = this._c1.activeView;
+        const d1 = this._c1.displayRange.startTime;
+        if (view == 'days' || view == 'months') {
+            this._c1.next();
+        }
+        else if (view == 'years') {
+            this._c1.navTo(d1.add('year', 20));
+        }
+    }
+    handleNavClick() {
+        this._c1.toggleView();
+    }
+    _syncNavText() {
+        const view = this._c1.activeView;
+        const d1 = this._c1.displayRange.startTime;
+        if (view == 'days') {
+            const d2 = this._c2.displayRange.endTime;
+            this._navText = `${d1.format("MMM yyyy")} - ${d2.format("MMM yyyy")}`;
+        }
+        else if (view == 'months') {
+            const d2 = this._c2.displayRange.endTime;
+            this._navText = `${d1.format("yyyy")} - ${d2.format("yyyy")}`;
+        }
+        else if (view == 'years') {
+            const d2 = this._c2.displayRange.endTime;
+            this._navText = `${d1.format("yyyy")} - ${d2.format("yyyy")}`;
+        }
+    }
+    handleNavigate() {
+        this._syncNav1();
+    }
+    handleActiveViewChange1() {
+        this._c2.activeView = this._c1.activeView;
+        this._syncNav1();
+    }
+    handleActiveViewChange2() {
+        if (this._c2.activeView != this._c1.activeView) {
+            this._c1.activeView = this._c2.activeView;
+        }
+    }
+    _syncNav1() {
+        const view = this._c2.activeView = this._c1.activeView;
+        const range = this._c1.displayRange;
+        if (view == 'days') {
+            this._c2.navTo(range.startTime.add("month", 1));
+        }
+        else if (view == 'months') {
+            this._c2.navTo(range.startTime.add("year", 1));
+        }
+        else if (view == 'years') {
+            this._c2.navTo(range.endTime.add("year", 4));
+        }
+        this._syncNavText();
+    }
+    _syncNav2(e) {
+        const view = this._c2.activeView;
+        if (view == 'months') {
+            this._c1.navTo(e.add("month", -1));
+        }
+        else if (view == 'years') {
+            this._c1.navTo(e.startOf('year'));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", 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\">\r\n    <ng-content></ng-content>\r\n    <div class=\"ax-calendar-header-range-info\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\r\n            {{ _navText }}\r\n        </button>\r\n    </div>\r\n    <div class=\"ax-calendar-header-range-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handlePrevClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': !rtl,\r\n                'ax-icon-chevron-right': rtl\r\n              }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handleNextClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': rtl,\r\n                'ax-icon-chevron-right': !rtl\r\n              }\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n<div class=\"ax-calendar-range-body\">\r\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\r\n    </ax-calendar>\r\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (activeViewChange)=\"handleActiveViewChange2()\">\r\n    </ax-calendar>\r\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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, 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'
+                    ], template: "<div class=\"ax-calendar-range-header\">\r\n    <ng-content></ng-content>\r\n    <div class=\"ax-calendar-header-range-info\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\r\n            {{ _navText }}\r\n        </button>\r\n    </div>\r\n    <div class=\"ax-calendar-header-range-buttons\">\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handlePrevClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': !rtl,\r\n                'ax-icon-chevron-right': rtl\r\n              }\"></i>\r\n        </button>\r\n        <button [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button ax-button-icon\"\r\n            (click)=\"handleNextClick()\">\r\n            <i class=\"ax-icon\" [ngClass]=\"{\r\n                'ax-icon-chevron-left': rtl,\r\n                'ax-icon-chevron-right': !rtl\r\n              }\"></i>\r\n        </button>\r\n    </div>\r\n</div>\r\n<div class=\"ax-calendar-range-body\">\r\n    <ax-calendar #c1 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (onNavigate)=\"handleNavigate()\" (activeViewChange)=\"handleActiveViewChange1()\">\r\n    </ax-calendar>\r\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\r\n        [cellTemplate]=\"cellTemplate\" [min]=\"min\" [max]=\"max\" [readonly]=\"true\" [depth]=\"depth\" (onSlotClick)=\"handleSlotClick($event)\"\r\n        (activeViewChange)=\"handleActiveViewChange2()\">\r\n    </ax-calendar>\r\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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _c1: [{
+                type: ViewChild,
+                args: ["c1", { static: true }]
+            }], _c2: [{
+                type: ViewChild,
+                args: ["c2", { static: true }]
+            }] } });
+
+const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
+const MODULES = [CommonModule, AXDateTimeModule];
+class AXCalendarModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, imports: [MODULES] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXCalendarBaseComponent, AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
+//# sourceMappingURL=acorex-components-calendar.mjs.map