@lucca-front/ng 21.2.1 → 22.0.0-rc.1

package/fesm2022/lucca-front-ng-date2.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, LOCALE_ID, TemplateRef, ViewContainerRef, Input, Directive, ElementRef, input, computed, HostListener, HostBinding, booleanAttribute, model, output, viewChildren, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, Injector, viewChild, untracked, forwardRef } from '@angular/core';
-import { isNil, intlInputOptions, LuClass, ɵeffectWithDeps as _effectWithDeps, PortalDirective } from '@lucca-front/ng/core';
+import { isNil, intlInputOptions, isNotNil, LuClass, ɵeffectWithDeps as _effectWithDeps, PortalDirective } from '@lucca-front/ng/core';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
 import { isSameYear, isSameMonth, isSameDay, startOfDecade, startOfYear, startOfMonth, parse, format, addYears, addMonths, subYears, subMonths, endOfWeek, startOfWeek, sub, add, eachDayOfInterval, endOfMonth, lastDayOfMonth, eachMonthOfInterval, endOfYear, eachYearOfInterval, endOfDecade, startOfDay, endOfDay, isAfter, isWithinInterval, addHours, isBefore, startOfQuarter, subQuarters, endOfQuarter, subWeeks } from 'date-fns';
 import { getLocaleWeekEndRange, getLocaleFirstDayOfWeek, NgTemplateOutlet } from '@angular/common';
@@ -117,13 +117,13 @@ const modeToPeriodStart = {
     year: startOfDecade,
 };
 function comparePeriods(mode, a, b) {
-    return modeToComparator[mode](a, b);
+    return mode ? modeToComparator[mode](a, b) : false;
 }
 function compareCalendarPeriods(mode, a, b) {
-    return modeToCalendarComparator[mode](a, b);
+    return mode ? modeToCalendarComparator[mode](a, b) : false;
 }
 function startOfPeriod(mode, date) {
-    return modeToPeriodStart[mode](date);
+    return mode ? modeToPeriodStart[mode](date) : date;
 }
 function stringToDateISO(value) {
     const res = parse(value, DATE_ISO_FORMAT, new Date());
@@ -157,17 +157,19 @@ function transformDateRangeInputToDateRange(value) {
     if (!isDateRangeInput(value)) {
         return value;
     }
+    const valueEnd = value.end ? transformDateInputToDate(value.end) : null;
     return {
         ...value,
         start: transformDateInputToDate(value.start),
-        end: transformDateInputToDate(value.end),
+        end: valueEnd,
     };
 }
 function transformDateRangeToDateRangeInput(value) {
+    const valueEnd = value.end ? transformDateToDateISO(value.end) : null;
     return {
         ...value,
         start: transformDateToDateISO(value.start),
-        end: transformDateToDateISO(value.end),
+        end: valueEnd,
     };
 }
 
@@ -278,7 +280,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                 args: ['keydown', ['$event']]
             }] } });
 
-const MODE_HIERARCHY = ['day', 'month', 'year'];
+const MODE_HIERARCHY = ['day', 'month', 'year', null];
 class Calendar2Component {
     #locale;
     #weekInfo;
@@ -398,7 +400,6 @@ class Calendar2Component {
             return monthsOfYear
                 .map((month) => {
                 return {
-                    date: month,
                     short: this.#intlMonthsShort.format(month),
                     long: this.#intlMonthsLong.format(month),
                     ...this.dateToCellInfo(month),
@@ -419,7 +420,6 @@ class Calendar2Component {
             return yearsOfDecade
                 .map((year) => {
                 return {
-                    date: year,
                     ...this.dateToCellInfo(year),
                     name: this.#intlDateYear.format(year),
                     isCurrent: isSameYear(new Date(), year),
@@ -510,7 +510,7 @@ class Calendar2Component {
         // Is it weekend day? for is-dayOff class toggle
         const isWeekend = isDayMode && this.#weekInfo.weekend.includes(getIntlWeekDay(date)) && !this.hideWeekend();
         // Is it first day of month? Mostly used for overflow display logic
-        const isFirstDayOfMonth = isDayMode && isSameDay(startOfMonth(date), rangeInfo?.range.start);
+        const isFirstDayOfMonth = isDayMode && rangeInfo && isSameDay(startOfMonth(date), rangeInfo.range.start);
         // Is this the current period? Will match if same day as today, or same month in month display, or same year if year display
         const isCurrent = comparePeriods(this.displayMode(), new Date(), date) && !this.hideToday();
         // Are we currently in a range that's being created (start date selected, end date is being hovered)
@@ -530,7 +530,7 @@ class Calendar2Component {
             }
             const hoveredRange = {
                 start,
-                end: startOfDay(this.dateHovered()),
+                end: startOfDay(this.dateHovered() ?? 0),
             };
             // If start is after end, fix this by inverting the two, we always want to work with start before end
             if (isAfter(hoveredRange.start, hoveredRange.end)) {
@@ -553,8 +553,8 @@ class Calendar2Component {
             isProgressStart = !isOverflow && comparePeriods(this.displayMode(), date, hoveredRange.start);
             isProgressEnd = !isOverflow && comparePeriods(this.displayMode(), date, hoveredRange.end);
             // This is the case where you clicked a first date and then are hovering it, which requires a specific case for CSS
-            if (isSameDay(rangeInfo.range.start, this.dateHovered())) {
-                isSingleDayInProgress = !isOverflow && isSameDay(hoveredRange.start, hoveredRange.end) && isSameDay(hoveredRange.start, this.dateHovered());
+            if (isSameDay(rangeInfo.range.start, this.dateHovered() ?? 0)) {
+                isSingleDayInProgress = !isOverflow && isSameDay(hoveredRange.start, hoveredRange.end) && isSameDay(hoveredRange.start, this.dateHovered() ?? 0);
             }
         }
         const isSelected = status.selected || (!!rangeInfo?.range && !isInProgress);
@@ -575,8 +575,8 @@ class Calendar2Component {
                 'is-daysOff': isWeekend,
                 'is-overflow': isOverflow,
                 'is-current': isCurrent,
-                'is-start': !isOverflow && (rangeInfo?.isStart || status.selected) && !isInProgress,
-                'is-end': !isOverflow && (rangeInfo?.isEnd || status.selected) && !isInProgress,
+                'is-start': Boolean(!isOverflow && (rangeInfo?.isStart || status.selected) && !isInProgress),
+                'is-end': Boolean(!isOverflow && (rangeInfo?.isEnd || status.selected) && !isInProgress),
                 'is-selected': isSelected,
                 // Range in progress statuses
                 'is-selectionInProgress': isProgressBody,
@@ -599,16 +599,16 @@ class Calendar2Component {
                 }
                 else if (this.dateHovered() !== null) {
                     // Nominal case: end is after start
-                    if (isAfter(this.dateHovered(), startOfDay(range.start))) {
+                    if (isAfter(this.dateHovered() ?? 0, startOfDay(range.start))) {
                         return isWithinInterval(date, {
                             start: startOfDay(range.start),
-                            end: endOfDay(this.dateHovered()),
+                            end: endOfDay(this.dateHovered() ?? 0),
                         });
                     }
                     else {
                         // When user clicked end date first and now wants to select a start date
                         return isWithinInterval(date, {
-                            start: startOfDay(this.dateHovered()),
+                            start: startOfDay(this.dateHovered() ?? 0),
                             end: endOfDay(range.start),
                         });
                     }
@@ -630,7 +630,7 @@ class Calendar2Component {
             return null;
         }
         const isStart = range && isSameDay(date, range.start);
-        const isEnd = range && range.end && isSameDay(date, range.end);
+        const isEnd = Boolean(range && range.end && isSameDay(date, range.end));
         return {
             range,
             isStart,
@@ -742,7 +742,7 @@ class AbstractDateComponent {
         this.min = input(new Date('1/1/1000'), { ...(ngDevMode ? { debugName: "min" } : {}), transform: transformDateInputToDate });
         this.max = input(null, { ...(ngDevMode ? { debugName: "max" } : {}), transform: transformDateInputToDate });
         this.focusedDate = input(null, { ...(ngDevMode ? { debugName: "focusedDate" } : {}), transform: transformDateInputToDate });
-        this.calendarMode = model(...(ngDevMode ? [undefined, { debugName: "calendarMode" }] : []));
+        this.calendarMode = model(null, ...(ngDevMode ? [{ debugName: "calendarMode" }] : []));
         this.panelOpened = output();
         this.panelClosed = output();
         this.dateFormatLocalized = computed(() => getLocalizedDateFormat(this.locale, this.mode()), ...(ngDevMode ? [{ debugName: "dateFormatLocalized" }] : []));
@@ -759,37 +759,39 @@ class AbstractDateComponent {
         return this.isAfterMin(date, mode) && this.isBeforeMax(date, mode);
     }
     isAfterMin(date, mode) {
-        if (!this.min()) {
+        const min = this.min();
+        if (!min) {
             return true;
         }
         switch (mode) {
             case 'day':
-                return this.min().getTime() <= date.getTime();
+                return min.getTime() <= date.getTime();
             case 'month':
-                return isBefore(startOfMonth(this.min()), startOfMonth(date)) || isSameMonth(this.min(), date);
+                return isBefore(startOfMonth(min), startOfMonth(date)) || isSameMonth(min, date);
             case 'year':
-                return this.min().getFullYear() <= date.getFullYear();
+                return min.getFullYear() <= date.getFullYear();
             default:
                 return true;
         }
     }
     isBeforeMax(date, mode) {
-        if (!this.max()) {
-            return true;
-        }
-        switch (mode) {
-            case 'day':
-                return this.max().getTime() >= date.getTime();
-            case 'month':
-                return isAfter(startOfMonth(this.max()), startOfMonth(date)) || isSameMonth(this.max(), date);
-            case 'year':
-                return this.max().getFullYear() >= date.getFullYear();
-            default:
-                return true;
+        const max = this.max();
+        if (max) {
+            switch (mode) {
+                case 'day':
+                    return max.getTime() >= date.getTime();
+                case 'month':
+                    return isAfter(startOfMonth(max), startOfMonth(date)) || isSameMonth(max, date);
+                case 'year':
+                    return max.getFullYear() >= date.getFullYear();
+                default:
+                    return true;
+            }
         }
+        return true;
     }
     isValidDate(date) {
-        return !!date && !isNaN(date.getTime());
+        return isNotNil(date) && !isNaN(date.getTime());
     }
     prev(mode) {
         this.move(-1, mode);
@@ -807,15 +809,15 @@ class AbstractDateComponent {
         switch (mode) {
             case 'year':
                 this.currentDate.set(addYears(this.currentDate(), direction * 10));
-                this.tabbableDate.set(addYears(this.tabbableDate(), direction * 10));
+                this.tabbableDate.set(addYears(this.tabbableDate() ?? 0, direction * 10));
                 break;
             case 'month':
                 this.currentDate.set(addYears(this.currentDate(), direction));
-                this.tabbableDate.set(addYears(this.tabbableDate(), direction));
+                this.tabbableDate.set(addYears(this.tabbableDate() ?? 0, direction));
                 break;
             case 'day':
                 this.currentDate.set(addMonths(this.currentDate(), direction));
-                this.tabbableDate.set(addMonths(this.tabbableDate(), direction));
+                this.tabbableDate.set(addMonths(this.tabbableDate() ?? 0, direction));
                 break;
         }
     }
@@ -842,7 +844,7 @@ class DateInputComponent extends AbstractDateComponent {
     #defaultClearable;
     #defaultFilterPillClearable;
     get isNavigationButtonFocused() {
-        return [this.previousButton()?.nativeElement, this.nextButton()?.nativeElement].includes(document.activeElement);
+        return [this.previousButton()?.nativeElement, this.nextButton()?.nativeElement].includes(document.activeElement || undefined);
     }
     constructor() {
         super();
@@ -876,7 +878,8 @@ class DateInputComponent extends AbstractDateComponent {
                     return textInput;
                 }
             }
-            if (this.selectedDate() && this.isValidDate(this.selectedDate())) {
+            const selectedDate = this.selectedDate();
+            if (selectedDate && this.isValidDate(selectedDate)) {
                 let formatter;
                 switch (this.mode()) {
                     case 'day':
@@ -889,7 +892,7 @@ class DateInputComponent extends AbstractDateComponent {
                         formatter = this.intlDateTimeFormatYear;
                         break;
                 }
-                return formatter.format(this.selectedDate());
+                return formatter.format(selectedDate);
             }
             // If we are initializing the component, we don't want to display the value
             if (textInput === 'ɵ') {
@@ -901,10 +904,11 @@ class DateInputComponent extends AbstractDateComponent {
         this.userTextInput = signal('ɵ', ...(ngDevMode ? [{ debugName: "userTextInput" }] : []));
         this.combinedGetCellInfo = (date, mode) => {
             const infoFromInput = this.getCellInfo()?.(date, mode);
+            const selectedDate = this.selectedDate();
             return {
                 classes: [...(infoFromInput?.classes || [])],
                 disabled: infoFromInput?.disabled || !this.isInMinMax(date, mode),
-                selected: this.selectedDate() && this.calendarMode() === mode && comparePeriods(mode, date, this.selectedDate()),
+                selected: isNotNil(selectedDate) && this.calendarMode() === mode && comparePeriods(mode, date, selectedDate),
                 label: infoFromInput?.label,
             };
         };
@@ -942,6 +946,7 @@ class DateInputComponent extends AbstractDateComponent {
                 }
                 catch {
                     /* not a correct date */
+                    parsed = null;
                 }
                 if (parsed instanceof Date && parsed.getFullYear() > 999) {
                     this.selectedDate.set(startOfDay(parsed));
@@ -975,8 +980,8 @@ class DateInputComponent extends AbstractDateComponent {
             }
         });
         _effectWithDeps([this.calendarMode, this.tabbableDate], (calendarMode, tabbableDate) => {
-            if (tabbableDate && !comparePeriods(calendarMode, tabbableDate, this.currentDate())) {
-                this.currentDate.set(startOfPeriod(calendarMode, tabbableDate));
+            if (tabbableDate && !comparePeriods(calendarMode ?? null, tabbableDate, this.currentDate())) {
+                this.currentDate.set(startOfPeriod(calendarMode ?? null, tabbableDate));
             }
             if (!this.isNavigationButtonFocused && !this.inputFocused()) {
                 this.calendar()?.blurTabbableDate();
@@ -1036,7 +1041,7 @@ class DateInputComponent extends AbstractDateComponent {
     validate(control) {
         // null is not an error but means we'll skip everything else, we'll let the presence of a
         // Validators.required (or not) decide if it's an error.
-        if (control.value === null || control.value === undefined) {
+        if (isNil(control.value)) {
             return null;
         }
         const date = transformDateInputToDate(control.value);
@@ -1072,7 +1077,7 @@ class DateInputComponent extends AbstractDateComponent {
         if (this.initialValue() === undefined) {
             this.initialValue.set(_date);
         }
-        if (date != null) {
+        if (isNotNil(date) && isNotNil(_date)) {
             const start = startOfDay(_date);
             this.dateFromWriteValue.set(start);
             this.selectedDate.set(start);
@@ -1089,10 +1094,10 @@ class DateInputComponent extends AbstractDateComponent {
     }
     setDisabledState(isDisabled) {
         this.filterPillDisabled.set(isDisabled);
-        super.setDisabledState(isDisabled);
+        super.setDisabledState?.(isDisabled);
     }
     reset() {
-        const newValue = this.clearBehavior() === 'reset' ? this.initialValue() : null;
+        const newValue = this.clearBehavior() === 'reset' ? (this.initialValue() ?? null) : null;
         this.dateFromWriteValue.set(newValue);
         this.selectedDate.set(newValue);
         return newValue;
@@ -1247,7 +1252,7 @@ class DateRangeInputComponent extends AbstractDateComponent {
     #defaultClearable;
     #defaultFilterPillClearable;
     get isNavigationButtonFocused() {
-        return [this.previousButton()?.nativeElement, this.nextButton()?.nativeElement].includes(document.activeElement);
+        return [this.previousButton()?.nativeElement, this.nextButton()?.nativeElement].includes(document.activeElement ?? undefined);
     }
     constructor() {
         super();
@@ -1324,8 +1329,9 @@ class DateRangeInputComponent extends AbstractDateComponent {
             if (inputValue !== 'ɵ') {
                 return inputValue;
             }
-            if (this.selectedRange()?.start && this.isValidDate(this.selectedRange()?.start)) {
-                return this.getDateLabelForInput(this.selectedRange()?.start);
+            const range = this.selectedRange();
+            if (range?.start && this.isValidDate(range.start)) {
+                return this.getDateLabelForInput(range.start);
             }
             return '';
         }, ...(ngDevMode ? [{ debugName: "startLabel" }] : []));
@@ -1334,8 +1340,9 @@ class DateRangeInputComponent extends AbstractDateComponent {
             if (inputValue !== 'ɵ') {
                 return inputValue;
             }
-            if (this.selectedRange()?.end && this.isValidDate(this.selectedRange()?.end)) {
-                return this.getDateLabelForInput(this.selectedRange()?.end);
+            const range = this.selectedRange();
+            if (range?.end && this.isValidDate(range.end)) {
+                return this.getDateLabelForInput(range.end);
             }
             return '';
         }, ...(ngDevMode ? [{ debugName: "endLabel" }] : []));
@@ -1431,14 +1438,15 @@ class DateRangeInputComponent extends AbstractDateComponent {
         this.fixOrderIfNeeded();
     }
     fixOrderIfNeeded() {
-        if (this.selectedRange() && isAfter(this.selectedRange()?.start, this.selectedRange()?.end)) {
-            const range = this.selectedRange();
-            this.selectedRange.set({
+        const range = this.selectedRange();
+        if (range && range.end && isAfter(range.start, range.end)) {
+            const swappedRange = {
                 ...range,
                 end: range.start,
                 start: range.end,
-            });
-            this.#onChange?.(this.selectedRange());
+            };
+            this.selectedRange.set(swappedRange);
+            this.#onChange?.(swappedRange);
         }
     }
     tabbableDateChange(date, calendarIndex) {
@@ -1456,18 +1464,21 @@ class DateRangeInputComponent extends AbstractDateComponent {
         // Once popover is opened, aka in the next CD cycle, focus current tabbable date
         setTimeout(() => {
             this.focusedCalendarIndex.set(0);
-            if (propertyToFocus && this.selectedRange()?.[propertyToFocus]) {
+            const selectedRange = this.selectedRange();
+            if (propertyToFocus && selectedRange && selectedRange[propertyToFocus]) {
                 // Specific case: if range is on a single month, focus on it on left calendar
                 // Same goes for focus on start date, we want it on left panel
-                if (propertyToFocus === 'start' || compareCalendarPeriods(this.mode(), this.selectedRange()?.start, this.selectedRange()?.end)) {
-                    this.currentDate.set(this.selectedRange()?.[propertyToFocus]);
-                    this.tabbableDate.set(this.selectedRange()?.[propertyToFocus]);
+                if (propertyToFocus === 'start' || (selectedRange.end && compareCalendarPeriods(this.mode(), selectedRange.start, selectedRange.end))) {
+                    this.currentDate.set(selectedRange[propertyToFocus]);
+                    this.tabbableDate.set(selectedRange[propertyToFocus]);
                 }
                 else {
                     // Compute the date to use for proper focus on left panel, minus one calendar on focus date basically
-                    const leftPanelFocus = this.selectedRange()?.end;
-                    this.currentDate.set(leftPanelFocus);
-                    this.tabbableDate.set(leftPanelFocus);
+                    const leftPanelFocus = selectedRange.end;
+                    if (leftPanelFocus) {
+                        this.currentDate.set(leftPanelFocus);
+                        this.tabbableDate.set(leftPanelFocus);
+                    }
                 }
             }
             if (focusTabbableDate) {
@@ -1476,11 +1487,14 @@ class DateRangeInputComponent extends AbstractDateComponent {
         });
     }
     dateClicked(date, popoverRef) {
-        if (this.selectedRange() === null) {
-            this.selectedRange.set({
+        const selectedRange = this.selectedRange();
+        let newRange;
+        if (selectedRange === null) {
+            newRange = {
                 start: date,
                 scope: this.mode(),
-            });
+            };
+            this.selectedRange.set(newRange);
             this.editedField.set(1);
             this.highlightedField.set(1);
         }
@@ -1488,20 +1502,21 @@ class DateRangeInputComponent extends AbstractDateComponent {
             // If we're editing end field
             if (this.editedField() === 1) {
                 // If end is before start, invert them
-                if (isBefore(date, this.selectedRange()?.start)) {
-                    this.selectedRange.set({
+                if (isBefore(date, selectedRange.start)) {
+                    newRange = {
                         start: date,
                         scope: this.mode(),
-                        end: this.selectedRange().start,
-                    });
+                        end: selectedRange.start,
+                    };
                 }
                 else {
-                    this.selectedRange.set({
-                        ...this.selectedRange(),
+                    newRange = {
+                        ...selectedRange,
                         scope: this.mode(),
                         end: date,
-                    });
+                    };
                 }
+                this.selectedRange.set(newRange);
                 popoverRef?.close();
                 this.filterPillPopoverCloseFn?.();
                 this.endTextInputRef()?.nativeElement.focus();
@@ -1511,25 +1526,26 @@ class DateRangeInputComponent extends AbstractDateComponent {
             else {
                 // Else, we're editing start field
                 // If start is after end, invert them
-                if (isAfter(date, this.selectedRange()?.end)) {
-                    this.selectedRange.set({
+                if (selectedRange.end && isAfter(date, selectedRange.end)) {
+                    newRange = {
                         start: date,
                         scope: this.mode(),
-                    });
+                    };
                 }
                 else {
-                    this.selectedRange.set({
-                        ...this.selectedRange(),
+                    newRange = {
+                        ...selectedRange,
                         start: date,
                         scope: this.mode(),
-                    });
+                    };
                 }
+                this.selectedRange.set(newRange);
                 this.editedField.set(1);
                 this.highlightedField.set(1);
                 this.dateHovered.set(null);
             }
         }
-        this.#onChange?.(this.selectedRange());
+        this.#onChange?.(newRange);
     }
     arrowDown(popoverRef, fieldToFocus) {
         this.openPopover(popoverRef, fieldToFocus, true);
@@ -1555,9 +1571,9 @@ class DateRangeInputComponent extends AbstractDateComponent {
         }
         const _dateRange = transformDateRangeInputToDateRange(dateRange);
         if (isNil(this.initialValue())) {
-            this.selectedRange.set(this.clearBehavior() === 'reset' ? this.initialValue() : _dateRange);
+            this.selectedRange.set(this.clearBehavior() === 'reset' ? (this.initialValue() ?? null) : _dateRange);
         }
-        if (dateRange != null) {
+        if (isNotNil(dateRange)) {
             this.selectedRange.set(_dateRange);
             this.currentDate.set(startOfDay(dateRange.start));
         }
@@ -1569,10 +1585,10 @@ class DateRangeInputComponent extends AbstractDateComponent {
     }
     setDisabledState(isDisabled) {
         this.filterPillDisabled.set(isDisabled);
-        super.setDisabledState(isDisabled);
+        super.setDisabledState?.(isDisabled);
     }
     clear() {
-        const newValue = this.clearBehavior() === 'reset' ? this.initialValue() : null;
+        const newValue = this.clearBehavior() === 'reset' ? (this.initialValue() ?? null) : null;
         this.selectedRange.set(newValue);
         this.#onChange?.(this.selectedRange());
         this.onTouched?.();