@nova-design-system/nova-webcomponents 3.0.0-beta.41 → 3.0.0-beta.42

package/dist/collection/components/nv-calendar/nv-calendar.css

@@ -265,24 +265,29 @@ nv-calendar {
   justify-content: center;
 }
 
+.datepicker-controls {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--components-button-medium-border);
+  padding: 1rem;
+  gap: 0.25rem;
+  width: 100%;
+}
+
 .datepicker-actions {
   display: flex;
   justify-content: flex-end;
   gap: 0.25rem;
+  width: 100%;
+}
+.datepicker-actions slot-fb {
+  display: contents !important;
 }
 
 .calendar-footer + .datepicker-actions {
   margin-top: 0;
 }
 
-.datepicker-controls {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid var(--components-button-medium-border);
-  padding: 1rem;
-  gap: 0.25rem;
-}
-
 .shortcuts-placement-left,
 .shortcuts-placement-right {
   display: flex;

package/dist/collection/components/nv-calendar/nv-calendar.js

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import utc from "dayjs/plugin/utc";
 import weekOfYear from "dayjs/plugin/weekOfYear";
-import { WEEK_ABBREVIATIONS } from "../../utils/constants";
+import { WEEK_ABBREVIATIONS, CUSTOM_DAY_NAMES, CUSTOM_MONTH_NAMES, } from "../../utils/constants";
 // Extend dayjs with plugins
 dayjs.extend(customParseFormat);
 dayjs.extend(utc);
@@ -116,6 +116,11 @@ export class NvCalendar {
                 const dateStr = this.formatDate(this.selectedDate);
                 this.singleDateChange.emit(dateStr);
                 this.singleValue = dateStr;
+                const event = new CustomEvent('closePopover', {
+                    bubbles: true,
+                    composed: true,
+                });
+                this.el.dispatchEvent(event);
             }
             else if (this.selectionType === 'range' &&
                 this.startDate &&
@@ -128,6 +133,11 @@ export class NvCalendar {
                     start: this.formatDate(this.startDate),
                     end: this.formatDate(this.endDate),
                 });
+                const event = new CustomEvent('closePopover', {
+                    bubbles: true,
+                    composed: true,
+                });
+                this.el.dispatchEvent(event);
             }
         };
     }
@@ -224,11 +234,6 @@ export class NvCalendar {
             return;
         const formattedDate = this.formatDate(date);
         this.selectedDate = date;
-        this.selectedDate = date;
-        console.info('handleSingleSelection => selectedDate =', this.selectedDate);
-        console.info('📤 Emitting singleDateChange:', {
-            selectedDate: formattedDate,
-        });
         this.singleDateChange.emit(formattedDate);
     }
     /**
@@ -317,10 +322,23 @@ export class NvCalendar {
      * @returns {string[]} Array of short day names
      */
     getDayNames() {
+        // If we have custom day names for this locale
+        if (CUSTOM_DAY_NAMES[this.locale]) {
+            const days = [...CUSTOM_DAY_NAMES[this.locale]];
+            // Reorganize the days based on the first day of the week
+            const firstDays = days.slice(0, this.firstDayOfWeek);
+            const remainingDays = days.slice(this.firstDayOfWeek);
+            return [...remainingDays, ...firstDays];
+        }
+        // Otherwise, use the default behavior
         const formatter = new Intl.DateTimeFormat(this.locale, {
             weekday: 'short',
         });
-        return [...Array(7)].map((_, i) => formatter.format(new Date(2023, 0, i + 1 + this.firstDayOfWeek)));
+        const days = [...Array(7)].map((_, i) => formatter.format(new Date(2023, 0, i + 1)).toUpperCase());
+        // Reorganize the days based on the first day of the week
+        const firstDays = days.slice(0, this.firstDayOfWeek);
+        const remainingDays = days.slice(this.firstDayOfWeek);
+        return [...remainingDays, ...firstDays];
     }
     /**
      * Generates the days of the current month
@@ -376,10 +394,19 @@ export class NvCalendar {
     }
     /** Initializes the list of formatted months according to the locale */
     initializeMonths() {
-        const formatter = new Intl.DateTimeFormat(this.locale, { month: 'long' });
+        // If we have custom month names for this locale
+        if (CUSTOM_MONTH_NAMES[this.locale]) {
+            this.months = CUSTOM_MONTH_NAMES[this.locale].map((label, value) => ({
+                value,
+                label,
+            }));
+            return;
+        }
+        // Otherwise, use the default behavior
+        const formatter = new Intl.DateTimeFormat(this.locale, { month: 'short' });
         this.months = Array.from({ length: 12 }, (_, i) => ({
             value: i,
-            label: formatter.format(new Date(2000, i, 1)),
+            label: formatter.format(new Date(2000, i, 1)).toUpperCase(),
         }));
     }
     /**
@@ -427,7 +454,6 @@ export class NvCalendar {
     handleWeekSelection(weekDays, calendarIndex) {
         if (this.selectionType !== 'range')
             return;
-        // Retrieves the days of the month adjusted according to the calendar index
         const allDays = this.getDaysInMonth(calendarIndex, this.numberOfCalendars);
         const weekStart = weekDays[0];
         const weekEnd = weekDays[weekDays.length - 1];
@@ -439,8 +465,8 @@ export class NvCalendar {
             this.startDate = validDays[0].date;
             this.endDate = validDays[validDays.length - 1].date;
             this.rangeDateChange.emit({
-                start: this.startDate.toISOString(),
-                end: this.endDate.toISOString(),
+                start: this.formatDate(this.startDate),
+                end: this.formatDate(this.endDate),
             });
         }
     }
@@ -496,6 +522,21 @@ export class NvCalendar {
     handleDisabledDatesChange() {
         this.parseDisabledDates();
     }
+    /**
+     * Watches the changes of the single value
+     * @watch singleValue
+     * @param {string} newValue - New single value
+     * @param {string} oldValue - Old single value
+     */
+    onSingleValueChange(newValue, oldValue) {
+        if (this.selectionType === 'single' && newValue !== oldValue && newValue) {
+            const parsedDate = this.parseDate(newValue);
+            if (parsedDate) {
+                this.selectedDate = parsedDate;
+                this.currentDate = parsedDate;
+            }
+        }
+    }
     /**
      * Convert a date string/Date to a Date without timezone offset
      * @param {string | Date} dateInput - Date under string or Date object form
@@ -682,6 +723,13 @@ export class NvCalendar {
             this.selectedDate = newDate;
             this.singleDateChange.emit(this.formatDate(newDate));
             this.singleValue = this.formatDate(newDate);
+            if (!this.showActions) {
+                const event = new CustomEvent('closePopover', {
+                    bubbles: true,
+                    composed: true,
+                });
+                this.el.dispatchEvent(event);
+            }
             this.forceCalendarUpdate(newDate);
         }
         else {
@@ -697,6 +745,13 @@ export class NvCalendar {
                 start: this.formatDate(start),
                 end: this.formatDate(end),
             });
+            if (!this.showActions) {
+                const event = new CustomEvent('closePopover', {
+                    bubbles: true,
+                    composed: true,
+                });
+                this.el.dispatchEvent(event);
+            }
             this.forceCalendarUpdate(end);
         }
     }
@@ -931,7 +986,7 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '0d9b8c85ed51f8a82b8d2159b064e480cec49df6' }, h("div", { key: '558f698edfe33c50af19ac7466279185bbf5b87a', class: "datepicker-root" }, h("div", { key: '9cc0b7ad17f438afb292c729af826a00501a44c5', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '14d17b4e73525537060dea627ebfe6c3e84387ab', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: '7fe8a36601d434da834bc934bafa11c3fdbd40f8', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'bebf0f034ee70b5abfd99b692a60ca3b4cbe09a0' })));
+        return (h(Host, { key: 'f7835b1457300a2faddc249b426c07a7a0269783' }, h("div", { key: '2e064a4abdda98fd60707ee2fac75bfe13214655', class: "datepicker-root" }, h("div", { key: '5041c7cc3efae4aa27194be09d3f8814f134b4c8', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '8f622f0ec26ab2caf7edd4a05da6b00aabd9c472', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), (this.hasShortcuts || this.hasActions) && (h("div", { key: '908067dd983f9e27fd80b475767d464fe192d245', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'd27b083edc68386b6b9f0bf048b15fb36b75dcd0' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {
@@ -966,7 +1021,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "first-day-of-week",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "numberOfCalendars": {
@@ -1049,7 +1104,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "min",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "max": {
@@ -1069,7 +1124,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "max",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabledDates": {
@@ -1092,7 +1147,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "disabled-dates",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "locale": {
@@ -1115,7 +1170,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "locale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'en-BE'"
             },
             "dateFormat": {
@@ -1144,7 +1199,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "date-format",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'YYYY-MM-DD'"
             },
             "shortcutsPlacement": {
@@ -1167,7 +1222,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "shortcuts-placement",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'bottom'"
             },
             "selectionType": {
@@ -1190,7 +1245,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "selection-type",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'single'"
             },
             "showActions": {
@@ -1213,7 +1268,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "show-actions",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "shortcuts": {
@@ -1236,7 +1291,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "shortcuts",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'[]'"
             },
             "showWeekNumbers": {
@@ -1259,7 +1314,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "show-week-numbers",
-                "reflect": false
+                "reflect": true
             }
         };
     }
@@ -1322,6 +1377,9 @@ export class NvCalendar {
             }, {
                 "propName": "disabledDates",
                 "methodName": "handleDisabledDatesChange"
+            }, {
+                "propName": "singleValue",
+                "methodName": "onSingleValueChange"
             }];
     }
 }