@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1496 @@
+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 = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const DEFAULT_MONTHS_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+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' },
+];
+/**
+ * Date picker dropdown content component rendered in a portal layer.
+ */
+export class XDatePickerDropdownContent {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Class map for dropdown wrapper.
+     * @example
+     * <x-date-picker-dropdown-content dropdownClasses={{ 'x-date-dropdown': true }}></x-date-picker-dropdown-content>
+     */
+    dropdownClasses = {};
+    /**
+     * Inline style map for dropdown wrapper.
+     * @example
+     * <x-date-picker-dropdown-content dropdownStyle={{ width: '280px' }}></x-date-picker-dropdown-content>
+     */
+    dropdownStyle = {};
+    /**
+     * Callback to pass dropdown element ref.
+     * @example
+     * <x-date-picker-dropdown-content setDropdownRef={(el) => console.log(el)}></x-date-picker-dropdown-content>
+     */
+    setDropdownRef;
+    /**
+     * Current panel mode.
+     * @example
+     * <x-date-picker-dropdown-content panelMode="month"></x-date-picker-dropdown-content>
+     */
+    panelMode = 'date';
+    /**
+     * Current view date for navigation.
+     * @example
+     * <x-date-picker-dropdown-content currentViewDate={new Date()}></x-date-picker-dropdown-content>
+     */
+    currentViewDate = new Date();
+    /**
+     * Currently selected date.
+     * @example
+     * <x-date-picker-dropdown-content selectedDate={new Date()}></x-date-picker-dropdown-content>
+     */
+    selectedDate = null;
+    /**
+     * Whether to show time panel.
+     * @example
+     * <x-date-picker-dropdown-content showTime></x-date-picker-dropdown-content>
+     */
+    showTime = false;
+    /**
+     * Whether to show today button.
+     * @example
+     * <x-date-picker-dropdown-content showToday={false}></x-date-picker-dropdown-content>
+     */
+    showToday = true;
+    /**
+     * Whether to show now button.
+     * @example
+     * <x-date-picker-dropdown-content showNow={false}></x-date-picker-dropdown-content>
+     */
+    showNow = true;
+    /**
+     * Selected hour for time picker.
+     * @example
+     * <x-date-picker-dropdown-content selectedHour={10}></x-date-picker-dropdown-content>
+     */
+    selectedHour = 0;
+    /**
+     * Selected minute for time picker.
+     * @example
+     * <x-date-picker-dropdown-content selectedMinute={30}></x-date-picker-dropdown-content>
+     */
+    selectedMinute = 0;
+    /**
+     * Selected second for time picker.
+     * @example
+     * <x-date-picker-dropdown-content selectedSecond={45}></x-date-picker-dropdown-content>
+     */
+    selectedSecond = 0;
+    /**
+     * Whether to use 12-hour format.
+     * @example
+     * <x-date-picker-dropdown-content use12Hours></x-date-picker-dropdown-content>
+     */
+    use12Hours = false;
+    /**
+     * Hour step.
+     * @example
+     * <x-date-picker-dropdown-content hourStep={2}></x-date-picker-dropdown-content>
+     */
+    hourStep = 1;
+    /**
+     * Minute step.
+     * @example
+     * <x-date-picker-dropdown-content minuteStep={5}></x-date-picker-dropdown-content>
+     */
+    minuteStep = 1;
+    /**
+     * Second step.
+     * @example
+     * <x-date-picker-dropdown-content secondStep={10}></x-date-picker-dropdown-content>
+     */
+    secondStep = 1;
+    /**
+     * Function to determine if a date is disabled.
+     * @example
+     * <x-date-picker-dropdown-content disabledDateFn={(d) => d.startsWith('2026')}></x-date-picker-dropdown-content>
+     */
+    disabledDateFn;
+    /**
+     * Minimum selectable date (ISO string).
+     * @example
+     * <x-date-picker-dropdown-content minDate="2026-01-01"></x-date-picker-dropdown-content>
+     */
+    minDate;
+    /**
+     * Maximum selectable date (ISO string).
+     * @example
+     * <x-date-picker-dropdown-content maxDate="2026-12-31"></x-date-picker-dropdown-content>
+     */
+    maxDate;
+    /**
+     * Week start day (0 = Sunday, 1 = Monday, etc.).
+     * @example
+     * <x-date-picker-dropdown-content weekStartDay={1}></x-date-picker-dropdown-content>
+     */
+    weekStartDay = 0;
+    // ==================== Events ====================
+    /**
+     * Emitted when a date cell is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXDateClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xDateClick;
+    /**
+     * Emitted when a month cell is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXMonthClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xMonthClick;
+    /**
+     * Emitted when a year cell is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXYearClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xYearClick;
+    /**
+     * Emitted when a quarter cell is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXQuarterClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xQuarterClick;
+    /**
+     * Emitted when a week row is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXWeekClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xWeekClick;
+    /**
+     * Emitted when header navigation action occurs.
+     * @example
+     * <x-date-picker-dropdown-content onXHeaderAction={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xHeaderAction;
+    /**
+     * Emitted when today button is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXTodayClick={() => {}}></x-date-picker-dropdown-content>
+     */
+    xTodayClick;
+    /**
+     * Emitted when now button is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXNowClick={() => {}}></x-date-picker-dropdown-content>
+     */
+    xNowClick;
+    /**
+     * Emitted when OK button is clicked.
+     * @example
+     * <x-date-picker-dropdown-content onXOkClick={() => {}}></x-date-picker-dropdown-content>
+     */
+    xOkClick;
+    /**
+     * Emitted when time selection changes.
+     * @example
+     * <x-date-picker-dropdown-content onXTimeChange={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xTimeChange;
+    /**
+     * Emitted when panel mode should change (e.g., clicking month/year in header).
+     * @example
+     * <x-date-picker-dropdown-content onXPanelModeChange={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>
+     */
+    xPanelModeChange;
+    // ==================== 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 ISO week number for a date.
+     * @param date - Date to evaluate.
+     * @returns number
+     */
+    getWeekNumber(date) {
+        const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
+        const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
+        return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
+    }
+    /**
+     * Get quarter index for a date.
+     * @param date - Date to evaluate.
+     * @returns number
+     */
+    getQuarter(date) {
+        return Math.floor(date.getMonth() / 3) + 1;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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 selected.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isDateSelected(date) {
+        if (!this.selectedDate)
+            return false;
+        return date.toDateString() === this.selectedDate.toDateString();
+    }
+    /**
+     * Check if date is today.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isToday(date) {
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    }
+    /**
+     * Build calendar grid for current view date.
+     * @returns CalendarDayData[][]
+     */
+    getCalendarDays() {
+        const year = this.currentViewDate.getFullYear();
+        const month = this.currentViewDate.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),
+                isSelected: this.isDateSelected(date),
+                isDisabled: this.isDateDisabled(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),
+                isSelected: this.isDateSelected(date),
+                isDisabled: this.isDateDisabled(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),
+                    isSelected: this.isDateSelected(date),
+                    isDisabled: this.isDateDisabled(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),
+                    isSelected: this.isDateSelected(date),
+                    isDisabled: this.isDateDisabled(date),
+                });
+            }
+            weeks.push(days);
+        }
+        return weeks;
+    }
+    // ==================== Event Handlers ====================
+    /**
+     * Handle date cell click.
+     * @param day - Calendar day data.
+     * @returns void
+     */
+    handleDateCellClick = (day) => {
+        if (day.isDisabled)
+            return;
+        this.xDateClick.emit({
+            date: day.date,
+            dateString: this.toDateString(day.date),
+        });
+    };
+    /**
+     * Handle month cell click.
+     * @param month - Month index.
+     * @returns void
+     */
+    handleMonthCellClick = (month) => {
+        this.xMonthClick.emit({
+            year: this.currentViewDate.getFullYear(),
+            month,
+        });
+    };
+    /**
+     * Handle year cell click.
+     * @param year - Year value.
+     * @returns void
+     */
+    handleYearCellClick = (year) => {
+        this.xYearClick.emit({ year });
+    };
+    /**
+     * Handle quarter cell click.
+     * @param quarter - Quarter index.
+     * @returns void
+     */
+    handleQuarterCellClick = (quarter) => {
+        this.xQuarterClick.emit({
+            year: this.currentViewDate.getFullYear(),
+            quarter,
+        });
+    };
+    /**
+     * Handle week row click.
+     * @param weekDate - Week date.
+     * @param weekNumber - Week number.
+     * @returns void
+     */
+    handleWeekRowClick = (weekDate, weekNumber) => {
+        this.xWeekClick.emit({
+            date: weekDate,
+            weekNumber,
+            year: weekDate.getFullYear(),
+        });
+    };
+    /**
+     * Handle header navigation action.
+     * @param action - Header action type.
+     * @returns void
+     */
+    handleHeaderAction = (action) => {
+        this.xHeaderAction.emit({ action });
+    };
+    /**
+     * Handle panel mode change request.
+     * @param mode - New mode.
+     * @returns void
+     */
+    handlePanelModeChange = (mode) => {
+        this.xPanelModeChange.emit(mode);
+    };
+    /**
+     * Handle time selection change.
+     * @param type - Time unit type.
+     * @param value - Selected value.
+     * @returns void
+     */
+    handleTimeSelect = (type, value) => {
+        const hour = type === 'hour' ? value : this.selectedHour;
+        const minute = type === 'minute' ? value : this.selectedMinute;
+        const second = type === 'second' ? value : this.selectedSecond;
+        this.xTimeChange.emit({ hour, minute, second });
+    };
+    /**
+     * Handle today button click.
+     * @returns void
+     */
+    handleTodayClick = () => {
+        this.xTodayClick.emit();
+    };
+    /**
+     * Handle now button click.
+     * @returns void
+     */
+    handleNowClick = () => {
+        this.xNowClick.emit();
+    };
+    /**
+     * Handle OK button click.
+     * @returns void
+     */
+    handleOkClick = () => {
+        this.xOkClick.emit();
+    };
+    // ==================== Render Methods ====================
+    /**
+     * Render header based on panel mode.
+     * @param mode - Panel mode.
+     * @returns JSX.Element
+     */
+    renderHeader(mode) {
+        const year = this.currentViewDate.getFullYear();
+        const month = this.currentViewDate.getMonth();
+        const startYear = Math.floor(year / 10) * 10 - 1;
+        const showMonthNav = mode === 'date' || mode === 'week';
+        const showYearNav = mode !== 'year';
+        return (h("div", { class: "x-picker-header" }, h("button", { type: "button", class: "x-picker-header-btn", onClick: () => this.handleHeaderAction(mode === 'year' ? 'prevDecade' : 'prevYear') }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowLeft') })), showMonthNav && (h("button", { type: "button", class: "x-picker-header-btn", onClick: () => this.handleHeaderAction('prevMonth') }, h("x-icon", { slot: "icon", name: getIcon('arrowLeft') }))), h("div", { class: "x-picker-header-view" }, mode === 'year' ? (h("span", { class: "x-picker-decade-btn" }, startYear + 1, " - ", startYear + 10)) : ([
+            (mode === 'date' || mode === 'week') && (h("button", { type: "button", class: "x-picker-month-btn", onClick: () => this.handlePanelModeChange('month') }, translate('DatePicker.lang.monthsFull', undefined, DEFAULT_MONTHS_FULL)[month])),
+            showYearNav && (h("button", { type: "button", class: "x-picker-year-btn", onClick: () => this.handlePanelModeChange('year') }, year)),
+        ])), showMonthNav && (h("button", { type: "button", class: "x-picker-header-btn", onClick: () => this.handleHeaderAction('nextMonth') }, h("x-icon", { slot: "icon", name: getIcon('arrowRight') }))), h("button", { type: "button", class: "x-picker-header-btn", onClick: () => this.handleHeaderAction(mode === 'year' ? 'nextDecade' : 'nextYear') }, h("x-icon", { slot: "icon", name: getIcon('doubleArrowRight') }))));
+    }
+    /**
+     * Render date panel body.
+     * @returns JSX.Element
+     */
+    renderDatePanel() {
+        const weekDays = this.getWeekDays();
+        const weeks = this.getCalendarDays();
+        return (h("div", { class: "x-picker-date-panel" }, this.renderHeader('date'), h("div", { class: "x-picker-body" }, h("table", { class: "x-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 => (h("td", { class: {
+                'x-picker-cell': true,
+                'x-picker-cell-in-view': day.isCurrentMonth,
+                'x-picker-cell-out-of-view': !day.isCurrentMonth,
+                'x-picker-cell-today': day.isToday,
+                'x-picker-cell-selected': day.isSelected,
+                'x-picker-cell-disabled': day.isDisabled,
+            }, onClick: () => this.handleDateCellClick(day) }, h("div", { class: "x-picker-cell-inner" }, day.date.getDate()))))))))))));
+    }
+    /**
+     * Render week panel body.
+     * @returns JSX.Element
+     */
+    renderWeekPanel() {
+        const weekDays = this.getWeekDays();
+        const weeks = this.getCalendarDays();
+        const selectedWeek = this.selectedDate ? this.getWeekNumber(this.selectedDate) : -1;
+        const selectedYear = this.selectedDate?.getFullYear() ?? -1;
+        return (h("div", { class: "x-picker-week-panel" }, this.renderHeader('week'), h("div", { class: "x-picker-body" }, h("table", { class: "x-picker-content" }, h("thead", null, h("tr", null, h("th", { class: "x-picker-week-number" }, translate('DatePicker.lang.week', {}, 'Wk')), weekDays.map(day => (h("th", null, day))))), h("tbody", null, weeks.map(week => {
+            const weekDate = week.find(d => d.isCurrentMonth)?.date || week[0].date;
+            const weekNum = this.getWeekNumber(weekDate);
+            const isSelected = weekNum === selectedWeek && weekDate.getFullYear() === selectedYear;
+            return (h("tr", { class: {
+                    'x-picker-week-panel-row': true,
+                    'x-picker-week-panel-row-selected': isSelected,
+                }, onClick: () => this.handleWeekRowClick(weekDate, weekNum) }, h("td", { class: "x-picker-week-number" }, weekNum), week.map(day => (h("td", { class: {
+                    'x-picker-cell': true,
+                    'x-picker-cell-in-view': day.isCurrentMonth,
+                    'x-picker-cell-out-of-view': !day.isCurrentMonth,
+                    'x-picker-cell-today': day.isToday,
+                } }, h("div", { class: "x-picker-cell-inner" }, day.date.getDate()))))));
+        }))))));
+    }
+    /**
+     * Render month panel body.
+     * @returns JSX.Element
+     */
+    renderMonthPanel() {
+        const year = this.currentViewDate.getFullYear();
+        const currentMonth = new Date().getMonth();
+        const currentYear = new Date().getFullYear();
+        const selectedMonth = this.selectedDate?.getMonth() ?? -1;
+        const selectedYear = this.selectedDate?.getFullYear() ?? -1;
+        return (h("div", { class: "x-picker-month-panel" }, this.renderHeader('month'), h("div", { class: "x-picker-body" }, h("table", { class: "x-picker-content" }, 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;
+            const isSelected = month === selectedMonth && year === selectedYear;
+            return (h("td", { class: {
+                    'x-picker-cell': true,
+                    'x-picker-cell-in-view': true,
+                    'x-picker-cell-today': isCurrentMonth,
+                    'x-picker-cell-selected': isSelected,
+                }, onClick: () => this.handleMonthCellClick(month) }, h("div", { class: "x-picker-cell-inner" }, translate('DatePicker.lang.monthsShort', undefined, DEFAULT_MONTHS)[month])));
+        })))))))));
+    }
+    /**
+     * Render year panel body.
+     * @returns JSX.Element
+     */
+    renderYearPanel() {
+        const currentYear = new Date().getFullYear();
+        const selectedYear = this.selectedDate?.getFullYear() ?? -1;
+        const startYear = Math.floor(this.currentViewDate.getFullYear() / 10) * 10 - 1;
+        return (h("div", { class: "x-picker-year-panel" }, this.renderHeader('year'), h("div", { class: "x-picker-body" }, h("table", { class: "x-picker-content" }, 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 isInView = yearIndex > 0 && yearIndex < 11;
+            const isCurrentYear = year === currentYear;
+            const isSelected = year === selectedYear;
+            return (h("td", { class: {
+                    'x-picker-cell': true,
+                    'x-picker-cell-in-view': isInView,
+                    'x-picker-cell-out-of-view': !isInView,
+                    'x-picker-cell-today': isCurrentYear,
+                    'x-picker-cell-selected': isSelected,
+                }, onClick: () => this.handleYearCellClick(year) }, h("div", { class: "x-picker-cell-inner" }, year)));
+        })))))))));
+    }
+    /**
+     * Render quarter panel body.
+     * @returns JSX.Element
+     */
+    renderQuarterPanel() {
+        const viewYear = this.currentViewDate.getFullYear();
+        const currentYear = new Date().getFullYear();
+        const currentQuarter = this.getQuarter(new Date());
+        // Parse selected quarter
+        let selectedYear = -1;
+        let selectedQuarter = -1;
+        if (this.selectedDate) {
+            selectedYear = this.selectedDate.getFullYear();
+            selectedQuarter = this.getQuarter(this.selectedDate);
+        }
+        return (h("div", { class: "x-picker-quarter-panel" }, this.renderHeader('quarter'), h("div", { class: "x-picker-body" }, h("div", { class: "x-picker-quarter-grid" }, (() => {
+            const localeQuarters = translate('DatePicker.lang.quarters', undefined, DEFAULT_QUARTERS);
+            return DEFAULT_QUARTERS.map((dq, idx) => {
+                const q = { ...dq, label: localeQuarters[idx]?.label ?? dq.label, months: localeQuarters[idx]?.months ?? dq.months };
+                return q;
+            });
+        })().map(q => {
+            const isCurrentQuarter = viewYear === currentYear && q.value === currentQuarter;
+            const isSelected = viewYear === selectedYear && q.value === selectedQuarter;
+            return (h("div", { class: {
+                    'x-picker-quarter-cell': true,
+                    'x-picker-quarter-cell-current': isCurrentQuarter && !isSelected,
+                    'x-picker-quarter-cell-selected': isSelected,
+                }, onClick: () => this.handleQuarterCellClick(q.value) }, h("span", { class: "x-picker-quarter-label" }, q.label), h("span", { class: "x-picker-quarter-months" }, q.months)));
+        })))));
+    }
+    /**
+     * Render time panel body.
+     * @returns JSX.Element
+     */
+    renderTimePanel() {
+        // Ensure step values are valid numbers
+        const hourStep = typeof this.hourStep === 'number' && this.hourStep > 0 ? this.hourStep : 1;
+        const minuteStep = typeof this.minuteStep === 'number' && this.minuteStep > 0 ? this.minuteStep : 1;
+        const secondStep = typeof this.secondStep === 'number' && this.secondStep > 0 ? this.secondStep : 1;
+        const maxHours = this.use12Hours ? 12 : 24;
+        const hours = Array.from({ length: Math.ceil(maxHours / hourStep) }, (_, i) => this.use12Hours ? (i * hourStep) || 12 : i * hourStep);
+        const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+        const seconds = Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep);
+        // Format selected time for display
+        const displayHour = this.use12Hours
+            ? (this.selectedHour % 12 || 12)
+            : this.selectedHour;
+        const ampm = this.selectedHour >= 12 ? 'PM' : 'AM';
+        const timeDisplay = this.use12Hours
+            ? `${String(displayHour).padStart(2, '0')}:${String(this.selectedMinute).padStart(2, '0')}:${String(this.selectedSecond).padStart(2, '0')} ${ampm}`
+            : `${String(this.selectedHour).padStart(2, '0')}:${String(this.selectedMinute).padStart(2, '0')}:${String(this.selectedSecond).padStart(2, '0')}`;
+        return (h("div", { class: "x-picker-time-panel" }, h("div", { class: "x-picker-time-panel-header x-picker-header" }, h("span", { class: "x-picker-time-panel-header-title x-picker-header-view" }, timeDisplay)), h("div", { class: "x-picker-time-panel-content" }, h("div", { class: "x-picker-time-panel-column" }, h("div", { class: "x-picker-time-panel-column-header" }, translate('DatePicker.lang.hour', {}, 'Hour')), h("ul", { class: "x-picker-time-panel-column-list" }, hours.map(hour => (h("li", { class: {
+                'x-picker-time-panel-cell': true,
+                'x-picker-time-panel-cell-selected': this.use12Hours
+                    ? (this.selectedHour % 12 || 12) === hour
+                    : this.selectedHour === hour,
+            }, onClick: () => this.handleTimeSelect('hour', hour) }, String(hour).padStart(2, '0')))))), h("div", { class: "x-picker-time-panel-column" }, h("div", { class: "x-picker-time-panel-column-header" }, translate('DatePicker.lang.minute', {}, 'Minute')), h("ul", { class: "x-picker-time-panel-column-list" }, minutes.map(minute => (h("li", { class: {
+                'x-picker-time-panel-cell': true,
+                'x-picker-time-panel-cell-selected': this.selectedMinute === minute,
+            }, onClick: () => this.handleTimeSelect('minute', minute) }, String(minute).padStart(2, '0')))))), h("div", { class: "x-picker-time-panel-column" }, h("div", { class: "x-picker-time-panel-column-header" }, translate('DatePicker.lang.second', {}, 'Second')), h("ul", { class: "x-picker-time-panel-column-list" }, seconds.map(second => (h("li", { class: {
+                'x-picker-time-panel-cell': true,
+                'x-picker-time-panel-cell-selected': this.selectedSecond === second,
+            }, onClick: () => this.handleTimeSelect('second', second) }, String(second).padStart(2, '0')))))), this.use12Hours && (h("div", { class: "x-picker-time-panel-column x-picker-time-panel-column-ampm" }, h("div", { class: "x-picker-time-panel-column-header" }, translate('DatePicker.lang.ampm', {}, 'AM/PM')), h("ul", { class: "x-picker-time-panel-column-list" }, h("li", { class: {
+                'x-picker-time-panel-cell': true,
+                'x-picker-time-panel-cell-selected': this.selectedHour < 12,
+            }, onClick: () => {
+                const newHour = this.selectedHour >= 12 ? this.selectedHour - 12 : this.selectedHour;
+                this.handleTimeSelect('hour', newHour);
+            } }, translate('DatePicker.lang.am', {}, 'AM')), h("li", { class: {
+                'x-picker-time-panel-cell': true,
+                'x-picker-time-panel-cell-selected': this.selectedHour >= 12,
+            }, onClick: () => {
+                const newHour = this.selectedHour < 12 ? this.selectedHour + 12 : this.selectedHour;
+                this.handleTimeSelect('hour', newHour);
+            } }, translate('DatePicker.lang.pm', {}, 'PM'))))))));
+    }
+    /**
+     * Render footer with Today/Now/OK actions.
+     * @returns JSX.Element
+     */
+    renderFooter() {
+        const hasFooter = this.showToday || this.showTime;
+        if (!hasFooter)
+            return null;
+        return (h("div", { class: "x-picker-footer" }, h("div", { class: "x-picker-footer-extra" }), h("div", { class: "x-picker-ranges" }, this.showToday && !this.showTime && (h("x-button", { type: "link", size: "small", class: "x-picker-today-btn", onClick: this.handleTodayClick }, translate('DatePicker.lang.today', {}, 'Today'))), this.showTime && this.showNow && (h("x-button", { type: "link", size: "small", class: "x-picker-now-btn", onClick: this.handleNowClick }, translate('DatePicker.lang.now', {}, 'Now'))), this.showTime && (h("x-button", { type: "primary", size: "small", class: "x-picker-ok-btn", onClick: this.handleOkClick }, translate('DatePicker.lang.ok', {}, 'OK'))))));
+    }
+    /**
+     * Render panel based on current mode.
+     * @returns JSX.Element
+     */
+    renderPanel() {
+        switch (this.panelMode) {
+            case 'week':
+                return this.renderWeekPanel();
+            case 'month':
+                return this.renderMonthPanel();
+            case 'quarter':
+                return this.renderQuarterPanel();
+            case 'year':
+                return this.renderYearPanel();
+            case 'date':
+            default:
+                return this.renderDatePanel();
+        }
+    }
+    /**
+     * Render date picker dropdown content.
+     * @returns JSX.Element
+     * @example
+     * <x-date-picker-dropdown-content selectedDate={new Date()}></x-date-picker-dropdown-content>
+     */
+    render() {
+        const panelClass = {
+            'x-picker-panel': true,
+            'x-picker-panel-with-time': this.showTime && this.panelMode === 'date',
+        };
+        return (h("div", { key: '145816e811eac10e03059d124ec05f659f1c9648', class: {
+                'x-date-picker-dropdown': true,
+                ...this.dropdownClasses,
+            }, style: this.dropdownStyle, ref: this.setRef, part: "dropdown" }, h("div", { key: '1632f084bd43caa04c452e2b887c066b02269420', class: "x-picker-panel-container" }, this.showTime && this.panelMode === 'date' ? (
+        // Layout with date and time side by side
+        h("div", { class: "x-picker-datetime-panel" }, h("div", { class: "x-picker-date-panel-wrapper" }, this.renderPanel()), h("div", { class: "x-picker-time-panel-wrapper" }, this.renderTimePanel()))) : (
+        // Normal layout without time
+        h("div", { class: panelClass }, this.renderPanel())), this.renderFooter())));
+    }
+    static get is() { return "x-date-picker-dropdown-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker-dropdown-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker-dropdown-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dropdownClasses": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerDropdownClassMap",
+                    "resolved": "DatePickerDropdownClassMap",
+                    "references": {
+                        "DatePickerDropdownClassMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::DatePickerDropdownClassMap",
+                            "referenceLocation": "DatePickerDropdownClassMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content dropdownClasses={{ 'x-date-dropdown': true }}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Class map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "dropdownStyle": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerDropdownStyleMap",
+                    "resolved": "DatePickerDropdownStyleMap",
+                    "references": {
+                        "DatePickerDropdownStyleMap": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::DatePickerDropdownStyleMap",
+                            "referenceLocation": "DatePickerDropdownStyleMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content dropdownStyle={{ width: '280px' }}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Inline style map for dropdown wrapper."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "setDropdownRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerDropdownRefCallback",
+                    "resolved": "(el: HTMLDivElement) => void",
+                    "references": {
+                        "DatePickerDropdownRefCallback": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::DatePickerDropdownRefCallback",
+                            "referenceLocation": "DatePickerDropdownRefCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content setDropdownRef={(el) => console.log(el)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Callback to pass dropdown element ref."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "panelMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerPanelMode",
+                    "resolved": "\"date\" | \"month\" | \"quarter\" | \"week\" | \"year\"",
+                    "references": {
+                        "DatePickerPanelMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::DatePickerPanelMode",
+                            "referenceLocation": "DatePickerPanelMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content panelMode=\"month\"></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Current panel mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "panel-mode",
+                "defaultValue": "'date'"
+            },
+            "currentViewDate": {
+                "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-date-picker-dropdown-content currentViewDate={new Date()}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Current view date for navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "new Date()"
+            },
+            "selectedDate": {
+                "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-date-picker-dropdown-content selectedDate={new Date()}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Currently selected date."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "showTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content showTime></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to show time panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-time",
+                "defaultValue": "false"
+            },
+            "showToday": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content showToday={false}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to show today button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-today",
+                "defaultValue": "true"
+            },
+            "showNow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content showNow={false}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to show now button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-now",
+                "defaultValue": "true"
+            },
+            "selectedHour": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content selectedHour={10}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Selected hour for time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-hour",
+                "defaultValue": "0"
+            },
+            "selectedMinute": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content selectedMinute={30}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Selected minute for time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-minute",
+                "defaultValue": "0"
+            },
+            "selectedSecond": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content selectedSecond={45}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Selected second for time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-second",
+                "defaultValue": "0"
+            },
+            "use12Hours": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content use12Hours></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Whether to use 12-hour format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-1-2-hours",
+                "defaultValue": "false"
+            },
+            "hourStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content hourStep={2}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Hour step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-step",
+                "defaultValue": "1"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content minuteStep={5}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Minute step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "1"
+            },
+            "secondStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content secondStep={10}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Second step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second-step",
+                "defaultValue": "1"
+            },
+            "disabledDateFn": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledDateFn",
+                    "resolved": "(dateString: string) => boolean",
+                    "references": {
+                        "DisabledDateFn": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::DisabledDateFn",
+                            "referenceLocation": "DisabledDateFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content disabledDateFn={(d) => d.startsWith('2026')}></x-date-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-date-picker-dropdown-content minDate=\"2026-01-01\"></x-date-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-date-picker-dropdown-content maxDate=\"2026-12-31\"></x-date-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-date-picker-dropdown-content weekStartDay={1}></x-date-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-date-picker-dropdown-content onXDateClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a date cell is clicked."
+                },
+                "complexType": {
+                    "original": "DateCellClickDetail",
+                    "resolved": "DateCellClickDetail",
+                    "references": {
+                        "DateCellClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::DateCellClickDetail",
+                            "referenceLocation": "DateCellClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xMonthClick",
+                "name": "xMonthClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXMonthClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a month cell is clicked."
+                },
+                "complexType": {
+                    "original": "MonthCellClickDetail",
+                    "resolved": "MonthCellClickDetail",
+                    "references": {
+                        "MonthCellClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::MonthCellClickDetail",
+                            "referenceLocation": "MonthCellClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xYearClick",
+                "name": "xYearClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXYearClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a year cell is clicked."
+                },
+                "complexType": {
+                    "original": "YearCellClickDetail",
+                    "resolved": "YearCellClickDetail",
+                    "references": {
+                        "YearCellClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::YearCellClickDetail",
+                            "referenceLocation": "YearCellClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xQuarterClick",
+                "name": "xQuarterClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXQuarterClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a quarter cell is clicked."
+                },
+                "complexType": {
+                    "original": "QuarterCellClickDetail",
+                    "resolved": "QuarterCellClickDetail",
+                    "references": {
+                        "QuarterCellClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::QuarterCellClickDetail",
+                            "referenceLocation": "QuarterCellClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xWeekClick",
+                "name": "xWeekClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXWeekClick={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when a week row is clicked."
+                },
+                "complexType": {
+                    "original": "WeekCellClickDetail",
+                    "resolved": "WeekCellClickDetail",
+                    "references": {
+                        "WeekCellClickDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::WeekCellClickDetail",
+                            "referenceLocation": "WeekCellClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xHeaderAction",
+                "name": "xHeaderAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXHeaderAction={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when header navigation action occurs."
+                },
+                "complexType": {
+                    "original": "HeaderActionDetail",
+                    "resolved": "HeaderActionDetail",
+                    "references": {
+                        "HeaderActionDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::HeaderActionDetail",
+                            "referenceLocation": "HeaderActionDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xTodayClick",
+                "name": "xTodayClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXTodayClick={() => {}}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when today button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xNowClick",
+                "name": "xNowClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXNowClick={() => {}}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when now button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xOkClick",
+                "name": "xOkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXOkClick={() => {}}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when OK button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "xTimeChange",
+                "name": "xTimeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXTimeChange={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when time selection changes."
+                },
+                "complexType": {
+                    "original": "TimeChangeDetail",
+                    "resolved": "TimeChangeDetail",
+                    "references": {
+                        "TimeChangeDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/date-picker-dropdown-content/types.ts::TimeChangeDetail",
+                            "referenceLocation": "TimeChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPanelModeChange",
+                "name": "xPanelModeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker-dropdown-content onXPanelModeChange={(ev) => console.log(ev.detail)}></x-date-picker-dropdown-content>"
+                        }],
+                    "text": "Emitted when panel mode should change (e.g., clicking month/year in header)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}