@nova-design-system/nova-webcomponents 3.0.0-beta.37 → 3.0.0-beta.39

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

@@ -0,0 +1,1328 @@
+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 } from "../../utils/constants";
+// Extend dayjs with plugins
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+dayjs.extend(weekOfYear);
+/**
+ * @slot default - Child content of the component.
+ * @slot actions - Child content of the component.
+ */
+export class NvCalendar {
+    constructor() {
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * First day of the week (0 = Sunday, 1 = Monday, etc.)
+         * @default 0
+         */
+        this.firstDayOfWeek = 0;
+        /**
+         * Number of calendars to display
+         * @default 1
+         */
+        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
+         * @default 'en-BE'
+         */
+        this.locale = 'en-BE';
+        /** 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.
+         */
+        this.dateFormat = 'YYYY-MM-DD';
+        /**
+         * Footer placement
+         * @default 'bottom'
+         */
+        this.shortcutsPlacement = 'bottom';
+        /**
+         * Selection type (single date or date range)
+         * @default 'single'
+         */
+        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 */
+        this.selectedDate = null;
+        /** Start date */
+        this.startDate = null;
+        /** End date */
+        this.endDate = null;
+        /** List of formatted months for the selector */
+        this.months = [];
+        /**
+         * Resets the current selection
+         */
+        this.resetSelection = () => {
+            if (this.selectionType === 'single') {
+                this.selectedDate = null;
+                this.singleValue = '';
+                this.singleDateChange.emit('');
+            }
+            else {
+                this.startDate = null;
+                this.endDate = null;
+                this.rangeValue = '';
+                this.rangeDateChange.emit({ start: '', end: '' });
+            }
+        };
+        /**
+         * Confirms the current selection
+         */
+        this.confirmSelection = () => {
+            if (this.selectionType === 'single' && this.selectedDate) {
+                const dateStr = this.formatDate(this.selectedDate);
+                this.singleDateChange.emit(dateStr);
+                this.singleValue = dateStr;
+            }
+            else if (this.selectionType === 'range' &&
+                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),
+                });
+            }
+        };
+    }
+    //#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)
+     * @param {number} calendarOffset - Month offset for the calendar (0 by default)
+     */
+    changeMonth(offset, calendarOffset = 0) {
+        const newDate = new Date(this.currentDate);
+        newDate.setUTCMonth(newDate.getUTCMonth() + offset + calendarOffset);
+        // 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.selectedDate = date;
+        console.info('handleSingleSelection => selectedDate =', this.selectedDate);
+        console.info('📤 Emitting singleDateChange:', {
+            selectedDate: formattedDate,
+        });
+        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() {
+        const formatter = new Intl.DateTimeFormat(this.locale, {
+            weekday: 'short',
+        });
+        return [...Array(7)].map((_, i) => formatter.format(new Date(2023, 0, i + 1 + this.firstDayOfWeek)));
+    }
+    /**
+     * 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 = [];
+        // Calculate the offset to include the days of the previous month only for the first calendar
+        const offsetDays = offset === 0 ? (firstDay.getUTCDay() - this.firstDayOfWeek + 7) % 7 : 0;
+        // Add the days of the previous month for the first calendar
+        if (offset === 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 */
+    initializeMonths() {
+        const formatter = new Intl.DateTimeFormat(this.locale, { month: 'long' });
+        this.months = Array.from({ length: 12 }, (_, i) => ({
+            value: i,
+            label: formatter.format(new Date(2000, i, 1)),
+        }));
+    }
+    /**
+     * 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;
+        // Retrieves the days of the month adjusted according to the calendar index
+        const allDays = this.getDaysInMonth(calendarIndex, this.numberOfCalendars);
+        const weekStart = weekDays[0];
+        const weekEnd = weekDays[weekDays.length - 1];
+        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.startDate.toISOString(),
+                end: this.endDate.toISOString(),
+            });
+        }
+    }
+    /**
+     * 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());
+    }
+    /**
+     * Watches the changes of the number of calendars
+     * @watch numberOfCalendars
+     * @param {number} newValue - New number of calendars
+     */
+    validateNumberOfCalendars(newValue) {
+        if (newValue < 1 || newValue > 4) {
+            console.warn('numberOfCalendars must be between 1 and 4. Defaulting to 1.');
+            this.numberOfCalendars = 1;
+        }
+    }
+    /**
+     * 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) {
+            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);
+                }
+            }
+            catch (error) {
+                console.error('Invalid JSON for rangeValue:', error);
+            }
+        }
+    }
+    /**
+     * Watches the changes of the disabled dates
+     * @watch disabledDates
+     * @description Watches the changes of the disabled dates
+     */
+    handleDisabledDatesChange() {
+        this.parseDisabledDates();
+    }
+    /**
+     * 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;
+        // 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();
+    }
+    /**
+     * 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 '';
+        // 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);
+            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),
+            });
+            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)
+     * @param {number} offset - Month offset (0 by default)
+     * @returns {Function} Change month handler
+     */
+    getChangeMonthHandler(direction, offset) {
+        return () => this.changeMonth(direction, offset);
+    }
+    /**
+     * 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 [];
+        }
+    }
+    /**
+     * 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 shortcuts are visible
+     * @returns {boolean} true if shortcuts are visible
+     */
+    get hasShortcuts() {
+        return (this.shortcutsPlacement === 'bottom' && this.parsedShortcuts().length > 0);
+    }
+    /**
+     * Checks if actions are visible
+     * @returns {boolean} true if actions are visible
+     */
+    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: "low", name: "chevron-left", size: "sm", onClick: this.getChangeMonthHandler(-1, offset) })), 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: "low", name: "chevron-left", onClick: this.getChangeMonthHandler(-1, offset) }), h("nv-iconbutton", { emphasis: "low", name: "chevron-right", onClick: this.getChangeMonthHandler(1, offset) }))), this.numberOfCalendars > 1 && index === this.numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "low", name: "chevron-right", size: "sm", onClick: this.getChangeMonthHandler(1, offset), 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
+     */
+    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));
+        })));
+    }
+    /**
+     * Renders the calendar
+     * @param {number} index - Calendar index
+     * @param {number} offset - Month offset
+     * @returns {JSX.Element} Calendar
+     * @description Renders the calendar of the calendar
+     */
+    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 (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;
+        }
+        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: "sm", onClick: this.resetSelection }, "Cancel"), h("nv-button", { size: "sm", onClick: this.confirmSelection }, "OK"))));
+    }
+    /**
+     * Renders the datepicker
+     * @returns {JSX.Element} Datepicker
+     * @description Renders the datepicker of the calendar
+     * @slot default - Child content of the component.
+     */
+    render() {
+        return (h(Host, { key: 'fd0e3e0d88dd281cdfcc6557d822f137fe8da38e' }, h("div", { key: '04f15a9e7404b5c39dfdaa0f143b0c659a1a9cb3', class: "datepicker-root" }, h("div", { key: 'c42882624dfdb116faae2af1b3b6a1aa05192d18', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'd0b1d476b3362e9f9073f02586a77e21b4370f32', 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: 'f61fb6827fcaee0920998e75f6bfb767d3cb4fc6', class: "datepicker-controls" }, this.hasShortcuts && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '436d448bf9e5ec0aa153b3452ef9435d36957ce6' })));
+    }
+    static get is() { return "nv-calendar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nv-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nv-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "0"
+                        }],
+                    "text": "First day of the week (0 = Sunday, 1 = Monday, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "first-day-of-week",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "numberOfCalendars": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Number of calendars to display"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "number-of-calendars",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "singleValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected date (ISO string format)\nex: \"2025-03-15\""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "single-value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "rangeValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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": "''"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum date for selection (ISO string format, ex: \"2025-01-01\")"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum date for selection (ISO string format, ex: \"2025-12-31\")"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "disabledDates": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'[]'"
+                        }],
+                    "text": "Disabled dates (ISO string array)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled-dates",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'en-BE'"
+                        }],
+                    "text": "Locale for date formatting"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "'en-BE'"
+            },
+            "dateFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'YYYY-MM-DD'"
+                        }, {
+                            "name": "note",
+                            "text": "If the date format is in UTC mode, the date will be displayed in UTC time."
+                        }, {
+                            "name": "note",
+                            "text": "If the date format is not in UTC mode, the date will be displayed in the local time."
+                        }],
+                    "text": "Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "date-format",
+                "reflect": false,
+                "defaultValue": "'YYYY-MM-DD'"
+            },
+            "shortcutsPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom'"
+                        }],
+                    "text": "Footer placement"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "shortcuts-placement",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "selectionType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'range'",
+                    "resolved": "\"range\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'single'"
+                        }],
+                    "text": "Selection type (single date or date range)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "selection-type",
+                "reflect": false,
+                "defaultValue": "'single'"
+            },
+            "showActions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Show action buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-actions",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "shortcuts": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "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"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "shortcuts",
+                "reflect": false,
+                "defaultValue": "'[]'"
+            },
+            "showWeekNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Show week numbers"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-week-numbers",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentDate": {},
+            "selectedDate": {},
+            "startDate": {},
+            "endDate": {},
+            "months": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "singleDateChange",
+                "name": "singleDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a single date is selected"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "rangeDateChange",
+                "name": "rangeDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a date range is selected"
+                },
+                "complexType": {
+                    "original": "DateRange",
+                    "resolved": "DateRange",
+                    "references": {
+                        "DateRange": {
+                            "location": "import",
+                            "path": "../../interfaces/dateRange",
+                            "id": "src/interfaces/dateRange.tsx::DateRange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "numberOfCalendars",
+                "methodName": "validateNumberOfCalendars"
+            }, {
+                "propName": "rangeValue",
+                "methodName": "onRangeValueChange"
+            }, {
+                "propName": "disabledDates",
+                "methodName": "handleDisabledDatesChange"
+            }];
+    }
+}
+//# sourceMappingURL=nv-calendar.js.map