@acorex/components 16.0.2 → 17.0.1

package/fesm2022/acorex-components-calendar.mjs

@@ -0,0 +1,840 @@
+import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent, AXValuableComponent } from '@acorex/components/common';
+import { AXCalendarService, AXDateTimeRange, AXDateTimeModule } from '@acorex/core/date-time';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Injectable, Input, Output, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, HostListener, ViewChild, NgModule } from '@angular/core';
+import { classes } from 'polytype';
+import * as i1 from '@acorex/core/utils';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXCalendarNavigateEvent extends AXRangeChangedEvent {
+}
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXCalendarSlotClick extends AXItemClickEvent {
+}
+class MXCalendarBaseComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.calendarService = inject(AXCalendarService);
+        this.interface = 'calendar';
+        this.showNavigation = true;
+        this.count = 1;
+        this.onSlotClick = new EventEmitter();
+        this.onNavigate = new EventEmitter();
+        this.activeViewChange = new EventEmitter();
+        this._activeView = 'day';
+        this.typeChange = new EventEmitter();
+        this.depthChange = new EventEmitter();
+        this._depth = 'day';
+        this.minChange = new EventEmitter();
+        this.maxChange = new EventEmitter();
+        this.disabledDatesChange = new EventEmitter();
+        this.holidayDatesChange = new EventEmitter();
+    }
+    get activeView() {
+        return this._activeView;
+    }
+    set activeView(v) {
+        this.setOption({
+            name: 'activeView',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get type() {
+        return this._type || this.calendarService.calendar.name();
+    }
+    set type(v) {
+        this.setOption({
+            name: 'type',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get depth() {
+        return this._depth;
+    }
+    set depth(v) {
+        this.setOption({
+            name: 'depth',
+            value: v,
+            beforeCallback: (o, n) => {
+                this.activeView = v;
+                return n;
+            },
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get minValue() {
+        return this._minValue;
+    }
+    set minValue(v) {
+        this.setOption({
+            name: 'minValue',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get maxValue() {
+        return this._maxValue;
+    }
+    set maxValue(v) {
+        this.setOption({
+            name: 'maxValue',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get disabledDates() {
+        return this._disabledDates;
+    }
+    set disabledDates(v) {
+        this.setOption({ name: 'disabledDates', value: v });
+    }
+    get holidayDates() {
+        return this._holidayDates;
+    }
+    set holidayDates(v) {
+        this.setOption({ name: 'holidayDates', value: v });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXCalendarBaseComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
+            type: Injectable
+        }], propDecorators: { interface: [{
+                type: Input
+            }], cellTemplate: [{
+                type: Input
+            }], cellClass: [{
+                type: Input
+            }], showNavigation: [{
+                type: Input
+            }], count: [{
+                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
+            }], minValue: [{
+                type: Input
+            }], maxChange: [{
+                type: Output
+            }], maxValue: [{
+                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() {
+        return new AXDateTimeRange(this.views[0].range.startTime, this.views[this.views.length - 1].range.endTime);
+    }
+    _setDisplayRange(current) {
+        switch (this.activeView) {
+            case 'year': {
+                const y = current.startOf('year').year;
+                const min = y - (y % 10);
+                const max = min + 9;
+                return new AXDateTimeRange(this.calendarService.create({
+                    year: min,
+                    month: 1,
+                    date: 1,
+                }, this.type), this.calendarService.create({
+                    year: max,
+                    month: 12,
+                    date: 28,
+                }, this.type));
+            }
+            case 'month':
+                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
+            default:
+                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
+        }
+    }
+    _initValues() {
+        this._today = this.calendarService.create(new Date(), this.type);
+        this._weekdays = this._today.calendar.weekdays;
+    }
+    _refresh() {
+        this._initValues();
+        this.navTo(this.value || this._today);
+    }
+    constructor(unsubscriber) {
+        super();
+        this._today = this.calendarService.create(new Date(), this.type);
+        this._navUserInteraction = false;
+        this._footPrint = {
+            year: null,
+            month: null,
+            day: null,
+        };
+        this.views = [];
+        this._weekdays = [];
+        this.calendarService.onHolidaysChanged.pipe(unsubscriber.takeUntilDestroy).subscribe(() => {
+            this.render();
+        });
+        this.calendarService.calendarChanges$.pipe(unsubscriber.takeUntilDestroy).subscribe(() => {
+            this._refresh();
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this._initValues();
+    }
+    ngAfterViewInit() {
+        if (!this.value) {
+            this.goToday();
+        }
+    }
+    ngOnDestroy() { }
+    render() {
+        if (!this._viewStartDate)
+            return;
+        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;
+            }
+        };
+        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;
+                    //
+                    r.text = d.format('YYYY');
+                    r.tooltip = d.format('YYYY');
+                    //
+                    r.today = d.equal(this._today, 'year');
+                    //
+                    r.selected = this.value && this.depth == 'year' && d.equal(this.value, 'year');
+                    //
+                    const focused = d.year == this._footPrint.year;
+                    //
+                    r.disabled =
+                        (this.minValue && d.compare(this.minValue, 'year') == -1) || (this.maxValue && d.compare(this.maxValue, 'year') == 1);
+                    //
+                    if (r.disabled) {
+                        r.cssClass = {
+                            'ax-state-disabled': r.disabled,
+                        };
+                    }
+                    else {
+                        r.cssClass = {
+                            'ax-state-today': r.today,
+                            'ax-state-selected': r.selected,
+                            'ax-state-focused': focused,
+                        };
+                    }
+                    applyCellClass(r);
+                    return r;
+                });
+            }
+            // month view
+            else if (this.activeView == 'month') {
+                const a = view.range.enumurate('month');
+                view.slots = a.map((d, i) => {
+                    const r = {};
+                    r.date = d;
+                    r.text = d.format('MMM');
+                    r.tooltip = d.format('MMMM YYYY');
+                    r.today = d.equal(this._today, 'month');
+                    //
+                    r.disabled =
+                        (this.minValue && d.compare(this.minValue, 'month') == -1) || (this.maxValue && d.compare(this.maxValue, 'month') == 1);
+                    //
+                    r.selected = this.value && this.depth == 'month' && d.equal(this.value, 'month');
+                    //
+                    const focused = d.monthOfYear == this._footPrint.month && d.year == this._footPrint.year;
+                    //
+                    if (r.disabled) {
+                        r.cssClass = {
+                            'ax-state-disabled': r.disabled,
+                        };
+                    }
+                    else {
+                        r.cssClass = {
+                            'ax-state-today': r.today,
+                            'ax-state-selected': r.selected,
+                            'ax-state-focused': focused,
+                        };
+                    }
+                    applyCellClass(r);
+                    return r;
+                });
+            }
+            // day view
+            else {
+                const a = view.range.enumurate('day');
+                view.slots = a.map((d, i) => {
+                    const r = {};
+                    r.date = d;
+                    r.text = d.dayOfMonth;
+                    r.tooltip = d.format('longDate');
+                    r.today = d.equal(this._today, 'day');
+                    r.selected = this.value && d.equal(this.value, 'day');
+                    r.holiday = this.isHoliday(d) || this.isWeekend(d);
+                    r.disabled =
+                        (this.minValue && d.compare(this.minValue, 'day') == -1) ||
+                            (this.maxValue && d.compare(this.maxValue, 'day') == 1) ||
+                            this.isDisabled(d);
+                    //
+                    const focused = d.dayOfMonth == this._footPrint.day && d.monthOfYear == this._footPrint.month && d.year == this._footPrint.year;
+                    //
+                    if (r.disabled) {
+                        r.cssClass = {
+                            'ax-state-disabled': true,
+                        };
+                    }
+                    else {
+                        r.cssClass = {
+                            'ax-state-today': r.today,
+                            'ax-state-selected': r.selected,
+                            'ax-state-holiday': r.holiday,
+                            //'ax-state-focused': focused,
+                        };
+                    }
+                    // ax-col-start-1 ax-col-start-2 ax-col-start-3 ax-col-start-4 ax-col-start-5 ax-col-start-6 ax-col-start-7
+                    r.cssClass[`ax-column-start-${view.range.startTime.dayOfWeek}`] = i == 0;
+                    if (this.cellClass)
+                        applyCellClass(r);
+                    return r;
+                });
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    _handlePrevClick() {
+        this._navUserInteraction = true;
+        this.prev();
+        this._navUserInteraction = false;
+    }
+    _handleNextClick() {
+        this._navUserInteraction = true;
+        this.next();
+        this._navUserInteraction = false;
+    }
+    _handleSlotClick(e, slot) {
+        if (slot.disabled || this.disabled)
+            return;
+        //
+        this.onSlotClick.emit({
+            component: this,
+            item: slot.date.date,
+            isUserInteraction: true,
+            nativeEvent: e,
+        });
+        //
+        const val = this.calendarService.create(slot.date.date, this.type);
+        if (this.activeView == 'day') {
+            this._setDate(slot.date.date);
+        }
+        else if (this.activeView == 'month' && this.depth == 'day') {
+            this.activeView = 'day';
+            this._footPrint.month = val.monthOfYear;
+            this.navTo(slot.date);
+        }
+        else if (this.activeView == 'month' && this.depth == 'month') {
+            this._setDate(slot.date.date);
+        }
+        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 == 'year' && this.depth == 'year') {
+            this._setDate(slot.date.date);
+        }
+    }
+    _handleNavClick(e, view) {
+        this._navUserInteraction = true;
+        this.activeView = view;
+        this._navUserInteraction = false;
+    }
+    toggleView() {
+        if (this.activeView == 'day')
+            this.activeView = 'month';
+        else if (this.activeView == 'month')
+            this.activeView = 'year';
+    }
+    internalOptionChanged(e) {
+        if (e.name == 'depth' || e.name == 'activeView' || e.name == 'disabledDates' || e.name == 'holidayDates') {
+            this.render();
+        }
+        if (e.name == 'type') {
+            this._refresh();
+        }
+    }
+    internalValueChanged(value) {
+        const val = this.calendarService.create(value, this.type);
+        if (!this._viewStartDate ||
+            val.compare(this.displayRange.startTime, this.activeView) == -1 ||
+            val.compare(this.displayRange.endTime, this.activeView) == 1) {
+            this._viewStartDate = this.calendarService.create(value, this.type);
+        }
+        this._footPrint.year = val.year;
+        this._footPrint.month = val.monthOfYear;
+        this._footPrint.day = val.dayOfMonth;
+        this.render();
+    }
+    _handleGoToday() {
+        this._navUserInteraction = true;
+        this._setDate(this._today.date);
+        this.goToday();
+        this._navUserInteraction = 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 == '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.count));
+    }
+    goToday() {
+        this.navTo(this._today);
+    }
+    navTo(date) {
+        const val = this.calendarService.convert(date, this.type);
+        this._viewStartDate = val.startOf();
+        this.render();
+        //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._navUserInteraction,
+                start: vr.startTime?.date,
+                end: vr.endTime?.date,
+                htmlElement: this.getHostElement(),
+            });
+        }
+    }
+    get __hostClass() {
+        const _classes = {
+            'ax-state-disabled': this.disabled,
+            'ax-state-readonly': this.readonly,
+        };
+        return Object.entries(_classes)
+            .filter((c) => c[1])
+            .map((c) => c[0])
+            .join(' ');
+    }
+    _setDate(value) {
+        if (this.readonly || this.disabled)
+            return;
+        this.commitValue(this.calendarService.convert(value, this.type).startOf().date, true);
+    }
+    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) {
+        const gh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
+        let dh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
+        if (Array.isArray(this.holidayDates) && this.holidayDates.length != 0) {
+            dh = this.holidayDates.some((d) => date.equal(d, 'day'));
+        }
+        else if (typeof this.holidayDates == 'function') {
+            dh = this.holidayDates(date.date);
+        }
+        return gh || dh;
+    }
+    isWeekend(date) {
+        const weekend = this.calendarService.resolveCalendar(this.type).weekend;
+        return weekend.includes(date.dayOfWeek - 1);
+    }
+    _handleOnKeydownEvent(e) {
+        //TODO: complete keyboad navigation
+        const ignore = () => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        if (e.code === 'ArrowRight' || e.code === 'ArrowLeft') {
+            if (e.ctrlKey) {
+                e.code === 'ArrowRight' ? this.next() : this.prev();
+                setTimeout(() => {
+                    this.focus();
+                }, 50);
+            }
+            ignore();
+        }
+        else if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {
+            if (e.ctrlKey) {
+                e.code === 'ArrowUp' ? this.next() : this.prev();
+                setTimeout(() => {
+                    this.focus();
+                }, 50);
+            }
+            ignore();
+        }
+    }
+    getMonthName(date, style) {
+        return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCalendarComponent, deps: [{ token: i1.AXUnsubscriber }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AXCalendarComponent, selector: "ax-calendar", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", disabledDates: "disabledDates", holidayDates: "holidayDates", type: "type", cellTemplate: "cellTemplate", cellClass: "cellClass", showNavigation: "showNavigation", count: "count", id: "id" }, 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: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXCalendarComponent),
+                multi: true,
+            },
+            {
+                provide: AXValuableComponent,
+                useExisting: AXCalendarComponent,
+            },
+            AXUnsubscriber,
+        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for(v of views; let i = $index, first = $first, last = $last; track i){\n  @switch (activeView) {\n  @case ('year') {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-state-disabled\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\" (click)=\"_handlePrevClick()\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    @for(slot of v.slots; track slot.text){\n    <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n      @if(cellTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n        </ng-container>\n      </div>\n      } @else {\n      <div [title]=\"slot.tooltip\">\n        {{ slot.text }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n  @case ('month') {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handlePrevClick()\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\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\n      @if(cellTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n        </ng-container>\n      </div>\n      }@else {\n      <div [title]=\"slot.tooltip\">\n        {{getMonthName(slot.date,'short') | translate | async }}\n      </div>\n      }\n\n    </div>\n  </div>\n  }\n  @default {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }}\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'month')\">\n        {{getMonthName(v.range.startTime,'long') | translate | async }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handlePrevClick()\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  <div class=\"ax-calendar-week\">\n    <div *ngFor=\"let d of _weekdays\">{{ ('dateTime.weekdays.short.'+d) | translate | async }}</div>\n  </div>\n  <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    <ng-container *ngFor=\"let slot of v.slots\">\n      <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n        @if(cellTemplate){\n        <div>\n          <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n          </ng-container>\n        </div>\n        } @else{\n        <div [title]=\"slot.tooltip\">\n          {{ slot.text }}\n        </div>\n        }\n\n      </div>\n    </ng-container>\n  </div>\n  }\n  }\n  }\n\n</div>\n<ng-content select=\"ax-footer\"></ng-content>", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}@media (min-width: 768px){ax-calendar{width:max-content}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{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-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-600))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-500),1)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", 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',
+                        'minValue',
+                        'maxValue',
+                        'disabledDates',
+                        'holidayDates',
+                        'type',
+                        'cellTemplate',
+                        'cellClass',
+                        'showNavigation',
+                        'count',
+                        'name',
+                        'id',
+                    ], outputs: [
+                        'onOptionChanged',
+                        'valueChange',
+                        'onValueChanged',
+                        'onBlur',
+                        'onFocus',
+                        'depthChange',
+                        'typeChange',
+                        'activeViewChange',
+                        'disabledDatesChange',
+                        'holidayDatesChange',
+                        'onNavigate',
+                        'onSlotClick',
+                        'countChange',
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXCalendarComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: AXValuableComponent,
+                            useExisting: AXCalendarComponent,
+                        },
+                        AXUnsubscriber,
+                    ], template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for(v of views; let i = $index, first = $first, last = $last; track i){\n  @switch (activeView) {\n  @case ('year') {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-state-disabled\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }} - {{ v.range.endTime.format('YYYY') }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\" (click)=\"_handlePrevClick()\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    @for(slot of v.slots; track slot.text){\n    <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n      @if(cellTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n        </ng-container>\n      </div>\n      } @else {\n      <div [title]=\"slot.tooltip\">\n        {{ slot.text }}\n      </div>\n      }\n    </div>\n    }\n  </div>\n  }\n  @case ('month') {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handlePrevClick()\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\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\n      @if(cellTemplate){\n      <div>\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n        </ng-container>\n      </div>\n      }@else {\n      <div [title]=\"slot.tooltip\">\n        {{getMonthName(slot.date,'short') | translate | async }}\n      </div>\n      }\n\n    </div>\n  </div>\n  }\n  @default {\n  <div class=\"ax-calendar-view-header\">\n    <div class=\"ax-calendar-header-info\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'year')\">\n        {{ v.range.startTime.format('YYYY') }}\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded\" (click)=\"_handleNavClick($event, 'month')\">\n        {{getMonthName(v.range.startTime,'long') | translate | async }}\n      </button>\n    </div>\n    @if(last){\n    <div class=\"ax-calendar-header-buttons\">\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handlePrevClick()\">\n        <i class=\"ax-icon ax-icon-chevron-left\"></i>\n      </button>\n      <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" [attr.readonly]=\"readonly ? '' : null\"\n        class=\"ax-general-button ax-button-rounded ax-button-icon\" (click)=\"_handleNextClick()\">\n        <i class=\"ax-icon ax-icon-chevron-right\"></i>\n      </button>\n    </div>\n    }\n  </div>\n  <div class=\"ax-calendar-week\">\n    <div *ngFor=\"let d of _weekdays\">{{ ('dateTime.weekdays.short.'+d) | translate | async }}</div>\n  </div>\n  <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !cellTemplate }\">\n    <ng-container *ngFor=\"let slot of v.slots\">\n      <div tabindex=\"0\" class=\"ax-calendar-slot\" [ngClass]=\"slot.cssClass\" (click)=\"_handleSlotClick($event, slot)\">\n        @if(cellTemplate){\n        <div>\n          <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: { slot: slot } }\">\n          </ng-container>\n        </div>\n        } @else{\n        <div [title]=\"slot.tooltip\">\n          {{ slot.text }}\n        </div>\n        }\n\n      </div>\n    </ng-container>\n  </div>\n  }\n  }\n  }\n\n</div>\n<ng-content select=\"ax-footer\"></ng-content>", styles: [".ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-200))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-200));color:rgba(var(--ax-color-primary-fore-tint))}.ax-dark ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-color-danger-200))}.ax-dark ax-calendar .ax-calendar-footer:is(.ax-dark ax-calendar .ax-calendar-footer:focus,.ax-dark ax-calendar .ax-calendar-footer:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-200))}html[dir=rtl] ax-calendar .ax-calendar-header-buttons{flex-direction:row-reverse}ax-calendar{display:block;width:100%;background-color:rgba(var(--ax-color-surface),var(--tw-bg-opacity));color:rgba(var(--ax-color-surface-fore),var(--tw-text-opacity))}@media (min-width: 768px){ax-calendar{width:max-content}}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text;opacity:.75}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.25rem}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:1px;border-color:rgba(var(--ax-color-border-default));padding:.5rem}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--ax-rounded-border-default);text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-surface-fore));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:2px;outline-color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:2px}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{border-width:1px;border-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-500))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-color-border-default))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{background-color:rgba(var(--ax-color-primary-500));color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{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-left:.5rem;padding-right:.5rem;padding-top:.75rem}ax-calendar .ax-calendar-body .ax-calendar-week>div{position:relative;margin:.125rem;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:.875rem;line-height:1.25rem}ax-calendar .ax-calendar-footer{margin-top:1.25rem;display:flex;align-items:center;justify-content:center}ax-calendar .ax-calendar-footer .ax-today-button{display:block;height:var(--ax-size-default);width:100%;cursor:pointer;border-radius:var(--ax-rounded-border-default);background-color:rgba(var(--ax-color-primary-500));padding-left:1rem;padding-right:1rem;text-align:center;font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-color-primary-fore))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:.75}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-color-primary-600))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-color-primary-500),1)}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1.AXUnsubscriber }], propDecorators: { __hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], _handleOnKeydownEvent: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
+    constructor() {
+        super();
+        this._calendarService = inject(AXCalendarService);
+        this._navText = '';
+        this.getCellClass = (date) => {
+            const d = this._calendarService.create(date, this.type);
+            const from = this._calendarService.create(this.value.from, this.type);
+            const end = this._calendarService.create(this.value.end, this.type);
+            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;
+        };
+        this.defaultValue = { from: null, end: null };
+    }
+    ngAfterViewInit() {
+        this._syncNav1();
+    }
+    handleSlotClick(e) {
+        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(this._calendarService.create(e.item, this.type));
+            }
+        }
+        this._c1.render();
+        this._c2.render();
+    }
+    handlePrevClick() {
+        const view = this._c1.activeView;
+        const d1 = this._c1.displayRange.startTime;
+        if (view == 'day' || view == 'month') {
+            this._c1.prev();
+        }
+        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 == 'day' || view == 'month') {
+            this._c1.next();
+        }
+        else if (view == 'year') {
+            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 == 'day') {
+            const d2 = this._c2.displayRange.endTime;
+            this._navText = `${d1.format('MMM yyyy')} - ${d2.format('MMM yyyy')}`;
+        }
+        else if (view == 'month') {
+            const d2 = this._c2.displayRange.endTime;
+            this._navText = `${d1.format('yyyy')} - ${d2.format('yyyy')}`;
+        }
+        else if (view == 'year') {
+            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 == 'day') {
+            this._c2.navTo(range.startTime.add('month', 1));
+        }
+        else if (view == 'month') {
+            this._c2.navTo(range.startTime.add('year', 1));
+        }
+        else if (view == 'year') {
+            this._c2.navTo(range.endTime.add('year', 4));
+        }
+        this._syncNavText();
+    }
+    _syncNav2(e) {
+        const view = this._c2.activeView;
+        if (view == 'month') {
+            this._c1.navTo(e.add('month', -1));
+        }
+        else if (view == 'year') {
+            this._c1.navTo(e.startOf('year'));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: AXCalendarRangeComponent, selector: "ax-calendar-range", inputs: { rtl: "rtl", readonly: "readonly", value: "value", name: "name", disabled: "disabled", depth: "depth", activeView: "activeView", minValue: "minValue", maxValue: "maxValue", 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 type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"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 type=\"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\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (onNavigate)=\"handleNavigate()\"\n        (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background-color:rgba(var(--ax-color-background-default))}.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-color:rgba(var(--ax-color-surface));padding:.5rem;color:rgb(var(--ax-color-text-default))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.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-200));color:rgba(var(--ax-color-primary-fore-tint))}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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], 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: "17.3.2", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
+                        'rtl',
+                        'readonly',
+                        'value',
+                        'name',
+                        'disabled',
+                        'depth',
+                        'activeView',
+                        'minValue',
+                        'maxValue',
+                        '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\">\n    <ng-content></ng-content>\n    <div class=\"ax-calendar-header-range-info\">\n        <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\"\n            (click)=\"handleNavClick()\">\n            {{ _navText }}\n        </button>\n    </div>\n    <div class=\"ax-calendar-header-range-buttons\">\n        <button type=\"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 type=\"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\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (onNavigate)=\"handleNavigate()\"\n        (activeViewChange)=\"handleActiveViewChange1()\">\n    </ax-calendar>\n    <ax-calendar #c2 style=\"width: 50%;\" [showNavigation]=\"false\" [cellClass]=\"getCellClass\" [type]=\"type\"\n        [cellTemplate]=\"cellTemplate\" [minValue]=\"minValue\" [maxValue]=\"maxValue\" [readonly]=\"true\" [depth]=\"depth\"\n        (onSlotClick)=\"handleSlotClick($event)\" (activeViewChange)=\"handleActiveViewChange2()\">\n    </ax-calendar>\n</div>", styles: [".ax-dark ax-calendar-range{background-color:rgba(var(--ax-color-background-default))}.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-color:rgba(var(--ax-color-surface));padding:.5rem;color:rgb(var(--ax-color-text-default))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-left:.25rem;padding-right:.25rem;padding-top:.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-200));color:rgba(var(--ax-color-primary-fore-tint))}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: () => [], propDecorators: { _c1: [{
+                type: ViewChild,
+                args: ['c1', { static: true }]
+            }], _c2: [{
+                type: ViewChild,
+                args: ['c2', { static: true }]
+            }] } });
+
+const COMPONENT = [AXCalendarComponent, AXCalendarRangeComponent];
+const MODULES = [CommonModule, AXDateTimeModule, AXTranslationModule];
+class AXCalendarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXCalendarModule, declarations: [AXCalendarComponent, AXCalendarRangeComponent], imports: [CommonModule, AXDateTimeModule, AXTranslationModule], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCalendarModule, imports: [MODULES] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...COMPONENT],
+                    imports: [...MODULES],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
+//# sourceMappingURL=acorex-components-calendar.mjs.map