@nova-design-system/nova-webcomponents 3.0.0 → 3.1.0

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

@@ -1,13 +1,6 @@
 import { Host, h, } from "@stencil/core";
-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, CUSTOM_DAY_NAMES, CUSTOM_MONTH_NAMES, } from "../../utils/constants";
-// Extend dayjs with plugins
-dayjs.extend(customParseFormat);
-dayjs.extend(utc);
-dayjs.extend(weekOfYear);
+import { getWeekNumber, parseDate, isSameDate, formatDate, isSameOrAfter, isSameOrBefore, } from "./nv-calendar.utils";
 /**
  * @slot default - Child content of the component.
  * @slot actions - Child content of the component.
@@ -27,33 +20,12 @@ export class NvCalendar {
          */
         this.numberOfCalendars = 1;
         /**
-         * Selected date (ISO string format)
-         * ex: "2025-03-15"
-         */
-        this.singleValue = '';
-        /**
-         * Selected date range
-         * format: { start: ISO string, end: ISO string }
-         * ex: { start: "2025-03-15", end: "2025-03-20" }
-         */
-        this.rangeValue = '';
-        /**
-         * Minimum date for selection (ISO string format, ex: "2025-01-01")
-         */
-        this.min = '';
-        /**
-         * Maximum date for selection (ISO string format, ex: "2025-12-31")
-         */
-        this.max = '';
-        /** Disabled dates (ISO string array)
-         * @default '[]'
-         */
-        this.disabledDates = '';
-        /** Locale for date formatting
+         * Locale for date formatting
          * @default 'en-BE'
          */
         this.locale = 'en-BE';
-        /** Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
+        /**
+         * Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)
          * @default 'YYYY-MM-DD'
          * @note If the date format is in UTC mode, the date will be displayed in UTC time.
          * @note If the date format is not in UTC mode, the date will be displayed in the local time.
@@ -71,40 +43,483 @@ export class NvCalendar {
         this.selectionType = 'single';
         /**
          * Show action buttons
-         * @default false
          */
         this.showActions = false;
-        /**
-         * Custom actions to display in the footer
-         * JSON array of objects with the following properties:
-         * - label: string
-         * - onClick: function
-         * @default '[]'
-         */
-        this.shortcuts = '[]';
         /** Cache for parsed disabled dates */
         this.parsedDisabledDates = [];
-        /** Selected date */
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.currentDate = null;
         this.selectedDate = null;
-        /** Start date */
         this.startDate = null;
-        /** End date */
         this.endDate = null;
         /** List of formatted months for the selector */
         this.months = [];
+        /**
+         * Change the displayed month
+         * @param {number} offset - Month offset (-1 for previous, 1 for next)
+         */
+        this.changeMonth = (offset) => {
+            const newDate = new Date(this.currentDate);
+            // Ensure we only move by one month at a time
+            newDate.setUTCMonth(newDate.getUTCMonth() + offset);
+            // Add the appropriate animation class
+            const containers = this.el.querySelectorAll('.calendar-grid');
+            containers.forEach(container => {
+                // Remove existing animation classes
+                container.classList.remove('slide-left', 'slide-right');
+                // Add the new animation class
+                const animationClass = offset > 0 ? 'slide-left' : 'slide-right';
+                container.classList.add(animationClass);
+                // Remove the class after the animation
+                setTimeout(() => {
+                    container.classList.remove(animationClass);
+                }, 300); // 300ms corresponds to $slide-duration in the SCSS
+            });
+            this.currentDate = newDate;
+        };
+        /**
+         * Handles date selection based on the mode
+         * @param {Date} date - Selected date
+         */
+        this.handleDateSelection = (date) => {
+            if (this.isDateDisabled(date)) {
+                return;
+            }
+            if (this.selectionType === 'single') {
+                this.handleSingleSelection(date);
+            }
+            else {
+                this.handleRangeSelection(date);
+            }
+        };
+        /**
+         * Handles single date selection
+         * @param {Date} date - Selected date
+         */
+        this.handleSingleSelection = (date) => {
+            if (!date)
+                return;
+            const formattedDate = formatDate(date, { dateFormat: this.dateFormat });
+            this.selectedDate = date;
+            this.singleDateChange.emit(formattedDate);
+        };
+        /**
+         * Handles range date selection
+         * @param {Date} date - Selected date
+         */
+        this.handleRangeSelection = (date) => {
+            if (!this.startDate || (this.startDate && this.endDate)) {
+                this.startDate = date;
+                this.endDate = null;
+            }
+            else {
+                this.endDate = date;
+                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 }),
+                });
+            }
+        };
+        /**
+         * Checks if a date is disabled.
+         * Disabled if:
+         * - The date is before min (if defined)
+         * - The date is after max (if defined)
+         * - The date is in the disabledDates array
+         * @param {Date} date - Date to check
+         * @returns {boolean} true if the date is disabled
+         */
+        this.isDateDisabled = (date) => {
+            if (!date)
+                return true;
+            // Minimum bound check
+            if (this.min) {
+                const minDate = parseDate(this.min, this.dateFormat);
+                if (minDate && date < minDate) {
+                    return true;
+                }
+            }
+            // Maximum bound check
+            if (this.max) {
+                const maxDate = parseDate(this.max, this.dateFormat);
+                if (maxDate && date > maxDate) {
+                    return true;
+                }
+            }
+            // Check disabled dates
+            return this.parsedDisabledDates.some(disabledDate => isSameDate(date, disabledDate, { isUTCMode: this.isUTCMode }));
+        };
+        /**
+         * Checks if a date is in the selected range
+         * @param {Date} date - Date to check
+         * @returns {boolean} true if the date is in the range
+         */
+        this.isDateInRange = (date) => {
+            if (!date || !this.startDate || !this.endDate)
+                return false;
+            const checkDate = parseDate(date, this.dateFormat);
+            const startDate = parseDate(this.startDate, this.dateFormat);
+            const endDate = parseDate(this.endDate, this.dateFormat);
+            // Verify if startDate and endDate are valid
+            if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
+                return false;
+            }
+            // Verify that startDate is before endDate (additional security)
+            if (startDate > endDate)
+                return false;
+            // Comparison based only on the date (year, month, day)
+            return (isSameOrAfter(checkDate, startDate, { isUTCMode: this.isUTCMode }) &&
+                isSameOrBefore(checkDate, endDate, { isUTCMode: this.isUTCMode }));
+        };
+        /**
+         * Retrieves the localized day names
+         * @returns {string[]} Array of short day names
+         */
+        this.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',
+            });
+            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
+         * @param {number} offset - Month offset (0 by default)
+         * @param {number} totalCalendars - Number of calendars to display (1 by default)
+         * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
+         */
+        this.getDaysInMonth = (offset = 0, totalCalendars = 1) => {
+            const year = this.currentDate.getUTCFullYear();
+            const month = this.currentDate.getUTCMonth() + offset;
+            const firstDay = new Date(Date.UTC(year, month, 1));
+            const lastDay = new Date(Date.UTC(year, month + 1, 0));
+            const days = [];
+            // Correct calculation of offset for previous month days
+            // Use getUTCDay to stay consistent with UTC timezone
+            const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
+            // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
+            const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
+            // Add the days of the previous month for the first calendar
+            if (offset === 0 && offsetDays > 0) {
+                const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
+                for (let i = offsetDays; i > 0; i--) {
+                    const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
+                    days.push({
+                        dayOfMonth: date.getUTCDate(),
+                        date,
+                        isCurrentMonth: false,
+                        isDisabled: this.isDateDisabled(date),
+                    });
+                }
+            }
+            // Add the days of the current month
+            for (let i = 1; i <= lastDay.getUTCDate(); i++) {
+                const date = new Date(Date.UTC(year, month, i));
+                days.push({
+                    dayOfMonth: i,
+                    date,
+                    isCurrentMonth: true,
+                    isDisabled: this.isDateDisabled(date),
+                });
+            }
+            // Add the days of the next month only for the last calendar
+            if (offset === totalCalendars - 1) {
+                const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
+                for (let i = 1; i <= nextMonthDaysNeeded; i++) {
+                    const date = new Date(Date.UTC(year, month + 1, i));
+                    days.push({
+                        dayOfMonth: i,
+                        date,
+                        isCurrentMonth: false,
+                        isDisabled: this.isDateDisabled(date),
+                    });
+                }
+            }
+            return days;
+        };
+        /** Initializes the list of formatted months according to the locale */
+        this.initializeMonths = () => {
+            // 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)).toUpperCase(),
+            }));
+        };
+        /**
+         * Retrieves the localized abbreviation for "week"
+         * @returns {string} Localized abbreviation for "week"
+         */
+        this.getLocalizedWeekText = () => {
+            return WEEK_ABBREVIATIONS[this.locale] || 'W';
+        };
+        /**
+         * Handles month change in the selector
+         * @param {Event} event - Month change event
+         * @param {number} calendarOffset - Calendar offset (0 by default)
+         */
+        this.handleMonthChange = (event, calendarOffset = 0) => {
+            const select = event.target;
+            const selectedMonth = parseInt(select.value, 10);
+            const currentMonth = this.currentDate.getUTCMonth();
+            // Calculate the difference considering the calendar offset
+            const monthDiff = selectedMonth - ((currentMonth + calendarOffset) % 12);
+            const newDate = new Date(this.currentDate);
+            newDate.setUTCMonth(newDate.getUTCMonth() + monthDiff);
+            this.currentDate = newDate;
+        };
+        /**
+         * Handles year change in the numeric entry
+         * @param {Event} event - Year change event
+         * @param {number} calendarOffset - Calendar offset (0 by default)
+         */
+        this.handleYearChange = (event, calendarOffset = 0) => {
+            const input = event.target;
+            const year = parseInt(input.value, 10);
+            if (!isNaN(year) && year >= 1900 && year <= 2100) {
+                const newDate = new Date(this.currentDate);
+                newDate.setUTCFullYear(year);
+                newDate.setUTCMonth(newDate.getUTCMonth() + calendarOffset);
+                this.currentDate = newDate;
+            }
+        };
+        /**
+         * Handles week selection
+         * @param {Date[]} weekDays - Selected week days
+         * @param {number} calendarIndex - Calendar index from which the selection is made
+         */
+        this.handleWeekSelection = (weekDays, calendarIndex) => {
+            if (this.selectionType !== 'range')
+                return;
+            const allDays = this.getDaysInMonth(calendarIndex, this.numberOfCalendars);
+            const weekStart = weekDays[0];
+            const weekEnd = weekDays[weekDays.length - 1];
+            if (!weekStart || !weekEnd)
+                return;
+            const selectedWeekDays = allDays.filter(day => day.date && day.date >= weekStart && day.date <= weekEnd);
+            const validDays = selectedWeekDays.filter(day => !this.isDateDisabled(day.date));
+            if (validDays.length > 0) {
+                this.startDate = validDays[0].date;
+                this.endDate = validDays[validDays.length - 1].date;
+                this.rangeDateChange.emit({
+                    start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
+                    end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
+                });
+            }
+        };
+        /**
+         * Checks if a date corresponds to today
+         * @param {Date} date - Date to check
+         * @returns {boolean} true if the date is today
+         */
+        this.isToday = (date) => {
+            const today = new Date();
+            return (date.getDate() === today.getDate() &&
+                date.getMonth() === today.getMonth() &&
+                date.getFullYear() === today.getFullYear());
+        };
+        /**
+         * Parse and cache the disabled dates
+         * @description Parse and cache the disabled dates
+         */
+        this.parseDisabledDates = () => {
+            if (!this.disabledDates) {
+                this.parsedDisabledDates = [];
+                return;
+            }
+            try {
+                this.parsedDisabledDates = this.disabledDates
+                    .map(date => parseDate(date, this.dateFormat))
+                    .filter(date => date !== null);
+            }
+            catch (error) {
+                console.error('Error parsing disabled dates:', error);
+                this.parsedDisabledDates = [];
+            }
+        };
+        /**
+         * Applies a shortcut selection
+         * @param {Object} shortcut - Shortcut to apply
+         * @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
+         */
+        this.applyShortcut = (shortcut) => {
+            this.selectedDate = null;
+            this.startDate = null;
+            this.endDate = null;
+            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 });
+                if (!this.showActions) {
+                    const event = new CustomEvent('closePopover', {
+                        bubbles: true,
+                        composed: true,
+                    });
+                    this.el.dispatchEvent(event);
+                }
+                this.forceCalendarUpdate(newDate);
+            }
+            else {
+                const start = parseDate(shortcut.rangeValue.start, this.dateFormat);
+                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 }),
+                });
+                this.rangeValue = {
+                    start: formatDate(start, { dateFormat: this.dateFormat }),
+                    end: formatDate(end, { dateFormat: this.dateFormat }),
+                };
+                if (!this.showActions) {
+                    const event = new CustomEvent('closePopover', {
+                        bubbles: true,
+                        composed: true,
+                    });
+                    this.el.dispatchEvent(event);
+                }
+                this.forceCalendarUpdate(end);
+            }
+        };
+        /**
+         * Method to force the complete calendar update (and fix the persistent hover problem)
+         * @param {Date} newDate - Date to force
+         */
+        this.forceCalendarUpdate = newDate => {
+            this.currentDate = new Date(newDate);
+            this.currentDate = new Date(this.currentDate); // Force a re-render
+            // Reset visually the hover/touch effect
+            requestAnimationFrame(() => {
+                const days = document.querySelectorAll('.day');
+                days.forEach(el => {
+                    el.classList.remove('hover', 'active', 'touched');
+                    el.style.pointerEvents = 'none';
+                });
+                // Add specific touch handling (for mobile)
+                document.body.addEventListener('touchstart', this.clearTouchState, {
+                    passive: true,
+                });
+                // Reset the touch state after 50ms
+                setTimeout(() => {
+                    days.forEach(el => {
+                        el.style.pointerEvents = '';
+                    });
+                }, 50);
+            });
+        };
+        /**
+         * Function to reset the touch effect (Mobile fix)
+         */
+        this.clearTouchState = () => {
+            document.querySelectorAll('.day').forEach(el => {
+                el.classList.remove('touched');
+            });
+            // Remove the listener after the first interaction
+            document.body.removeEventListener('touchstart', this.clearTouchState);
+        };
+        /**
+         * 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;
-                this.singleValue = '';
+                this.singleValue = null;
                 this.singleDateChange.emit('');
             }
             else {
                 this.startDate = null;
                 this.endDate = null;
-                this.rangeValue = '';
+                this.rangeValue = null;
                 this.rangeDateChange.emit({ start: '', end: '' });
             }
         };
@@ -113,7 +528,9 @@ export class NvCalendar {
          */
         this.confirmSelection = () => {
             if (this.selectionType === 'single' && this.selectedDate) {
-                const dateStr = this.formatDate(this.selectedDate);
+                const dateStr = formatDate(this.selectedDate, {
+                    dateFormat: this.dateFormat,
+                });
                 this.singleDateChange.emit(dateStr);
                 this.singleValue = dateStr;
                 const event = new CustomEvent('closePopover', {
@@ -126,13 +543,13 @@ export class NvCalendar {
                 this.startDate &&
                 this.endDate) {
                 this.rangeDateChange.emit({
-                    start: this.formatDate(this.startDate),
-                    end: this.formatDate(this.endDate),
-                });
-                this.rangeValue = JSON.stringify({
-                    start: this.formatDate(this.startDate),
-                    end: this.formatDate(this.endDate),
+                    start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
+                    end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
                 });
+                this.rangeValue = {
+                    start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
+                    end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
+                };
                 const event = new CustomEvent('closePopover', {
                     bubbles: true,
                     composed: true,
@@ -140,353 +557,114 @@ export class NvCalendar {
                 this.el.dispatchEvent(event);
             }
         };
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.parseDisabledDates();
-        if (this.selectionType === 'single' && this.singleValue) {
-            this.selectedDate = this.parseDate(this.singleValue);
-            this.currentDate = this.selectedDate;
-        }
-        else if (this.selectionType === 'range' && this.rangeValue) {
-            try {
-                let parsed;
-                if (typeof this.rangeValue === 'string') {
-                    parsed = JSON.parse(this.rangeValue);
-                }
-                else {
-                    parsed = this.rangeValue;
-                }
-                if (parsed.start && parsed.end) {
-                    this.startDate = this.parseDate(parsed.start);
-                    this.endDate = this.parseDate(parsed.end);
-                    this.currentDate = this.startDate;
-                    if (this.startDate && this.endDate && this.startDate > this.endDate) {
-                        console.warn(`Warning: startDate (${this.formatDate(this.startDate)}) is after endDate (${this.formatDate(this.endDate)})`);
-                        // [this.startDate, this.endDate] = [this.endDate, this.startDate];
-                        throw new Error('startDate cannot be after endDate');
-                    }
-                }
-            }
-            catch (error) {
-                console.error('Invalid JSON for rangeValue:', error);
-            }
-        }
-        else {
-            this.currentDate = new Date();
-        }
-        this.initializeMonths();
-    }
-    // componentDidLoad() {
-    //   if (this.rangeValue) {
-    //     this.onRangeValueChange(this.rangeValue);
-    //   }
-    // }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region METHODS
-    /**
-     * Change the displayed month
-     * @param {number} offset - Month offset (-1 for previous, 1 for next)
-     */
-    changeMonth(offset) {
-        const newDate = new Date(this.currentDate);
-        // Ensure we only move by one month at a time
-        newDate.setUTCMonth(newDate.getUTCMonth() + offset);
-        // Add the appropriate animation class
-        const containers = this.el.querySelectorAll('.calendar-grid');
-        containers.forEach(container => {
-            // Remove existing animation classes
-            container.classList.remove('slide-left', 'slide-right');
-            // Add the new animation class
-            const animationClass = offset > 0 ? 'slide-left' : 'slide-right';
-            container.classList.add(animationClass);
-            // Remove the class after the animation
-            setTimeout(() => {
-                container.classList.remove(animationClass);
-            }, 300); // 300ms corresponds to $slide-duration in the SCSS
-        });
-        this.currentDate = newDate;
-    }
-    /**
-     * Handles date selection based on the mode
-     * @param {Date} date - Selected date
-     */
-    handleDateSelection(date) {
-        if (this.isDateDisabled(date)) {
-            return;
-        }
-        if (this.selectionType === 'single') {
-            this.handleSingleSelection(date);
-        }
-        else {
-            this.handleRangeSelection(date);
-        }
-    }
-    /**
-     * Handles single date selection
-     * @param {Date} date - Selected date
-     */
-    handleSingleSelection(date) {
-        if (!date)
-            return;
-        const formattedDate = this.formatDate(date);
-        this.selectedDate = date;
-        this.singleDateChange.emit(formattedDate);
-    }
-    /**
-     * Handles range date selection
-     * @param {Date} date - Selected date
-     */
-    handleRangeSelection(date) {
-        if (!this.startDate || (this.startDate && this.endDate)) {
-            this.startDate = date;
-            this.endDate = null;
-        }
-        else {
-            this.endDate = date;
-            if (this.startDate > this.endDate) {
-                [this.startDate, this.endDate] = [this.endDate, this.startDate];
-            }
-            this.rangeDateChange.emit({
-                start: this.formatDate(this.startDate),
-                end: this.formatDate(this.endDate),
-            });
-        }
-    }
-    /**
-     * Calculates the ISO week number
-     * @param {Date} date - Date to calculate
-     * @returns {number} Week number
-     */
-    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);
-    }
-    /**
-     * Checks if a date is disabled.
-     * Disabled if:
-     * - The date is before min (if defined)
-     * - The date is after max (if defined)
-     * - The date is in the disabledDates array
-     * @param {Date} date - Date to check
-     * @returns {boolean} true if the date is disabled
-     */
-    isDateDisabled(date) {
-        if (!date)
-            return true;
-        // Minimum bound check
-        if (this.min) {
-            const minDate = this.parseDate(this.min);
-            if (minDate && date < minDate) {
-                return true;
-            }
-        }
-        // Maximum bound check
-        if (this.max) {
-            const maxDate = this.parseDate(this.max);
-            if (maxDate && date > maxDate) {
-                return true;
-            }
-        }
-        // Check disabled dates
-        return this.parsedDisabledDates.some(disabledDate => this.isSameDate(date, disabledDate));
-    }
-    /**
-     * Checks if a date is in the selected range
-     * @param {Date} date - Date to check
-     * @returns {boolean} true if the date is in the range
-     */
-    isDateInRange(date) {
-        if (!date || !this.startDate || !this.endDate)
-            return false;
-        const checkDate = this.parseDate(date);
-        const startDate = this.parseDate(this.startDate);
-        const endDate = this.parseDate(this.endDate);
-        // Verify if startDate and endDate are valid
-        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
-            return false;
-        }
-        // Verify that startDate is before endDate (additional security)
-        if (startDate > endDate)
-            return false;
-        // Comparison based only on the date (year, month, day)
-        return (this.isSameOrAfter(checkDate, startDate) &&
-            this.isSameOrBefore(checkDate, endDate));
-    }
-    /**
-     * Retrieves the localized day names
-     * @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',
-        });
-        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
-     * @param {number} offset - Month offset (0 by default)
-     * @param {number} totalCalendars - Number of calendars to display (1 by default)
-     * @returns {Array<{ dayOfMonth: number | null, date: Date | null, isSelected: boolean, isDisabled: boolean }>} Array of formatted days
-     */
-    getDaysInMonth(offset = 0, totalCalendars = 1) {
-        const year = this.currentDate.getUTCFullYear();
-        const month = this.currentDate.getUTCMonth() + offset;
-        const firstDay = new Date(Date.UTC(year, month, 1));
-        const lastDay = new Date(Date.UTC(year, month + 1, 0));
-        const days = [];
-        // Correct calculation of offset for previous month days
-        // Use getUTCDay to stay consistent with UTC timezone
-        const dayOfWeekIndex = firstDay.getUTCDay(); // 0 = Sunday, 1 = Monday, etc.
-        // Adjust based on firstDayOfWeek (if week starts on Monday, offset is different)
-        const offsetDays = (dayOfWeekIndex - this.firstDayOfWeek + 7) % 7;
-        // Add the days of the previous month for the first calendar
-        if (offset === 0 && offsetDays > 0) {
-            const prevMonthLastDay = new Date(Date.UTC(year, month, 0)).getUTCDate();
-            for (let i = offsetDays; i > 0; i--) {
-                const date = new Date(Date.UTC(year, month - 1, prevMonthLastDay - i + 1));
-                days.push({
-                    dayOfMonth: date.getUTCDate(),
-                    date,
-                    isCurrentMonth: false,
-                    isDisabled: this.isDateDisabled(date),
+        //#endregion METHODS
+        /****************************************************************************/
+        //#region RENDER
+        /**
+         * Renders the header
+         * @param {number} offset - Month offset
+         * @param {number} index - Calendar index
+         * @returns {JSX.Element} Header
+         * @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" }))));
+        };
+        /**
+         * Renders the week numbers
+         * @param {Array<{date: Date}>} weeks - Weeks to render
+         * @param {number} index - Calendar index
+         * @returns {JSX.Element} Week numbers
+         * @description Renders the week numbers of the calendar
+         */
+        this.renderWeekNumbers = (
+        /** Weeks to render */
+        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,
                 });
-            }
-        }
-        // Add the days of the current month
-        for (let i = 1; i <= lastDay.getUTCDate(); i++) {
-            const date = new Date(Date.UTC(year, month, i));
-            days.push({
-                dayOfMonth: i,
-                date,
-                isCurrentMonth: true,
-                isDisabled: this.isDateDisabled(date),
-            });
-        }
-        // Add the days of the next month only for the last calendar
-        if (offset === totalCalendars - 1) {
-            const nextMonthDaysNeeded = 7 - (days.length % 7 || 7);
-            for (let i = 1; i <= nextMonthDaysNeeded; i++) {
-                const date = new Date(Date.UTC(year, month + 1, i));
-                days.push({
-                    dayOfMonth: i,
-                    date,
-                    isCurrentMonth: false,
-                    isDisabled: this.isDateDisabled(date),
+                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));
+            })));
+        };
+        /**
+         * Renders the calendar
+         * @param {number} index - Calendar index
+         * @param {number} offset - Month offset
+         * @returns {JSX.Element} Calendar
+         * @description Renders the calendar of the calendar
+         */
+        this.renderCalendar = (
+        /** Calendar index */
+        index, 
+        /** Month offset */
+        offset) => {
+            const days = this.getDaysInMonth(offset, this.numberOfCalendars);
+            const weeks = [];
+            for (let i = 0; i < days.length; i += 7) {
+                weeks.push(days.slice(i, i + 7));
             }
-        }
-        return days;
-    }
-    /** Initializes the list of formatted months according to the locale */
-    initializeMonths() {
-        // 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)).toUpperCase(),
-        }));
-    }
-    /**
-     * Retrieves the localized abbreviation for "week"
-     * @returns {string} Localized abbreviation for "week"
-     */
-    getLocalizedWeekText() {
-        return WEEK_ABBREVIATIONS[this.locale] || 'W';
-    }
-    /**
-     * Handles month change in the selector
-     * @param {Event} event - Month change event
-     * @param {number} calendarOffset - Calendar offset (0 by default)
-     */
-    handleMonthChange(event, calendarOffset = 0) {
-        const select = event.target;
-        const selectedMonth = parseInt(select.value, 10);
-        const currentMonth = this.currentDate.getUTCMonth();
-        // Calculate the difference considering the calendar offset
-        const monthDiff = selectedMonth - ((currentMonth + calendarOffset) % 12);
-        const newDate = new Date(this.currentDate);
-        newDate.setUTCMonth(newDate.getUTCMonth() + monthDiff);
-        this.currentDate = newDate;
-    }
-    /**
-     * Handles year change in the numeric entry
-     * @param {Event} event - Year change event
-     * @param {number} calendarOffset - Calendar offset (0 by default)
-     */
-    handleYearChange(event, calendarOffset = 0) {
-        const input = event.target;
-        const year = parseInt(input.value, 10);
-        if (!isNaN(year) && year >= 1900 && year <= 2100) {
-            const newDate = new Date(this.currentDate);
-            newDate.setUTCFullYear(year);
-            newDate.setUTCMonth(newDate.getUTCMonth() + calendarOffset);
-            this.currentDate = newDate;
-        }
-    }
-    /**
-     * Handles week selection
-     * @param {Date[]} weekDays - Selected week days
-     * @param {number} calendarIndex - Calendar index from which the selection is made
-     */
-    handleWeekSelection(weekDays, calendarIndex) {
-        if (this.selectionType !== 'range')
-            return;
-        const allDays = this.getDaysInMonth(calendarIndex, this.numberOfCalendars);
-        const weekStart = weekDays[0];
-        const weekEnd = weekDays[weekDays.length - 1];
-        if (!weekStart || !weekEnd)
-            return;
-        const selectedWeekDays = allDays.filter(day => day.date && day.date >= weekStart && day.date <= weekEnd);
-        const validDays = selectedWeekDays.filter(day => !this.isDateDisabled(day.date));
-        if (validDays.length > 0) {
-            this.startDate = validDays[0].date;
-            this.endDate = validDays[validDays.length - 1].date;
-            this.rangeDateChange.emit({
-                start: this.formatDate(this.startDate),
-                end: this.formatDate(this.endDate),
-            });
-        }
-    }
-    /**
-     * Checks if a date corresponds to today
-     * @param {Date} date - Date to check
-     * @returns {boolean} true if the date is today
-     */
-    isToday(date) {
-        const today = new Date();
-        return (date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear());
+            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" }))));
+        };
+        /**
+         * Renders the shortcuts
+         * @returns {JSX.Element} Shortcuts
+         * @description Renders the shortcuts of the calendar
+         */
+        this.renderShortcuts = () => {
+            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)))));
+        };
+        /**
+         * Renders the actions
+         * @returns {JSX.Element} Actions
+         * @description Renders the actions of the calendar
+         * @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"))));
+        };
     }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
     /**
      * Watches the changes of the number of calendars
-     * @watch numberOfCalendars
      * @param {number} newValue - New number of calendars
      */
     validateNumberOfCalendars(newValue) {
@@ -497,29 +675,25 @@ export class NvCalendar {
     }
     /**
      * Watches the changes of the selected date range
-     * @watch rangeValue
      * @param {Object} newValue - New rangeValue value
      * @param {string} newValue.start - Start date
      * @param {string} newValue.end - End date
      */
     onRangeValueChange(newValue) {
-        if (newValue) {
+        if (newValue && newValue.start && newValue.end) {
             try {
-                const parsed = JSON.parse(newValue);
-                if (parsed.start && parsed.end) {
-                    this.startDate = this.parseDate(parsed.start);
-                    this.endDate = this.parseDate(parsed.end);
-                    this.currentDate = this.parseDate(parsed.start);
-                }
+                const { startDate, endDate } = this.validateDateRange(newValue.start, newValue.end);
+                this.startDate = startDate;
+                this.endDate = endDate;
+                this.currentDate = startDate;
             }
             catch (error) {
-                console.error('Invalid JSON for rangeValue:', error);
+                console.error('Invalid rangeValue:', error);
             }
         }
     }
     /**
      * Watches the changes of the disabled dates
-     * @watch disabledDates
      * @description Watches the changes of the disabled dates
      */
     handleDisabledDatesChange() {
@@ -527,381 +701,61 @@ export class NvCalendar {
     }
     /**
      * 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);
+            const parsedDate = parseDate(newValue, this.dateFormat);
             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
-     * @returns {Date} Date in Date form without timezone offset
-     */
-    parseDate(dateInput) {
-        if (dateInput instanceof Date)
-            return dateInput;
-        // Attempt to automatically detect ISO 8601 format (generated by toISOString())
-        // The regex checks the standard ISO format: YYYY-MM-DDTHH:mm:ss.sssZ
-        if (typeof dateInput === 'string' &&
-            /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(dateInput)) {
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.parseDisabledDates();
+        if (this.selectionType === 'single' && this.singleValue) {
+            this.selectedDate = parseDate(this.singleValue, this.dateFormat);
+            this.currentDate = this.selectedDate;
+        }
+        else if (this.selectionType === 'range' && this.rangeValue) {
             try {
-                const parsedDate = new Date(dateInput);
-                if (!isNaN(parsedDate.getTime())) {
-                    return parsedDate;
+                if (this.rangeValue.start && this.rangeValue.end) {
+                    const { startDate, endDate, swapped } = this.validateDateRange(this.rangeValue.start, this.rangeValue.end);
+                    this.startDate = startDate;
+                    this.endDate = endDate;
+                    this.currentDate = startDate;
+                    if (swapped) {
+                        // If dates were swapped, update the rangeValue property
+                        this.rangeValue = {
+                            start: formatDate(startDate, { dateFormat: this.dateFormat }),
+                            end: formatDate(endDate, { dateFormat: this.dateFormat }),
+                        };
+                    }
                 }
             }
             catch (error) {
-                // If it fails, continue with other methods
-                console.error('Error parsing ISO date:', error);
-            }
-        }
-        // Handling Unix Seconds ("X") formats
-        if (this.dateFormat === 'X') {
-            const unixSeconds = Number(dateInput);
-            if (isNaN(unixSeconds))
-                return null;
-            return this.isUTCMode
-                ? dayjs.unix(unixSeconds).utc().toDate()
-                : dayjs.unix(unixSeconds).toDate();
-        }
-        // Handling Unix Milliseconds ("x") formats
-        if (this.dateFormat === 'x') {
-            const unixMilliseconds = Number(dateInput);
-            if (isNaN(unixMilliseconds))
-                return null;
-            return this.isUTCMode
-                ? dayjs(unixMilliseconds).utc().toDate()
-                : dayjs(unixMilliseconds).toDate();
-        }
-        // Handling C# Ticks format
-        if (this.dateFormat === 'Ticks') {
-            const ticks = Number(dateInput);
-            if (isNaN(ticks))
-                return null;
-            // Conversion of .NET ticks to milliseconds since Unix epoch
-            const unixMilliseconds = (ticks - 621355968000000000) / 10000;
-            return this.isUTCMode
-                ? dayjs(unixMilliseconds).utc().toDate()
-                : dayjs(unixMilliseconds).toDate();
-        }
-        // For all other formats, use customParseFormat in strict mode
-        let parsed;
-        if (this.isUTCMode) {
-            parsed = dayjs.utc(dateInput, this.dateFormat, true);
-        }
-        else {
-            parsed = dayjs(dateInput, this.dateFormat, true);
-        }
-        if (!parsed.isValid()) {
-            console.error(`Parsing error:`, {
-                dateInput,
-                dateFormat: this.dateFormat,
-            });
-            return null;
-        }
-        return parsed.toDate();
-    }
-    /**
-     * Checks if the date format is in UTC mode
-     * @returns {boolean} true if the date format is in UTC mode
-     */
-    get isUTCMode() {
-        return this.dateFormat.includes('Z');
-    }
-    /**
-     * Checks if the date format is ISO 8601
-     * @returns {boolean} true if the format is ISO 8601
-     */
-    get isISO8601Format() {
-        return this.dateFormat === 'YYYY-MM-DD[T]HH:mm:ss[Z]';
-    }
-    /**
-     * Formats a date to a string according to the format
-     * @param {Date} date - Date to format
-     * @returns {string} Formatted date
-     */
-    formatDate(date) {
-        if (!date)
-            return '';
-        // Special case for ISO 8601
-        if (this.isISO8601Format) {
-            // For the ISO 8601 format, use directly toISOString() which is standard
-            return date.toISOString();
-        }
-        // If the format is "Ticks", convert the time to C# ticks
-        if (this.dateFormat === 'Ticks') {
-            const ticks = date.getTime() * 10000 + 621355968000000000;
-            return ticks.toString();
-        }
-        // If the format is "X" (Unix Seconds)
-        if (this.dateFormat === 'X') {
-            return dayjs(date).unix().toString();
-        }
-        // If the format is "x" (Unix Milliseconds)
-        if (this.dateFormat === 'x') {
-            return date.getTime().toString();
-        }
-        // Otherwise, format according to the mode (UTC or local)
-        return this.isUTCMode
-            ? dayjs(date).utc().format(this.dateFormat)
-            : dayjs(date).format(this.dateFormat);
-    }
-    /**
-     * Parse and cache the disabled dates
-     * @description Parse and cache the disabled dates
-     */
-    parseDisabledDates() {
-        if (!this.disabledDates) {
-            this.parsedDisabledDates = [];
-            return;
-        }
-        try {
-            const disabledDatesArray = JSON.parse(this.disabledDates);
-            this.parsedDisabledDates = disabledDatesArray
-                .map(date => this.parseDate(date))
-                .filter(date => date !== null);
-        }
-        catch (error) {
-            console.error('Error parsing disabled dates:', error);
-            this.parsedDisabledDates = [];
-        }
-    }
-    /**
-     * Checks if two dates are identical
-     * @param {Date | null} date1 - First date
-     * @param {Date | null} date2 - Second date
-     * @returns {boolean} true if the dates are identical
-     */
-    isSameDate(date1, date2) {
-        if (!date1 || !date2)
-            return false;
-        if (this.isUTCMode) {
-            return (date1.getUTCFullYear() === date2.getUTCFullYear() &&
-                date1.getUTCMonth() === date2.getUTCMonth() &&
-                date1.getUTCDate() === date2.getUTCDate());
-        }
-        else {
-            return (date1.getFullYear() === date2.getFullYear() &&
-                date1.getMonth() === date2.getMonth() &&
-                date1.getDate() === date2.getDate());
-        }
-    }
-    /**
-     * Checks if a date is identical or after another date
-     * @param {Date} date - Date to check
-     * @param {Date} compareDate - Reference date
-     * @returns {boolean} true if `date` >= `compareDate`
-     */
-    isSameOrAfter(date, compareDate) {
-        if (this.isUTCMode) {
-            return (date.getUTCFullYear() > compareDate.getUTCFullYear() ||
-                (date.getUTCFullYear() === compareDate.getUTCFullYear() &&
-                    date.getUTCMonth() > compareDate.getUTCMonth()) ||
-                (date.getUTCFullYear() === compareDate.getUTCFullYear() &&
-                    date.getUTCMonth() === compareDate.getUTCMonth() &&
-                    date.getUTCDate() >= compareDate.getUTCDate()));
-        }
-        else {
-            return (date.getFullYear() > compareDate.getFullYear() ||
-                (date.getFullYear() === compareDate.getFullYear() &&
-                    date.getMonth() > compareDate.getMonth()) ||
-                (date.getFullYear() === compareDate.getFullYear() &&
-                    date.getMonth() === compareDate.getMonth() &&
-                    date.getDate() >= compareDate.getDate()));
-        }
-    }
-    /**
-     * Checks if a date is identical or before another date
-     * @param {Date} date - Date to check
-     * @param {Date} compareDate - Reference date
-     * @returns {boolean} true if `date` <= `compareDate`
-     */
-    isSameOrBefore(date, compareDate) {
-        if (this.isUTCMode) {
-            return (date.getUTCFullYear() < compareDate.getUTCFullYear() ||
-                (date.getUTCFullYear() === compareDate.getUTCFullYear() &&
-                    date.getUTCMonth() < compareDate.getUTCMonth()) ||
-                (date.getUTCFullYear() === compareDate.getUTCFullYear() &&
-                    date.getUTCMonth() === compareDate.getUTCMonth() &&
-                    date.getUTCDate() <= compareDate.getUTCDate()));
-        }
-        else {
-            return (date.getFullYear() < compareDate.getFullYear() ||
-                (date.getFullYear() === compareDate.getFullYear() &&
-                    date.getMonth() < compareDate.getMonth()) ||
-                (date.getFullYear() === compareDate.getFullYear() &&
-                    date.getMonth() === compareDate.getMonth() &&
-                    date.getDate() <= compareDate.getDate()));
-        }
-    }
-    /**
-     * Applies a shortcut selection
-     * @param {Object} shortcut - Shortcut to apply
-     * @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
-     */
-    applyShortcut(shortcut) {
-        this.selectedDate = null;
-        this.startDate = null;
-        this.endDate = null;
-        if (shortcut.singleValue) {
-            const newDate = this.parseDate(shortcut.singleValue);
-            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);
+                console.error('Invalid rangeValue:', error);
             }
-            this.forceCalendarUpdate(newDate);
         }
         else {
-            const start = this.parseDate(shortcut.rangeValue.start);
-            const end = this.parseDate(shortcut.rangeValue.end);
-            this.startDate = start;
-            this.endDate = end;
-            this.rangeDateChange.emit({
-                start: this.formatDate(start),
-                end: this.formatDate(end),
-            });
-            this.rangeValue = JSON.stringify({
-                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);
-        }
-    }
-    /**
-     * Method to force the complete calendar update (and fix the persistent hover problem)
-     * @param {Date} newDate - Date to force
-     */
-    forceCalendarUpdate(newDate) {
-        this.currentDate = new Date(newDate);
-        this.currentDate = new Date(this.currentDate); // Force a re-render
-        // Reset visually the hover/touch effect
-        requestAnimationFrame(() => {
-            const days = document.querySelectorAll('.day');
-            days.forEach(el => {
-                el.classList.remove('hover', 'active', 'touched');
-                el.style.pointerEvents = 'none';
-            });
-            // Add specific touch handling (for mobile)
-            document.body.addEventListener('touchstart', this.clearTouchState, {
-                passive: true,
-            });
-            // Reset the touch state after 50ms
-            setTimeout(() => {
-                days.forEach(el => {
-                    el.style.pointerEvents = '';
-                });
-            }, 50);
-        });
-    }
-    /**
-     * Function to reset the touch effect (Mobile fix)
-     */
-    clearTouchState() {
-        document.querySelectorAll('.day').forEach(el => {
-            el.classList.remove('touched');
-        });
-        // Remove the listener after the first interaction
-        document.body.removeEventListener('touchstart', this.clearTouchState);
-    }
-    /**
-     * Handles month change with an offset
-     * @param {number} direction - Direction (-1 for previous, 1 for next)
-     * @returns {Function} Change month handler
-     */
-    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
-     */
-    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
-     */
-    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
-     */
-    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
-     */
-    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
-     */
-    getWeekSelectionHandler(dates, index) {
-        return () => {
-            if (this.selectionType === 'range') {
-                this.handleWeekSelection(dates, index);
-            }
-        };
-    }
-    parsedShortcuts() {
-        try {
-            return this.shortcuts ? JSON.parse(this.shortcuts) : [];
-        }
-        catch (error) {
-            console.error('Invalid JSON for shortcuts:', error);
-            return [];
+            this.currentDate = new Date();
         }
+        this.initializeMonths();
     }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region METHODS
     /**
      * Checks if shortcuts are visible
      * @returns {boolean} true if shortcuts are visible
      */
     get hasShortcuts() {
-        return (this.shortcutsPlacement === 'bottom' && this.parsedShortcuts().length > 0);
+        return Boolean(this.shortcutsPlacement && this.shortcuts);
     }
     /**
      * Checks if actions are visible
@@ -910,103 +764,46 @@ export class NvCalendar {
     get hasActions() {
         return this.showActions;
     }
-    //#endregion METHODS
-    /****************************************************************************/
-    //#region RENDER
     /**
-     * Renders the header
-     * @param {number} offset - Month offset
-     * @param {number} index - Calendar index
-     * @returns {JSX.Element} Header
-     * @description Renders the header of the calendar
-     */
-    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" }))));
-    }
-    /**
-     * Renders the week numbers
-     * @param {Array<{date: Date}>} weeks - Weeks to render
-     * @param {number} index - Calendar index
-     * @returns {JSX.Element} Week numbers
-     * @description Renders the week numbers of the calendar
+     * Checks if the date format is in UTC mode
+     * @returns {boolean} true if the date format is in UTC mode
      */
-    renderWeekNumbers(
-    /** Weeks to render */
-    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}` }, this.getWeekNumber(((_a = week.find(d => d.date)) === null || _a === void 0 ? void 0 : _a.date) || new Date())));
-        })));
-    }
-    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' &&
-                this.isSameDate(date, this.selectedDate);
-            const isInRange = this.isDateInRange(date);
-            const isStart = this.isSameDate(date, this.startDate);
-            const isEnd = this.isSameDate(date, this.endDate);
-            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));
-        })));
+    get isUTCMode() {
+        return this.dateFormat.includes('Z');
     }
     /**
-     * Renders the calendar
-     * @param {number} index - Calendar index
-     * @param {number} offset - Month offset
-     * @returns {JSX.Element} Calendar
-     * @description Renders the calendar of the calendar
+     * Validates and processes a date range, warning if start is after end
+     * @param {string} startDateStr - Start date in ISO string format
+     * @param {string} endDateStr - End date in ISO string format
+     * @returns {object} Object containing the validated start and end dates
      */
-    renderCalendar(
-    /** Calendar index */
-    index, 
-    /** Month offset */
-    offset) {
-        const days = this.getDaysInMonth(offset, this.numberOfCalendars);
-        const weeks = [];
-        for (let i = 0; i < days.length; i += 7) {
-            weeks.push(days.slice(i, i + 7));
+    validateDateRange(startDateStr, endDateStr) {
+        try {
+            const startDate = parseDate(startDateStr, this.dateFormat);
+            const endDate = parseDate(endDateStr, this.dateFormat);
+            if (startDate && endDate && startDate > endDate) {
+                console.warn(`Warning: startDate (${formatDate(startDate, {
+                    dateFormat: this.dateFormat,
+                })}) is after endDate (${formatDate(endDate, {
+                    dateFormat: this.dateFormat,
+                })})`);
+                // Return dates in correct order, with swapped flag
+                return {
+                    startDate: endDate,
+                    endDate: startDate,
+                    swapped: true,
+                };
+            }
+            return {
+                startDate,
+                endDate,
+                swapped: false,
+            };
         }
-        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" }))));
-    }
-    /**
-     * Renders the shortcuts
-     * @returns {JSX.Element} Shortcuts
-     * @description Renders the shortcuts of the calendar
-     */
-    renderShortcuts() {
-        if (!this.parsedShortcuts().length) {
-            return null;
+        catch (error) {
+            console.error('Invalid date range:', error);
+            throw error; // Re-throw to let the caller handle it
         }
-        return (h("div", { class: `shortcuts-container shortcuts-placement-${this.shortcutsPlacement}` }, this.parsedShortcuts().map(shortcut => (h("nv-button", { emphasis: "lower", size: "xs", "aria-label": shortcut.label, onClick: this.getShortcutHandler(shortcut) }, shortcut.label)))));
-    }
-    /**
-     * Renders the actions
-     * @returns {JSX.Element} Actions
-     * @description Renders the actions of the calendar
-     * @slot actions - Child content of the component.
-     */
-    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"))));
     }
     /**
      * Renders the datepicker
@@ -1015,7 +812,8 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '89300da9f694aa926855452414e7e036f75f2de6' }, h("div", { key: '467ef9fc9d6523eec3712bf779d49fdf50c55617', class: "datepicker-root" }, h("div", { key: '990f2cb18dcad96cab0f8dfb62e6c57049475440', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'c0dedf1007cbc6a87bd591925c9994474c876afc', 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: 'ef81eaf952fbe569be7e1d3ee6cb59de0e137fe4', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: 'e1281217950b5cb02952a69b081d4fcce5863b4d' })));
+        return (h(Host, { key: 'd265f105851253b5aa2a40e055f8e51b5cb6b553' }, h("div", { key: 'c6e1ea923b17f7684243598109e4cffc767248d7', class: "datepicker-root" }, h("div", { key: '5fc4cfbf3f6d823c500408d0f81f5f15d3e654d7', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '035dac25c8b8090e1a3a0ac2493865907f665da9', 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: '91c21c945ab53acda631a8c50fb1437665fce030', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '3799c412c842e406715c235d3288022c2a734ed2' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {
@@ -1093,15 +891,14 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "single-value",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "rangeValue": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "{\n    /** ISO string for start date */\n    start: string;\n    /** ISO string for end date */\n    end: string;\n  }",
+                    "resolved": "{ start: string; end: string; }",
                     "references": {}
                 },
                 "required": false,
@@ -1111,10 +908,7 @@ export class NvCalendar {
                     "text": "Selected date range\nformat: { start: ISO string, end: ISO string }\nex: { start: \"2025-03-15\", end: \"2025-03-20\" }"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "range-value",
-                "reflect": true,
-                "defaultValue": "''"
+                "setter": false
             },
             "min": {
                 "type": "string",
@@ -1133,8 +927,7 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "min",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "max": {
                 "type": "string",
@@ -1153,31 +946,29 @@ export class NvCalendar {
                 "getter": false,
                 "setter": false,
                 "attribute": "max",
-                "reflect": true,
-                "defaultValue": "''"
+                "reflect": true
             },
             "disabledDates": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'[]'"
-                        }],
+                    "tags": [],
                     "text": "Disabled dates (ISO string array)"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "disabled-dates",
-                "reflect": true,
-                "defaultValue": "''"
+                "setter": false
             },
             "locale": {
                 "type": "string",
@@ -1288,10 +1079,7 @@ export class NvCalendar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
+                    "tags": [],
                     "text": "Show action buttons"
                 },
                 "getter": false,
@@ -1301,27 +1089,26 @@ export class NvCalendar {
                 "defaultValue": "false"
             },
             "shortcuts": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "{\n    /** Label of the shortcut */\n    label: string;\n    /** Selected date value for single selection mode */\n    singleValue?: string;\n    /** Date range values for range selection mode */\n    rangeValue?: HTMLNvCalendarElement['rangeValue'];\n  }[]",
+                    "resolved": "{ label: string; singleValue?: string; rangeValue?: { start: string; end: string; }; }[]",
+                    "references": {
+                        "HTMLNvCalendarElement": {
+                            "location": "global",
+                            "id": "global::HTMLNvCalendarElement"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'[]'"
-                        }],
-                    "text": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
+                    "tags": [],
+                    "text": "Custom actions to display in the footer"
                 },
                 "getter": false,
-                "setter": false,
-                "attribute": "shortcuts",
-                "reflect": true,
-                "defaultValue": "'[]'"
+                "setter": false
             },
             "showWeekNumbers": {
                 "type": "boolean",
@@ -1334,10 +1121,7 @@ export class NvCalendar {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "true"
-                        }],
+                    "tags": [],
                     "text": "Show week numbers"
                 },
                 "getter": false,
@@ -1383,13 +1167,12 @@ export class NvCalendar {
                     "text": "Emitted when a date range is selected"
                 },
                 "complexType": {
-                    "original": "DateRange",
-                    "resolved": "DateRange",
+                    "original": "HTMLNvCalendarElement['rangeValue']",
+                    "resolved": "{ start: string; end: string; }",
                     "references": {
-                        "DateRange": {
-                            "location": "import",
-                            "path": "../../interfaces/dateRange",
-                            "id": "src/interfaces/dateRange.tsx::DateRange"
+                        "HTMLNvCalendarElement": {
+                            "location": "global",
+                            "id": "global::HTMLNvCalendarElement"
                         }
                     }
                 }