@lucca-front/ng 19.2.1 → 19.2.3

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

@@ -1,9 +1,9 @@
 import { getLocaleWeekEndRange, getLocaleFirstDayOfWeek, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, LOCALE_ID, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, input, computed, HostBinding, HostListener, booleanAttribute, model, output, viewChildren, effect, Component, ViewEncapsulation, ChangeDetectionStrategy, signal, viewChild, untracked, forwardRef } from '@angular/core';
-import { getIntl, LuClass, ɵeffectWithDeps as _effectWithDeps, PortalDirective } from '@lucca-front/ng/core';
+import { isNil, getIntl, LuClass, ɵeffectWithDeps as _effectWithDeps, PortalDirective } from '@lucca-front/ng/core';
 import { LuTooltipTriggerDirective } from '@lucca-front/ng/tooltip';
-import { isSameDay, isSameMonth, isSameYear, startOfMonth, startOfYear, startOfDecade, addYears, addMonths, subYears, subMonths, endOfWeek, startOfWeek, sub, add, eachDayOfInterval, endOfMonth, lastDayOfMonth, eachMonthOfInterval, endOfYear, eachYearOfInterval, endOfDecade, startOfDay, endOfDay, isAfter, isWithinInterval, addHours, parse, isBefore, subWeeks, startOfQuarter, subQuarters, endOfQuarter } from 'date-fns';
+import { isSameDay, isSameMonth, isSameYear, startOfMonth, startOfYear, startOfDecade, parse, format, addYears, addMonths, subYears, subMonths, endOfWeek, startOfWeek, sub, add, eachDayOfInterval, endOfMonth, lastDayOfMonth, eachMonthOfInterval, endOfYear, eachYearOfInterval, endOfDecade, startOfDay, endOfDay, isAfter, isWithinInterval, addHours, isBefore, subWeeks, startOfQuarter, subQuarters, endOfQuarter } from 'date-fns';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { FILTER_PILL_INPUT_COMPONENT, FilterPillDisplayerDirective } from '@lucca-front/ng/filter-pills';
@@ -88,6 +88,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ['luRepeatTimes']
             }] } });
 
+const DATE_FORMAT = {
+    DATE: 'date',
+    DATE_ISO: 'date-iso',
+};
+const DATE_ISO_FORMAT = 'yyyy-MM-dd';
+
 function getIntlWeekDay(date) {
     return (date.getDay() || 7);
 }
@@ -118,6 +124,51 @@ function compareCalendarPeriods(mode, a, b) {
 function startOfPeriod(mode, date) {
     return modeToPeriodStart[mode](date);
 }
+function stringToDateISO(value) {
+    const res = parse(value, DATE_ISO_FORMAT, new Date());
+    if (isNaN(+res)) {
+        throw new Error('Invalid date: your input should be a valid iso date string (yyyy-MM-dd), received: ' + value);
+    }
+    return res;
+}
+function transformDateInputToDate(value) {
+    if (isNil(value)) {
+        return null;
+    }
+    if (value instanceof Date) {
+        return value;
+    }
+    return stringToDateISO(value);
+}
+function transformDateToDateISO(value) {
+    if (isNil(value)) {
+        return null;
+    }
+    return format(value, DATE_ISO_FORMAT);
+}
+function isDateRangeInput(value) {
+    return !(value.start instanceof Date);
+}
+function transformDateRangeInputToDateRange(value) {
+    if (isNil(value)) {
+        return null;
+    }
+    if (!isDateRangeInput(value)) {
+        return value;
+    }
+    return {
+        ...value,
+        start: transformDateInputToDate(value.start),
+        end: transformDateInputToDate(value.end),
+    };
+}
+function transformDateRangeToDateRangeInput(value) {
+    return {
+        ...value,
+        start: transformDateToDateISO(value.start),
+        end: transformDateToDateISO(value.end),
+    };
+}
 
 const CALENDAR_CELLS = new InjectionToken('Calendar2:Calendar2Cells');
 const CALENDAR_TABBABLE_DATE = new InjectionToken('Calendar2:TabbableDate');
@@ -394,7 +445,7 @@ class Calendar2Component {
             if (this.tabbableDate() === null) {
                 this.tabbableDate.set(this.date());
             }
-        }, { allowSignalWrites: true });
+        });
     }
     focusTabbableDate() {
         this.calendar2CellInstances()
@@ -667,15 +718,21 @@ class AbstractDateComponent {
         this.intlDateTimeFormatYear = new Intl.DateTimeFormat(this.locale, { year: 'numeric' });
         this.intl = getIntl(LU_DATE2_TRANSLATIONS);
         this.disabled = false;
-        this.ranges = input([]);
+        this.format = input(DATE_FORMAT.DATE);
+        this.inDateISOFormat = computed(() => this.format() === DATE_FORMAT.DATE_ISO);
+        this.ranges = input([], { transform: (v) => v.map(transformDateRangeInputToDateRange) });
         this.hideToday = input(false, { transform: booleanAttribute });
         this.hasTodayButton = input(false, { transform: booleanAttribute });
         this.clearable = input(false, { transform: booleanAttribute });
         this.mode = input('day');
         this.hideWeekend = input(false, { transform: booleanAttribute });
         this.getCellInfo = input();
-        this.min = input(new Date('1/1/1000'));
-        this.max = input(null);
+        this.min = input(new Date('1/1/1000'), {
+            transform: transformDateInputToDate,
+        });
+        this.max = input(null, {
+            transform: transformDateInputToDate,
+        });
         this.calendarMode = signal('day');
         this.dateFormatLocalized = computed(() => {
             return getLocalizedDateFormat(this.locale, this.mode());
@@ -745,7 +802,7 @@ class AbstractDateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AbstractDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: AbstractDateComponent, isStandalone: true, selector: "ng-component", inputs: { ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, hideToday: { classPropertyName: "hideToday", publicName: "hideToday", isSignal: true, isRequired: false, transformFunction: null }, hasTodayButton: { classPropertyName: "hasTodayButton", publicName: "hasTodayButton", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hideWeekend: { classPropertyName: "hideWeekend", publicName: "hideWeekend", isSignal: true, isRequired: false, transformFunction: null }, getCellInfo: { classPropertyName: "getCellInfo", publicName: "getCellInfo", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: AbstractDateComponent, isStandalone: true, selector: "ng-component", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, ranges: { classPropertyName: "ranges", publicName: "ranges", isSignal: true, isRequired: false, transformFunction: null }, hideToday: { classPropertyName: "hideToday", publicName: "hideToday", isSignal: true, isRequired: false, transformFunction: null }, hasTodayButton: { classPropertyName: "hasTodayButton", publicName: "hasTodayButton", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, hideWeekend: { classPropertyName: "hideWeekend", publicName: "hideWeekend", isSignal: true, isRequired: false, transformFunction: null }, getCellInfo: { classPropertyName: "getCellInfo", publicName: "getCellInfo", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AbstractDateComponent, decorators: [{
             type: Component,
@@ -799,9 +856,15 @@ class DateInputComponent extends AbstractDateComponent {
                 }
                 return formatter.format(this.selectedDate());
             }
-            return this.userTextInput();
+            const textInput = this.userTextInput();
+            // If we are initializing the component, we don't want to display the value
+            if (textInput === 'ɵ') {
+                return '';
+            }
+            return textInput;
         });
-        this.userTextInput = signal('');
+        // We need to use a "magic key" here to avoid sending a null value change on initialization
+        this.userTextInput = signal('ɵ');
         this.combinedGetCellInfo = (date, mode) => {
             const infoFromInput = this.getCellInfo()?.(date, mode);
             return {
@@ -817,6 +880,10 @@ class DateInputComponent extends AbstractDateComponent {
         this.isFilterPillEmpty = computed(() => !this.selectedDate());
         effect(() => {
             const inputValue = this.userTextInput();
+            // If we are initializing the component, we don't want to parse the value
+            if (inputValue === 'ɵ') {
+                return;
+            }
             if (inputValue.length > 0) {
                 let parsed;
                 try {
@@ -837,7 +904,7 @@ class DateInputComponent extends AbstractDateComponent {
             else {
                 this.selectedDate.set(null);
             }
-        }, { allowSignalWrites: true });
+        });
         effect(() => {
             if (!this.#safeCompareDate(untracked(this.dateFromWriteValue), this.selectedDate())) {
                 this.#onChange?.(this.selectedDate());
@@ -911,6 +978,7 @@ class DateInputComponent extends AbstractDateComponent {
         if (control.value === null || control.value === undefined) {
             return null;
         }
+        const date = transformDateInputToDate(control.value);
         // try to parse the display value cause formControl.value is undefined if date is not parsable
         try {
             parse(this.displayValue(), this.dateFormat, startOfDay(new Date()));
@@ -920,29 +988,32 @@ class DateInputComponent extends AbstractDateComponent {
             return { date: true };
         }
         // Check date validity
-        if (!this.isValidDate(control.value)) {
+        if (!this.isValidDate(date)) {
             return { date: true };
         }
         // Check min and max
-        if (this.min() && isBefore(control.value, this.min())) {
+        if (this.min() && isBefore(date, this.min())) {
             return { min: true };
         }
-        else if (this.max() && isAfter(control.value, this.max())) {
+        else if (this.max() && isAfter(date, this.max())) {
             return { max: true };
         }
         // Everything is valid
         return null;
     }
     writeValue(date) {
-        if (date) {
-            const start = startOfDay(date);
+        if (date != null) {
+            const _date = transformDateInputToDate(date);
+            const start = startOfDay(_date);
             this.dateFromWriteValue.set(start);
             this.selectedDate.set(start);
             this.currentDate.set(start);
         }
     }
     registerOnChange(fn) {
-        this.#onChange = fn;
+        this.#onChange = (date) => {
+            fn(date && this.inDateISOFormat() ? transformDateToDateISO(date) : date);
+        };
     }
     setDisabledState(isDisabled) {
         this.filterPillDisabled.set(isDisabled);
@@ -1010,6 +1081,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ['class.mod-filterPill']
             }] } });
 
+const PremadeShortcuts = {
+    SinceStartOfWeek: (locale) => {
+        return {
+            // TODO find a reliable way to obtain this, Angular has a deprecated method, date-fns can't get locale from string, Intl's weekDay isn't in firefox
+            start: startOfWeek(new Date(), { weekStartsOn: getLocaleFirstDayOfWeek(locale) }),
+            end: startOfDay(new Date()),
+        };
+    },
+    LastWeek: (locale) => {
+        const startOfLastWeek = startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: getLocaleFirstDayOfWeek(locale) });
+        return {
+            // TODO find a reliable way to obtain this, Angular has a deprecated method, date-fns can't get locale from string, Intl's weekDay isn't in firefox
+            start: startOfLastWeek,
+            end: endOfWeek(startOfLastWeek, { weekStartsOn: getLocaleFirstDayOfWeek(locale) }),
+        };
+    },
+    SinceStartOfMonth: () => {
+        return {
+            start: startOfMonth(new Date()),
+            end: endOfDay(new Date()),
+        };
+    },
+    LastMonth: () => {
+        const startOfLastMonth = startOfMonth(subMonths(new Date(), 1));
+        return {
+            start: startOfLastMonth,
+            end: endOfMonth(startOfLastMonth),
+        };
+    },
+    SinceStartOfQuarter: () => {
+        return {
+            start: startOfQuarter(new Date()),
+            end: endOfDay(new Date()),
+        };
+    },
+    LastQuarter: () => {
+        const startOfLastQuarter = startOfQuarter(subQuarters(new Date(), 1));
+        return {
+            start: startOfLastQuarter,
+            end: endOfQuarter(startOfLastQuarter),
+        };
+    },
+    SinceStartOfYear: () => {
+        return {
+            start: startOfYear(new Date()),
+            end: endOfDay(new Date()),
+        };
+    },
+    LastYear: () => {
+        const startOfLastYear = startOfYear(subYears(new Date(), 1));
+        return {
+            start: startOfLastYear,
+            end: endOfYear(startOfLastYear),
+        };
+    },
+    LastTwelveMonths: () => {
+        return {
+            start: subMonths(new Date(), 12),
+            end: new Date(),
+        };
+    },
+};
+
 let nextId = 0;
 class DateRangeInputComponent extends AbstractDateComponent {
     #luClass;
@@ -1213,7 +1347,7 @@ class DateRangeInputComponent extends AbstractDateComponent {
             else {
                 this.selectedRange.set(currentRange);
             }
-        }, { allowSignalWrites: true });
+        });
     }
     inputBlur() {
         this.onTouched?.();
@@ -1332,16 +1466,20 @@ class DateRangeInputComponent extends AbstractDateComponent {
         if (!control.value) {
             return null;
         }
-        return this.isValidDate(control.value?.start) ? null : { date: true };
-    }
-    writeValue(value) {
-        if (value) {
-            this.selectedRange.set(value);
-            this.currentDate.set(startOfDay(value.start));
+        const dateRange = transformDateRangeInputToDateRange(control.value);
+        return this.isValidDate(dateRange.start) ? null : { date: true };
+    }
+    writeValue(dateRange) {
+        if (dateRange != null) {
+            const _dateRange = transformDateRangeInputToDateRange(dateRange);
+            this.selectedRange.set(_dateRange);
+            this.currentDate.set(startOfDay(dateRange.start));
         }
     }
     registerOnChange(fn) {
-        this.#onChange = fn;
+        this.#onChange = (dateRange) => {
+            fn(dateRange && this.inDateISOFormat() ? transformDateRangeToDateRangeInput(dateRange) : dateRange);
+        };
     }
     setDisabledState(isDisabled) {
         this.filterPillDisabled.set(isDisabled);
@@ -1431,69 +1569,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ['class.mod-filterPill']
             }] } });
 
-const PremadeShortcuts = {
-    SinceStartOfWeek: (locale) => {
-        return {
-            // TODO find a reliable way to obtain this, Angular has a deprecated method, date-fns can't get locale from string, Intl's weekDay isn't in firefox
-            start: startOfWeek(new Date(), { weekStartsOn: getLocaleFirstDayOfWeek(locale) }),
-            end: startOfDay(new Date()),
-        };
-    },
-    LastWeek: (locale) => {
-        const startOfLastWeek = startOfWeek(subWeeks(new Date(), 1), { weekStartsOn: getLocaleFirstDayOfWeek(locale) });
-        return {
-            // TODO find a reliable way to obtain this, Angular has a deprecated method, date-fns can't get locale from string, Intl's weekDay isn't in firefox
-            start: startOfLastWeek,
-            end: endOfWeek(startOfLastWeek, { weekStartsOn: getLocaleFirstDayOfWeek(locale) }),
-        };
-    },
-    SinceStartOfMonth: () => {
-        return {
-            start: startOfMonth(new Date()),
-            end: endOfDay(new Date()),
-        };
-    },
-    LastMonth: () => {
-        const startOfLastMonth = startOfMonth(subMonths(new Date(), 1));
-        return {
-            start: startOfLastMonth,
-            end: endOfMonth(startOfLastMonth),
-        };
-    },
-    SinceStartOfQuarter: () => {
-        return {
-            start: startOfQuarter(new Date()),
-            end: endOfDay(new Date()),
-        };
-    },
-    LastQuarter: () => {
-        const startOfLastQuarter = startOfQuarter(subQuarters(new Date(), 1));
-        return {
-            start: startOfLastQuarter,
-            end: endOfQuarter(startOfLastQuarter),
-        };
-    },
-    SinceStartOfYear: () => {
-        return {
-            start: startOfYear(new Date()),
-            end: endOfDay(new Date()),
-        };
-    },
-    LastYear: () => {
-        const startOfLastYear = startOfYear(subYears(new Date(), 1));
-        return {
-            start: startOfLastYear,
-            end: endOfYear(startOfLastYear),
-        };
-    },
-    LastTwelveMonths: () => {
-        return {
-            start: subMonths(new Date(), 12),
-            end: new Date(),
-        };
-    },
-};
-
 /**
  * Generated bundle index. Do not edit.
  */