@xlabs-store/core 0.0.1

package/dist/collection/components/x-range-picker/range-picker-dropdown-content/range-picker-dropdown-content.js

@@ -0,0 +1,1497 @@
+import { h } from "@stencil/core";
+import { getIcon } from "../../../utils/config";
+import { translate } from "../../../locales/locale.service";
+const DEFAULT_WEEK_DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const DEFAULT_MONTHS_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const DEFAULT_MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const DEFAULT_QUARTERS = [
+    { label: 'Q1', value: 1, months: 'Jan - Mar' },
+    { label: 'Q2', value: 2, months: 'Apr - Jun' },
+    { label: 'Q3', value: 3, months: 'Jul - Sep' },
+    { label: 'Q4', value: 4, months: 'Oct - Dec' },
+];
+/**
+ * Range picker dropdown content component rendered in a portal layer.
+ */
+export class XRangePickerDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-range-picker-dropdown-content dropdownClasses={{ 'x-range-dropdown': true }}></x-range-picker-dropdown-content>
+     */
+    dropdownClasses = {};
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-range-picker-dropdown-content dropdownStyle={{ width: '480px' }}></x-range-picker-dropdown-content>
+     */
+    dropdownStyle = {};
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-range-picker-dropdown-content setDropdownRef={(el) => console.log(el)}></x-range-picker-dropdown-content>
+     */
+    setDropdownRef;
+    /**
+     * View date for left panel.
+     * @example
+     * <x-range-picker-dropdown-content leftViewDate={new Date()}></x-range-picker-dropdown-content>
+     */
+    leftViewDate = new Date();
+    /**
+     * View date for right panel.
+     * @example
+     * <x-range-picker-dropdown-content rightViewDate={new Date()}></x-range-picker-dropdown-content>
+     */
+    rightViewDate = new Date();
+    /**
+     * Panel mode for left panel.
+     * @example
+     * <x-range-picker-dropdown-content leftPanelMode="month"></x-range-picker-dropdown-content>
+     */
+    leftPanelMode = 'date';
+    /**
+     * Panel mode for right panel.
+     * @example
+     * <x-range-picker-dropdown-content rightPanelMode="year"></x-range-picker-dropdown-content>
+     */
+    rightPanelMode = 'date';
+    /**
+     * Picker mode.
+     * @example
+     * <x-range-picker-dropdown-content picker="date"></x-range-picker-dropdown-content>
+     */
+    picker = 'date';
+    /**
+     * Selected start date.
+     * @example
+     * <x-range-picker-dropdown-content rangeStart={new Date()}></x-range-picker-dropdown-content>
+     */
+    rangeStart = null;
+    /**
+     * Selected end date.
+     * @example
+     * <x-range-picker-dropdown-content rangeEnd={new Date()}></x-range-picker-dropdown-content>
+     */
+    rangeEnd = null;
+    /**
+     * Date being hovered during selection.
+     * @example
+     * <x-range-picker-dropdown-content hoveringDate={new Date()}></x-range-picker-dropdown-content>
+     */
+    hoveringDate = null;
+    /**
+     * Which panel is currently active.
+     * @example
+     * <x-range-picker-dropdown-content activePanel="right"></x-range-picker-dropdown-content>
+     */
+    activePanel = 'left';
+    /**
+     * Preset ranges.
+     * @example
+     * <x-range-picker-dropdown-content presets={[{ label: 'Today', value: [new Date(), new Date()] }]}></x-range-picker-dropdown-content>
+     */
+    presets = [];
+    /**
+     * Whether to show time picker.
+     * @example
+     * <x-range-picker-dropdown-content showTime></x-range-picker-dropdown-content>
+     */
+    showTime = false;
+    /**
+     * Function to determine if a date is disabled.
+     * @example
+     * <x-range-picker-dropdown-content disabledDateFn={(d) => d.getDay() === 0}></x-range-picker-dropdown-content>
+     */
+    disabledDateFn;
+    /**
+     * Minimum selectable date (ISO string).
+     * @example
+     * <x-range-picker-dropdown-content minDate="2026-01-01"></x-range-picker-dropdown-content>
+     */
+    minDate;
+    /**
+     * Maximum selectable date (ISO string).
+     * @example
+     * <x-range-picker-dropdown-content maxDate="2026-12-31"></x-range-picker-dropdown-content>
+     */
+    maxDate;
+    /**
+     * Week start day (0 = Sunday, 1 = Monday, etc.).
+     * @example
+     * <x-range-picker-dropdown-content weekStartDay={1}></x-range-picker-dropdown-content>
+     */
+    weekStartDay = 0;
+    // ==================== Events ====================
+    /**
+     * Emitted when a date cell is clicked.
+     * @example
+     * <x-range-picker-dropdown-content onXDateClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xDateClick;
+    /**
+     * Emitted when a date cell is hovered.
+     * @example
+     * <x-range-picker-dropdown-content onXDateHover={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xDateHover;
+    /**
+     * Emitted when header navigation action occurs.
+     * @example
+     * <x-range-picker-dropdown-content onXHeaderAction={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xHeaderAction;
+    /**
+     * Emitted when a preset is clicked.
+     * @example
+     * <x-range-picker-dropdown-content onXPresetClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xPresetClick;
+    /**
+     * Emitted when OK button is clicked.
+     * @example
+     * <x-range-picker-dropdown-content onXOkClick={() => {}}></x-range-picker-dropdown-content>
+     */
+    xOkClick;
+    /**
+     * Emitted when month cell is clicked.
+     * @example
+     * <x-range-picker-dropdown-content onXMonthClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xMonthClick;
+    /**
+     * Emitted when year cell is clicked.
+     * @example
+     * <x-range-picker-dropdown-content onXYearClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xYearClick;
+    /**
+     * Emitted when quarter cell is clicked.
+     * @example
+     * <x-range-picker-dropdown-content onXQuarterClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xQuarterClick;
+    /**
+     * Emitted when panel mode changes.
+     * @example
+     * <x-range-picker-dropdown-content onXPanelModeChange={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xPanelModeChange;
+    /**
+     * Emitted when time selection changes.
+     * @example
+     * <x-range-picker-dropdown-content onXTimeChange={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>
+     */
+    xTimeChange;
+    // ==================== Refs ====================
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ==================== Lifecycle ====================
+    componentDidLoad() {
+        this.setDropdownRef?.(this.dropdownEl);
+    }
+    disconnectedCallback() {
+        this.setDropdownRef?.(null);
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Capture dropdown ref and forward to callback.
+     * @param el - Dropdown element.
+     * @returns void
+     */
+    setRef = (el) => {
+        this.dropdownEl = el;
+        this.setDropdownRef?.(el);
+    };
+    /**
+     * Convert date to yyyy-mm-dd.
+     * @param date - Date to format.
+     * @returns string
+     */
+    toDateString(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    /**
+     * Parse date from ISO string.
+     * @param dateStr - Date string.
+     * @returns Date | null
+     */
+    parseDate(dateStr) {
+        if (!dateStr)
+            return null;
+        const date = new Date(dateStr);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    /**
+     * Get week day labels based on weekStartDay.
+     * @returns string[]
+     */
+    getWeekDays() {
+        const localeWeekDays = translate('DatePicker.lang.weekDays', undefined, DEFAULT_WEEK_DAYS);
+        const days = [...localeWeekDays];
+        for (let i = 0; i < this.weekStartDay; i++) {
+            const first = days.shift();
+            if (first !== undefined) {
+                days.push(first);
+            }
+        }
+        return days;
+    }
+    /**
+     * Format number as two digits.
+     * @param n - Number to format.
+     * @returns string
+     */
+    formatNumber(n) {
+        return String(n).padStart(2, '0');
+    }
+    /**
+     * Get all hour values.
+     * @returns number[]
+     */
+    getHours() {
+        const hours = [];
+        for (let i = 0; i < 24; i++) {
+            hours.push(i);
+        }
+        return hours;
+    }
+    /**
+     * Get all minute values.
+     * @returns number[]
+     */
+    getMinutes() {
+        const minutes = [];
+        for (let i = 0; i < 60; i++) {
+            minutes.push(i);
+        }
+        return minutes;
+    }
+    /**
+     * Get all second values.
+     * @returns number[]
+     */
+    getSeconds() {
+        const seconds = [];
+        for (let i = 0; i < 60; i++) {
+            seconds.push(i);
+        }
+        return seconds;
+    }
+    /**
+     * Determine whether a date is disabled.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isDateDisabled(date) {
+        const dateStr = this.toDateString(date);
+        // Check minDate
+        if (this.minDate) {
+            const min = this.parseDate(this.minDate);
+            if (min && date < min)
+                return true;
+        }
+        // Check maxDate
+        if (this.maxDate) {
+            const max = this.parseDate(this.maxDate);
+            if (max && date > max)
+                return true;
+        }
+        // Check custom disabledDate function
+        if (this.disabledDateFn) {
+            return this.disabledDateFn(dateStr);
+        }
+        return false;
+    }
+    /**
+     * Check if date is today.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isToday(date) {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    }
+    /**
+     * Check if date equals range start.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isRangeStart(date) {
+        if (!this.rangeStart)
+            return false;
+        return date.toDateString() === this.rangeStart.toDateString();
+    }
+    /**
+     * Check if date equals range end.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isRangeEnd(date) {
+        if (!this.rangeEnd)
+            return false;
+        return date.toDateString() === this.rangeEnd.toDateString();
+    }
+    /**
+     * Check if date is between start and end.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isInRange(date) {
+        const start = this.rangeStart;
+        const end = this.rangeEnd || this.hoveringDate;
+        if (!start || !end)
+            return false;
+        const dateTime = date.getTime();
+        const startTime = start.getTime();
+        const endTime = end.getTime();
+        if (startTime <= endTime) {
+            return dateTime > startTime && dateTime < endTime;
+        }
+        else {
+            return dateTime > endTime && dateTime < startTime;
+        }
+    }
+    /**
+     * Check if date is within hover range.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isInHoverRange(date) {
+        if (!this.rangeStart || !this.hoveringDate || this.rangeEnd)
+            return false;
+        const dateTime = date.getTime();
+        const startTime = this.rangeStart.getTime();
+        const hoverTime = this.hoveringDate.getTime();
+        if (startTime <= hoverTime) {
+            return dateTime > startTime && dateTime <= hoverTime;
+        }
+        else {
+            return dateTime >= hoverTime && dateTime < startTime;
+        }
+    }
+    /**
+     * Build calendar grid for a view month.
+     * @param viewDate - View month date.
+     * @returns RangeCalendarDayData[][]
+     */
+    getCalendarDays(viewDate) {
+        const year = viewDate.getFullYear();
+        const month = viewDate.getMonth();
+        const firstDayOfMonth = new Date(year, month, 1);
+        const lastDayOfMonth = new Date(year, month + 1, 0);
+        let startDay = firstDayOfMonth.getDay() - this.weekStartDay;
+        if (startDay < 0)
+            startDay += 7;
+        const daysInMonth = lastDayOfMonth.getDate();
+        const weeks = [];
+        let days = [];
+        // Previous month days
+        const prevMonth = new Date(year, month, 0);
+        const prevMonthDays = prevMonth.getDate();
+        for (let i = startDay - 1; i >= 0; i--) {
+            const date = new Date(year, month - 1, prevMonthDays - i);
+            days.push({
+                date,
+                isCurrentMonth: false,
+                isToday: this.isToday(date),
+                isDisabled: this.isDateDisabled(date),
+                isRangeStart: this.isRangeStart(date),
+                isRangeEnd: this.isRangeEnd(date),
+                isInRange: this.isInRange(date),
+            });
+        }
+        // Current month days
+        for (let d = 1; d <= daysInMonth; d++) {
+            const date = new Date(year, month, d);
+            days.push({
+                date,
+                isCurrentMonth: true,
+                isToday: this.isToday(date),
+                isDisabled: this.isDateDisabled(date),
+                isRangeStart: this.isRangeStart(date),
+                isRangeEnd: this.isRangeEnd(date),
+                isInRange: this.isInRange(date),
+            });
+            if (days.length === 7) {
+                weeks.push(days);
+                days = [];
+            }
+        }
+        // Next month days
+        if (days.length > 0) {
+            let nextDay = 1;
+            while (days.length < 7) {
+                const date = new Date(year, month + 1, nextDay++);
+                days.push({
+                    date,
+                    isCurrentMonth: false,
+                    isToday: this.isToday(date),
+                    isDisabled: this.isDateDisabled(date),
+                    isRangeStart: this.isRangeStart(date),
+                    isRangeEnd: this.isRangeEnd(date),
+                    isInRange: this.isInRange(date),
+                });
+            }
+            weeks.push(days);
+        }
+        // Ensure 6 weeks for consistent height
+        while (weeks.length < 6) {
+            days = [];
+            const lastDate = weeks[weeks.length - 1][6].date;
+            for (let i = 1; i <= 7; i++) {
+                const date = new Date(lastDate);
+                date.setDate(lastDate.getDate() + i);
+                days.push({
+                    date,
+                    isCurrentMonth: false,
+                    isToday: this.isToday(date),
+                    isDisabled: this.isDateDisabled(date),
+                    isRangeStart: this.isRangeStart(date),
+                    isRangeEnd: this.isRangeEnd(date),
+                    isInRange: this.isInRange(date),
+                });
+            }
+            weeks.push(days);
+        }
+        return weeks;
+    }
+    // ==================== Event Handlers ====================
+    /**
+     * Handle date cell click and emit selection.
+     * @param e - Mouse event.
+     * @param day - Calendar day data.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleDateClick = (e, day, side) => {
+        console.log('handleDateClick', day, e);
+        e.stopPropagation();
+        if (day.isDisabled)
+            return;
+        this.xDateClick.emit({
+            date: day.date,
+            side,
+        });
+    };
+    /**
+     * Handle date cell hover and emit event.
+     * @param e - Mouse event.
+     * @param day - Calendar day data.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleDateHover = (e, day, side) => {
+        // console.log('handleDateHover', day, e);
+        e.stopPropagation();
+        if (day.isDisabled)
+            return;
+        this.xDateHover.emit({
+            date: day.date,
+            side,
+        });
+    };
+    /**
+     * Handle header navigation actions.
+     * @param e - Mouse event.
+     * @param action - Header action type.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleHeaderAction = (e, action, side) => {
+        e.stopPropagation();
+        this.xHeaderAction.emit({ action, side });
+    };
+    /**
+     * Handle preset range click.
+     * @param e - Mouse event.
+     * @param preset - Preset range.
+     * @returns void
+     */
+    handlePresetClick = (e, preset) => {
+        e.stopPropagation();
+        this.xPresetClick.emit({ preset });
+    };
+    /**
+     * Handle OK button click.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleOkClick = (e) => {
+        e.stopPropagation();
+        this.xOkClick.emit();
+    };
+    /**
+     * Handle month cell click.
+     * @param e - Mouse event.
+     * @param month - Month index.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleMonthCellClick = (e, month, side) => {
+        e.stopPropagation();
+        this.xMonthClick.emit({
+            month,
+            year: side === 'left' ? this.leftViewDate.getFullYear() : this.rightViewDate.getFullYear(),
+            side,
+        });
+    };
+    /**
+     * Handle year cell click.
+     * @param e - Mouse event.
+     * @param year - Year value.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleYearCellClick = (e, year, side) => {
+        e.stopPropagation();
+        this.xYearClick.emit({ year, side });
+    };
+    /**
+     * Handle quarter cell click.
+     * @param e - Mouse event.
+     * @param quarter - Quarter index.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleQuarterCellClick = (e, quarter, side) => {
+        e.stopPropagation();
+        this.xQuarterClick.emit({
+            quarter,
+            year: side === 'left' ? this.leftViewDate.getFullYear() : this.rightViewDate.getFullYear(),
+            side,
+        });
+    };
+    /**
+     * Handle panel mode change.
+     * @param e - Mouse event.
+     * @param mode - New panel mode.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handlePanelModeChange = (e, mode, side) => {
+        e.stopPropagation();
+        this.xPanelModeChange.emit({ mode, side });
+    };
+    /**
+     * Handle time cell click.
+     * @param e - Mouse event.
+     * @param type - Time unit type.
+     * @param value - Selected value.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleTimeClick = (e, type, value, side) => {
+        e.stopPropagation();
+        // Calculate new date
+        const currentViewDate = side === 'left' ? this.leftViewDate : this.rightViewDate;
+        const newDate = new Date(currentViewDate);
+        if (type === 'hour')
+            newDate.setHours(value);
+        if (type === 'minute')
+            newDate.setMinutes(value);
+        if (type === 'second')
+            newDate.setSeconds(value);
+        this.xTimeChange.emit({
+            date: newDate,
+            side,
+            type,
+            value
+        });
+    };
+    // ==================== Render Methods ====================
+    /**
+     * Render preset ranges list.
+     * @returns JSX.Element | null
+     */
+    renderPresets() {
+        if (!this.presets || this.presets.length === 0)
+            return null;
+        return (h("div", { class: "x-range-picker-presets" }, h("ul", { class: "x-range-picker-presets-list" }, this.presets.map(preset => (h("li", { class: "x-range-picker-preset-item", onClick: (e) => this.handlePresetClick(e, preset) }, preset.label))))));
+    }
+    /**
+     * Render header for a panel.
+     * @param side - Panel side.
+     * @param viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderHeader(side, viewDate) {
+        const mode = side === 'left' ? this.leftPanelMode : this.rightPanelMode;
+        const year = viewDate.getFullYear();
+        const month = viewDate.getMonth();
+        const startYear = Math.floor(year / 10) * 10 - 1;
+        const showMonthNav = mode === 'date' || mode === 'week';
+        const showDecadeNav = mode === 'year';
+        return (h("div", { class: "x-range-picker-header" }, h("button", { type: "button", class: "x-range-picker-header-btn super-prev-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, showDecadeNav ? 'prevDecade' : 'prevYear', side) }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowLeft') })), showMonthNav && (h("button", { type: "button", class: "x-range-picker-header-btn prev-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, 'prevMonth', side) }, h("x-icon", { slot: "icon", name: getIcon('arrowLeft') }))), h("div", { class: "x-range-picker-header-view" }, mode === 'year' ? (h("span", { class: "x-range-picker-header-year-range" }, startYear + 1, "-", startYear + 10)) : ([
+            mode === 'date' && (h("button", { type: "button", class: "x-range-picker-header-month-btn", onClick: (e) => this.handlePanelModeChange(e, 'month', side) }, translate('DatePicker.lang.monthsFull', undefined, DEFAULT_MONTHS_FULL)[month])),
+            (mode === 'date' || mode === 'month' || mode === 'quarter') && (h("button", { type: "button", class: "x-range-picker-header-year-btn", onClick: (e) => this.handlePanelModeChange(e, 'year', side) }, year))
+        ])), showMonthNav && (h("button", { type: "button", class: "x-range-picker-header-btn next-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, 'nextMonth', side) }, h("x-icon", { slot: "icon", name: getIcon('arrowRight') }))), h("button", { type: "button", class: "x-range-picker-header-btn super-next-btn", tabIndex: -1, onClick: (e) => this.handleHeaderAction(e, showDecadeNav ? 'nextDecade' : 'nextYear', side) }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowRight') }))));
+    }
+    /**
+     * Render month selection body.
+     * @param _side - Panel side.
+     * @param viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderMonthBody(_side, viewDate) {
+        const year = viewDate.getFullYear();
+        const currentMonth = new Date().getMonth();
+        const currentYear = new Date().getFullYear();
+        const month_short = translate('DatePicker.lang.monthsShort', undefined, DEFAULT_MONTHS_SHORT);
+        // We need logic to determine if a month is in range etc.
+        // For now simple rendering.
+        return (h("div", { class: "x-range-picker-body" }, h("table", { class: "x-range-picker-content x-range-picker-month-panel" }, h("tbody", null, [0, 1, 2, 3].map(row => (h("tr", null, [0, 1, 2].map(col => {
+            const month = row * 3 + col;
+            const isCurrentMonth = month === currentMonth && year === currentYear;
+            return (h("td", { class: {
+                    'x-range-picker-cell': true,
+                    'x-range-picker-cell-in-view': true,
+                    'x-range-picker-cell-today': isCurrentMonth,
+                }, onClick: (e) => this.handleMonthCellClick(e, month, _side) }, h("div", { class: "x-range-picker-cell-inner" }, month_short[month] || DEFAULT_MONTHS_SHORT[month])));
+        }))))))));
+    }
+    /**
+     * Render year selection body.
+     * @param _side - Panel side.
+     * @param viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderYearBody(_side, viewDate) {
+        const startYear = Math.floor(viewDate.getFullYear() / 10) * 10 - 1;
+        const currentYear = new Date().getFullYear();
+        return (h("div", { class: "x-range-picker-body" }, h("table", { class: "x-range-picker-content x-range-picker-year-panel" }, h("tbody", null, [0, 1, 2, 3].map(row => (h("tr", null, [0, 1, 2].map(col => {
+            const yearIndex = row * 3 + col;
+            const year = startYear + yearIndex;
+            const isCurrentYear = year === currentYear;
+            const isInView = yearIndex > 0 && yearIndex < 11;
+            return (h("td", { class: {
+                    'x-range-picker-cell': true,
+                    'x-range-picker-cell-in-view': isInView,
+                    'x-range-picker-cell-today': isCurrentYear,
+                }, onClick: (e) => this.handleYearCellClick(e, year, _side) }, h("div", { class: "x-range-picker-cell-inner" }, year)));
+        }))))))));
+    }
+    /**
+     * Render quarter selection body.
+     * @param _side - Panel side.
+     * @param _viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderQuarterBody(_side, _viewDate) {
+        const quarters = translate('DatePicker.lang.quarters', undefined, DEFAULT_QUARTERS);
+        // Quarter Logic
+        return (h("div", { class: "x-range-picker-body" }, h("table", { class: "x-range-picker-content x-range-picker-quarter-panel" }, h("tbody", null, h("tr", null, [1, 2, 3, 4].map(q => (h("td", { class: "x-range-picker-cell x-range-picker-cell-in-view", onClick: (e) => this.handleQuarterCellClick(e, q, _side) }, h("div", { class: "x-range-picker-cell-inner" }, quarters[q - 1]?.label ?? DEFAULT_QUARTERS[q - 1] ?? `Q${q}`)))))))));
+    }
+    /**
+     * Render a time column for hours/minutes/seconds.
+     * @param title - Column title.
+     * @param values - Values to render.
+     * @param selected - Selected value.
+     * @param type - Time unit type.
+     * @param side - Panel side.
+     * @returns JSX.Element
+     */
+    renderTimeColumn(side, items, selectedValue, type) {
+        return (h("div", { class: "x-range-picker-time-column" }, h("ul", { class: "x-range-picker-time-list" }, items.map(item => (h("li", { class: {
+                'x-range-picker-time-cell': true,
+                'x-range-picker-time-cell-selected': item === selectedValue,
+            }, onClick: (e) => this.handleTimeClick(e, type, item, side) }, h("div", { class: "x-range-picker-time-cell-inner" }, this.formatNumber(item))))))));
+    }
+    /**
+     * Render time selection body.
+     * @param side - Panel side.
+     * @param viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderTimeBody(side, viewDate) {
+        const hour = viewDate.getHours();
+        const minute = viewDate.getMinutes();
+        const second = viewDate.getSeconds();
+        return (h("div", { class: "x-range-picker-body x-range-picker-time-panel" }, h("div", { class: "x-range-picker-time-content" }, this.renderTimeColumn(side, this.getHours(), hour, 'hour'), this.renderTimeColumn(side, this.getMinutes(), minute, 'minute'), this.renderTimeColumn(side, this.getSeconds(), second, 'second'))));
+    }
+    /**
+     * Render calendar body for date panel.
+     * @param side - Panel side.
+     * @param viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderCalendarBody(side, viewDate) {
+        const weekDays = this.getWeekDays();
+        const weeks = this.getCalendarDays(viewDate);
+        return (h("div", { class: "x-range-picker-body" }, h("table", { class: "x-range-picker-content" }, h("thead", null, h("tr", null, weekDays.map(day => (h("th", null, day))))), h("tbody", null, weeks.map(week => (h("tr", null, week.map(day => {
+            const isHovered = this.isInHoverRange(day.date);
+            return (h("td", { class: {
+                    'x-range-picker-cell': true,
+                    'x-range-picker-cell-in-view': day.isCurrentMonth,
+                    'x-range-picker-cell-today': day.isToday,
+                    'x-range-picker-cell-selected': day.isRangeStart || day.isRangeEnd,
+                    'x-range-picker-cell-in-range': day.isInRange,
+                    'x-range-picker-cell-range-start': day.isRangeStart,
+                    'x-range-picker-cell-range-end': day.isRangeEnd,
+                    'x-range-picker-cell-disabled': day.isDisabled,
+                    'x-range-picker-cell-hover': isHovered,
+                }, onClick: (e) => this.handleDateClick(e, day, side), onMouseEnter: (e) => this.handleDateHover(e, day, side) }, h("div", { class: "x-range-picker-cell-inner" }, day.date.getDate())));
+        }))))))));
+    }
+    /**
+     * Render a panel based on mode.
+     * @param side - Panel side.
+     * @param viewDate - Current view date.
+     * @returns JSX.Element
+     */
+    renderPanel(side, viewDate) {
+        const mode = side === 'left' ? this.leftPanelMode : this.rightPanelMode;
+        let body;
+        switch (mode) {
+            case 'month':
+                body = this.renderMonthBody(side, viewDate);
+                break;
+            case 'year':
+                body = this.renderYearBody(side, viewDate);
+                break;
+            case 'quarter':
+                body = this.renderQuarterBody(side, viewDate);
+                break;
+            case 'time':
+                body = this.renderTimeBody(side, viewDate);
+                break;
+            case 'week':
+            case 'date':
+            default:
+                body = this.renderCalendarBody(side, viewDate);
+                break;
+        }
+        return (h("div", { class: {
+                'x-range-picker-panel': true,
+                'x-range-picker-panel-left': side === 'left',
+                'x-range-picker-panel-right': side === 'right',
+            } }, this.renderHeader(side, viewDate), body));
+    }
+    /**
+     * Render footer with presets and OK button.
+     * @returns JSX.Element | null
+     */
+    renderFooter() {
+        if (!this.showTime)
+            return null;
+        const isDisabled = !this.rangeStart || !this.rangeEnd;
+        return (h("div", { class: "x-range-picker-footer" }, h("div", { class: "x-range-picker-footer-ranges" }, h("button", { type: "button", class: {
+                'x-range-picker-ok-btn': true,
+                'x-range-picker-ok-btn-disabled': isDisabled,
+            }, disabled: isDisabled, onClick: (e) => this.handleOkClick(e) }, translate('DatePicker.lang.ok', {}, 'OK')))));
+    }
+    /**
+     * Render range picker dropdown content.
+     * @returns JSX.Element
+     * @example
+     * <x-range-picker-dropdown-content></x-range-picker-dropdown-content>
+     */
+    render() {
+        const dropdownClasses = {
+            'x-range-picker-dropdown': true,
+            ...this.dropdownClasses,
+        };
+        return (h("div", { key: '74f75fdac43cec3caed69138bb48e7a0e1e2ec7b', class: dropdownClasses, style: this.dropdownStyle, ref: this.setRef }, h("div", { key: 'b19c57889d00a313ca4ea8f0deb4a4dc5692c438', class: "x-range-picker-panel-container" }, this.renderPresets(), h("div", { key: '39a5880d6e990224ed9267c593384fa694864385', class: "x-range-picker-panels-wrapper" }, h("div", { key: '6099062ff9fbf819b778357e753efe42bc90858e', class: "x-range-picker-panels" }, this.renderPanel('left', this.leftViewDate), this.renderPanel('right', this.rightViewDate)), this.renderFooter()))));
+    }
+    static get is() { return "x-range-picker-dropdown-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["range-picker-dropdown-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["range-picker-dropdown-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dropdownClasses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerDropdownClassMap",
+                    "resolved": "RangePickerDropdownClassMap",
+                    "references": {
+                        "RangePickerDropdownClassMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangePickerDropdownClassMap",
+                            "referenceLocation": "RangePickerDropdownClassMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content dropdownClasses={{ 'x-range-dropdown': true }}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Class map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "dropdownStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerDropdownStyleMap",
+                    "resolved": "RangePickerDropdownStyleMap",
+                    "references": {
+                        "RangePickerDropdownStyleMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangePickerDropdownStyleMap",
+                            "referenceLocation": "RangePickerDropdownStyleMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content dropdownStyle={{ width: '480px' }}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Inline style map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "setDropdownRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerDropdownRefCallback",
+                    "resolved": "(el: HTMLDivElement) => void",
+                    "references": {
+                        "RangePickerDropdownRefCallback": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangePickerDropdownRefCallback",
+                            "referenceLocation": "RangePickerDropdownRefCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content setDropdownRef={(el) => console.log(el)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Callback to pass dropdown element ref."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "leftViewDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content leftViewDate={new Date()}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "View date for left panel."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new Date()"
+            },
+            "rightViewDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content rightViewDate={new Date()}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "View date for right panel."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new Date()"
+            },
+            "leftPanelMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'date' | 'month' | 'year' | 'week' | 'quarter' | 'time'",
+                    "resolved": "\"date\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content leftPanelMode=\"month\"></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Panel mode for left panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-panel-mode",
+                "defaultValue": "'date'"
+            },
+            "rightPanelMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'date' | 'month' | 'year' | 'week' | 'quarter' | 'time'",
+                    "resolved": "\"date\" | \"month\" | \"quarter\" | \"time\" | \"week\" | \"year\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content rightPanelMode=\"year\"></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Panel mode for right panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-panel-mode",
+                "defaultValue": "'date'"
+            },
+            "picker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerMode",
+                    "resolved": "\"date\" | \"month\" | \"quarter\" | \"week\" | \"year\"",
+                    "references": {
+                        "RangePickerMode": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerMode",
+                            "referenceLocation": "RangePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content picker=\"date\"></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Picker mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "picker",
+                "defaultValue": "'date'"
+            },
+            "rangeStart": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content rangeStart={new Date()}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Selected start date."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "rangeEnd": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content rangeEnd={new Date()}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Selected end date."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "hoveringDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date | null",
+                    "resolved": "Date",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content hoveringDate={new Date()}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Date being hovered during selection."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "activePanel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content activePanel=\"right\"></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Which panel is currently active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-panel",
+                "defaultValue": "'left'"
+            },
+            "presets": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PresetRange[]",
+                    "resolved": "PresetRange[]",
+                    "references": {
+                        "PresetRange": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::PresetRange",
+                            "referenceLocation": "PresetRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content presets={[{ label: 'Today', value: [new Date(), new Date()] }]}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Preset ranges."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "showTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content showTime></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to show time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-time",
+                "defaultValue": "false"
+            },
+            "disabledDateFn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledDateFn",
+                    "resolved": "(dateString: string) => boolean",
+                    "references": {
+                        "DisabledDateFn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::DisabledDateFn",
+                            "referenceLocation": "DisabledDateFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content disabledDateFn={(d) => d.getDay() === 0}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Function to determine if a date is disabled."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content minDate=\"2026-01-01\"></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Minimum selectable date (ISO string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content maxDate=\"2026-12-31\"></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Maximum selectable date (ISO string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "weekStartDay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content weekStartDay={1}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Week start day (0 = Sunday, 1 = Monday, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-start-day",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xDateClick",
+                "name": "xDateClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXDateClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a date cell is clicked."
+                },
+                "complexType": {
+                    "original": "RangeDateClickDetail",
+                    "resolved": "RangeDateClickDetail",
+                    "references": {
+                        "RangeDateClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangeDateClickDetail",
+                            "referenceLocation": "RangeDateClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xDateHover",
+                "name": "xDateHover",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXDateHover={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a date cell is hovered."
+                },
+                "complexType": {
+                    "original": "RangeDateClickDetail",
+                    "resolved": "RangeDateClickDetail",
+                    "references": {
+                        "RangeDateClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangeDateClickDetail",
+                            "referenceLocation": "RangeDateClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xHeaderAction",
+                "name": "xHeaderAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXHeaderAction={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when header navigation action occurs."
+                },
+                "complexType": {
+                    "original": "RangeHeaderActionDetail",
+                    "resolved": "RangeHeaderActionDetail",
+                    "references": {
+                        "RangeHeaderActionDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangeHeaderActionDetail",
+                            "referenceLocation": "RangeHeaderActionDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPresetClick",
+                "name": "xPresetClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXPresetClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a preset is clicked."
+                },
+                "complexType": {
+                    "original": "PresetClickDetail",
+                    "resolved": "PresetClickDetail",
+                    "references": {
+                        "PresetClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::PresetClickDetail",
+                            "referenceLocation": "PresetClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOkClick",
+                "name": "xOkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXOkClick={() => {}}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when OK button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xMonthClick",
+                "name": "xMonthClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXMonthClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when month cell is clicked."
+                },
+                "complexType": {
+                    "original": "{ month: number; year: number; side: 'left' | 'right' }",
+                    "resolved": "{ month: number; year: number; side: \"left\" | \"right\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "xYearClick",
+                "name": "xYearClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXYearClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when year cell is clicked."
+                },
+                "complexType": {
+                    "original": "{ year: number; side: 'left' | 'right' }",
+                    "resolved": "{ year: number; side: \"left\" | \"right\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "xQuarterClick",
+                "name": "xQuarterClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXQuarterClick={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when quarter cell is clicked."
+                },
+                "complexType": {
+                    "original": "{ quarter: number; year: number; side: 'left' | 'right' }",
+                    "resolved": "{ quarter: number; year: number; side: \"left\" | \"right\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "xPanelModeChange",
+                "name": "xPanelModeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXPanelModeChange={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when panel mode changes."
+                },
+                "complexType": {
+                    "original": "{ mode: 'date' | 'month' | 'year' | 'week' | 'quarter' | 'time'; side: 'left' | 'right' }",
+                    "resolved": "{ mode: \"time\" | \"date\" | \"week\" | \"month\" | \"quarter\" | \"year\"; side: \"left\" | \"right\"; }",
+                    "references": {}
+                }
+            }, {
+                "method": "xTimeChange",
+                "name": "xTimeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker-dropdown-content onXTimeChange={(ev) => console.log(ev.detail)}></x-range-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when time selection changes."
+                },
+                "complexType": {
+                    "original": "RangeTimeChangeDetail",
+                    "resolved": "RangeTimeChangeDetail",
+                    "references": {
+                        "RangeTimeChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/range-picker-dropdown-content/types.ts::RangeTimeChangeDetail",
+                            "referenceLocation": "RangeTimeChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}