import { AXRangeChangedEvent, AXItemClickEvent, MXBaseComponent, MXValueComponent, MXInteractiveComponent, AXRippleDirective, AXValuableComponent, AXComponent } from '@acorex/cdk/common';
import { AXCalendarService, AXDateTimeRange } from '@acorex/core/date-time';
import * as i1 from '@acorex/core/format';
import { AXFormatService, AXFormatModule } from '@acorex/core/format';
import { AXUnsubscriber } from '@acorex/core/utils';
import * as i0 from '@angular/core';
import { inject, EventEmitter, Input, Output, Injectable, input, linkedSignal, signal, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { classes } from 'polytype';
import { AXLocaleService } from '@acorex/core/locale';
import { AXTranslationService, AXTranslatorPipe } from '@acorex/core/translation';
import { isPlatformBrowser, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';

/**
 *  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.localeService = inject(AXLocaleService);
        this.calendarService = inject(AXCalendarService);
        this.translateService = inject(AXTranslationService);
        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.minValueChange = new EventEmitter();
        this.maxValueChange = 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();
            },
        });
    }
    /**
     * @deprecated use calendar input instead
     */
    get type() {
        return this._type;
    }
    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.render();
            },
        });
    }
    get minValue() {
        return this._minValue;
    }
    set minValue(v) {
        if (this.calendarService.isValidDate(v)) {
            const value = this.calendarService.create(v).date;
            this.setOption({
                name: 'minValue',
                value,
                afterCallback: () => {
                    this.render();
                },
            });
        }
        else {
            this.setOption({
                name: 'minValue',
                value: undefined,
                afterCallback: () => {
                    this.render();
                },
            });
        }
    }
    get maxValue() {
        return this._maxValue;
    }
    set maxValue(v) {
        if (this.calendarService.isValidDate(v)) {
            const value = this.calendarService.create(v).date;
            this.setOption({
                name: 'maxValue',
                value,
                afterCallback: () => {
                    this.render();
                },
            });
        }
        else {
            this.setOption({
                name: 'maxValue',
                value: undefined,
                afterCallback: () => {
                    this.render();
                },
            });
        }
    }
    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 });
    }
    render() { }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXCalendarBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXCalendarBaseComponent }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXCalendarBaseComponent, decorators: [{
            type: Injectable
        }], propDecorators: { interface: [{
                type: Input
            }], cellTemplate: [{
                type: Input
            }], dayCellTemplate: [{
                type: Input
            }], monthCellTemplate: [{
                type: Input
            }], yearCellTemplate: [{
                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
            }], minValueChange: [{
                type: Output
            }], minValue: [{
                type: Input
            }], maxValueChange: [{
                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',
];

/**
 * A calendar component that provides a customizable calendar view with various options for selection, navigation, and styling.
 *
 * @category Components
 */
class AXCalendarComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
    get displayRange() {
        return this.views.length > 0
            ? new AXDateTimeRange(this.views[0]?.range.startTime, this.views[this.views.length - 1]?.range.endTime)
            : null;
    }
    /**
     *  @ignore
     */
    _initValues() {
        this._today = this.calendarService.create(new Date(), this.calendar());
        if (this.weekdays().length) {
            this._weekdays = this.weekdays();
        }
        else {
            this._weekdays = this._today.calendar.weekdays;
        }
    }
    /**
     *  @ignore
     */
    _refresh() {
        this._initValues();
        this.navTo(this.value || this._today);
    }
    /**
     *  @ignore
     */
    constructor() {
        const unsubscriber = inject(AXUnsubscriber);
        super();
        this.formatService = inject(AXFormatService);
        this.weekend = input([], ...(ngDevMode ? [{ debugName: "weekend" }] : []));
        this.weekdays = input([], ...(ngDevMode ? [{ debugName: "weekdays" }] : []));
        this.calendar = linkedSignal(() => this.type ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
        /**
         *  @ignore
         */
        this._today = this.calendarService.create(new Date(), this.calendar());
        /**
         *  @ignore
         */
        this._navUserInteraction = false;
        /**
         *  @ignore
         */
        this._footPrint = {
            year: null,
            month: null,
            day: null,
        };
        /**
         *  @ignore
         */
        this.views = [];
        /**
         *  @ignore
         */
        this._weekdays = [];
        /**
         *  @ignore
         */
        this.oldValue = signal(null, ...(ngDevMode ? [{ debugName: "oldValue" }] : []));
        this.calendarService.onHolidaysChanged.pipe(unsubscriber.takeUntilDestroy).subscribe(() => {
            this.render();
        });
        this.calendarService.calendarChanges$.pipe(unsubscriber.takeUntilDestroy).subscribe((value) => {
            if (!this.type)
                this.calendar.set(value.name());
            this._refresh();
        });
        this.typeChange.pipe(unsubscriber.takeUntilDestroy).subscribe((value) => {
            this.calendar.set(value);
        });
        this.minValueChange.subscribe((e) => {
            if (this._viewStartDate.isBefore(e)) {
                this._viewStartDate = this.calendarService.create(e, this.calendar());
                this.render();
            }
        });
    }
    /**
     *  @ignore
     */
    ngOnInit() {
        super.ngOnInit();
        this._initValues();
    }
    /**
     *  @ignore
     */
    ngAfterViewInit() {
        if (!this.value) {
            if (this.minValue && this._viewStartDate.isBefore(this.minValue)) {
                this._viewStartDate = this.calendarService.create(this.minValue, this.calendar());
                this.render();
            }
            else {
                this.goToday();
            }
        }
    }
    /**
     *  @ignore
     */
    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++) {
            switch (this.activeView) {
                case 'day':
                    this.dayView(i, applyCellClass);
                    break;
                case 'month':
                    this.monthView(i, applyCellClass);
                    break;
                case 'year':
                    this.yearView(i, applyCellClass);
                    break;
            }
        }
        this.cdr.markForCheck();
    }
    /**
     *  @ignore
     */
    _setDisplayRange(current) {
        switch (this.activeView) {
            case 'year': {
                const y = current.startOf('year').year;
                const min = y - (y % 10);
                const max = min + 9;
                return new AXDateTimeRange(this.calendarService.create({
                    year: min,
                    month: 1,
                    day: 1,
                }, this.calendar()), this.calendarService.create({
                    year: max,
                    month: 12,
                    day: 28,
                }, this.calendar()));
            }
            case 'month':
                return new AXDateTimeRange(current.startOf('year'), current.endOf('year').add('day', -1));
            default:
                return new AXDateTimeRange(current.startOf('month'), current.endOf('month'));
        }
    }
    /**
     *  @ignore
     */
    dayView(i, applyCellClass) {
        const current = this._viewStartDate.add('month', i);
        const view = {
            range: this._setDisplayRange(current),
            slots: [],
        };
        this.views.push(view);
        const a = view.range.enumerate('day');
        view.slots = a.map((d, i) => {
            let selected = false;
            if (this.depth === 'day') {
                selected = this.value && d.equal(this.value, 'day');
            }
            else if (this.depth === 'month') {
                selected = this.value && d.equal(this.value, 'month');
            }
            else if (this.depth === 'year') {
                selected = this.value && d.equal(this.value, 'year');
            }
            const r = {};
            r.date = d;
            r.text = d.dayOfMonth;
            r.today = d.equal(this._today, 'day');
            r.selected = selected;
            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;
        });
    }
    /**
     *  @ignore
     */
    monthView(i, applyCellClass) {
        const current = this._viewStartDate.add('year', i);
        const view = {
            range: this._setDisplayRange(current),
            slots: [],
        };
        this.views.push(view);
        const a = view.range.enumerate('month');
        view.slots = a.map((d) => {
            const r = {};
            r.date = d;
            r.text = this.formatService.format(d, 'date', 'MMM');
            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;
        });
    }
    /**
     *  @ignore
     */
    yearView(i, applyCellClass) {
        const current = this._viewStartDate.add('year', i * 10);
        const view = {
            range: this._setDisplayRange(current),
            slots: [],
        };
        this.views.push(view);
        const a = view.range.enumerate('year');
        view.slots = a.map((d) => {
            const r = {};
            r.date = d;
            r.text = this.formatService.format(d, 'date', '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;
        });
    }
    /**
     *  @ignore
     */
    _handlePrevClick() {
        this._navUserInteraction = true;
        this.prev();
        this._navUserInteraction = false;
    }
    /**
     *  @ignore
     */
    _handleNextClick() {
        this._navUserInteraction = true;
        this.next();
        this._navUserInteraction = false;
    }
    /**
     *  @ignore
     */
    _handleSlotClick(e, slot) {
        if (slot.disabled || this.disabled)
            return;
        //
        this.onSlotClick.emit({
            component: this,
            item: slot.date.date,
            isUserInteraction: true,
            nativeEvent: e,
        });
        //
        if (this.activeView == 'day') {
            this._setDate(slot.date.date);
        }
        else if (this.activeView == 'month' && this.depth == 'day') {
            this.activeView = 'day';
            this._footPrint.month = this.calendarService.create(slot.date.date, this.calendar()).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 = this.calendarService.create(slot.date.date, this.calendar()).year;
            this.navTo(slot.date);
        }
        else if (this.activeView == 'year' && this.depth == 'year') {
            this._setDate(slot.date.date);
        }
    }
    /**
     *  @ignore
     */
    _handleNavClick(e, view) {
        this._navUserInteraction = true;
        this.activeView = view;
        this._navUserInteraction = false;
    }
    /**
     * Toggles between different calendar views (day → month → year).
     */
    toggleView() {
        if (this.activeView == 'day')
            this.activeView = 'month';
        else if (this.activeView == 'month')
            this.activeView = 'year';
    }
    /**
     *  @ignore
     */
    internalOptionChanged(e) {
        if (e.name == 'depth' || e.name == 'activeView' || e.name == 'disabledDates' || e.name == 'holidayDates') {
            this.render();
        }
        if (e.name == 'type') {
            this._refresh();
        }
    }
    /**
     *  @ignore
     */
    internalSetValue(value) {
        if (!value || !this.calendarService.isValidDate(value)) {
            return null;
        }
        const v = this.calendarService.convert(value, this.calendar());
        if (this.isDisabled(v)) {
            return null;
        }
        if (this.maxValue && this.calendarService.isValidDate(this.maxValue) && v.isAfter(this.maxValue)) {
            return this.maxValue;
        }
        if (this.minValue && this.calendarService.isValidDate(this.minValue) && v.isBefore(this.minValue)) {
            return this.minValue;
        }
        return v.date;
    }
    /**
     *  @ignore
     */
    internalValueChanged(value) {
        const val = this.calendarService.create(value, this.calendar());
        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.calendar());
            if (this.minValue && this._viewStartDate.isBefore(this.minValue)) {
                this._viewStartDate = this.calendarService.create(this.minValue, this.calendar());
            }
        }
        this._footPrint.year = val.year;
        this._footPrint.month = val.monthOfYear;
        this._footPrint.day = val.dayOfMonth;
        if (isPlatformBrowser(this.platformID)) {
            const calendarSlots = Array.from(this.getHostElement().querySelectorAll('.ax-calendar-slot'));
            const selectedSlot = this.getHostElement().querySelector('.ax-state-selected');
            if (selectedSlot) {
                selectedSlot.classList.remove('ax-state-selected');
            }
            else {
                this.render();
            }
            calendarSlots.forEach((element) => {
                element = element;
                if (element.textContent == this._footPrint.day) {
                    element.classList.add('ax-state-selected');
                }
            });
        }
        const oldVal = this.oldValue() ? this.calendarService.create(this.oldValue(), this.calendar()) : null;
        if (!oldVal || oldVal.monthOfYear !== val.monthOfYear || oldVal.year !== val.year) {
            this.render();
        }
        this.oldValue.set(value);
    }
    /**
     *  @ignore
     */
    _handleGoToday() {
        this._navUserInteraction = true;
        this._setDate(this._today.date);
        this.goToday();
        this._navUserInteraction = false;
    }
    /**
     * Navigates forward in the calendar based on the current active view and the configured count.
     *
     * Behavior by view:
     * - day view: advances by count months
     * - month view: advances by count years
     * - year view: advances by 10 × count years
     *
     * @returns void
     */
    next() {
        this._navNextPrev(false);
    }
    /**
     * Navigates backward in the calendar based on the current active view and the configured count.
     *
     * Behavior by view:
     * - day view: goes back by count months
     * - month view: goes back by count years
     * - year view: goes back by 10 × count years
     *
     * @returns void
     */
    prev() {
        this._navNextPrev(true);
    }
    /**
     * Sets focus to the currently selected calendar slot or the first available slot.
     *
     * @returns void
     */
    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();
    }
    /**
     *  @ignore
     */
    _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));
    }
    /**
     * Navigates to the current date and emits the navigation event.
     *
     * @returns void
     */
    goToday() {
        this.navTo(this._today);
    }
    /**
     * Navigates to a specified date and updates the view.
     *
     * @param date The date to navigate to, which can be a Date object or an AXDateTime instance.
     * @returns void
     */
    navTo(date) {
        const val = this.calendarService.convert(date, this.calendar());
        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(),
            });
        }
    }
    /**
     *  @ignore
     */
    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(' ');
    }
    /**
     *  @ignore
     */
    _setDate(value) {
        if (this.readonly || this.disabled)
            return;
        this.commitValue(this.calendarService.convert(value, this.calendar()).startOf().date, true);
    }
    /**
     *  @ignore
     */
    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;
    }
    /**
     *  @ignore
     */
    isHoliday(date) {
        const gh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
        let dh = this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
        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;
    }
    /**
     *  @ignore
     */
    isWeekend(date) {
        if (this.weekend().length) {
            return this.weekend().includes(date.dayOfWeek - 1);
        }
        const weekend = this.calendarService.resolveCalendar(this.calendar()).weekend;
        return weekend.includes(date.dayOfWeek - 1);
    }
    /**
     *  @ignore
     */
    _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();
        }
    }
    /**
     *  @ignore
     */
    getMonthName(date, style) {
        return `dateTime.months.${date.calendar.name()}.${style}.${date.monthOfYear - 1}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXCalendarComponent, isStandalone: true, selector: "ax-calendar", inputs: { rtl: { classPropertyName: "rtl", publicName: "rtl", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: false, isRequired: false, transformFunction: null }, activeView: { classPropertyName: "activeView", publicName: "activeView", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: false, isRequired: false, transformFunction: null }, holidayDates: { classPropertyName: "holidayDates", publicName: "holidayDates", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, dayCellTemplate: { classPropertyName: "dayCellTemplate", publicName: "dayCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, monthCellTemplate: { classPropertyName: "monthCellTemplate", publicName: "monthCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, yearCellTemplate: { classPropertyName: "yearCellTemplate", publicName: "yearCellTemplate", isSignal: false, isRequired: false, transformFunction: null }, cellClass: { classPropertyName: "cellClass", publicName: "cellClass", isSignal: false, isRequired: false, transformFunction: null }, showNavigation: { classPropertyName: "showNavigation", publicName: "showNavigation", isSignal: false, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, weekend: { classPropertyName: "weekend", publicName: "weekend", isSignal: true, isRequired: false, transformFunction: null }, weekdays: { classPropertyName: "weekdays", publicName: "weekdays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOptionChanged: "onOptionChanged", valueChange: "valueChange", onValueChanged: "onValueChanged", minValueChange: "minValueChange", maxValueChange: "maxValueChange", onBlur: "onBlur", onFocus: "onFocus", depthChange: "depthChange", typeChange: "typeChange", activeViewChange: "activeViewChange", disabledDatesChange: "disabledDatesChange", holidayDatesChange: "holidayDatesChange", onNavigate: "onNavigate", onSlotClick: "onSlotClick", countChange: "countChange" }, host: { listeners: { "keydown": "_handleOnKeydownEvent($event)" }, properties: { "class": "this.__hostClass" } }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXCalendarComponent),
                multi: true,
            },
            {
                provide: AXValuableComponent,
                useExisting: AXCalendarComponent,
            },
            AXUnsubscriber,
            { provide: AXComponent, useExisting: AXCalendarComponent },
        ], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for (v of views; let i = $index, first = $first, last = $last; track i) {\n    @switch (activeView) {\n      @case ('year') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }} -\n                {{ v.range.endTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !yearCellTemplate }\">\n          @for (slot of v.slots; track slot.text) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (yearCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"yearCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div>\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @case ('month') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !monthCellTemplate }\">\n          @for (slot of v.slots; track slot) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (monthCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"monthCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'MMMM YYYY' } | async\">\n                  {{ `@acorex:${getMonthName(slot.date, 'short')}` | translate | async }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @default {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                <!-- {{ getMonthName(v.range.startTime, 'long') | translate | async }} -->\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'MMMM' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-week\">\n          @for (d of _weekdays; track d) {\n            <div>{{ '@acorex:dateTime.weekdays.short.' + d | translate | async }}</div>\n          }\n        </div>\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !dayCellTemplate }\">\n          @for (slot of v.slots; track slot) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\n            >\n              @if (dayCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"dayCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'long' } | async\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}html[dir=rtl] ax-calendar .ax-calendar-header-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-outline-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-comp-calendar-slot-today-border-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-comp-calendar-slot-holiday-today-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color))!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-holiday-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .75rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar .ax-calendar-footer{display:flex;align-items:center;justify-content:center;margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXRippleDirective, selector: "[axRipple]", inputs: ["axRipple", "axRippleColor"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-calendar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: [
                        'rtl',
                        'readonly',
                        'value',
                        'name',
                        'disabled',
                        'depth',
                        'activeView',
                        'minValue',
                        'maxValue',
                        'disabledDates',
                        'holidayDates',
                        'type',
                        'dayCellTemplate',
                        'monthCellTemplate',
                        'yearCellTemplate',
                        'cellClass',
                        'showNavigation',
                        'count',
                        'name',
                        'id',
                    ], outputs: [
                        'onOptionChanged',
                        'valueChange',
                        'onValueChanged',
                        'minValueChange',
                        'maxValueChange',
                        '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,
                        { provide: AXComponent, useExisting: AXCalendarComponent },
                    ], imports: [NgClass, NgTemplateOutlet, AXRippleDirective, AsyncPipe, AXTranslatorPipe, AXFormatModule], template: "<ng-content select=\"ax-header\"></ng-content>\n<div class=\"ax-calendar-body\">\n  @for (v of views; let i = $index, first = $first, last = $last; track i) {\n    @switch (activeView) {\n      @case ('year') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded ax-state-disabled\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }} -\n                {{ v.range.endTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon ax-next\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-slots ax-calendar-slots-year\" [ngClass]=\"{ 'ax-default': !yearCellTemplate }\">\n          @for (slot of v.slots; track slot.text) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (yearCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"yearCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div>\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @case ('month') {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-month\" [ngClass]=\"{ 'ax-default': !monthCellTemplate }\">\n          @for (slot of v.slots; track slot) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [class.ax-state-disabled]=\"disabled\"\n              [ngClass]=\"slot.cssClass\"\n              (click)=\"_handleSlotClick($event, slot)\"\n            >\n              @if (monthCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"monthCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'MMMM YYYY' } | async\">\n                  {{ `@acorex:${getMonthName(slot.date, 'short')}` | translate | async }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n      @default {\n        @if (showNavigation) {\n          <div class=\"ax-calendar-view-header\">\n            <div class=\"ax-calendar-header-info\">\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'year')\"\n              >\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'YYYY' } | async }}\n              </button>\n              <button\n                type=\"button\"\n                [attr.disabled]=\"disabled ? '' : null\"\n                [attr.readonly]=\"readonly ? '' : null\"\n                class=\"ax-general-button ax-button-rounded\"\n                (click)=\"_handleNavClick($event, 'month')\"\n              >\n                <!-- {{ getMonthName(v.range.startTime, 'long') | translate | async }} -->\n                {{ v.range.startTime | format: 'date' : { calendar: calendar(), format: 'MMMM' } | async }}\n              </button>\n            </div>\n            @if (last) {\n              <div class=\"ax-calendar-header-buttons\">\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handlePrevClick()\"\n                  [title]=\"'@acorex:common.actions.prev' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-left\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  [attr.disabled]=\"disabled ? '' : null\"\n                  [attr.readonly]=\"readonly ? '' : null\"\n                  class=\"ax-general-button ax-button-rounded ax-button-icon\"\n                  (click)=\"_handleNextClick()\"\n                  [title]=\"'@acorex:common.actions.next' | translate | async\"\n                >\n                  <i class=\"ax-icon ax-icon-chevron-right\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        }\n        <div class=\"ax-calendar-week\">\n          @for (d of _weekdays; track d) {\n            <div>{{ '@acorex:dateTime.weekdays.short.' + d | translate | async }}</div>\n          }\n        </div>\n\n        <div class=\"ax-calendar-slots ax-calendar-slots-day\" [ngClass]=\"{ 'ax-default': !dayCellTemplate }\">\n          @for (slot of v.slots; track slot) {\n            <button\n              tabindex=\"0\"\n              class=\"ax-calendar-slot\"\n              [ngClass]=\"slot.cssClass\"\n              [class.ax-state-disabled]=\"disabled\"\n              (click)=\"_handleSlotClick($event, slot)\"\n              [disabled]=\"disabled\"\n              [axRipple]\n            >\n              @if (dayCellTemplate) {\n                <div>\n                  <ng-container\n                    [ngTemplateOutlet]=\"dayCellTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: { slot: slot } }\"\n                  >\n                  </ng-container>\n                </div>\n              } @else {\n                <div [title]=\"slot.date | format: 'date' : { calendar: calendar(), format: 'long' } | async\">\n                  {{ slot.text }}\n                </div>\n              }\n            </button>\n          }\n        </div>\n      }\n    }\n  }\n</div>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["ax-calendar{--ax-comp-calendar-view-header-padding: .5rem;--ax-comp-calendar-slot-today-border-width: 1px;--ax-comp-calendar-slot-focused-border-width: 1px;--ax-comp-calendar-slot-focused-outline-width: 2px;--ax-comp-calendar-slot-disabled-opacity: .5;--ax-comp-calendar-slot-readonly-opacity: .75;--ax-comp-calendar-footer-margin-t: 1.25rem;--ax-comp-calendar-footer-today-button-padding-x: 1rem;--ax-comp-calendar-footer-today-button-height: var(--ax-sys-size-base)}ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-ripple-color: var(--ax-sys-color-primary-light-surface), .3;--ax-comp-calendar-slot-today-text-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-today-border-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-hover-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-calendar-slot-focused-outline-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-slot-selected-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-holiday-text-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-ripple-color: var(--ax-sys-color-danger-light-surface), .3;--ax-comp-calendar-slot-holiday-today-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-hover-border-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-bg-color: var(--ax-sys-color-danger-surface);--ax-comp-calendar-slot-holiday-selected-text-color: var(--ax-sys-color-on-danger-surface);--ax-comp-calendar-footer-today-button-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-calendar-footer-today-button-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-footer-today-button-hover-bg-color: var(--ax-sys-color-primary-dark-surface);--ax-comp-calendar-footer-today-button-focused-outline-color: var(--ax-sys-color-primary-surface), 1}.ax-dark ax-calendar{--ax-comp-calendar-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-view-header-border-color: var(--ax-sys-color-border-darkest-surface);--ax-comp-calendar-slot-text-color: var(--ax-sys-color-on-darkest-surface);--ax-comp-calendar-slot-focused-border-color: var(--ax-sys-color-border-darkest-surface)}html[dir=rtl] ax-calendar .ax-calendar-header-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar{width:100%;display:block;color:rgba(var(--ax-comp-calendar-text-color));background-color:rgba(var(--ax-comp-calendar-bg-color))}ax-calendar.ax-state-disabled .ax-calendar-slots{cursor:not-allowed;opacity:.5}ax-calendar.ax-state-readonly .ax-calendar-slots{cursor:text}ax-calendar .ax-calendar-header{display:flex;justify-content:space-between;padding-left:var(--ax-comp-calendar-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-header-padding-x, .25rem);padding-top:var(--ax-comp-calendar-header-padding-t, .25rem)}ax-calendar .ax-calendar-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body{display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 1024px){ax-calendar .ax-calendar-body{flex-direction:column}}ax-calendar .ax-calendar-body>div{width:100%;flex:1 1 0%}@media (min-width: 768px){ax-calendar .ax-calendar-body>div{width:20rem}}ax-calendar .ax-calendar-body .ax-calendar-view-header{display:flex;justify-content:space-between;border-bottom-width:var(--ax-comp-calendar-view-header-border-width, 1px);border-color:rgba(var(--ax-comp-calendar-view-header-border-color));padding:var(--ax-comp-calendar-view-header-padding)}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-info{font-weight:500}ax-calendar .ax-calendar-body .ax-calendar-view-header .ax-calendar-header-buttons{display:flex}ax-calendar .ax-calendar-body .ax-calendar-slots{display:grid;gap:.25rem;padding:1rem}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;text-align:center;font-size:var(--ax-comp-calendar-font-size, .875rem);color:rgba(var(--ax-comp-calendar-slot-text-color));line-height:var(--ax-comp-calendar-line-height, 1.25rem);border-radius:var(--ax-comp-calendar-slot-border-radius, var(--ax-sys-border-radius));transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:before{content:\"\";float:left;padding-top:100%}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:after{content:\"\";clear:both;display:block}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-disabled,ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:hover.ax-state-selected){background-color:rgba(var(--ax-comp-calendar-slot-hover-bg-color));color:rgba(var(--ax-comp-calendar-slot-hover-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible:not(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled){outline-width:var(--ax-comp-calendar-slot-focused-outline-width);outline-color:rgba(var(--ax-comp-calendar-slot-focused-outline-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot:focus-visible.ax-state-disabled{outline-style:dashed;outline-width:var(--ax-comp-calendar-slot-focused-outline-width)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-1{grid-column-start:1}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-2{grid-column-start:2}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-3{grid-column-start:3}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-4{grid-column-start:4}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-5{grid-column-start:5}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-6{grid-column-start:6}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-column-start-7{grid-column-start:7}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-other{opacity:.05}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today{color:rgba(var(--ax-comp-calendar-slot-today-text-color));border-width:var(--ax-comp-calendar-slot-today-border-width);border-color:rgba(var(--ax-comp-calendar-slot-today-border-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-today.ax-state-holiday{border-color:rgba(var(--ax-comp-calendar-slot-holiday-today-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-focused{border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected{color:rgba(var(--ax-comp-calendar-slot-selected-text-color));background-color:rgba(var(--ax-comp-calendar-slot-selected-bg-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-selected.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-selected-text-color))!important;background-color:rgba(var(--ax-comp-calendar-slot-holiday-selected-bg-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday{color:rgba(var(--ax-comp-calendar-slot-holiday-text-color))}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:is(ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-bg-color))!important;border-color:rgba(var(--ax-comp-calendar-slot-holiday-hover-border-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-state-holiday .ax-ripple{background-color:rgba(var(--ax-comp-calendar-slot-holiday-ripple-color))!important}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-day{grid-template-columns:repeat(7,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-year,ax-calendar .ax-calendar-body .ax-calendar-slots.ax-calendar-slots-month{grid-template-columns:repeat(4,minmax(0,1fr))}ax-calendar .ax-calendar-body .ax-calendar-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:var(--ax-comp-calendar-week-padding-t, .75rem);padding-left:var(--ax-comp-calendar-week-padding-x, .5rem);padding-right:var(--ax-comp-calendar-week-padding-x, .5rem)}ax-calendar .ax-calendar-body .ax-calendar-week>div{display:flex;cursor:pointer;position:relative;text-align:center;align-items:center;justify-content:center;font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem)}ax-calendar .ax-calendar-footer{display:flex;align-items:center;justify-content:center;margin-top:var(--ax-comp-calendar-footer-margin-t)}ax-calendar .ax-calendar-footer .ax-today-button{width:100%;display:block;cursor:pointer;text-align:center;padding-left:var(--ax-comp-calendar-footer-today-button-padding-x);padding-right:var(--ax-comp-calendar-footer-today-button-padding-x);font-size:var(--ax-comp-calendar-font-size, .875rem);line-height:var(--ax-comp-calendar-line-height, 1.25rem);height:var(--ax-comp-calendar-footer-today-button-height);border-radius:var(--ax-comp-calendar-footer-today-button-border-radius, var(--ax-sys-border-radius));color:rgba(var(--ax-comp-calendar-footer-today-button-text-color));background-color:rgba(var(--ax-comp-calendar-footer-today-button-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-calendar-slot-disabled-opacity)}ax-calendar .ax-calendar-footer .ax-today-button.ax-state-readonly{cursor:text;opacity:var(--ax-comp-calendar-slot-readonly-opacity)}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:hover):not(.ax-state-disabled){background-color:rgba(var(--ax-comp-calendar-footer-today-button-hover-bg-color))}ax-calendar .ax-calendar-footer .ax-today-button:is(ax-calendar .ax-calendar-footer .ax-today-button:focus,ax-calendar .ax-calendar-footer .ax-today-button:focus-visible):not(.ax-state-disabled){outline-color:rgba(var(--ax-comp-calendar-footer-today-button-focused-outline-color))}.ax-calendar-picker{display:flex;width:100%}.ax-calendar-picker ax-picker{flex:1 1 0%}.ax-overlay-pane ax-calendar{border-style:none}\n"] }]
        }], ctorParameters: () => [], propDecorators: { __hostClass: [{
                type: HostBinding,
                args: ['class']
            }], _handleOnKeydownEvent: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

class AXCalendarRangeComponent extends classes((MXValueComponent), MXInteractiveComponent, MXCalendarBaseComponent) {
    /**
     *  @ignore
     */
    constructor() {
        super();
        this.formatService = inject(AXFormatService);
        this.unsubscriber = inject(AXUnsubscriber);
        this.calendar = linkedSignal(() => this.type ?? this.localeService.activeProfile().calendar.system, ...(ngDevMode ? [{ debugName: "calendar" }] : []));
        /**
         *  @ignore
         */
        this._calendarService = inject(AXCalendarService);
        this._navText = '';
        /**
         *  @ignore
         */
        this._navUserInteraction = false;
        /** w
         *  @ignore
         */
        this.getCellClass = (date) => {
            //const d = this._calendarService.create(date, this.type);
            // check from value
            if (!this._calendarService.isValidDate(this.value.from)) {
                return null;
            }
            const from = this._calendarService.create(this.value.from, this.type);
            if (this.value.from && date.equal(from, 'day')) {
                return 'ax-range-start';
            }
            // check end value
            if (!this._calendarService.isValidDate(this.value.end)) {
                return null;
            }
            const end = this._calendarService.create(this.value.end, this.type);
            if (this.value.end && date.equal(end, 'day'))
                return 'ax-range-end';
            if (this.value.from && this.value.end && date.compare(from, 'day') > 0 && date.compare(end, 'day') < 0)
                return 'ax-range-between';
            return null;
        };
        this.defaultValue = { from: null, end: null };
        this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe((value) => {
            if (!this.type)
                this.calendar.set(value.name());
            this.render();
        });
    }
    /**
     *  @ignore
     */
    ngOnInit() {
        super.ngOnInit();
    }
    /**
     *  @ignore
     */
    ngAfterViewInit() {
        this._syncNav1();
    }
    internalValueChanged(value) {
        this._c1.render();
        this._c2.render();
    }
    /**
     *  @ignore
     */
    handleSlotClick(e) {
        this.onSlotClick.emit({
            component: this,
            item: e.item,
            isUserInteraction: true,
            nativeEvent: e,
        });
        if (this._c1.activeView == this.depth) {
            if (!this.value.from || (this.value.from && this.value.end)) {
                this.commitValue({ from: e.item, end: null }, true);
            }
            if (this.value.from && e.item <= this.value.from) {
                this.commitValue({ from: e.item, end: this.value.end }, true);
            }
            else if (this.value.from && !this.value.end) {
                this.commitValue({ from: this.value.from, end: e.item }, true);
            }
        }
        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();
    }
    /**
     *  @ignore
     */
    handlePrevClick() {
        this._navUserInteraction = true;
        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));
        }
        this._navUserInteraction = false;
    }
    /**
     *  @ignore
     */
    handleNextClick() {
        this._navUserInteraction = true;
        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));
        }
        this._navUserInteraction = false;
    }
    /**
     *  @ignore
     */
    handleNavClick() {
        this._c1.toggleView();
    }
    /**
     *  @ignore
     */
    _syncNavText() {
        const view = this._c1.activeView;
        const d1 = this._c1.displayRange.startTime;
        if (view == 'day') {
            const d2 = this._c2.displayRange.endTime;
            this._navText = `${this.formatService.format(d1, 'datetime', { format: 'MMM yyyy' })} - ${this.formatService.format(d2, 'datetime', { format: 'MMM yyyy' })}`;
        }
        else if (view == 'month' || view == 'year') {
            const d2 = this._c2.displayRange.endTime;
            this._navText = `${this.formatService.format(d1, 'datetime', { format: 'yyyy' })} - ${this.formatService.format(d2, 'datetime', { format: 'yyyy' })}`;
        }
    }
    /**
     *  @ignore
     */
    handleNavigate() {
        this._syncNav1();
        this.onNavigate.emit({
            component: this,
            isUserInteraction: this._navUserInteraction,
            start: this._c1.displayRange.startTime?.date,
            end: this._c2.displayRange.endTime?.date,
            htmlElement: this.getHostElement(),
        });
    }
    /**
     *  @ignore
     */
    handleActiveViewChange1() {
        this._c2.activeView = this._c1.activeView;
        this._syncNav1();
    }
    /**
     *  @ignore
     */
    handleActiveViewChange2() {
        if (this._c2.activeView != this._c1.activeView) {
            this._c1.activeView = this._c2.activeView;
        }
    }
    /**
     *  @ignore
     */
    _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();
    }
    /**
     *  @ignore
     */
    _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: "20.3.3", ngImport: i0, type: AXCalendarRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: AXCalendarRangeComponent, isStandalone: true, 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", dayCellTemplate: "dayCellTemplate", monthCellTemplate: "monthCellTemplate", yearCellTemplate: "yearCellTemplate", 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" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXCalendarRangeComponent),
                multi: true,
            },
            {
                provide: AXValuableComponent,
                useExisting: AXCalendarRangeComponent,
            },
            AXUnsubscriber,
            { provide: AXComponent, useExisting: AXCalendarRangeComponent },
        ], viewQueries: [{ propertyName: "_c1", first: true, predicate: ["c1"], descendants: true, static: true }, { propertyName: "_c2", first: true, predicate: ["c2"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-calendar-range-header\">\n  <ng-content></ng-content>\n  <div class=\"ax-calendar-header-range-info\">\n    <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n      {{ _navText }}\n    </button>\n  </div>\n  <div class=\"ax-calendar-header-range-buttons\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handlePrevClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-left\"></i>\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handleNextClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-right\"></i>\n    </button>\n  </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n  <ax-calendar\n    #c1\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (onNavigate)=\"handleNavigate()\"\n    (activeViewChange)=\"handleActiveViewChange1()\"\n  >\n  </ax-calendar>\n  <ax-calendar\n    #c2\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}html[dir=rtl] ax-calendar-range .ax-calendar-header-range-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"], dependencies: [{ kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarRangeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-calendar-range', encapsulation: ViewEncapsulation.None, inputs: [
                        'rtl',
                        'readonly',
                        'value',
                        'name',
                        'disabled',
                        'depth',
                        'activeView',
                        'minValue',
                        'maxValue',
                        'disabledDates',
                        'holidayDates',
                        'type',
                        'dayCellTemplate',
                        'monthCellTemplate',
                        'yearCellTemplate',
                        'cellClass',
                        'showNavigation',
                    ], outputs: [
                        'onOptionChanged',
                        'valueChange',
                        'onValueChanged',
                        'onBlur',
                        'onFocus',
                        'depthChange',
                        'typeChange',
                        'activeViewChange',
                        'disabledDatesChange',
                        'holidayDatesChange',
                        'onNavigate',
                        'onSlotClick',
                    ], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXCalendarRangeComponent),
                            multi: true,
                        },
                        {
                            provide: AXValuableComponent,
                            useExisting: AXCalendarRangeComponent,
                        },
                        AXUnsubscriber,
                        { provide: AXComponent, useExisting: AXCalendarRangeComponent },
                    ], imports: [AXCalendarComponent], template: "<div class=\"ax-calendar-range-header\">\n  <ng-content></ng-content>\n  <div class=\"ax-calendar-header-range-info\">\n    <button type=\"button\" [attr.disabled]=\"disabled ? '' : null\" class=\"ax-general-button\" (click)=\"handleNavClick()\">\n      {{ _navText }}\n    </button>\n  </div>\n  <div class=\"ax-calendar-header-range-buttons\">\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handlePrevClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-left\"></i>\n    </button>\n    <button\n      type=\"button\"\n      [attr.disabled]=\"disabled ? '' : null\"\n      class=\"ax-general-button ax-button-icon\"\n      (click)=\"handleNextClick()\"\n    >\n      <i class=\"ax-icon ax-icon-chevron-right\"></i>\n    </button>\n  </div>\n</div>\n<div class=\"ax-calendar-range-body\">\n  <ax-calendar\n    #c1\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (onNavigate)=\"handleNavigate()\"\n    (activeViewChange)=\"handleActiveViewChange1()\"\n  >\n  </ax-calendar>\n  <ax-calendar\n    #c2\n    [showNavigation]=\"false\"\n    [readonly]=\"true\"\n    [cellClass]=\"getCellClass\"\n    [type]=\"type\"\n    [dayCellTemplate]=\"dayCellTemplate\"\n    [monthCellTemplate]=\"monthCellTemplate\"\n    [yearCellTemplate]=\"yearCellTemplate\"\n    [minValue]=\"minValue\"\n    [maxValue]=\"maxValue\"\n    [depth]=\"depth\"\n    (onSlotClick)=\"handleSlotClick($event)\"\n    (activeViewChange)=\"handleActiveViewChange2()\"\n  >\n  </ax-calendar>\n</div>\n", styles: ["ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-calendar-slot-range-text-color: var(--ax-sys-color-on-primary-surface);--ax-comp-calendar-slot-range-between-bg-color: var(--ax-sys-color-primary-surface), .5;--ax-comp-calendar-slot-range-start-end-bg-color: var(--ax-sys-color-primary-surface)}.ax-dark ax-calendar-range{--ax-comp-calendar-range-text-color: var(--ax-sys-color-on-darkest-surface)}html[dir=rtl] ax-calendar-range .ax-calendar-header-range-buttons .ax-icon{-moz-transform:scale(-1,1);-o-transform:scale(-1,1);-webkit-transform:scale(-1,1);transform:scaleX(-1)}ax-calendar-range{display:block;padding:.5rem;color:rgb(var(--ax-comp-calendar-range-text-color));background-color:rgba(var(--ax-comp-calendar-range-bg-color))}ax-calendar-range .ax-calendar-range-header{display:flex;justify-content:space-between;padding-top:var(--ax-comp-calendar-range-header-padding-t, .25rem);padding-left:var(--ax-comp-calendar-range-header-padding-x, .25rem);padding-right:var(--ax-comp-calendar-range-header-padding-x, .25rem)}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-info{font-weight:500}ax-calendar-range .ax-calendar-range-header .ax-calendar-header-range-buttons{display:flex}ax-calendar-range .ax-calendar-range-body{display:flex;flex-direction:row}@media (min-width: 320px) and (max-width: 640px){ax-calendar-range .ax-calendar-range-body{flex-direction:column}}ax-calendar-range ax-calendar{margin:0;padding:0}ax-calendar-range ax-calendar .ax-calendar-body{margin-top:0;padding-top:0}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-between{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-between-bg-color))}ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-start,ax-calendar-range ax-calendar .ax-calendar-body .ax-calendar-slots .ax-calendar-slot.ax-range-end{color:rgba(var(--ax-comp-calendar-slot-range-text-color));background-color:rgba(var(--ax-comp-calendar-slot-range-start-end-bg-color))}@media (min-width: 768px){ax-calendar-range ax-calendar .ax-calendar-body>div{width:100%!important}}\n"] }]
        }], ctorParameters: () => [], propDecorators: { _c1: [{
                type: ViewChild,
                args: ['c1', { static: true }]
            }], _c2: [{
                type: ViewChild,
                args: ['c2', { static: true }]
            }] } });

class AXCalendarModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarModule, imports: [AXCalendarComponent, AXCalendarRangeComponent], exports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarModule, imports: [AXCalendarComponent, AXCalendarRangeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCalendarModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [AXCalendarComponent, AXCalendarRangeComponent],
                    exports: [AXCalendarComponent, AXCalendarRangeComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXCalendarComponent, AXCalendarModule, AXCalendarNavigateEvent, AXCalendarRangeComponent, AXCalendarSlotClick, CALENDAR_INPUTS, CALENDAR_OUTPUTS, MXCalendarBaseComponent };
//# sourceMappingURL=acorex-components-calendar.mjs.map
