@radix-ng/primitives 0.33.1 → 0.33.2

package/fesm2022/radix-ng-primitives-calendar.mjs

@@ -0,0 +1,941 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, computed, Directive, signal, model, booleanAttribute, linkedSignal, effect, forwardRef, NgModule } from '@angular/core';
+import { isToday, getLocalTimeZone, isSameMonth, isSameDay, isEqualMonth, isEqualDay } from '@internationalized/date';
+import * as kbd from '@radix-ng/primitives/core';
+import { toDate, getDaysInMonth, createFormatter, createMonths, isAfter, isBefore, watch, getDefaultDate } from '@radix-ng/primitives/core';
+
+const CALENDAR_ROOT_CONTEXT = new InjectionToken('CalendarRootContext');
+function injectCalendarRootContext() {
+    return inject(CALENDAR_ROOT_CONTEXT);
+}
+
+class RdxCalendarCellTriggerDirective {
+    constructor() {
+        this.rootContext = injectCalendarRootContext();
+        this.elementRef = inject((ElementRef));
+        /**
+         * The date value provided to the cell trigger
+         */
+        this.day = input();
+        /**
+         * The month in which the cell is rendered
+         */
+        this.month = input();
+        /**
+         * Current day
+         */
+        this.dayValue = computed(() => this.day()?.day.toLocaleString());
+        /**
+         * Current today state
+         */
+        this.isDateToday = computed(() => {
+            return isToday(this.day(), getLocalTimeZone());
+        });
+        /**
+         * Current selected state
+         */
+        this.isSelectedDate = computed(() => this.rootContext.isDateSelected(this.day()));
+        this.isDisabled = computed(() => this.rootContext.isDateDisabled(this.day()));
+        this.isOutsideView = computed(() => {
+            return !isSameMonth(this.day(), this.month());
+        });
+        this.isFocusedDate = computed(() => {
+            return !this.rootContext.disabled() && isSameDay(this.day(), this.rootContext.placeholder());
+        });
+        this.isUnavailable = computed(() => this.rootContext.isDateUnavailable?.(this.day()) ?? false);
+        this.labelText = computed(() => {
+            return this.rootContext.formatter.custom(toDate(this.day()), {
+                weekday: 'long',
+                month: 'long',
+                day: 'numeric',
+                year: 'numeric'
+            });
+        });
+        /**
+         * @ignore
+         */
+        this.SELECTOR = '[data-rdx-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])';
+    }
+    ngAfterViewInit() {
+        this.currentElement = this.elementRef.nativeElement;
+    }
+    onClick() {
+        this.changeDate(this.day());
+    }
+    onArrowKey(event) {
+        const code = event.code;
+        if (![
+            kbd.ARROW_RIGHT,
+            kbd.ARROW_LEFT,
+            kbd.ARROW_UP,
+            kbd.ARROW_DOWN,
+            kbd.ENTER,
+            kbd.SPACE_CODE
+        ].includes(code)) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const indexIncrementation = 7;
+        const sign = this.rootContext.dir() === 'rtl' ? -1 : 1;
+        switch (code) {
+            case kbd.ARROW_RIGHT:
+                this.shiftFocus(this.currentElement, sign);
+                break;
+            case kbd.ARROW_LEFT:
+                this.shiftFocus(this.currentElement, -sign);
+                break;
+            case kbd.ARROW_UP:
+                this.shiftFocus(this.currentElement, -indexIncrementation);
+                break;
+            case kbd.ARROW_DOWN:
+                this.shiftFocus(this.currentElement, indexIncrementation);
+                break;
+            case kbd.ENTER:
+            case kbd.SPACE_CODE:
+                this.changeDate(this.day());
+        }
+    }
+    shiftFocus(node, add) {
+        const parentElement = this.rootContext.currentElement;
+        const allCollectionItems = this.getSelectableCells(parentElement);
+        if (!allCollectionItems.length)
+            return;
+        const index = allCollectionItems.indexOf(node);
+        const newIndex = index + add;
+        if (newIndex >= 0 && newIndex < allCollectionItems.length) {
+            if (allCollectionItems[newIndex].hasAttribute('data-disabled')) {
+                this.shiftFocus(allCollectionItems[newIndex], add);
+            }
+            allCollectionItems[newIndex].focus();
+            return;
+        }
+        if (newIndex < 0) {
+            if (!this.rootContext.prevPage)
+                return;
+            this.rootContext.prevPage();
+            setTimeout(() => {
+                const newCollectionItems = this.getSelectableCells(parentElement);
+                if (!newCollectionItems.length)
+                    return;
+                if (!this.rootContext.pagedNavigation && this.rootContext.numberOfMonths() > 1) {
+                    // Placeholder is set to the first month of the new page
+                    const numberOfDays = getDaysInMonth(this.rootContext.placeholder());
+                    const computedIndex = numberOfDays - Math.abs(newIndex);
+                    if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+                        this.shiftFocus(newCollectionItems[computedIndex], add);
+                    }
+                    newCollectionItems[computedIndex].focus();
+                    return;
+                }
+                const computedIndex = newCollectionItems.length - Math.abs(newIndex);
+                if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+                    this.shiftFocus(newCollectionItems[computedIndex], add);
+                }
+                newCollectionItems[computedIndex].focus();
+            });
+        }
+        if (newIndex >= allCollectionItems.length) {
+            if (!this.rootContext.nextPage)
+                return;
+            this.rootContext.nextPage();
+            setTimeout(() => {
+                const newCollectionItems = this.getSelectableCells(parentElement);
+                if (!newCollectionItems.length)
+                    return;
+                if (!this.rootContext.pagedNavigation && this.rootContext.numberOfMonths() > 1) {
+                    const numberOfDays = getDaysInMonth(this.rootContext.placeholder().add({ months: this.rootContext.numberOfMonths() - 1 }));
+                    const computedIndex = newIndex - allCollectionItems.length + (newCollectionItems.length - numberOfDays);
+                    if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+                        this.shiftFocus(newCollectionItems[computedIndex], add);
+                    }
+                    newCollectionItems[computedIndex].focus();
+                    return;
+                }
+                const computedIndex = newIndex - allCollectionItems.length;
+                if (newCollectionItems[computedIndex].hasAttribute('data-disabled')) {
+                    this.shiftFocus(newCollectionItems[computedIndex], add);
+                }
+                newCollectionItems[computedIndex].focus();
+            });
+        }
+    }
+    /**
+     * @ignore
+     */
+    getSelectableCells(calendar) {
+        return Array.from(calendar.querySelectorAll(this.SELECTOR)) ?? [];
+    }
+    /**
+     * @ignore
+     */
+    changeDate(date) {
+        this.rootContext.onDateChange(date);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarCellTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxCalendarCellTriggerDirective, isStandalone: true, selector: "[rdxCalendarCellTrigger]", inputs: { day: { classPropertyName: "day", publicName: "day", isSignal: true, isRequired: false, transformFunction: null }, month: { classPropertyName: "month", publicName: "month", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick()", "keydown": "onArrowKey($event)" }, properties: { "attr.aria-label": "labelText()", "attr.aria-disabled": "isDisabled() || isUnavailable() ? true : undefined", "attr.data-rdx-calendar-cell-trigger": "\"\"", "attr.tabindex": "isFocusedDate() ? 0 : isOutsideView() || isDisabled() ? undefined : -1", "attr.data-value": "day()?.toString()", "attr.data-disabled": "isDisabled() ? \"\" : undefined", "attr.data-today": "isDateToday() ? \"\" : undefined", "attr.data-outside-view": "isOutsideView() ? \"\" : undefined", "attr.data-selected": "isSelectedDate() ? \"\" : undefined", "attr.data-unavailable": "isUnavailable() ? \"\" : undefined", "attr.data-focus": "isFocusedDate() ? \"\" : undefined" } }, exportAs: ["rdxCalendarCellTrigger"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarCellTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCalendarCellTrigger]',
+                    exportAs: 'rdxCalendarCellTrigger',
+                    host: {
+                        role: 'button',
+                        '[attr.aria-label]': 'labelText()',
+                        '[attr.aria-disabled]': 'isDisabled() || isUnavailable() ? true : undefined',
+                        '[attr.data-rdx-calendar-cell-trigger]': '""',
+                        '[attr.tabindex]': 'isFocusedDate() ? 0 : isOutsideView() || isDisabled() ? undefined : -1',
+                        '[attr.data-value]': 'day()?.toString()',
+                        '[attr.data-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-today]': 'isDateToday() ? "" : undefined',
+                        '[attr.data-outside-view]': 'isOutsideView() ? "" : undefined',
+                        '[attr.data-selected]': 'isSelectedDate() ? "" : undefined',
+                        '[attr.data-unavailable]': 'isUnavailable() ? "" : undefined',
+                        '[attr.data-focus]': 'isFocusedDate() ? "" : undefined',
+                        '(click)': 'onClick()',
+                        '(keydown)': 'onArrowKey($event)'
+                    }
+                }]
+        }] });
+
+class RdxCalendarCellDirective {
+    constructor() {
+        this.rootContext = injectCalendarRootContext();
+        /**
+         * The date of the cell
+         */
+        this.date = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxCalendarCellDirective, isStandalone: true, selector: "td[rdxCalendarCell]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "gridcell" }, properties: { "attr.aria-selected": "rootContext.isDateSelected?.(date()!) ? true : undefined", "attr.aria-disabled": "rootContext.isDateSelected?.(date()!) ||  rootContext.isDateUnavailable?.(date()!)", "attr.data-disabled": "rootContext.isDateSelected?.(date()!) ? \"\" : undefined" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[rdxCalendarCell]',
+                    host: {
+                        role: 'gridcell',
+                        '[attr.aria-selected]': 'rootContext.isDateSelected?.(date()!) ? true : undefined',
+                        '[attr.aria-disabled]': 'rootContext.isDateSelected?.(date()!) ||  rootContext.isDateUnavailable?.(date()!)',
+                        '[attr.data-disabled]': 'rootContext.isDateSelected?.(date()!) ? "" : undefined'
+                    }
+                }]
+        }] });
+
+class RdxCalendarGridBodyDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridBodyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarGridBodyDirective, isStandalone: true, selector: "tbody[rdxCalendarGridBody]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbody[rdxCalendarGridBody]'
+                }]
+        }] });
+
+class RdxCalendarGridHeadDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridHeadDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarGridHeadDirective, isStandalone: true, selector: "thead[rdxCalendarGridHead]", host: { properties: { "attr.aria-hidden": "true" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridHeadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thead[rdxCalendarGridHead]',
+                    host: {
+                        '[attr.aria-hidden]': 'true'
+                    }
+                }]
+        }] });
+
+class RdxCalendarGridRowDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarGridRowDirective, isStandalone: true, selector: "tr[rdxCalendarGridRow]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[rdxCalendarGridRow]'
+                }]
+        }] });
+
+class RdxCalendarGridDirective {
+    constructor() {
+        this.rootContext = injectCalendarRootContext();
+        this.disabled = computed(() => (this.rootContext.disabled() ? true : undefined));
+        this.readonly = computed(() => (this.rootContext.readonly ? true : undefined));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarGridDirective, isStandalone: true, selector: "table[rdxCalendarGrid]", host: { attributes: { "tabindex": "-1", "role": "grid" }, properties: { "attr.aria-readonly": "readonly()", "attr.aria-disabled": "disabled()", "attr.data-readonly": "readonly() && \"\"", "attr.data-disabled": "disabled() && \"\"" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarGridDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[rdxCalendarGrid]',
+                    host: {
+                        tabindex: '-1',
+                        role: 'grid',
+                        '[attr.aria-readonly]': 'readonly()',
+                        '[attr.aria-disabled]': 'disabled()',
+                        '[attr.data-readonly]': 'readonly() && ""',
+                        '[attr.data-disabled]': 'disabled() && ""'
+                    }
+                }]
+        }] });
+
+class RdxCalendarHeadCellDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarHeadCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarHeadCellDirective, isStandalone: true, selector: "th[rdxCalendarHeadCell]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarHeadCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[rdxCalendarHeadCell]'
+                }]
+        }] });
+
+class RdxCalendarHeaderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarHeaderDirective, isStandalone: true, selector: "div[rdxCalendarHeader]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[rdxCalendarHeader]'
+                }]
+        }] });
+
+class RdxCalendarHeadingDirective {
+    constructor() {
+        this.rootContext = injectCalendarRootContext();
+        this.headingValue = computed(() => this.rootContext.headingValue());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarHeadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCalendarHeadingDirective, isStandalone: true, selector: "div[rdxCalendarHeading]", host: { properties: { "attr.data-disabled": "rootContext.disabled() ? \"\" : undefined" } }, exportAs: ["rdxCalendarHeading"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarHeadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[rdxCalendarHeading]',
+                    exportAs: 'rdxCalendarHeading',
+                    host: {
+                        '[attr.data-disabled]': 'rootContext.disabled() ? "" : undefined'
+                    }
+                }]
+        }] });
+
+class RdxCalendarNextDirective {
+    constructor() {
+        this.rootContext = injectCalendarRootContext();
+        /**
+         * The function to be used for the `next page`. Overwrites the nextPage function set on the `CalendarRoot`.
+         */
+        this.nextPage = input();
+        /**
+         * @ignore
+         */
+        this.disabled = computed(() => this.rootContext.disabled() || this.rootContext.isNextButtonDisabled(this.nextPage()));
+    }
+    onClick() {
+        this.rootContext.nextPage(this.nextPage());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarNextDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxCalendarNextDirective, isStandalone: true, selector: "button[rdxCalendarNext]", inputs: { nextPage: { classPropertyName: "nextPage", publicName: "nextPage", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-label": "Next page" }, listeners: { "click": "onClick()" }, properties: { "disabled": "disabled()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxCalendarNext"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarNextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxCalendarNext]',
+                    exportAs: 'rdxCalendarNext',
+                    host: {
+                        '(click)': 'onClick()',
+                        '[disabled]': 'disabled()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'disabled() ? "" : undefined',
+                        'aria-label': 'Next page'
+                    }
+                }]
+        }] });
+
+class RdxCalendarPrevDirective {
+    constructor() {
+        this.rootContext = injectCalendarRootContext();
+        /**
+         * The function to be used for the `prev page`. Overwrites the prevPage function set on the `CalendarRoot`.
+         */
+        this.prevPage = input();
+        /**
+         * @ignore
+         */
+        this.disabled = computed(() => this.rootContext.disabled() || this.rootContext.isNextButtonDisabled(this.prevPage()));
+    }
+    onClick() {
+        this.rootContext.prevPage(this.prevPage());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarPrevDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxCalendarPrevDirective, isStandalone: true, selector: "button[rdxCalendarPrev]", inputs: { prevPage: { classPropertyName: "prevPage", publicName: "prevPage", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-label": "Previous page" }, listeners: { "click": "onClick()" }, properties: { "disabled": "disabled()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.aria-disabled": "disabled() ? \"\" : undefined" } }, exportAs: ["rdxCalendarPrev"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarPrevDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[rdxCalendarPrev]',
+                    exportAs: 'rdxCalendarPrev',
+                    host: {
+                        '(click)': 'onClick()',
+                        '[disabled]': 'disabled()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.aria-disabled]': 'disabled() ? "" : undefined',
+                        'aria-label': 'Previous page'
+                    }
+                }]
+        }] });
+
+function calendarState(props) {
+    function isDateSelected(dateObj) {
+        const currentValue = props.date(); // signal read
+        if (Array.isArray(currentValue)) {
+            return currentValue.some((d) => isSameDay(d, dateObj));
+        }
+        else if (!currentValue) {
+            return false;
+        }
+        else {
+            return isSameDay(currentValue, dateObj);
+        }
+    }
+    const isInvalid = computed(() => {
+        const currentValue = props.date();
+        if (Array.isArray(currentValue)) {
+            if (!currentValue.length) {
+                return false;
+            }
+            for (const dateObj of currentValue) {
+                if (props.isDateDisabled?.(dateObj))
+                    return true;
+                if (props.isDateUnavailable?.(dateObj))
+                    return true;
+            }
+        }
+        else {
+            if (!currentValue) {
+                return false;
+            }
+            if (props.isDateDisabled?.(currentValue))
+                return true;
+            if (props.isDateUnavailable?.(currentValue))
+                return true;
+        }
+        return false;
+    });
+    return {
+        isDateSelected,
+        isInvalid
+    };
+}
+function handleNextDisabled(lastPeriodInView, nextPageFunc) {
+    const firstPeriodOfNextPage = nextPageFunc(lastPeriodInView);
+    const diff = firstPeriodOfNextPage.compare(lastPeriodInView);
+    const duration = {};
+    if (diff >= 7)
+        duration.day = 1;
+    if (diff >= getDaysInMonth(lastPeriodInView))
+        duration.month = 1;
+    return firstPeriodOfNextPage.set({ ...duration });
+}
+function handlePrevDisabled(firstPeriodInView, prevPageFunc) {
+    const lastPeriodOfPrevPage = prevPageFunc(firstPeriodInView);
+    const diff = firstPeriodInView.compare(lastPeriodOfPrevPage);
+    const duration = {};
+    if (diff >= 7)
+        duration.day = 35;
+    if (diff >= getDaysInMonth(firstPeriodInView))
+        duration.month = 13;
+    return lastPeriodOfPrevPage.set({ ...duration });
+}
+function handleNextPage(date, nextPageFunc) {
+    return nextPageFunc(date);
+}
+function handlePrevPage(date, prevPageFunc) {
+    return prevPageFunc(date);
+}
+function calendar(props) {
+    const formatter = createFormatter(props.locale());
+    const headingFormatOptions = computed(() => {
+        const options = {
+            calendar: props.placeholder().calendar.identifier
+        };
+        if (props.placeholder().calendar.identifier === 'gregory' && props.placeholder().era === 'BC') {
+            options.era = 'short';
+        }
+        return options;
+    });
+    const month = signal(createMonths({
+        dateObj: props.placeholder(),
+        weekStartsOn: props.weekStartsOn(),
+        locale: props.locale(),
+        fixedWeeks: props.fixedWeeks(),
+        numberOfMonths: props.numberOfMonths()
+    }));
+    const visibleView = computed(() => {
+        return month().map((month) => month.value);
+    });
+    function isOutsideVisibleView(date) {
+        return !visibleView().some((month) => isEqualMonth(date, month));
+    }
+    const isNextButtonDisabled = (nextPageFunc) => {
+        if (!props.maxValue() || !month().length)
+            return false;
+        if (props.disabled())
+            return true;
+        const lastPeriodInView = month()[month().length - 1].value;
+        if (!nextPageFunc && !props.nextPage()) {
+            const firstPeriodOfNextPage = lastPeriodInView.add({ months: 1 }).set({ day: 1 });
+            return isAfter(firstPeriodOfNextPage, props.maxValue());
+        }
+        const firstPeriodOfNextPage = handleNextDisabled(lastPeriodInView, nextPageFunc || props.nextPage());
+        return isAfter(firstPeriodOfNextPage, props.maxValue());
+    };
+    const isPrevButtonDisabled = (prevPageFunc) => {
+        if (!props.minValue() || !month().length)
+            return false;
+        if (props.disabled())
+            return true;
+        const firstPeriodInView = month()[0].value;
+        if (!prevPageFunc && !props.prevPage()) {
+            const lastPeriodOfPrevPage = firstPeriodInView.subtract({ months: 1 }).set({ day: 35 });
+            return isBefore(lastPeriodOfPrevPage, props.minValue());
+        }
+        const lastPeriodOfPrevPage = handlePrevDisabled(firstPeriodInView, prevPageFunc || props.prevPage());
+        return isBefore(lastPeriodOfPrevPage, props.minValue());
+    };
+    const nextPage = (nextPageFunc) => {
+        const firstDate = month()[0].value;
+        if (!nextPageFunc && !props.nextPage()) {
+            const newDate = firstDate.add({ months: props.pagedNavigation() ? props.numberOfMonths() : 1 });
+            const newMonth = createMonths({
+                dateObj: newDate,
+                weekStartsOn: props.weekStartsOn(),
+                locale: props.locale(),
+                fixedWeeks: props.fixedWeeks(),
+                numberOfMonths: props.numberOfMonths()
+            });
+            month.set(newMonth);
+            props.placeholder.set(newMonth[0].value.set({ day: 1 }));
+            return;
+        }
+        const newDate = handleNextPage(firstDate, nextPageFunc || props.nextPage());
+        const newMonth = createMonths({
+            dateObj: newDate,
+            weekStartsOn: props.weekStartsOn(),
+            locale: props.locale(),
+            fixedWeeks: props.fixedWeeks(),
+            numberOfMonths: props.numberOfMonths()
+        });
+        month.set(newMonth);
+        const duration = {};
+        if (!nextPageFunc) {
+            const diff = newMonth[0].value.compare(firstDate);
+            if (diff >= getDaysInMonth(firstDate)) {
+                duration.day = 1;
+            }
+            if (diff >= 365) {
+                duration.month = 1;
+            }
+        }
+        props.placeholder.set(newMonth[0].value.set({ ...duration }));
+    };
+    const prevPage = (prevPageFunc) => {
+        const firstDate = month()[0].value;
+        if (!prevPageFunc && !props.prevPage()) {
+            const newDate = firstDate.subtract({ months: props.pagedNavigation() ? props.numberOfMonths() : 1 });
+            const newMonth = createMonths({
+                dateObj: newDate,
+                weekStartsOn: props.weekStartsOn(),
+                locale: props.locale(),
+                fixedWeeks: props.fixedWeeks(),
+                numberOfMonths: props.numberOfMonths()
+            });
+            month.set(newMonth);
+            props.placeholder.set(newMonth[0].value.set({ day: 1 }));
+            return;
+        }
+        const newDate = handlePrevPage(firstDate, prevPageFunc || props.prevPage());
+        const newMonth = createMonths({
+            dateObj: newDate,
+            weekStartsOn: props.weekStartsOn(),
+            locale: props.locale(),
+            fixedWeeks: props.fixedWeeks(),
+            numberOfMonths: props.numberOfMonths()
+        });
+        month.set(newMonth);
+        const duration = {};
+        // Do not adjust the placeholder if the prevPageFunc is defined (overwrite)
+        if (!prevPageFunc) {
+            const diff = firstDate.compare(newMonth[0].value);
+            if (diff >= getDaysInMonth(firstDate))
+                duration.day = 1;
+            if (diff >= 365)
+                duration.month = 1;
+        }
+        props.placeholder.set(newMonth[0].value.set({ ...duration }));
+    };
+    function isDateDisabled(dateObj) {
+        if (props.isDateDisabled?.()?.(dateObj) || props.disabled())
+            return true;
+        if (props.maxValue() && isAfter(dateObj, props.maxValue()))
+            return true;
+        if (props.minValue() && isBefore(dateObj, props.minValue()))
+            return true;
+        return false;
+    }
+    const isDateUnavailable = (date) => {
+        return !!props.isDateUnavailable?.()?.(date);
+    };
+    const weekdays = computed(() => {
+        if (!month().length)
+            return [];
+        return month()[0].weeks[0].map((date) => {
+            return formatter.dayOfWeek(toDate(date), props.weekdayFormat());
+        });
+    });
+    watch([props.placeholder], ([placeholder]) => {
+        if (visibleView().some((month) => isEqualMonth(month, placeholder))) {
+            return;
+        }
+        month.set(createMonths({
+            dateObj: placeholder,
+            weekStartsOn: props.weekStartsOn(),
+            locale: props.locale(),
+            fixedWeeks: props.fixedWeeks(),
+            numberOfMonths: props.numberOfMonths()
+        }));
+    });
+    watch([props.locale, props.weekStartsOn, props.fixedWeeks, props.numberOfMonths], ([locale, weekStartsOn, fixedWeeks, numberOfMonths]) => {
+        month.set(createMonths({
+            dateObj: props.placeholder(),
+            weekStartsOn: weekStartsOn,
+            locale: locale,
+            fixedWeeks: fixedWeeks,
+            numberOfMonths: numberOfMonths
+        }));
+    });
+    const headingValue = computed(() => {
+        if (!month().length) {
+            return '';
+        }
+        if (props.locale() !== formatter.getLocale())
+            formatter.setLocale(props.locale());
+        if (month().length === 1) {
+            const _month = month()[0].value;
+            return `${formatter.fullMonthAndYear(toDate(_month), headingFormatOptions())}`;
+        }
+        const startMonth = toDate(month()[0].value);
+        const endMonth = toDate(month()[month().length - 1].value);
+        const startMonthName = formatter.fullMonth(startMonth, headingFormatOptions());
+        const endMonthName = formatter.fullMonth(endMonth, headingFormatOptions());
+        const startMonthYear = formatter.fullYear(startMonth, headingFormatOptions());
+        const endMonthYear = formatter.fullYear(endMonth, headingFormatOptions());
+        return startMonthYear === endMonthYear
+            ? `${startMonthName} - ${endMonthName} ${endMonthYear}`
+            : `${startMonthName} ${startMonthYear} - ${endMonthName} ${endMonthYear}`;
+    });
+    const fullCalendarLabel = computed(() => `${props.calendarLabel() ?? 'Event Date'}, ${headingValue()}`);
+    return {
+        isDateDisabled,
+        isDateUnavailable,
+        isNextButtonDisabled,
+        isPrevButtonDisabled,
+        month,
+        weekdays,
+        visibleView,
+        isOutsideVisibleView,
+        formatter,
+        nextPage,
+        prevPage,
+        headingValue,
+        fullCalendarLabel
+    };
+}
+
+class RdxCalendarRootDirective {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        /**
+         * The controlled checked state of the calendar
+         */
+        this.value = model();
+        /**
+         * The default placeholder date
+         */
+        this.defaultPlaceholder = model();
+        this.locale = input('en');
+        this.defaultDate = getDefaultDate({
+            defaultPlaceholder: this.defaultPlaceholder(),
+            defaultValue: this.value(),
+            locale: this.locale()
+        });
+        /**
+         * The placeholder date, which is used to determine what month to display when no date is selected.
+         * This updates as the user navigates the calendar and can be used to programmatically control the calendar view
+         */
+        this.placeholder = model(this.defaultPlaceholder() ?? this.defaultDate.copy());
+        this.multiple = input(false, { transform: booleanAttribute });
+        /**
+         * Whether to always display 6 weeks in the calendar
+         */
+        this.fixedWeeks = input(false, { transform: booleanAttribute });
+        /**
+         * Whether the calendar is disabled
+         */
+        this.disabled = input(false, { transform: booleanAttribute });
+        /**
+         * Whether to prevent the user from deselecting a date without selecting another date first
+         */
+        this.preventDeselect = input(false, { transform: booleanAttribute });
+        /**
+         * The day of the week to start the calendar on
+         */
+        this.weekStartsOn = input(1);
+        /**
+         * The number of months to display at once
+         */
+        this.numberOfMonths = input(1);
+        /**
+         * The reading direction of the calendar when applicable.
+         */
+        this.dir = input('ltr');
+        /**
+         * The minimum date that can be selected
+         */
+        this.minValue = input();
+        /**
+         * The maximum date that can be selected
+         */
+        this.maxValue = input();
+        /**
+         * The format to use for the weekday strings provided via the weekdays slot prop
+         */
+        this.weekdayFormat = input('narrow');
+        /**
+         * The accessible label for the calendar
+         */
+        this.calendarLabel = input();
+        /**
+         * Whether the calendar is readonly
+         */
+        this.readonly = input(false, { transform: booleanAttribute });
+        /**
+         * This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
+         */
+        this.pagedNavigation = input(false, { transform: booleanAttribute });
+        this.propsNextPage = input();
+        this.propsPrevPage = input();
+        /**
+         * A function that returns whether a date is disabled
+         */
+        this.isDateDisabled = input();
+        /**
+         * A function that returns whether a date is unavailable
+         */
+        this.isDateUnavailable = input();
+        this.initialFocus = input(false, { transform: booleanAttribute });
+        this.months = model();
+        /**
+         * The days of the week
+         */
+        this.weekDays = model();
+        this.fixedWeeksRef = linkedSignal({
+            source: this.fixedWeeks,
+            computation: (value) => value
+        });
+        this.disabledRef = linkedSignal({
+            source: this.disabled,
+            computation: (value) => value
+        });
+        this.pagedNavigationRef = linkedSignal({
+            source: this.pagedNavigation,
+            computation: (value) => value
+        });
+        /**
+         * @ignore
+         */
+        this.headingValue = signal('');
+        /**
+         * @ignore
+         */
+        this.fullCalendarLabel = signal('');
+        this.calendar = calendar({
+            locale: this.locale,
+            placeholder: this.placeholder,
+            weekStartsOn: this.weekStartsOn,
+            fixedWeeks: this.fixedWeeksRef,
+            numberOfMonths: this.numberOfMonths,
+            minValue: this.minValue,
+            maxValue: this.maxValue,
+            disabled: this.disabledRef,
+            weekdayFormat: this.weekdayFormat,
+            pagedNavigation: this.pagedNavigationRef,
+            isDateDisabled: this.isDateDisabled,
+            isDateUnavailable: this.isDateUnavailable,
+            calendarLabel: this.calendarLabel,
+            nextPage: this.propsNextPage,
+            prevPage: this.propsPrevPage
+        });
+        this.nextPage = this.calendar.nextPage;
+        this.prevPage = this.calendar.prevPage;
+        this.isOutsideVisibleView = this.calendar.isOutsideVisibleView;
+        this.isNextButtonDisabled = this.calendar.isNextButtonDisabled;
+        this.isPrevButtonDisabled = this.calendar.isPrevButtonDisabled;
+        this.formatter = this.calendar.formatter;
+        effect(() => {
+            this.months.set(this.calendar.month());
+            this.weekDays.set(this.calendar.weekdays());
+            this.fullCalendarLabel.set(this.calendar.fullCalendarLabel());
+            this.headingValue.set(this.calendar.headingValue());
+            const { isInvalid, isDateSelected } = calendarState({
+                date: this.value,
+                isDateDisabled: this.isDateDisabled(),
+                isDateUnavailable: this.isDateUnavailable()
+            });
+            this.isDateSelected = isDateSelected;
+            this.isInvalid = isInvalid();
+        });
+        watch([this.value], (_modelValue) => {
+            if (Array.isArray(_modelValue) && _modelValue.length) {
+                const lastValue = _modelValue[_modelValue.length - 1];
+                if (lastValue && !isEqualDay(this.placeholder(), lastValue)) {
+                    this.onPlaceholderChange(lastValue);
+                }
+            }
+            else if (!Array.isArray(_modelValue) && _modelValue && !isEqualDay(this.placeholder(), _modelValue)) {
+                this.onPlaceholderChange(_modelValue);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.currentElement = this.elementRef.nativeElement;
+    }
+    /**
+     * @ignore
+     */
+    onPlaceholderChange(value) {
+        this.placeholder.set(value.copy());
+    }
+    /**
+     * @ignore
+     */
+    onDateChange(date) {
+        const currentValue = this.value();
+        if (!this.multiple()) {
+            // for single selection
+            if (!this.value()) {
+                this.value.set(date.copy());
+                return;
+            }
+            if (!this.preventDeselect() && isEqualDay(this.value(), date)) {
+                this.placeholder.set(date.copy());
+                this.value.set(undefined);
+            }
+            else {
+                this.value.set(date.copy());
+            }
+        }
+        else if (!this.value()) {
+            // for multiple selection
+            this.value.set([date.copy()]);
+        }
+        else if (Array.isArray(currentValue)) {
+            const index = currentValue.findIndex((d) => isSameDay(d, date));
+            if (index === -1) {
+                this.value.set([...currentValue, date.copy()]);
+            }
+            else if (!this.preventDeselect()) {
+                const next = currentValue.filter((d) => !isSameDay(d, date));
+                if (next.length === 0) {
+                    this.placeholder.set(date.copy());
+                    this.value.set(undefined);
+                    return;
+                }
+                this.value.set(next.map((d) => d.copy()));
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxCalendarRootDirective, isStandalone: true, selector: "[rdxCalendarRoot]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultPlaceholder: { classPropertyName: "defaultPlaceholder", publicName: "defaultPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, fixedWeeks: { classPropertyName: "fixedWeeks", publicName: "fixedWeeks", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, preventDeselect: { classPropertyName: "preventDeselect", publicName: "preventDeselect", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, weekdayFormat: { classPropertyName: "weekdayFormat", publicName: "weekdayFormat", isSignal: true, isRequired: false, transformFunction: null }, calendarLabel: { classPropertyName: "calendarLabel", publicName: "calendarLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pagedNavigation: { classPropertyName: "pagedNavigation", publicName: "pagedNavigation", isSignal: true, isRequired: false, transformFunction: null }, propsNextPage: { classPropertyName: "propsNextPage", publicName: "propsNextPage", isSignal: true, isRequired: false, transformFunction: null }, propsPrevPage: { classPropertyName: "propsPrevPage", publicName: "propsPrevPage", isSignal: true, isRequired: false, transformFunction: null }, isDateDisabled: { classPropertyName: "isDateDisabled", publicName: "isDateDisabled", isSignal: true, isRequired: false, transformFunction: null }, isDateUnavailable: { classPropertyName: "isDateUnavailable", publicName: "isDateUnavailable", isSignal: true, isRequired: false, transformFunction: null }, initialFocus: { classPropertyName: "initialFocus", publicName: "initialFocus", isSignal: true, isRequired: false, transformFunction: null }, months: { classPropertyName: "months", publicName: "months", isSignal: true, isRequired: false, transformFunction: null }, weekDays: { classPropertyName: "weekDays", publicName: "weekDays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", defaultPlaceholder: "defaultPlaceholderChange", placeholder: "placeholderChange", months: "monthsChange", weekDays: "weekDaysChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "fullCalendarLabel()", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-readonly": "readonly() ? \"\" : undefined", "attr.data-invalid": "isInvalid ? \"\" : undefined", "attr.dir": "dir()" } }, providers: [
+            { provide: CALENDAR_ROOT_CONTEXT, useExisting: forwardRef(() => RdxCalendarRootDirective) }
+        ], exportAs: ["rdxCalendarRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxCalendarRoot]',
+                    exportAs: 'rdxCalendarRoot',
+                    providers: [
+                        { provide: CALENDAR_ROOT_CONTEXT, useExisting: forwardRef(() => RdxCalendarRootDirective) }
+                    ],
+                    host: {
+                        role: 'application',
+                        '[attr.aria-label]': 'fullCalendarLabel()',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-readonly]': 'readonly() ? "" : undefined',
+                        '[attr.data-invalid]': 'isInvalid ? "" : undefined',
+                        '[attr.dir]': 'dir()'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+const _imports = [
+    RdxCalendarCellTriggerDirective,
+    RdxCalendarCellDirective,
+    RdxCalendarGridBodyDirective,
+    RdxCalendarGridHeadDirective,
+    RdxCalendarGridRowDirective,
+    RdxCalendarGridDirective,
+    RdxCalendarHeadCellDirective,
+    RdxCalendarHeaderDirective,
+    RdxCalendarPrevDirective,
+    RdxCalendarRootDirective,
+    RdxCalendarHeadingDirective,
+    RdxCalendarNextDirective
+];
+class RdxCalendarModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarModule, imports: [RdxCalendarCellTriggerDirective,
+            RdxCalendarCellDirective,
+            RdxCalendarGridBodyDirective,
+            RdxCalendarGridHeadDirective,
+            RdxCalendarGridRowDirective,
+            RdxCalendarGridDirective,
+            RdxCalendarHeadCellDirective,
+            RdxCalendarHeaderDirective,
+            RdxCalendarPrevDirective,
+            RdxCalendarRootDirective,
+            RdxCalendarHeadingDirective,
+            RdxCalendarNextDirective], exports: [RdxCalendarCellTriggerDirective,
+            RdxCalendarCellDirective,
+            RdxCalendarGridBodyDirective,
+            RdxCalendarGridHeadDirective,
+            RdxCalendarGridRowDirective,
+            RdxCalendarGridDirective,
+            RdxCalendarHeadCellDirective,
+            RdxCalendarHeaderDirective,
+            RdxCalendarPrevDirective,
+            RdxCalendarRootDirective,
+            RdxCalendarHeadingDirective,
+            RdxCalendarNextDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCalendarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxCalendarCellDirective, RdxCalendarCellTriggerDirective, RdxCalendarGridBodyDirective, RdxCalendarGridDirective, RdxCalendarGridHeadDirective, RdxCalendarGridRowDirective, RdxCalendarHeadCellDirective, RdxCalendarHeaderDirective, RdxCalendarHeadingDirective, RdxCalendarModule, RdxCalendarNextDirective, RdxCalendarPrevDirective, RdxCalendarRootDirective };
+//# sourceMappingURL=radix-ng-primitives-calendar.mjs.map