@spartan-ng/brain 0.0.1-alpha.493 → 0.0.1-alpha.495

package/fesm2022/spartan-ng-brain-calendar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, input, computed, Directive, HostListener, ViewContainerRef, ChangeDetectorRef, TemplateRef, effect, untracked, Injector, booleanAttribute, model, numberAttribute, contentChild, contentChildren, signal, afterNextRender, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, input, computed, Directive, ChangeDetectorRef, Injector, booleanAttribute, model, numberAttribute, contentChild, contentChildren, signal, afterNextRender, HostListener, ViewContainerRef, TemplateRef, effect, untracked, NgModule } from '@angular/core';
 import { injectDateAdapter } from '@spartan-ng/brain/date-time';
 
 const BrnCalendarToken = new InjectionToken('BrnCalendarToken');
@@ -13,7 +13,7 @@ function injectBrnCalendar() {
     return inject(BrnCalendarToken);
 }
 
-class BrnCalendarCellButtonDirective {
+class BrnCalendarCellButton {
     /** Access the date adapter */
     _dateAdapter = injectDateAdapter();
     /** Access the calendar component */
@@ -134,10 +134,10 @@ class BrnCalendarCellButtonDirective {
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnCalendarCellButtonDirective, isStandalone: true, selector: "button[brnCalendarCellButton]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell", "type": "button" }, listeners: { "click": "_calendar.selectDate(date())", "keydown.arrowLeft": "focusPrevious($event)", "keydown.arrowRight": "focusNext($event)", "keydown.arrowUp": "focusAbove($event)", "keydown.arrowDown": "focusBelow($event)", "keydown.home": "focusFirst($event)", "keydown.end": "focusLast($event)", "keydown.pageUp": "focusPreviousMonth($event)", "keydown.pageDown": "focusNextMonth($event)" }, properties: { "tabindex": "focusable() ? 0 : -1", "attr.data-outside": "outside() ? '' : null", "attr.data-today": "today() && !selected() ? '' : null", "attr.data-selected": "selected() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.aria-selected": "selected() ? 'true' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "disabled": "disabled()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnCalendarCellButton, isStandalone: true, selector: "button[brnCalendarCellButton]", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "gridcell", "type": "button" }, listeners: { "click": "_calendar.selectDate(date())", "keydown.arrowLeft": "focusPrevious($event)", "keydown.arrowRight": "focusNext($event)", "keydown.arrowUp": "focusAbove($event)", "keydown.arrowDown": "focusBelow($event)", "keydown.home": "focusFirst($event)", "keydown.end": "focusLast($event)", "keydown.pageUp": "focusPreviousMonth($event)", "keydown.pageDown": "focusNextMonth($event)" }, properties: { "tabindex": "focusable() ? 0 : -1", "attr.data-outside": "outside() ? '' : null", "attr.data-today": "today() && !selected() ? '' : null", "attr.data-selected": "selected() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.aria-selected": "selected() ? 'true' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "disabled": "disabled()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellButton, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[brnCalendarCellButton]',
@@ -165,52 +165,208 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
-class BrnCalendarCellDirective {
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarCellDirective, isStandalone: true, selector: "[brnCalendarCell]", host: { attributes: { "role": "presentation" } }, ngImport: i0 });
+let uniqueId = 0;
+class BrnCalendarHeader {
+    /** The unique id for the header */
+    id = input(`brn-calendar-header-${uniqueId++}`);
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnCalendarHeader, isStandalone: true, selector: "[brnCalendarHeader]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite", "role": "presentation" }, properties: { "id": "id()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarHeader, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[brnCalendarCell]',
+                    selector: '[brnCalendarHeader]',
                     host: {
+                        '[id]': 'id()',
+                        'aria-live': 'polite',
                         role: 'presentation',
                     },
                 }]
         }] });
 
-class BrnCalendarGridDirective {
-    /** Access the calendar component */
-    _calendar = injectBrnCalendar();
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarGridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarGridDirective, isStandalone: true, selector: "[brnCalendarGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "_calendar.header()?.id()" } }, ngImport: i0 });
+class BrnCalendar {
+    /** Access the date adapter */
+    _dateAdapter = injectDateAdapter();
+    /** Access the change detector */
+    _changeDetector = inject(ChangeDetectorRef);
+    /** Access the injector */
+    _injector = inject(Injector);
+    /** The minimum date that can be selected.*/
+    min = input();
+    /** The maximum date that can be selected. */
+    max = input();
+    /** Determine if the date picker is disabled. */
+    disabled = input(false, {
+        transform: booleanAttribute,
+    });
+    /** The selected value. */
+    date = model();
+    /** Whether a specific date is disabled. */
+    dateDisabled = input(() => false);
+    /** The day the week starts on */
+    weekStartsOn = input(0, {
+        transform: (v) => numberAttribute(v),
+    });
+    /** The default focused date. */
+    defaultFocusedDate = input();
+    /** @internal Access the header */
+    header = contentChild(BrnCalendarHeader);
+    /** Store the cells */
+    _cells = contentChildren(BrnCalendarCellButton, {
+        descendants: true,
+    });
+    /**
+     * @internal
+     * The internal state of the component.
+     */
+    state = computed(() => ({
+        focusedDate: signal(this.constrainDate(this.defaultFocusedDate() ?? this.date() ?? this._dateAdapter.now())),
+    }));
+    /**
+     * The focused date.
+     */
+    focusedDate = computed(() => this.state().focusedDate());
+    /**
+     * Get all the days to display, this is the days of the current month
+     * and the days of the previous and next month to fill the grid.
+     */
+    days = computed(() => {
+        const weekStartsOn = this.weekStartsOn();
+        const month = this.state().focusedDate();
+        const days = [];
+        // Get the first and last day of the month.
+        let firstDay = this._dateAdapter.startOfMonth(month);
+        let lastDay = this._dateAdapter.endOfMonth(month);
+        // we need to subtract until we get the to starting day before or on the start of the month.
+        while (this._dateAdapter.getDay(firstDay) !== weekStartsOn) {
+            firstDay = this._dateAdapter.subtract(firstDay, { days: 1 });
+        }
+        const weekEndsOn = (weekStartsOn + 6) % 7;
+        // we need to add until we get to the ending day after or on the end of the month.
+        while (this._dateAdapter.getDay(lastDay) !== weekEndsOn) {
+            lastDay = this._dateAdapter.add(lastDay, { days: 1 });
+        }
+        // collect all the days to display.
+        while (firstDay <= lastDay) {
+            days.push(firstDay);
+            firstDay = this._dateAdapter.add(firstDay, { days: 1 });
+        }
+        return days;
+    });
+    /** @internal Constrain a date to the min and max boundaries */
+    constrainDate(date) {
+        const min = this.min();
+        const max = this.max();
+        // If there is no min or max, return the date.
+        if (!min && !max) {
+            return date;
+        }
+        // If there is a min and the date is before the min, return the min.
+        if (min && this._dateAdapter.isBefore(date, this._dateAdapter.startOfDay(min))) {
+            return min;
+        }
+        // If there is a max and the date is after the max, return the max.
+        if (max && this._dateAdapter.isAfter(date, this._dateAdapter.endOfDay(max))) {
+            return max;
+        }
+        // Return the date.
+        return date;
+    }
+    /** @internal Determine if a date is disabled */
+    isDateDisabled(date) {
+        // if the calendar is disabled we can't select this date
+        if (this.disabled()) {
+            return true;
+        }
+        // if the date is outside the min and max range
+        const min = this.min();
+        const max = this.max();
+        if (min && this._dateAdapter.isBefore(date, this._dateAdapter.startOfDay(min))) {
+            return true;
+        }
+        if (max && this._dateAdapter.isAfter(date, this._dateAdapter.endOfDay(max))) {
+            return true;
+        }
+        // if this specific date is disabled
+        const disabledFn = this.dateDisabled();
+        if (disabledFn(date)) {
+            return true;
+        }
+        return false;
+    }
+    isSelected(date) {
+        const selected = this.date();
+        return selected !== undefined && this._dateAdapter.isSameDay(date, selected);
+    }
+    selectDate(date) {
+        if (this.isSelected(date)) {
+            this.date.set(undefined);
+        }
+        else {
+            this.date.set(date);
+        }
+        this.state().focusedDate.set(date);
+    }
+    /** @internal Set the focused date */
+    setFocusedDate(date) {
+        // check if the date is disabled.
+        if (this.isDateDisabled(date)) {
+            return;
+        }
+        this.state().focusedDate.set(date);
+        // wait until the cells have all updated
+        afterNextRender({
+            write: () => {
+                // focus the cell with the target date.
+                const cell = this._cells().find((c) => this._dateAdapter.isSameDay(c.date(), date));
+                if (cell) {
+                    cell.focus();
+                }
+            },
+        }, {
+            injector: this._injector,
+        });
+        // we must update the view to ensure the focused cell is visible.
+        this._changeDetector.detectChanges();
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnCalendar, isStandalone: true, selector: "[brnCalendar]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [provideBrnCalendar(BrnCalendar)], queries: [{ propertyName: "header", first: true, predicate: BrnCalendarHeader, descendants: true, isSignal: true }, { propertyName: "_cells", predicate: BrnCalendarCellButton, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarGridDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendar, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[brnCalendarGrid]',
+                    selector: '[brnCalendar]',
+                    providers: [provideBrnCalendar(BrnCalendar)],
+                }]
+        }] });
+
+class BrnCalendarCell {
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarCell, isStandalone: true, selector: "[brnCalendarCell]", host: { attributes: { "role": "presentation" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnCalendarCell]',
                     host: {
-                        role: 'grid',
-                        '[attr.aria-labelledby]': '_calendar.header()?.id()',
+                        role: 'presentation',
                     },
                 }]
         }] });
 
-let uniqueId = 0;
-class BrnCalendarHeaderDirective {
-    /** The unique id for the header */
-    id = input(`brn-calendar-header-${uniqueId++}`);
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: BrnCalendarHeaderDirective, isStandalone: true, selector: "[brnCalendarHeader]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-live": "polite", "role": "presentation" }, properties: { "id": "id()" } }, ngImport: i0 });
+class BrnCalendarGrid {
+    /** Access the calendar component */
+    _calendar = injectBrnCalendar();
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarGrid, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarGrid, isStandalone: true, selector: "[brnCalendarGrid]", host: { attributes: { "role": "grid" }, properties: { "attr.aria-labelledby": "_calendar.header()?.id()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarGrid, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[brnCalendarHeader]',
+                    selector: '[brnCalendarGrid]',
                     host: {
-                        '[id]': 'id()',
-                        'aria-live': 'polite',
-                        role: 'presentation',
+                        role: 'grid',
+                        '[attr.aria-labelledby]': '_calendar.header()?.id()',
                     },
                 }]
         }] });
@@ -247,7 +403,7 @@ function injectBrnCalendarI18n() {
     return inject(BrnCalendarI18nToken, { optional: true }) ?? defaultCalendarI18n;
 }
 
-class BrnCalendarNextButtonDirective {
+class BrnCalendarNextButton {
     /** Access the calendar */
     _calendar = injectBrnCalendar();
     /** Access the date adapter */
@@ -266,10 +422,10 @@ class BrnCalendarNextButtonDirective {
         }
         this._calendar.state().focusedDate.set(targetDate);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarNextButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarNextButtonDirective, isStandalone: true, selector: "[brnCalendarNextButton]", host: { attributes: { "type": "button" }, listeners: { "click": "focusPreviousMonth()" }, properties: { "attr.aria-label": "_i18n.labelNext()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarNextButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarNextButton, isStandalone: true, selector: "[brnCalendarNextButton]", host: { attributes: { "type": "button" }, listeners: { "click": "focusPreviousMonth()" }, properties: { "attr.aria-label": "_i18n.labelNext()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarNextButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarNextButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCalendarNextButton]',
@@ -283,7 +439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: ['click']
             }] } });
 
-class BrnCalendarPreviousButtonDirective {
+class BrnCalendarPreviousButton {
     /** Access the calendar */
     _calendar = injectBrnCalendar();
     /** Access the date adapter */
@@ -302,10 +458,10 @@ class BrnCalendarPreviousButtonDirective {
         }
         this._calendar.state().focusedDate.set(targetDate);
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarPreviousButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarPreviousButtonDirective, isStandalone: true, selector: "[brnCalendarPreviousButton]", host: { attributes: { "type": "button" }, listeners: { "click": "focusPreviousMonth()" }, properties: { "attr.aria-label": "_i18n.labelPrevious()" } }, ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarPreviousButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarPreviousButton, isStandalone: true, selector: "[brnCalendarPreviousButton]", host: { attributes: { "type": "button" }, listeners: { "click": "focusPreviousMonth()" }, properties: { "attr.aria-label": "_i18n.labelPrevious()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarPreviousButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarPreviousButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCalendarPreviousButton]',
@@ -319,7 +475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 args: ['click']
             }] } });
 
-class BrnCalendarWeekDirective {
+class BrnCalendarWeek {
     /** Access the calendar */
     _calendar = injectBrnCalendar();
     /** Access the view container ref */
@@ -372,17 +528,17 @@ class BrnCalendarWeekDirective {
             viewRef.destroy();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeekDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarWeekDirective, isStandalone: true, selector: "[brnCalendarWeek]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeek, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarWeek, isStandalone: true, selector: "[brnCalendarWeek]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeekDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeek, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCalendarWeek]',
                 }]
         }], ctorParameters: () => [] });
 
-class BrnCalendarWeekdayDirective {
+class BrnCalendarWeekday {
     /** Access the calendar */
     _calendar = injectBrnCalendar();
     /** Access the date time adapter */
@@ -432,173 +588,17 @@ class BrnCalendarWeekdayDirective {
             viewRef.destroy();
         }
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeekdayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarWeekdayDirective, isStandalone: true, selector: "[brnCalendarWeekday]", ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeekday, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: BrnCalendarWeekday, isStandalone: true, selector: "[brnCalendarWeekday]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeekdayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarWeekday, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCalendarWeekday]',
                 }]
         }], ctorParameters: () => [] });
 
-class BrnCalendarDirective {
-    /** Access the date adapter */
-    _dateAdapter = injectDateAdapter();
-    /** Access the change detector */
-    _changeDetector = inject(ChangeDetectorRef);
-    /** Access the injector */
-    _injector = inject(Injector);
-    /** The minimum date that can be selected.*/
-    min = input();
-    /** The maximum date that can be selected. */
-    max = input();
-    /** Determine if the date picker is disabled. */
-    disabled = input(false, {
-        transform: booleanAttribute,
-    });
-    /** The selected value. */
-    date = model();
-    /** Whether a specific date is disabled. */
-    dateDisabled = input(() => false);
-    /** The day the week starts on */
-    weekStartsOn = input(0, {
-        transform: (v) => numberAttribute(v),
-    });
-    /** The default focused date. */
-    defaultFocusedDate = input();
-    /** @internal Access the header */
-    header = contentChild(BrnCalendarHeaderDirective);
-    /** Store the cells */
-    _cells = contentChildren(BrnCalendarCellButtonDirective, {
-        descendants: true,
-    });
-    /**
-     * @internal
-     * The internal state of the component.
-     */
-    state = computed(() => ({
-        focusedDate: signal(this.constrainDate(this.defaultFocusedDate() ?? this.date() ?? this._dateAdapter.now())),
-    }));
-    /**
-     * The focused date.
-     */
-    focusedDate = computed(() => this.state().focusedDate());
-    /**
-     * Get all the days to display, this is the days of the current month
-     * and the days of the previous and next month to fill the grid.
-     */
-    days = computed(() => {
-        const weekStartsOn = this.weekStartsOn();
-        const month = this.state().focusedDate();
-        const days = [];
-        // Get the first and last day of the month.
-        let firstDay = this._dateAdapter.startOfMonth(month);
-        let lastDay = this._dateAdapter.endOfMonth(month);
-        // we need to subtract until we get the to starting day before or on the start of the month.
-        while (this._dateAdapter.getDay(firstDay) !== weekStartsOn) {
-            firstDay = this._dateAdapter.subtract(firstDay, { days: 1 });
-        }
-        const weekEndsOn = (weekStartsOn + 6) % 7;
-        // we need to add until we get to the ending day after or on the end of the month.
-        while (this._dateAdapter.getDay(lastDay) !== weekEndsOn) {
-            lastDay = this._dateAdapter.add(lastDay, { days: 1 });
-        }
-        // collect all the days to display.
-        while (firstDay <= lastDay) {
-            days.push(firstDay);
-            firstDay = this._dateAdapter.add(firstDay, { days: 1 });
-        }
-        return days;
-    });
-    /** @internal Constrain a date to the min and max boundaries */
-    constrainDate(date) {
-        const min = this.min();
-        const max = this.max();
-        // If there is no min or max, return the date.
-        if (!min && !max) {
-            return date;
-        }
-        // If there is a min and the date is before the min, return the min.
-        if (min && this._dateAdapter.isBefore(date, this._dateAdapter.startOfDay(min))) {
-            return min;
-        }
-        // If there is a max and the date is after the max, return the max.
-        if (max && this._dateAdapter.isAfter(date, this._dateAdapter.endOfDay(max))) {
-            return max;
-        }
-        // Return the date.
-        return date;
-    }
-    /** @internal Determine if a date is disabled */
-    isDateDisabled(date) {
-        // if the calendar is disabled we can't select this date
-        if (this.disabled()) {
-            return true;
-        }
-        // if the date is outside the min and max range
-        const min = this.min();
-        const max = this.max();
-        if (min && this._dateAdapter.isBefore(date, this._dateAdapter.startOfDay(min))) {
-            return true;
-        }
-        if (max && this._dateAdapter.isAfter(date, this._dateAdapter.endOfDay(max))) {
-            return true;
-        }
-        // if this specific date is disabled
-        const disabledFn = this.dateDisabled();
-        if (disabledFn(date)) {
-            return true;
-        }
-        return false;
-    }
-    isSelected(date) {
-        const selected = this.date();
-        return selected !== undefined && this._dateAdapter.isSameDay(date, selected);
-    }
-    selectDate(date) {
-        if (this.isSelected(date)) {
-            this.date.set(undefined);
-        }
-        else {
-            this.date.set(date);
-        }
-        this.state().focusedDate.set(date);
-    }
-    /** @internal Set the focused date */
-    setFocusedDate(date) {
-        // check if the date is disabled.
-        if (this.isDateDisabled(date)) {
-            return;
-        }
-        this.state().focusedDate.set(date);
-        // wait until the cells have all updated
-        afterNextRender({
-            write: () => {
-                // focus the cell with the target date.
-                const cell = this._cells().find((c) => this._dateAdapter.isSameDay(c.date(), date));
-                if (cell) {
-                    cell.focus();
-                }
-            },
-        }, {
-            injector: this._injector,
-        });
-        // we must update the view to ensure the focused cell is visible.
-        this._changeDetector.detectChanges();
-    }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnCalendarDirective, isStandalone: true, selector: "[brnCalendar]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [provideBrnCalendar(BrnCalendarDirective)], queries: [{ propertyName: "header", first: true, predicate: BrnCalendarHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_cells", predicate: BrnCalendarCellButtonDirective, descendants: true, isSignal: true }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[brnCalendar]',
-                    providers: [provideBrnCalendar(BrnCalendarDirective)],
-                }]
-        }] });
-
-class BrnCalendarMultiDirective {
+class BrnCalendarMulti {
     // /** Access the date adapter */
     _dateAdapter = injectDateAdapter();
     /** Access the change detector */
@@ -632,9 +632,9 @@ class BrnCalendarMultiDirective {
     /** The default focused date. */
     defaultFocusedDate = input();
     /** @internal Access the header */
-    header = contentChild(BrnCalendarHeaderDirective);
+    header = contentChild(BrnCalendarHeader);
     /** Store the cells */
-    _cells = contentChildren(BrnCalendarCellButtonDirective, {
+    _cells = contentChildren(BrnCalendarCellButton, {
         descendants: true,
     });
     /**
@@ -764,50 +764,50 @@ class BrnCalendarMultiDirective {
         // we must update the view to ensure the focused cell is visible.
         this._changeDetector.detectChanges();
     }
-    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarMultiDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnCalendarMultiDirective, isStandalone: true, selector: "[brnCalendarMulti]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [provideBrnCalendar(BrnCalendarMultiDirective)], queries: [{ propertyName: "header", first: true, predicate: BrnCalendarHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_cells", predicate: BrnCalendarCellButtonDirective, descendants: true, isSignal: true }], ngImport: i0 });
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarMulti, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnCalendarMulti, isStandalone: true, selector: "[brnCalendarMulti]", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minSelection: { classPropertyName: "minSelection", publicName: "minSelection", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null }, dateDisabled: { classPropertyName: "dateDisabled", publicName: "dateDisabled", isSignal: true, isRequired: false, transformFunction: null }, weekStartsOn: { classPropertyName: "weekStartsOn", publicName: "weekStartsOn", isSignal: true, isRequired: false, transformFunction: null }, defaultFocusedDate: { classPropertyName: "defaultFocusedDate", publicName: "defaultFocusedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { date: "dateChange" }, providers: [provideBrnCalendar(BrnCalendarMulti)], queries: [{ propertyName: "header", first: true, predicate: BrnCalendarHeader, descendants: true, isSignal: true }, { propertyName: "_cells", predicate: BrnCalendarCellButton, descendants: true, isSignal: true }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarMultiDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarMulti, decorators: [{
             type: Directive,
             args: [{
                     selector: '[brnCalendarMulti]',
-                    providers: [provideBrnCalendar(BrnCalendarMultiDirective)],
+                    providers: [provideBrnCalendar(BrnCalendarMulti)],
                 }]
         }] });
 
 const BrnCalendarImports = [
-    BrnCalendarCellButtonDirective,
-    BrnCalendarGridDirective,
-    BrnCalendarHeaderDirective,
-    BrnCalendarNextButtonDirective,
-    BrnCalendarPreviousButtonDirective,
-    BrnCalendarWeekDirective,
-    BrnCalendarWeekdayDirective,
-    BrnCalendarDirective,
-    BrnCalendarCellDirective,
-    BrnCalendarMultiDirective,
+    BrnCalendarCellButton,
+    BrnCalendarGrid,
+    BrnCalendarHeader,
+    BrnCalendarNextButton,
+    BrnCalendarPreviousButton,
+    BrnCalendarWeek,
+    BrnCalendarWeekday,
+    BrnCalendar,
+    BrnCalendarCell,
+    BrnCalendarMulti,
 ];
 class BrnCalendarModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarModule, imports: [BrnCalendarCellButtonDirective,
-            BrnCalendarGridDirective,
-            BrnCalendarHeaderDirective,
-            BrnCalendarNextButtonDirective,
-            BrnCalendarPreviousButtonDirective,
-            BrnCalendarWeekDirective,
-            BrnCalendarWeekdayDirective,
-            BrnCalendarDirective,
-            BrnCalendarCellDirective,
-            BrnCalendarMultiDirective], exports: [BrnCalendarCellButtonDirective,
-            BrnCalendarGridDirective,
-            BrnCalendarHeaderDirective,
-            BrnCalendarNextButtonDirective,
-            BrnCalendarPreviousButtonDirective,
-            BrnCalendarWeekDirective,
-            BrnCalendarWeekdayDirective,
-            BrnCalendarDirective,
-            BrnCalendarCellDirective,
-            BrnCalendarMultiDirective] });
+    /** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarModule, imports: [BrnCalendarCellButton,
+            BrnCalendarGrid,
+            BrnCalendarHeader,
+            BrnCalendarNextButton,
+            BrnCalendarPreviousButton,
+            BrnCalendarWeek,
+            BrnCalendarWeekday,
+            BrnCalendar,
+            BrnCalendarCell,
+            BrnCalendarMulti], exports: [BrnCalendarCellButton,
+            BrnCalendarGrid,
+            BrnCalendarHeader,
+            BrnCalendarNextButton,
+            BrnCalendarPreviousButton,
+            BrnCalendarWeek,
+            BrnCalendarWeekday,
+            BrnCalendar,
+            BrnCalendarCell,
+            BrnCalendarMulti] });
     /** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarModule, decorators: [{
@@ -822,5 +822,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BrnCalendarCellButtonDirective, BrnCalendarCellDirective, BrnCalendarDirective, BrnCalendarGridDirective, BrnCalendarHeaderDirective, BrnCalendarI18nToken, BrnCalendarImports, BrnCalendarModule, BrnCalendarMultiDirective, BrnCalendarNextButtonDirective, BrnCalendarPreviousButtonDirective, BrnCalendarToken, BrnCalendarWeekDirective, BrnCalendarWeekdayDirective, injectBrnCalendar, injectBrnCalendarI18n, provideBrnCalendar, provideBrnCalendarI18n };
+export { BrnCalendar, BrnCalendarCell, BrnCalendarCellButton, BrnCalendarGrid, BrnCalendarHeader, BrnCalendarI18nToken, BrnCalendarImports, BrnCalendarModule, BrnCalendarMulti, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarToken, BrnCalendarWeek, BrnCalendarWeekday, injectBrnCalendar, injectBrnCalendarI18n, provideBrnCalendar, provideBrnCalendarI18n };
 //# sourceMappingURL=spartan-ng-brain-calendar.mjs.map