@nova-design-system/nova-webcomponents 3.2.0 → 3.4.0

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

@@ -1,6 +1,8 @@
 import { Host, h, } from "@stencil/core";
 import { WEEK_ABBREVIATIONS, CUSTOM_DAY_NAMES, CUSTOM_MONTH_NAMES, } from "../../utils/constants";
-import { getWeekNumber, parseDate, isSameDate, formatDate, isSameOrAfter, isSameOrBefore, } from "./nv-calendar.utils";
+import { parseDate, isSameDate, formatDate, isSameOrAfter, isSameOrBefore, } from "./nv-calendar.utils";
+// Import partials
+import { CalendarHeader, CalendarGrid, WeekNumbers, CalendarShortcuts, CalendarActions, } from "./partials";
 /**
  * @slot default - Child content of the component.
  * @slot actions - Child content of the component.
@@ -11,14 +13,23 @@ export class NvCalendar {
         //#region PROPERTIES
         /**
          * First day of the week (0 = Sunday, 1 = Monday, etc.)
-         * @default 0
+         * @default 1
          */
-        this.firstDayOfWeek = 0;
+        this.firstDayOfWeek = 1;
         /**
          * Number of calendars to display
          * @default 1
          */
         this.numberOfCalendars = 1;
+        /**
+         * Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings.
+         * Examples:
+         * - Single: "2025-03-15"
+         * - Range: "2025-03-15,2025-03-20"
+         * @default ""
+         */
+        // eslint-disable-next-line @stencil-community/strict-mutable
+        this.value = '';
         /**
          * Locale for date formatting
          * @default 'en-BE'
@@ -56,6 +67,75 @@ export class NvCalendar {
         this.endDate = null;
         /** List of formatted months for the selector */
         this.months = [];
+        /**
+         * Parses the unified value prop and synchronizes with internal state
+         * @param {string} value - Value to parse
+         */
+        this.parseUnifiedValue = (value) => {
+            if (!value) {
+                // Reset all selections
+                this.selectedDate = null;
+                this.startDate = null;
+                this.endDate = null;
+                return;
+            }
+            const values = value
+                .split(',')
+                .map(v => v.trim())
+                .filter(Boolean);
+            if (this.selectionType === 'single' && values.length >= 1) {
+                const parsedDate = parseDate(values[0], this.dateFormat);
+                if (parsedDate) {
+                    this.selectedDate = parsedDate;
+                    // Only sync with legacy prop if not using actions (immediate mode)
+                    if (!this.showActions) {
+                        this.singleValue = values[0];
+                    }
+                    // Navigate to the date if not prevented
+                    const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
+                    if (!preventNavigation) {
+                        this.currentDate = parsedDate;
+                    }
+                }
+                else {
+                    // Handle malformed date gracefully - reset state
+                    console.warn(`Invalid date format: ${values[0]}`);
+                    this.selectedDate = null;
+                    if (!this.showActions) {
+                        this.singleValue = '';
+                    }
+                }
+            }
+            else if (this.selectionType === 'range' && values.length >= 2) {
+                const startDate = parseDate(values[0], this.dateFormat);
+                const endDate = parseDate(values[1], this.dateFormat);
+                if (startDate && endDate) {
+                    this.startDate = startDate;
+                    this.endDate = endDate;
+                    // Only sync with legacy prop if not using actions (immediate mode)
+                    if (!this.showActions) {
+                        this.rangeValue = {
+                            start: values[0],
+                            end: values[1],
+                        };
+                    }
+                    // Navigate to start date if not prevented
+                    const preventNavigation = this.el.getAttribute('data-prevent-navigation') === 'true';
+                    if (!preventNavigation) {
+                        this.currentDate = startDate;
+                    }
+                }
+                else {
+                    // Handle malformed dates gracefully - reset state
+                    console.warn(`Invalid date range format: ${values[0]}, ${values[1]}`);
+                    this.startDate = null;
+                    this.endDate = null;
+                    if (!this.showActions) {
+                        this.rangeValue = { start: '', end: '' };
+                    }
+                }
+            }
+        };
         /**
          * Change the displayed month
          * @param {number} offset - Month offset (-1 for previous, 1 for next)
@@ -103,7 +183,14 @@ export class NvCalendar {
                 return;
             const formattedDate = formatDate(date, { dateFormat: this.dateFormat });
             this.selectedDate = date;
-            this.singleDateChange.emit(formattedDate);
+            // Update the unified value prop (like nv-fieldslider)
+            this.value = formattedDate;
+            this.valueChanged.emit(formattedDate);
+            // Legacy support (deprecated) - only sync props if not using actions
+            if (!this.showActions) {
+                this.singleValue = formattedDate;
+                this.singleDateChange.emit(formattedDate);
+            }
         };
         /**
          * Handles range date selection
@@ -111,18 +198,32 @@ export class NvCalendar {
          */
         this.handleRangeSelection = (date) => {
             if (!this.startDate || (this.startDate && this.endDate)) {
+                // Start new range selection
                 this.startDate = date;
                 this.endDate = null;
             }
             else {
+                // Complete range selection
                 this.endDate = date;
+                // Ensure correct order
                 if (this.startDate > this.endDate) {
                     [this.startDate, this.endDate] = [this.endDate, this.startDate];
                 }
-                this.rangeDateChange.emit({
-                    start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
-                    end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
+                const startFormatted = formatDate(this.startDate, {
+                    dateFormat: this.dateFormat,
+                });
+                const endFormatted = formatDate(this.endDate, {
+                    dateFormat: this.dateFormat,
                 });
+                // Update the unified value prop (like nv-fieldslider)
+                this.value = `${startFormatted},${endFormatted}`;
+                this.valueChanged.emit(this.value);
+                // Legacy support (deprecated) - only sync props if not using actions
+                if (!this.showActions) {
+                    const legacyRange = { start: startFormatted, end: endFormatted };
+                    this.rangeDateChange.emit(legacyRange);
+                    this.rangeValue = legacyRange;
+                }
             }
         };
         /**
@@ -181,23 +282,35 @@ export class NvCalendar {
          * @returns {string[]} Array of short day names
          */
         this.getDayNames = () => {
+            let days;
             // 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];
+                // Custom day names are expected to start with Monday (index 0 = Monday)
+                days = [...CUSTOM_DAY_NAMES[this.locale]];
+            }
+            else {
+                // Generate days using Intl.DateTimeFormat, starting from Monday
+                const formatter = new Intl.DateTimeFormat(this.locale, {
+                    weekday: 'short',
+                });
+                // Generate days starting from Monday (2023-01-02 was a Monday)
+                days = [...Array(7)].map((_, i) => formatter.format(new Date(2023, 0, i + 2)).toUpperCase());
+            }
+            // Now reorganize based on firstDayOfWeek
+            // 0 = Sunday, 1 = Monday (default), 2 = Tuesday, etc.
+            if (this.firstDayOfWeek === 0) {
+                // If Sunday is first day, move Sunday (last element) to the beginning
+                return [days[6], ...days.slice(0, 6)];
+            }
+            else if (this.firstDayOfWeek === 1) {
+                // If Monday is first day, return as-is (since our array starts with Monday)
+                return days;
+            }
+            else {
+                // For other first days (Tuesday=2, Wednesday=3, etc.)
+                const offset = this.firstDayOfWeek - 1; // Convert to 0-based offset from Monday
+                return [...days.slice(offset), ...days.slice(0, offset)];
             }
-            // Otherwise, use the default behavior
-            const formatter = new Intl.DateTimeFormat(this.locale, {
-                weekday: 'short',
-            });
-            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
@@ -378,8 +491,15 @@ export class NvCalendar {
             if (shortcut.singleValue) {
                 const newDate = parseDate(shortcut.singleValue, this.dateFormat);
                 this.selectedDate = newDate;
-                this.singleDateChange.emit(formatDate(newDate, { dateFormat: this.dateFormat }));
-                this.singleValue = formatDate(newDate, { dateFormat: this.dateFormat });
+                const formattedDate = formatDate(newDate, {
+                    dateFormat: this.dateFormat,
+                });
+                // Update the unified value prop (like nv-fieldslider)
+                this.value = formattedDate;
+                this.valueChanged.emit(formattedDate);
+                // Legacy support (deprecated) - sync props
+                this.singleValue = formattedDate;
+                this.singleDateChange.emit(formattedDate);
                 if (!this.showActions) {
                     const event = new CustomEvent('closePopover', {
                         bubbles: true,
@@ -394,14 +514,18 @@ export class NvCalendar {
                 const end = parseDate(shortcut.rangeValue.end, this.dateFormat);
                 this.startDate = start;
                 this.endDate = end;
-                this.rangeDateChange.emit({
-                    start: formatDate(start, { dateFormat: this.dateFormat }),
-                    end: formatDate(end, { dateFormat: this.dateFormat }),
+                const startFormatted = formatDate(start, {
+                    dateFormat: this.dateFormat,
                 });
-                this.rangeValue = {
-                    start: formatDate(start, { dateFormat: this.dateFormat }),
-                    end: formatDate(end, { dateFormat: this.dateFormat }),
-                };
+                const endFormatted = formatDate(end, { dateFormat: this.dateFormat });
+                // Update the unified value prop (like nv-fieldslider)
+                this.value = `${startFormatted},${endFormatted}`;
+                this.valueChanged.emit(this.value);
+                // Legacy support (deprecated) - sync props
+                const legacyRange = { start: startFormatted, end: endFormatted };
+                this.rangeDateChange.emit(legacyRange);
+                // eslint-disable-next-line @stencil-community/strict-mutable
+                this.rangeValue = legacyRange;
                 if (!this.showActions) {
                     const event = new CustomEvent('closePopover', {
                         bubbles: true,
@@ -419,79 +543,28 @@ export class NvCalendar {
         this.forceCalendarUpdate = newDate => {
             this.currentDate = new Date(newDate);
         };
-        /**
-         * Handles month change with an offset
-         * @param {number} direction - Direction (-1 for previous, 1 for next)
-         * @returns {Function} Change month handler
-         */
-        this.getChangeMonthHandler = (direction) => {
-            return () => this.changeMonth(direction);
-        };
-        /**
-         * Handles month change from an event (ex: dropdown)
-         * @param {number} offset - Month offset (0 by default)
-         * @returns {Function} Change month handler
-         */
-        this.getHandleMonthChange = (offset) => {
-            return (event) => this.handleMonthChange(event, offset);
-        };
-        /**
-         * Handles year change from an event (ex: dropdown)
-         * @param {number} offset - Year offset (0 by default)
-         * @returns {Function} Change year handler
-         */
-        this.getHandleYearChange = (offset) => {
-            return (event) => this.handleYearChange(event, offset);
-        };
-        /**
-         * Handles day click
-         * @param {Date} date - Date to handle
-         * @param {boolean} isDisabled - Whether the date is disabled
-         * @returns {Function} Day click handler
-         */
-        this.getDayClickHandler = (date, isDisabled) => {
-            return isDisabled ? undefined : () => this.handleDateSelection(date);
-        };
-        /**
-         * Handles shortcut selection
-         * @param {Object} shortcut - Shortcut to handle
-         * @param {string | Date} shortcut.singleValue - Selected date value
-         * @param {Object} shortcut.rangeValue - Start and end date values
-         * @param {string | Date} shortcut.rangeValue.start - Start date value
-         * @param {string | Date} shortcut.rangeValue.end - End date value
-         * @param {string} shortcut.label - Label
-         * @returns {Function} Shortcut selection handler
-         */
-        this.getShortcutHandler = (shortcut) => {
-            return () => this.applyShortcut(shortcut);
-        };
-        /**
-         * Handles week selection
-         * @param {Date[]} dates - Dates to handle
-         * @param {number} index - Calendar index
-         * @returns {Function} Week selection handler
-         */
-        this.getWeekSelectionHandler = (dates, index) => {
-            return () => {
-                if (this.selectionType === 'range') {
-                    this.handleWeekSelection(dates, index);
-                }
-            };
-        };
         /**
          * Resets the current selection
          */
         this.resetSelection = () => {
             if (this.selectionType === 'single') {
                 this.selectedDate = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.singleValue = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
+                this.value = '';
                 this.singleDateChange.emit('');
+                this.valueChanged.emit('');
             }
             else {
                 this.startDate = null;
                 this.endDate = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = null;
+                // eslint-disable-next-line @stencil-community/strict-mutable
+                this.value = '';
                 this.rangeDateChange.emit({ start: '', end: '' });
+                this.valueChanged.emit('');
             }
         };
         /**
@@ -503,6 +576,7 @@ export class NvCalendar {
                     dateFormat: this.dateFormat,
                 });
                 this.singleDateChange.emit(dateStr);
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.singleValue = dateStr;
                 const event = new CustomEvent('closePopover', {
                     bubbles: true,
@@ -517,6 +591,7 @@ export class NvCalendar {
                     start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
                     end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
                 });
+                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = {
                     start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
                     end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
@@ -539,8 +614,7 @@ export class NvCalendar {
          * @description Renders the header of the calendar
          */
         this.renderHeader = (offset, index) => {
-            return (h("div", { class: "header" }, this.numberOfCalendars > 1 && index === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) })), h("div", { class: "date-controls" }, h("select", { class: "month-select mr-4", onChange: this.getHandleMonthChange(offset) }, this.months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === (this.currentDate.getUTCMonth() + offset) % 12 }, month.label)))), h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: this.currentDate.getUTCFullYear() +
-                    Math.floor((this.currentDate.getUTCMonth() + offset) / 12), onChange: this.getHandleYearChange(offset) })), this.numberOfCalendars === 1 && (h("div", { class: "nav-buttons" }, h("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: this.getChangeMonthHandler(-1) }), h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: this.getChangeMonthHandler(1), class: "nav-right" }))));
+            return (h(CalendarHeader, { currentDate: this.currentDate, months: this.months, numberOfCalendars: this.numberOfCalendars, calendarIndex: index, monthOffset: offset, onMonthChange: this.changeMonth, onMonthSelect: this.handleMonthChange, onYearChange: this.handleYearChange }));
         };
         /**
          * Renders the week numbers
@@ -554,42 +628,7 @@ export class NvCalendar {
         weeks, 
         /** Calendar index */
         index) => {
-            return (h("div", { class: "week-numbers" }, h("div", { class: "week-header" }, this.getLocalizedWeekText()), weeks.map((week, weekIndex) => {
-                var _a;
-                const dates = week.map(d => d.date);
-                return (h("div", { class: `week-number ${this.selectionType === 'range' ? 'clickable' : ''}`, onClick: this.getWeekSelectionHandler(dates, index), key: `week-${weekIndex}` }, getWeekNumber(((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date())));
-            })));
-        };
-        this.renderDaysGrid = (
-        /** Days to render */
-        days) => {
-            return (h("div", { class: "days-grid" }, days.map(day => {
-                const date = day.date;
-                if (!date)
-                    return null;
-                const isSelected = this.selectionType === 'single' &&
-                    isSameDate(date, this.selectedDate, { isUTCMode: this.isUTCMode });
-                const isInRange = this.isDateInRange(date);
-                const isStart = isSameDate(date, this.startDate, {
-                    isUTCMode: this.isUTCMode,
-                });
-                const isEnd = isSameDate(date, this.endDate, {
-                    isUTCMode: this.isUTCMode,
-                });
-                const isToday = this.isToday(date);
-                const isOutsideMonth = !day.isCurrentMonth;
-                const dayClasses = [
-                    'day',
-                    isSelected ? 'selected' : '',
-                    isStart ? 'range-start' : '',
-                    isEnd ? 'range-end' : '',
-                    isInRange ? 'in-range' : '',
-                    day.isDisabled ? 'disabled' : '',
-                    isOutsideMonth ? 'outside-month' : '',
-                    isToday ? 'is-today' : '',
-                ];
-                return (h("div", { class: dayClasses.filter(Boolean).join(' '), onClick: this.getDayClickHandler(date, day.isDisabled), "aria-disabled": day.isDisabled, key: `day-${date.toISOString()}` }, day.dayOfMonth));
-            })));
+            return (h(WeekNumbers, { weeks: weeks, localizedWeekText: this.getLocalizedWeekText(), selectionType: this.selectionType, onWeekSelect: this.handleWeekSelection, calendarIndex: index }));
         };
         /**
          * Renders the calendar
@@ -608,7 +647,7 @@ export class NvCalendar {
             for (let i = 0; i < days.length; i += 7) {
                 weeks.push(days.slice(i, i + 7));
             }
-            return (h("div", { class: "calendar-wrapper" }, h("div", { class: "calendar-container", key: `calendar-${index}` }, this.renderHeader(offset, index), h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), h("div", { class: "days-container" }, h("div", { class: "days-header" }, this.getDayNames().map(day => (h("div", { class: "day-header" }, day)))), this.renderDaysGrid(days)))), index < this.numberOfCalendars - 1 && (h("div", { class: "calendar-separator" }))));
+            return (h("div", { class: "calendar-wrapper" }, h("div", { class: "calendar-container", key: `calendar-${index}` }, this.renderHeader(offset, index), h("div", { class: "calendar-grid" }, this.showWeekNumbers && this.renderWeekNumbers(weeks, index), h(CalendarGrid, { days: days, dayNames: this.getDayNames(), selectionType: this.selectionType, selectedDate: this.selectedDate, startDate: this.startDate, endDate: this.endDate, isUTCMode: this.isUTCMode, onDayClick: this.handleDateSelection, isDateInRange: this.isDateInRange, isToday: this.isToday }))), index < this.numberOfCalendars - 1 && (h("div", { class: "calendar-separator" }))));
         };
         /**
          * Renders the shortcuts
@@ -619,7 +658,7 @@ export class NvCalendar {
             if (!this.hasShortcuts) {
                 return null;
             }
-            return (h("div", { class: `shortcuts-container shortcuts-placement-${this.shortcutsPlacement}` }, this.shortcuts.map(shortcut => (h("nv-button", { emphasis: "lower", size: "xs", "aria-label": shortcut.label, onClick: this.getShortcutHandler(shortcut) }, shortcut.label)))));
+            return (h(CalendarShortcuts, { shortcuts: this.shortcuts, placement: this.shortcutsPlacement, onShortcutClick: this.applyShortcut }));
         };
         /**
          * Renders the actions
@@ -628,7 +667,7 @@ export class NvCalendar {
          * @slot actions - Child content of the component.
          */
         this.renderActions = () => {
-            return (h("div", { class: "datepicker-actions" }, h("slot", { name: "actions" }, h("nv-button", { emphasis: "low", size: "xs", onClick: this.resetSelection }, "Cancel"), h("nv-button", { size: "xs", onClick: this.confirmSelection }, "OK"))));
+            return (h("div", { class: "datepicker-actions" }, h("slot", { name: "actions" }, h(CalendarActions, { onReset: this.resetSelection, onConfirm: this.confirmSelection, useSlot: false }))));
         };
     }
     //#endregion EVENTS
@@ -692,12 +731,26 @@ export class NvCalendar {
             }
         }
     }
+    /**
+     * Watches the changes of the unified value prop
+     * @param {string} newValue - New value
+     * @param {string} oldValue - Old value
+     */
+    onValueChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.parseUnifiedValue(newValue);
+        }
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
         this.parseDisabledDates();
-        if (this.selectionType === 'single' && this.singleValue) {
+        // Initialize from unified value prop if provided
+        if (this.value) {
+            this.parseUnifiedValue(this.value);
+        }
+        else if (this.selectionType === 'single' && this.singleValue) {
             this.selectedDate = parseDate(this.singleValue, this.dateFormat);
             this.currentDate = this.selectedDate;
         }
@@ -710,6 +763,7 @@ export class NvCalendar {
                     this.currentDate = startDate;
                     if (swapped) {
                         // If dates were swapped, update the rangeValue property
+                        // eslint-disable-next-line @stencil-community/strict-mutable
                         this.rangeValue = {
                             start: formatDate(startDate, { dateFormat: this.dateFormat }),
                             end: formatDate(endDate, { dateFormat: this.dateFormat }),
@@ -721,7 +775,8 @@ export class NvCalendar {
                 console.error('Invalid rangeValue:', error);
             }
         }
-        else {
+        // Ensure currentDate is always initialized
+        if (!this.currentDate) {
             this.currentDate = new Date();
         }
         this.initializeMonths();
@@ -791,8 +846,8 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '9804c486acf32e12f2d88f932a54ca6260365887' }, h("div", { key: '8503f585401191b904f2de248ed0c24b1fed1505', class: "datepicker-root" }, h("div", { key: '9da71618bd2031b44f5a3fd889d40b2580fcca58', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'fbf71a34b520ca48f1440d8caeec442773b1e57a', 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.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (h("div", { key: '4431e3f1221e9d47807d58af380dcaa91bf05c48', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '30386356bda72f4f12a28351084ab498ec95f5b9' })));
+        return (h(Host, { key: '43d4f3ab9199e9c5f15e853f15283fa59e4a436d' }, h("div", { key: 'b9956225cb2c16d997aa44266af8f8c8222ea968', class: "datepicker-root" }, h("div", { key: '05b63935bc5ebf500bb52d10688385f994b47fb4', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'd7af15b9ce051026cf841b3be361b32d8db41fc1', 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.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (h("div", { key: '1765334bf15564bc9886b210c54bddba64c7042e', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '0ac3446394b8c23b859e5f0065370b95b6fd05d2' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {
@@ -820,7 +875,7 @@ export class NvCalendar {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "0"
+                            "text": "1"
                         }],
                     "text": "First day of the week (0 = Sunday, 1 = Monday, etc.)"
                 },
@@ -828,7 +883,7 @@ export class NvCalendar {
                 "setter": false,
                 "attribute": "first-day-of-week",
                 "reflect": true,
-                "defaultValue": "0"
+                "defaultValue": "1"
             },
             "numberOfCalendars": {
                 "type": "number",
@@ -853,6 +908,29 @@ export class NvCalendar {
                 "reflect": true,
                 "defaultValue": "1"
             },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": "Selected date value. For single mode: ISO date string. For range mode: comma-separated ISO date strings.\nExamples:\n- Single: \"2025-03-15\"\n- Range: \"2025-03-15,2025-03-20\""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
             "singleValue": {
                 "type": "string",
                 "mutable": true,
@@ -1155,6 +1233,24 @@ export class NvCalendar {
                         }
                     }
                 }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "bind",
+                            "text": "value"
+                        }],
+                    "text": "Emitted when the unified value changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
@@ -1171,6 +1267,9 @@ export class NvCalendar {
             }, {
                 "propName": "singleValue",
                 "methodName": "onSingleValueChange"
+            }, {
+                "propName": "value",
+                "methodName": "onValueChange"
             }];
     }
 }