@spartan-ng/brain 0.0.1-alpha.501 → 0.0.1-alpha.503

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

@@ -24,6 +24,9 @@ class BrnCalendarCellButton {
     date = input.required();
     /** Whether this date is currently selected */
     selected = computed(() => this._calendar.isSelected(this.date()));
+    start = computed(() => this._calendar.isStartOfRange(this.date()));
+    end = computed(() => this._calendar.isEndOfRange(this.date()));
+    betweenRange = computed(() => this._calendar.isBetweenRange(this.date()));
     /** Whether this date is focusable */
     focusable = computed(() => this._dateAdapter.isSameDay(this._calendar.focusedDate(), this.date()));
     outside = computed(() => {
@@ -135,7 +138,7 @@ class BrnCalendarCellButton {
         this._elementRef.nativeElement.focus();
     }
     /** @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 });
+    /** @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() && (!end() && !start())? '' : 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", "attr.data-range-start": "start() ? \"\" : null", "attr.data-range-end": "end() ? \"\" : null", "attr.data-range-between": "betweenRange() ? \"\" : null", "disabled": "disabled()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarCellButton, decorators: [{
             type: Directive,
@@ -145,12 +148,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         role: 'gridcell',
                         '[tabindex]': 'focusable() ? 0 : -1',
                         type: 'button',
-                        '[attr.data-outside]': "outside() ? '' : null",
+                        '[attr.data-outside]': "outside() && (!end() && !start())? '' : 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",
+                        '[attr.data-range-start]': 'start() ? "" : null',
+                        '[attr.data-range-end]': 'end() ? "" : null',
+                        '[attr.data-range-between]': 'betweenRange() ? "" : null',
                         '[disabled]': 'disabled()',
                         '(click)': '_calendar.selectDate(date())',
                         '(keydown.arrowLeft)': 'focusPrevious($event)',
@@ -329,6 +335,33 @@ class BrnCalendar {
         // we must update the view to ensure the focused cell is visible.
         this._changeDetector.detectChanges();
     }
+    /**
+     * Determine if a date is the start of a range. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isStartOfRange(_) {
+        return false;
+    }
+    /**
+     * Determine if a date is the end of a range. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isEndOfRange(_) {
+        return false;
+    }
+    /**
+     * Determine if a date is between the start and end dates. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns True if the date is between the start and end dates, false otherwise.
+     * @internal
+     */
+    isBetweenRange(_) {
+        return false;
+    }
     /** @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 });
 }
@@ -599,6 +632,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         }], ctorParameters: () => [] });
 
 class BrnCalendarMulti {
+    /**
+     * Determine if a date is the start of a range. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isStartOfRange(_) {
+        return false;
+    }
+    /**
+     * Determine if a date is the end of a range. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isEndOfRange(_) {
+        return false;
+    }
+    /**
+     * Determine if a date is between the start and end dates. In a date picker, this is always false.
+     * @param date The date to check.
+     * @returns True if the date is between the start and end dates, false otherwise.
+     * @internal
+     */
+    isBetweenRange(_) {
+        return false;
+    }
     // /** Access the date adapter */
     _dateAdapter = injectDateAdapter();
     /** Access the change detector */
@@ -775,6 +835,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
+class BrnCalendarRange {
+    // /** 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,
+    });
+    /** 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.startDate() ?? this._dateAdapter.now())),
+    }));
+    /**
+     * The focused date.
+     */
+    focusedDate = computed(() => this.state().focusedDate());
+    /**
+     * The selected start date
+     */
+    startDate = model();
+    /**
+     * The selected end date
+     */
+    endDate = model();
+    /**
+     * 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;
+    });
+    isSelected(date) {
+        const start = this.startDate();
+        const end = this.endDate();
+        if (!start && !end) {
+            return false;
+        }
+        const isStartSelected = start ? this._dateAdapter.isSameDay(date, start) : false;
+        const isEndSelected = end ? this._dateAdapter.isSameDay(date, end) : false;
+        return isStartSelected || isEndSelected;
+    }
+    selectDate(date) {
+        const start = this.startDate();
+        const end = this.endDate();
+        if (!start && !end) {
+            this.startDate.set(date);
+            return;
+        }
+        if (start && !end) {
+            if (this._dateAdapter.isAfter(date, start)) {
+                this.endDate.set(date);
+            }
+            else if (this._dateAdapter.isBefore(date, start)) {
+                this.startDate.set(date);
+                this.endDate.set(start);
+            }
+            else if (this._dateAdapter.isSameDay(date, start)) {
+                this.endDate.set(date);
+            }
+            return;
+        }
+        // If both start and end are selected, reset selection
+        this.startDate.set(date);
+        this.endDate.set(undefined);
+    }
+    // same as in brn-calendar.directive.ts
+    /** @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;
+    }
+    /** @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();
+    }
+    /**
+     * Determine if a date is the start of a range.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isStartOfRange(date) {
+        const start = this.startDate();
+        return start ? this._dateAdapter.isSameDay(date, start) : false;
+    }
+    /**
+     * Determine if a date is the end of a range.
+     * @param date The date to check.
+     * @returns Always false.
+     * @internal
+     */
+    isEndOfRange(date) {
+        const end = this.endDate();
+        return end ? this._dateAdapter.isSameDay(date, end) : false;
+    }
+    /**
+     * Determine if a date is between the start and end dates.
+     * @param date The date to check.
+     * @returns True if the date is between the start and end dates, false otherwise.
+     * @internal
+     */
+    isBetweenRange(date) {
+        const start = this.startDate();
+        const end = this.endDate();
+        if (!start || !end) {
+            return false;
+        }
+        return this._dateAdapter.isAfter(date, start) && this._dateAdapter.isBefore(date, end);
+    }
+    /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarRange, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    /** @nocollapse */ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: BrnCalendarRange, isStandalone: true, selector: "[brnCalendarRange]", 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 }, 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 }, startDate: { classPropertyName: "startDate", publicName: "startDate", isSignal: true, isRequired: false, transformFunction: null }, endDate: { classPropertyName: "endDate", publicName: "endDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { startDate: "startDateChange", endDate: "endDateChange" }, providers: [provideBrnCalendar(BrnCalendarRange)], 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: BrnCalendarRange, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[brnCalendarRange]',
+                    providers: [provideBrnCalendar(BrnCalendarRange)],
+                }]
+        }] });
+
 const BrnCalendarImports = [
     BrnCalendarCellButton,
     BrnCalendarGrid,
@@ -786,6 +1064,7 @@ const BrnCalendarImports = [
     BrnCalendar,
     BrnCalendarCell,
     BrnCalendarMulti,
+    BrnCalendarRange,
 ];
 class BrnCalendarModule {
     /** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BrnCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -798,7 +1077,8 @@ class BrnCalendarModule {
             BrnCalendarWeekday,
             BrnCalendar,
             BrnCalendarCell,
-            BrnCalendarMulti], exports: [BrnCalendarCellButton,
+            BrnCalendarMulti,
+            BrnCalendarRange], exports: [BrnCalendarCellButton,
             BrnCalendarGrid,
             BrnCalendarHeader,
             BrnCalendarNextButton,
@@ -807,7 +1087,8 @@ class BrnCalendarModule {
             BrnCalendarWeekday,
             BrnCalendar,
             BrnCalendarCell,
-            BrnCalendarMulti] });
+            BrnCalendarMulti,
+            BrnCalendarRange] });
     /** @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 +1103,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BrnCalendar, BrnCalendarCell, BrnCalendarCellButton, BrnCalendarGrid, BrnCalendarHeader, BrnCalendarI18nToken, BrnCalendarImports, BrnCalendarModule, BrnCalendarMulti, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarToken, BrnCalendarWeek, BrnCalendarWeekday, injectBrnCalendar, injectBrnCalendarI18n, provideBrnCalendar, provideBrnCalendarI18n };
+export { BrnCalendar, BrnCalendarCell, BrnCalendarCellButton, BrnCalendarGrid, BrnCalendarHeader, BrnCalendarI18nToken, BrnCalendarImports, BrnCalendarModule, BrnCalendarMulti, BrnCalendarNextButton, BrnCalendarPreviousButton, BrnCalendarRange, BrnCalendarToken, BrnCalendarWeek, BrnCalendarWeekday, injectBrnCalendar, injectBrnCalendarI18n, provideBrnCalendar, provideBrnCalendarI18n };
 //# sourceMappingURL=spartan-ng-brain-calendar.mjs.map