@radix-ng/primitives 0.51.0 → 1.0.0-beta.1

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

@@ -35,14 +35,14 @@ class RdxCalendarCellTriggerDirective {
          * Current selected state
          */
         this.isSelectedDate = computed(() => this.rootContext.isDateSelected(this.day()), ...(ngDevMode ? [{ debugName: "isSelectedDate" }] : /* istanbul ignore next */ []));
-        this.isDisabled = computed(() => this.rootContext.isDateDisabled(this.day()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+        this.isDisabled = computed(() => this.rootContext.dateDisabled(this.day()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         this.isOutsideView = computed(() => {
             return !isSameMonth(this.day(), this.month());
         }, ...(ngDevMode ? [{ debugName: "isOutsideView" }] : /* istanbul ignore next */ []));
         this.isFocusedDate = computed(() => {
             return !this.rootContext.disabled() && isSameDay(this.day(), this.rootContext.placeholder());
         }, ...(ngDevMode ? [{ debugName: "isFocusedDate" }] : /* istanbul ignore next */ []));
-        this.isUnavailable = computed(() => this.rootContext.isDateUnavailable?.(this.day()) ?? false, ...(ngDevMode ? [{ debugName: "isUnavailable" }] : /* istanbul ignore next */ []));
+        this.isUnavailable = computed(() => this.rootContext.dateUnavailable(this.day()), ...(ngDevMode ? [{ debugName: "isUnavailable" }] : /* istanbul ignore next */ []));
         this.labelText = computed(() => {
             return this.rootContext.formatter.custom(toDate(this.day()), {
                 weekday: 'long',
@@ -55,12 +55,21 @@ class RdxCalendarCellTriggerDirective {
          * @ignore
          */
         this.SELECTOR = '[data-rdx-calendar-cell-trigger]:not([data-outside-view]):not([data-outside-visible-view])';
-    }
-    ngAfterViewInit() {
+        // Host element is available in the constructor; no AfterViewInit needed.
         this.currentElement = this.elementRef.nativeElement;
     }
     onClick() {
-        this.changeDate(this.day());
+        this.select();
+    }
+    /** Select the date unless the cell is disabled/unavailable or the calendar is readonly. */
+    select() {
+        if (this.isDisabled() || this.isUnavailable() || this.rootContext.readonly()) {
+            return;
+        }
+        const day = this.day();
+        if (day) {
+            this.changeDate(day);
+        }
     }
     onArrowKey(event) {
         const keyEvent = event;
@@ -87,7 +96,7 @@ class RdxCalendarCellTriggerDirective {
                 break;
             case kbd.ENTER:
             case kbd.SPACE_CODE:
-                this.changeDate(this.day());
+                this.select();
         }
     }
     shiftFocus(node, add) {
@@ -98,10 +107,7 @@ class RdxCalendarCellTriggerDirective {
         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();
+            this.focusCell(allCollectionItems, newIndex, add);
             return;
         }
         if (newIndex < 0) {
@@ -109,50 +115,46 @@ class RdxCalendarCellTriggerDirective {
                 return;
             this.rootContext.prevPage();
             setTimeout(() => {
-                const newCollectionItems = this.getSelectableCells(parentElement);
-                if (!newCollectionItems.length)
+                const cells = this.getSelectableCells(parentElement);
+                if (!cells.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();
+                const computedIndex = !this.rootContext.pagedNavigation() && this.rootContext.numberOfMonths() > 1
+                    ? // placeholder is the first month of the new page
+                        getDaysInMonth(this.rootContext.placeholder()) - Math.abs(newIndex)
+                    : cells.length - Math.abs(newIndex);
+                this.focusCell(cells, computedIndex, add);
             });
+            return;
         }
-        if (newIndex >= allCollectionItems.length) {
-            if (!this.rootContext.nextPage)
+        // newIndex >= allCollectionItems.length
+        if (!this.rootContext.nextPage)
+            return;
+        this.rootContext.nextPage();
+        setTimeout(() => {
+            const cells = this.getSelectableCells(parentElement);
+            if (!cells.length)
                 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();
-            });
+            let computedIndex;
+            if (!this.rootContext.pagedNavigation() && this.rootContext.numberOfMonths() > 1) {
+                const numberOfDays = getDaysInMonth(this.rootContext.placeholder().add({ months: this.rootContext.numberOfMonths() - 1 }));
+                computedIndex = newIndex - allCollectionItems.length + (cells.length - numberOfDays);
+            }
+            else {
+                computedIndex = newIndex - allCollectionItems.length;
+            }
+            this.focusCell(cells, computedIndex, add);
+        });
+    }
+    /** Focus the cell at `index`, skipping over a disabled cell in the same direction. */
+    focusCell(cells, index, add) {
+        const cell = cells[index];
+        if (!cell)
+            return;
+        if (cell.hasAttribute('data-disabled')) {
+            this.shiftFocus(cell, add);
+            return;
         }
+        cell.focus();
     }
     /**
      * @ignore
@@ -191,7 +193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '(keydown)': 'onArrowKey($event)'
                     }
                 }]
-        }], propDecorators: { day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { day: [{ type: i0.Input, args: [{ isSignal: true, alias: "day", required: false }] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }] } });
 
 class RdxCalendarCellDirective {
     constructor() {
@@ -202,7 +204,7 @@ class RdxCalendarCellDirective {
         this.date = input(...(ngDevMode ? [undefined, { debugName: "date" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCalendarCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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.dateDisabled(date()!) || rootContext.dateUnavailable(date()!) ? true : undefined", "attr.data-disabled": "rootContext.dateDisabled(date()!) ? \"\" : undefined" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCalendarCellDirective, decorators: [{
             type: Directive,
@@ -210,9 +212,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     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'
+                        '[attr.aria-selected]': 'rootContext.isDateSelected(date()!) ? true : undefined',
+                        '[attr.aria-disabled]': 'rootContext.dateDisabled(date()!) || rootContext.dateUnavailable(date()!) ? true : undefined',
+                        '[attr.data-disabled]': 'rootContext.dateDisabled(date()!) ? "" : undefined'
                     }
                 }]
         }], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: false }] }] } });
@@ -257,7 +259,7 @@ class RdxCalendarGridDirective {
     constructor() {
         this.rootContext = injectCalendarRootContext();
         this.disabled = computed(() => (this.rootContext.disabled() ? true : undefined), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.readonly = computed(() => (this.rootContext.readonly ? true : undefined), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.readonly = computed(() => (this.rootContext.readonly() ? true : undefined), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCalendarGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", 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 }); }
@@ -361,7 +363,7 @@ class RdxCalendarPrevDirective {
         /**
          * @ignore
          */
-        this.disabled = computed(() => this.rootContext.disabled() || this.rootContext.isNextButtonDisabled(this.prevPage()), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => this.rootContext.disabled() || this.rootContext.isPrevButtonDisabled(this.prevPage()), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     }
     onClick() {
         this.rootContext.prevPage(this.prevPage());
@@ -663,16 +665,16 @@ class RdxCalendarRootDirective {
          */
         this.defaultPlaceholder = model(...(ngDevMode ? [undefined, { debugName: "defaultPlaceholder" }] : /* istanbul ignore next */ []));
         this.locale = input('en', ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
-        this.defaultDate = getDefaultDate({
+        this.defaultDate = computed(() => getDefaultDate({
             defaultPlaceholder: this.defaultPlaceholder(),
             defaultValue: this.value(),
             locale: this.locale()
-        });
+        }), ...(ngDevMode ? [{ debugName: "defaultDate" }] : /* istanbul ignore next */ []));
         /**
          * 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(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.placeholder = model(this.defaultPlaceholder() ?? this.defaultDate().copy(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Whether to always display 6 weeks in the calendar
@@ -742,14 +744,13 @@ class RdxCalendarRootDirective {
         this._disabled = linkedSignal(this.disabled, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
         this._pagedNavigation = linkedSignal(this.pagedNavigation, ...(ngDevMode ? [{ debugName: "_pagedNavigation" }] : /* istanbul ignore next */ []));
         this.startingWeekNumber = computed(() => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            const firstDayOfGrid = startOfWeek(this.months()[0].weeks[0][0], this.locale());
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            return Array.from({ length: this.months()[0].weeks.length })
-                .fill(null)
-                .map((_, idx) => {
+            const months = this.months();
+            const firstWeek = months?.[0]?.weeks;
+            if (!firstWeek?.length) {
+                return [];
+            }
+            const firstDayOfGrid = startOfWeek(firstWeek[0][0], this.locale());
+            return Array.from({ length: firstWeek.length }).map((_, idx) => {
                 const firstDayOfWeek = firstDayOfGrid.add({ weeks: idx });
                 const thursday = firstDayOfWeek.add({ days: 3 });
                 const firstDayOfYear = startOfYear(thursday);
@@ -759,11 +760,28 @@ class RdxCalendarRootDirective {
         /**
          * @ignore
          */
-        this.headingValue = signal('', ...(ngDevMode ? [{ debugName: "headingValue" }] : /* istanbul ignore next */ []));
+        this.headingValue = computed(() => this.calendar.headingValue(), ...(ngDevMode ? [{ debugName: "headingValue" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         */
+        this.fullCalendarLabel = computed(() => this.calendar.fullCalendarLabel(), ...(ngDevMode ? [{ debugName: "fullCalendarLabel" }] : /* istanbul ignore next */ []));
         /**
+         * Selection + validity state, recomputed when the value or the matchers change.
          * @ignore
          */
-        this.fullCalendarLabel = signal('', ...(ngDevMode ? [{ debugName: "fullCalendarLabel" }] : /* istanbul ignore next */ []));
+        this._state = computed(() => calendarState({
+            date: this.value,
+            isDateDisabled: this.isDateDisabled(),
+            isDateUnavailable: this.isDateUnavailable()
+        }), ...(ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []));
+        /**
+         * @ignore
+         */
+        this.isDateSelected = (date) => this._state().isDateSelected(date);
+        /**
+         * @ignore
+         */
+        this.isInvalid = computed(() => this._state().isInvalid(), ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
         this.calendar = calendar({
             locale: this.locale,
             placeholder: this.placeholder,
@@ -781,24 +799,21 @@ class RdxCalendarRootDirective {
             nextPage: this.propsNextPage,
             prevPage: this.propsPrevPage
         });
+        // Host element exists in the constructor; no need for AfterViewInit.
+        this.currentElement = this.elementRef.nativeElement;
         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;
+        // Resolved matchers (fold in `disabled`, min/max and the input matchers).
+        this.dateDisabled = this.calendar.isDateDisabled;
+        this.dateUnavailable = this.calendar.isDateUnavailable;
+        // Bridge the composable's grid output into the exposed models.
         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) {
@@ -812,9 +827,6 @@ class RdxCalendarRootDirective {
             }
         });
     }
-    ngAfterViewInit() {
-        this.currentElement = this.elementRef.nativeElement;
-    }
     /**
      * @ignore
      */
@@ -861,7 +873,7 @@ class RdxCalendarRootDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxCalendarRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: RdxCalendarRootDirective, decorators: [{
             type: Directive,
@@ -874,7 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         '[attr.aria-label]': 'fullCalendarLabel()',
                         '[attr.data-disabled]': 'disabled() ? "" : undefined',
                         '[attr.data-readonly]': 'readonly() ? "" : undefined',
-                        '[attr.data-invalid]': 'isInvalid ? "" : undefined',
+                        '[attr.data-invalid]': 'isInvalid() ? "" : undefined',
                         '[attr.dir]': 'dir()'
                     }
                 }]