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

package/dist/esm/nv-calendar.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-8f0e5f19.js';
-import { C as CUSTOM_DAY_NAMES, b as CUSTOM_MONTH_NAMES, W as WEEK_ABBREVIATIONS } from './constants-b97e736d.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-a1936cd0.js';
+import { C as CUSTOM_DAY_NAMES, d as CUSTOM_MONTH_NAMES, W as WEEK_ABBREVIATIONS } from './constants-4faa1fae.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1789f0cf.js';
 
 var dayjs_min = {exports: {}};
@@ -156,9 +156,18 @@ function isSameOrAfter(date, compareDate, options) {
  * @returns {number} Week number
  */
 function getWeekNumber(date) {
-    const startOfYear = new Date(date.getFullYear(), 0, 1);
-    const pastDaysOfYear = (date.getTime() - startOfYear.getTime()) / 86400000;
-    return Math.ceil((pastDaysOfYear + startOfYear.getDay() + 1) / 7);
+    // Create a copy of the date to avoid modifying the original
+    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    // Adjust to the same week Thursday (ISO 8601)
+    d.setUTCDate(d.getUTCDate() + 3 - ((d.getUTCDay() + 6) % 7));
+    // Calculate the first Thursday of the year
+    const week1 = new Date(Date.UTC(d.getUTCFullYear(), 0, 4));
+    // Calculate the week number
+    return (1 +
+        Math.round(((d.getTime() - week1.getTime()) / 86400000 -
+            3 +
+            ((week1.getUTCDay() + 6) % 7)) /
+            7));
 }
 /**
  * Convert a date string/Date to a Date without timezone offset
@@ -232,6 +241,175 @@ function parseDate(dateInput, dateFormat) {
     return parsed.toDate();
 }
 
+/**
+ * Renders a single day cell in the calendar grid
+ * @param {DayCellProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing a day cell
+ */
+const DayCell = props => {
+    const { date, dayOfMonth, isCurrentMonth, isSelected, isInRange, isStart, isEnd, isToday, isDisabled, onClick, } = props;
+    // Build CSS classes for the day cell
+    const dayClasses = [
+        'day',
+        isSelected ? 'selected' : '',
+        isStart ? 'range-start' : '',
+        isEnd ? 'range-end' : '',
+        isInRange ? 'in-range' : '',
+        isDisabled ? 'disabled' : '',
+        !isCurrentMonth ? 'outside-month' : '',
+        isToday ? 'is-today' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const handleClick = () => {
+        if (!isDisabled && onClick) {
+            onClick(date);
+        }
+    };
+    return (
+    // eslint-disable-next-line react/jsx-no-bind
+    h("div", { class: dayClasses, onClick: handleClick, "aria-disabled": isDisabled }, dayOfMonth));
+};
+
+/**
+ * Renders the action buttons for the calendar (Cancel/OK)
+ * @param {CalendarActionsProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the action buttons
+ */
+const CalendarActions = props => {
+    const { onReset, onConfirm, useSlot = false } = props;
+    return (h("div", { class: "datepicker-actions" }, useSlot ? (h("slot", { name: "actions" },
+        h("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, "Cancel"),
+        h("nv-button", { size: "xs", onClick: onConfirm }, "OK"))) : (h("div", null,
+        h("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, "Cancel"),
+        h("nv-button", { size: "xs", onClick: onConfirm }, "OK")))));
+};
+
+/**
+ * Renders the week numbers column for the calendar
+ * @param {WeekNumbersProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the week numbers
+ */
+const WeekNumbers = props => {
+    const { weeks, localizedWeekText, selectionType, onWeekSelect, calendarIndex, } = props;
+    /**
+     * Handles click on a week number for range selection
+     * @param {Array<WeekData>} week - Week data
+     */
+    const handleWeekClick = (week) => {
+        if (selectionType === 'range') {
+            const dates = week.map(d => d.date);
+            onWeekSelect(dates, calendarIndex);
+        }
+    };
+    /**
+     * Creates a click handler for a specific week
+     * @param {Array<WeekData>} week - Week data
+     * @returns {() => void} Click handler function
+     */
+    const createWeekHandler = (week) => {
+        return () => handleWeekClick(week);
+    };
+    return (h("div", { class: "week-numbers" },
+        h("div", { class: "week-header" }, localizedWeekText),
+        weeks.map((week, weekIndex) => {
+            var _a;
+            const firstDayWithDate = ((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date();
+            const weekNumber = getWeekNumber(firstDayWithDate);
+            const isClickable = selectionType === 'range';
+            return (h("div", { class: `week-number ${isClickable ? 'clickable' : ''}`, onClick: createWeekHandler(week), key: `week-${weekIndex}`, role: isClickable ? 'button' : undefined, tabindex: isClickable ? 0 : undefined }, weekNumber));
+        })));
+};
+
+/**
+ * Renders the shortcuts for quick date selection
+ * @param {CalendarShortcutsProps} props - Component properties
+ * @returns {JSX.Element | null} JSX element representing the shortcuts or null if no shortcuts
+ */
+const CalendarShortcuts = props => {
+    const { shortcuts, placement, onShortcutClick } = props;
+    if (!shortcuts || shortcuts.length === 0) {
+        return null;
+    }
+    /**
+     * Creates a click handler for a specific shortcut
+     * @param {ShortcutData} shortcut - The shortcut data
+     * @returns {() => void} Click handler function
+     */
+    const createShortcutHandler = (shortcut) => {
+        return () => onShortcutClick(shortcut);
+    };
+    return (h("div", { class: `shortcuts-container shortcuts-placement-${placement}` }, shortcuts.map((shortcut, index) => (h("nv-button", { key: `shortcut-${index}`, emphasis: "lower", size: "xs", "aria-label": shortcut.label, onClick: createShortcutHandler(shortcut) }, shortcut.label)))));
+};
+
+/**
+ * Renders the calendar header with navigation and date controls
+ * @param {CalendarHeaderProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar header
+ */
+const CalendarHeader = props => {
+    const { currentDate, months, numberOfCalendars, calendarIndex, monthOffset, onMonthChange, onMonthSelect, onYearChange, } = props;
+    /**
+     * Creates navigation handler for month change
+     * @param {number} direction - Direction of navigation (-1 or 1)
+     * @returns {() => void} Navigation handler function
+     */
+    const createNavigationHandler = (direction) => {
+        return () => onMonthChange(direction);
+    };
+    /**
+     * Creates month selection handler
+     * @param {number} offset - Month offset
+     * @returns {(event: Event) => void} Month selection handler function
+     */
+    const createMonthSelectHandler = (offset) => {
+        return (event) => onMonthSelect(event, offset);
+    };
+    /**
+     * Creates year change handler
+     * @param {number} offset - Month offset
+     * @returns {(event: Event) => void} Year change handler function
+     */
+    const createYearChangeHandler = (offset) => {
+        return (event) => onYearChange(event, offset);
+    };
+    const currentMonth = (currentDate.getUTCMonth() + monthOffset) % 12;
+    const currentYear = currentDate.getUTCFullYear() +
+        Math.floor((currentDate.getUTCMonth() + monthOffset) / 12);
+    return (h("div", { class: "header" },
+        numberOfCalendars > 1 && calendarIndex === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: createNavigationHandler(-1) })),
+        h("div", { class: "date-controls" },
+            h("select", { class: "month-select mr-4", onChange: createMonthSelectHandler(monthOffset) }, months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === currentMonth }, month.label)))),
+            h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: currentYear, onChange: createYearChangeHandler(monthOffset) })),
+        numberOfCalendars === 1 && (h("div", { class: "nav-buttons" },
+            h("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: createNavigationHandler(-1) }),
+            h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: createNavigationHandler(1) }))),
+        numberOfCalendars > 1 && calendarIndex === numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: createNavigationHandler(1), class: "nav-right" }))));
+};
+
+/**
+ * Renders the calendar grid with day headers and day cells
+ * @param {CalendarGridProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the calendar grid
+ */
+const CalendarGrid = props => {
+    const { days, dayNames, selectionType, selectedDate, startDate, endDate, isUTCMode, onDayClick, isDateInRange, isToday, } = props;
+    return (h("div", { class: "days-container" },
+        h("div", { class: "days-header" }, dayNames.map((day, index) => (h("div", { class: "day-header", key: `day-header-${index}` }, day)))),
+        h("div", { class: "days-grid" }, days.map(day => {
+            const date = day.date;
+            if (!date)
+                return null;
+            const isSelected = selectionType === 'single' &&
+                isSameDate(date, selectedDate, { isUTCMode });
+            const isInRange = isDateInRange(date);
+            const isStart = isSameDate(date, startDate, { isUTCMode });
+            const isEnd = isSameDate(date, endDate, { isUTCMode });
+            const isTodayDate = isToday(date);
+            return (h(DayCell, { date: date, dayOfMonth: day.dayOfMonth, isCurrentMonth: day.isCurrentMonth, isSelected: isSelected, isInRange: isInRange, isStart: isStart, isEnd: isEnd, isToday: isTodayDate, isDisabled: day.isDisabled, selectionType: selectionType, onClick: onDayClick }));
+        }))));
+};
+
 const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){background:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}.day.selected,.day.selected:hover .day.is-today.selected,.day.is-today.selected:hover{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 const NvCalendarStyle0 = nvCalendarCss;
 
@@ -240,18 +418,28 @@ const NvCalendar = class {
         registerInstance(this, hostRef);
         this.singleDateChange = createEvent(this, "singleDateChange", 7);
         this.rangeDateChange = createEvent(this, "rangeDateChange", 7);
+        this.valueChanged = createEvent(this, "valueChanged", 7);
         /****************************************************************************/
         //#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'
@@ -289,6 +477,75 @@ const NvCalendar = class {
         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)
@@ -336,7 +593,14 @@ const NvCalendar = class {
                 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
@@ -344,18 +608,32 @@ const NvCalendar = class {
          */
         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;
+                }
             }
         };
         /**
@@ -414,23 +692,35 @@ const NvCalendar = class {
          * @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
@@ -611,8 +901,15 @@ const NvCalendar = class {
             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,
@@ -627,14 +924,18 @@ const NvCalendar = class {
                 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,
@@ -652,79 +953,28 @@ const NvCalendar = class {
         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('');
             }
         };
         /**
@@ -736,6 +986,7 @@ const NvCalendar = class {
                     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,
@@ -750,6 +1001,7 @@ const NvCalendar = class {
                     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 }),
@@ -772,8 +1024,7 @@ const NvCalendar = class {
          * @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
@@ -787,42 +1038,7 @@ const NvCalendar = class {
         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
@@ -841,7 +1057,7 @@ const NvCalendar = class {
             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
@@ -852,7 +1068,7 @@ const NvCalendar = class {
             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
@@ -861,7 +1077,7 @@ const NvCalendar = class {
          * @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
@@ -925,12 +1141,26 @@ const NvCalendar = class {
             }
         }
     }
+    /**
+     * 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;
         }
@@ -943,6 +1173,7 @@ const NvCalendar = class {
                     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 }),
@@ -954,7 +1185,8 @@ const NvCalendar = class {
                 console.error('Invalid rangeValue:', error);
             }
         }
-        else {
+        // Ensure currentDate is always initialized
+        if (!this.currentDate) {
             this.currentDate = new Date();
         }
         this.initializeMonths();
@@ -1024,15 +1256,16 @@ const NvCalendar = class {
      * @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' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
         "numberOfCalendars": ["validateNumberOfCalendars"],
         "rangeValue": ["onRangeValueChange"],
         "disabledDates": ["handleDisabledDatesChange"],
-        "singleValue": ["onSingleValueChange"]
+        "singleValue": ["onSingleValueChange"],
+        "value": ["onValueChange"]
     }; }
 };
 NvCalendar.style = NvCalendarStyle0;