@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1883 @@
+import { Host, h, } from "@stencil/core";
+import { getIcon } from "../../utils/config";
+import { PortalController } from "../x-portal/portal-controller";
+import { translate } from "../../locales/locale.service";
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/**
+ * Range picker component with portal-based dropdown.
+ */
+export class XRangePicker {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Whether the range picker is disabled.
+     * @example
+     * <x-range-picker disabled></x-range-picker>
+     */
+    disabled = false;
+    /**
+     * Current selected value.
+     * @example
+     * <x-range-picker value={{ start: '2026-01-01', end: '2026-01-31' }}></x-range-picker>
+     */
+    value = { start: null, end: null };
+    /**
+     * Default value.
+     * @example
+     * <x-range-picker defaultValue={{ start: '2026-01-01', end: '2026-01-31' }}></x-range-picker>
+     */
+    defaultValue;
+    /**
+     * Placeholder for start and end.
+     * @example
+     * <x-range-picker placeholder={['From', 'To']}></x-range-picker>
+     */
+    placeholder = [
+        translate('RangePicker.startPlaceholder', {}, 'Start date'),
+        translate('RangePicker.endPlaceholder', {}, 'End date'),
+    ];
+    /**
+     * Size of range picker.
+     * @example
+     * <x-range-picker size="small"></x-range-picker>
+     */
+    size = 'middle';
+    /**
+     * Picker mode.
+     * @example
+     * <x-range-picker picker="month"></x-range-picker>
+     */
+    picker = 'date';
+    /**
+     * Date format for display.
+     * @example
+     * <x-range-picker format="DD/MM/YYYY"></x-range-picker>
+     */
+    format = 'YYYY-MM-DD';
+    /**
+     * Whether to show border.
+     * @example
+     * <x-range-picker bordered={false}></x-range-picker>
+     */
+    bordered = true;
+    /**
+     * Validation status.
+     * @example
+     * <x-range-picker status="error"></x-range-picker>
+     */
+    status;
+    /**
+     * Dropdown placement.
+     * @example
+     * <x-range-picker placement="bottomRight"></x-range-picker>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Whether to allow clear.
+     * @example
+     * <x-range-picker allowClear></x-range-picker>
+     */
+    allowClear = true;
+    /**
+     * Whether the dropdown is open.
+     * @example
+     * <x-range-picker open></x-range-picker>
+     */
+    open = false;
+    /**
+     * Whether to show time picker.
+     * @example
+     * <x-range-picker showTime></x-range-picker>
+     */
+    showTime = false;
+    /**
+     * Separator between start and end.
+     * @example
+     * <x-range-picker separator="to"></x-range-picker>
+     */
+    separator = '~';
+    /**
+     * Preset ranges.
+     * @example
+     * <x-range-picker presets={[{ label: 'Today', value: [new Date(), new Date()] }]}></x-range-picker>
+     */
+    presets = [];
+    /**
+     * Input ID for start input.
+     * @example
+     * <x-range-picker inputId="range-start"></x-range-picker>
+     */
+    inputId;
+    /**
+     * Name attribute for form.
+     * @example
+     * <x-range-picker name="range"></x-range-picker>
+     */
+    name;
+    /**
+     * Auto focus on mount.
+     * @example
+     * <x-range-picker autofocus></x-range-picker>
+     */
+    autofocus = false;
+    /**
+     * Function to determine if a date should be disabled.
+     * @example
+     * <x-range-picker disabledDate={(d) => d.startsWith('2026-01')}></x-range-picker>
+     */
+    disabledDate;
+    /**
+     * Minimum selectable date.
+     * @example
+     * <x-range-picker minDate="2026-01-01"></x-range-picker>
+     */
+    minDate;
+    /**
+     * Maximum selectable date.
+     * @example
+     * <x-range-picker maxDate="2026-12-31"></x-range-picker>
+     */
+    maxDate;
+    /**
+     * Whether input is read only.
+     * @example
+     * <x-range-picker inputReadOnly></x-range-picker>
+     */
+    inputReadOnly = false;
+    /**
+     * Week start day (0 = Sunday, 1 = Monday, etc.).
+     * @example
+     * <x-range-picker weekStartDay={1}></x-range-picker>
+     */
+    weekStartDay = 0;
+    /**
+     * Allow empty for start or end.
+     * @example
+     * <x-range-picker allowEmpty={[true, true]}></x-range-picker>
+     */
+    allowEmpty = [false, false];
+    // ========================================
+    // STATE
+    // ========================================
+    activeField = 'start';
+    focused = false;
+    hovering = false;
+    hoverDate = null;
+    // View dates for left and right panels
+    leftViewDate = new Date();
+    rightViewDate = new Date(new Date().setMonth(new Date().getMonth() + 1));
+    // Range selection state (used by dropdown component)
+    rangeStart = null;
+    rangeEnd = null;
+    hoveringDate = null;
+    activePanel = 'left';
+    // Panel modes
+    leftPanelMode = 'date';
+    rightPanelMode = 'date';
+    // Input values
+    startInputValue = '';
+    endInputValue = '';
+    // Temporary selection during picking
+    tempStartDate = null;
+    tempEndDate = null;
+    // Time picker state
+    startHour = 0;
+    startMinute = 0;
+    startSecond = 0;
+    endHour = 0;
+    endMinute = 0;
+    endSecond = 0;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when value changes.
+     * @example
+     * <x-range-picker onXChange={(ev) => console.log(ev.detail)}></x-range-picker>
+     */
+    xChange;
+    /**
+     * Emitted when panel opens/closes.
+     * @example
+     * <x-range-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-range-picker>
+     */
+    xOpenChange;
+    /**
+     * Emitted on blur.
+     * @example
+     * <x-range-picker onXBlur={(ev) => console.log(ev)}></x-range-picker>
+     */
+    xBlur;
+    /**
+     * Emitted on focus.
+     * @example
+     * <x-range-picker onXFocus={(ev) => console.log(ev)}></x-range-picker>
+     */
+    xFocus;
+    /**
+     * Emitted when calendar changes during selection.
+     * @example
+     * <x-range-picker onXCalendarChange={(ev) => console.log(ev.detail)}></x-range-picker>
+     */
+    xCalendarChange;
+    // ========================================
+    // REFS
+    // ========================================
+    /**
+     * Start input element reference.
+     */
+    startInputRef;
+    /**
+     * End input element reference.
+     */
+    endInputRef;
+    /**
+     * Wrapper element reference.
+     */
+    wrapperRef;
+    /**
+     * Portal instance for dropdown.
+     */
+    portalInstance = null;
+    /**
+     * Dropdown element reference.
+     */
+    dropdownEl = null;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Initialize state from defaults and value before render.
+     * @returns void
+     */
+    componentWillLoad() {
+        // Initialize view dates
+        const today = new Date();
+        this.leftViewDate = new Date(today.getFullYear(), today.getMonth(), 1);
+        this.rightViewDate = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+        // Initialize from value
+        if (this.value?.start || this.value?.end) {
+            this.syncValueToState();
+        }
+        else if (this.defaultValue) {
+            this.value = { ...this.defaultValue };
+            this.syncValueToState();
+        }
+        // Set initial panel mode
+        this.leftPanelMode = this.getInitialPanelMode();
+        this.rightPanelMode = this.getInitialPanelMode();
+    }
+    /**
+     * Auto focus on mount when enabled.
+     * @returns void
+     */
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    /**
+     * Sync internal state when value changes.
+     * @returns void
+     */
+    valueChanged() {
+        this.syncValueToState();
+    }
+    /**
+     * React to open state changes.
+     * @param newValue - Open state.
+     * @returns void
+     */
+    openChanged(newValue) {
+        this.xOpenChange.emit(newValue);
+        if (newValue) {
+            this.leftPanelMode = this.getInitialPanelMode();
+            this.rightPanelMode = this.getInitialPanelMode();
+            this.createOrUpdatePortal();
+        }
+        else {
+            this.destroyPortal();
+        }
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    /**
+     * Close dropdown when clicking outside.
+     * @param ev - Mouse event.
+     * @returns void
+     */
+    handleWindowClick(ev) {
+        if (!this.open)
+            return;
+        console.log('handleWindowClick', ev);
+        const target = ev.target;
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        // Check if click target is inside dropdown element using contains
+        const isInsideDropdown = this.dropdownEl ? this.dropdownEl.contains(target) : false;
+        if (!isInsideComponent && !isInsidePortal && !isInsideDropdown) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle keyboard navigation and open/close behavior.
+     * @param ev - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        switch (ev.key) {
+            case 'Escape':
+                ev.preventDefault();
+                this.closeDropdown();
+                break;
+            case 'Tab':
+                if (this.open && this.activeField === 'start') {
+                    ev.preventDefault();
+                    this.activeField = 'end';
+                    this.endInputRef?.focus();
+                }
+                else if (this.open) {
+                    this.closeDropdown();
+                }
+                break;
+            case 'Enter':
+                if (!this.open) {
+                    ev.preventDefault();
+                    this.openDropdown();
+                }
+                break;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Focus the start input programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.startInputRef?.focus();
+        this.focused = true;
+        this.activeField = 'start';
+    }
+    /**
+     * Blur both inputs programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.startInputRef?.blur();
+        this.endInputRef?.blur();
+        this.focused = false;
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Determine initial panel mode based on picker.
+     * @returns panel mode
+     */
+    getInitialPanelMode() {
+        switch (this.picker) {
+            case 'month':
+                return 'month';
+            case 'year':
+                return 'year';
+            default:
+                return 'date';
+        }
+    }
+    /**
+     * Sync value prop into internal state.
+     * @returns void
+     */
+    syncValueToState() {
+        if (this.value?.start) {
+            const startDate = this.parseDate(this.value.start);
+            if (startDate) {
+                this.tempStartDate = startDate;
+                this.startInputValue = this.formatDate(startDate);
+                this.leftViewDate = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+                this.extractStartTime(startDate);
+            }
+        }
+        else {
+            this.tempStartDate = null;
+            this.startInputValue = '';
+        }
+        if (this.value?.end) {
+            const endDate = this.parseDate(this.value.end);
+            if (endDate) {
+                this.tempEndDate = endDate;
+                this.endInputValue = this.formatDate(endDate);
+                this.rightViewDate = new Date(endDate.getFullYear(), endDate.getMonth(), 1);
+                this.extractEndTime(endDate);
+            }
+        }
+        else {
+            this.tempEndDate = null;
+            this.endInputValue = '';
+        }
+        // Ensure right view is at least one month after left
+        if (this.leftViewDate.getTime() >= this.rightViewDate.getTime()) {
+            this.rightViewDate = new Date(this.leftViewDate.getFullYear(), this.leftViewDate.getMonth() + 1, 1);
+        }
+    }
+    /**
+     * Parse date from 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;
+    }
+    /**
+     * Format a date using current format.
+     * @param date - Date to format.
+     * @returns string
+     */
+    formatDate(date) {
+        if (!date || isNaN(date.getTime()))
+            return '';
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = String(date.getHours()).padStart(2, '0');
+        const minutes = String(date.getMinutes()).padStart(2, '0');
+        const seconds = String(date.getSeconds()).padStart(2, '0');
+        return this.format
+            .replace('YYYY', String(year))
+            .replace('MM', month)
+            .replace('DD', day)
+            .replace('HH', hours)
+            .replace('mm', minutes)
+            .replace('ss', seconds);
+    }
+    /**
+     * 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}`;
+    }
+    /**
+     * Extract time parts from start date.
+     * @param date - Date to extract.
+     * @returns void
+     */
+    extractStartTime(date) {
+        if (!date)
+            return;
+        this.startHour = date.getHours();
+        this.startMinute = date.getMinutes();
+        this.startSecond = date.getSeconds();
+    }
+    /**
+     * Extract time parts from end date.
+     * @param date - Date to extract.
+     * @returns void
+     */
+    extractEndTime(date) {
+        if (!date)
+            return;
+        this.endHour = date.getHours();
+        this.endMinute = date.getMinutes();
+        this.endSecond = date.getSeconds();
+    }
+    /**
+     * Open dropdown if allowed.
+     * @returns void
+     */
+    openDropdown() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+    }
+    /**
+     * Close dropdown and reset temp state.
+     * @returns void
+     */
+    closeDropdown() {
+        if (!this.open)
+            return;
+        this.open = false;
+        // Reset temp selections if not confirmed
+        this.syncValueToState();
+    }
+    // ========================================
+    // PORTAL MANAGEMENT
+    // ========================================
+    /**
+     * Create portal or update existing instance.
+     * @returns void
+     */
+    createOrUpdatePortal() {
+        if (!this.wrapperRef)
+            return;
+        // Create dropdown element if not exists
+        if (!this.dropdownEl) {
+            this.dropdownEl = this.buildDropdownElement();
+        }
+        else {
+            // Update existing element props
+            this.updateDropdownElementProps(this.dropdownEl);
+        }
+        if (this.portalInstance) {
+            this.portalInstance.update({
+                open: true,
+                content: this.dropdownEl,
+                target: this.wrapperRef,
+                placement: this.placement,
+            });
+        }
+        else {
+            this.portalInstance = PortalController.create({
+                open: true,
+                content: this.dropdownEl,
+                target: this.wrapperRef,
+                placement: this.placement,
+            });
+        }
+    }
+    /**
+     * Update portal content and placement.
+     * @returns void
+     */
+    updatePortal() {
+        if (!this.portalInstance || !this.wrapperRef || !this.dropdownEl)
+            return;
+        // Update dropdown element props
+        this.updateDropdownElementProps(this.dropdownEl);
+        this.portalInstance.update({
+            open: true,
+            content: this.dropdownEl,
+            target: this.wrapperRef,
+            placement: this.placement,
+        });
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+        this.dropdownEl = null;
+    }
+    // ========================================
+    // BUILD DOM METHODS (for Portal)
+    // ========================================
+    /**
+     * Build dropdown content element and wire events.
+     *
+     * Flow:
+     * 1. Creates `x-range-picker-dropdown-content` element.
+     * 2. Assigns all state props (dates, modes, presets, limits).
+     * 3. Attaches event listeners:
+     *    - `xDateClick`: Handles date selection.
+     *    - `xDateHover`: Updates hover range.
+     *    - `xHeaderAction`: Navigates months/years.
+     *    - `xPresetClick`: Applies preset range.
+     *    - `xTimeChange`: Updates time.
+     *    - `xPanelModeChange`: Switches views.
+     *
+     * @returns HTMLElement
+     */
+    buildDropdownElement() {
+        const dropdownEl = document.createElement('x-range-picker-dropdown-content');
+        const classes = {
+            'x-range-picker-dropdown': true,
+            'x-range-picker-dropdown-hidden': !this.open,
+            [`x-range-picker-dropdown-placement-${this.placement}`]: true,
+        };
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = {};
+        dropdownEl.leftViewDate = this.leftViewDate;
+        dropdownEl.rightViewDate = this.rightViewDate;
+        dropdownEl.rangeStart = this.rangeStart;
+        dropdownEl.rangeEnd = this.rangeEnd;
+        dropdownEl.hoveringDate = this.hoveringDate;
+        dropdownEl.activePanel = this.activePanel;
+        dropdownEl.presets = this.presets;
+        dropdownEl.showTime = this.showTime;
+        dropdownEl.disabledDateFn = this.disabledDate;
+        dropdownEl.minDate = this.minDate;
+        dropdownEl.maxDate = this.maxDate;
+        dropdownEl.picker = this.picker;
+        // Event listeners
+        dropdownEl.addEventListener('xDateClick', ((e) => {
+            e.stopPropagation();
+            const { date, side } = e.detail;
+            this.handleDateClick(date, side);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xDateHover', ((e) => {
+            e.stopPropagation();
+            const { date } = e.detail;
+            this.hoveringDate = date;
+            // Only update dropdown props, don't re-render the entire portal
+            if (this.dropdownEl) {
+                this.updateDropdownElementProps(this.dropdownEl);
+            }
+        }));
+        dropdownEl.addEventListener('xHeaderAction', ((e) => {
+            e.stopPropagation();
+            const { action, side } = e.detail;
+            this.handleHeaderAction(action, side);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xPresetClick', ((e) => {
+            e.stopPropagation();
+            const { preset } = e.detail;
+            this.handlePresetClick(preset);
+        }));
+        dropdownEl.addEventListener('xOkClick', (() => {
+            this.confirmSelection();
+        }));
+        dropdownEl.addEventListener('xTimeChange', ((e) => {
+            e.stopPropagation();
+            const { date, side } = e.detail;
+            this.handleTimeChange(date, side);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xPanelModeChange', ((e) => {
+            e.stopPropagation();
+            const { mode, side } = e.detail;
+            if (side === 'left') {
+                this.leftPanelMode = mode;
+            }
+            else {
+                this.rightPanelMode = mode;
+            }
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xMonthClick', ((e) => {
+            e.stopPropagation();
+            const { month, year, side } = e.detail;
+            this.handleMonthClick(month, year, side);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xYearClick', ((e) => {
+            e.stopPropagation();
+            const { year, side } = e.detail;
+            this.handleYearClick(year, side);
+            this.updatePortal();
+        }));
+        // Prevent all clicks inside dropdown from closing it
+        dropdownEl.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+        dropdownEl.picker = this.picker;
+        dropdownEl.leftPanelMode = this.leftPanelMode;
+        dropdownEl.rightPanelMode = this.rightPanelMode;
+        return dropdownEl;
+    }
+    /**
+     * Update dropdown element props for portal content.
+     * @param dropdownEl - Dropdown element.
+     * @returns void
+     */
+    updateDropdownElementProps(dropdownEl) {
+        const el = dropdownEl;
+        const classes = {
+            'x-range-picker-dropdown': true,
+            'x-range-picker-dropdown-hidden': !this.open,
+            [`x-range-picker-dropdown-placement-${this.placement}`]: true,
+        };
+        el.dropdownClasses = classes;
+        el.dropdownStyle = {};
+        el.leftViewDate = this.leftViewDate;
+        el.rightViewDate = this.rightViewDate;
+        el.rangeStart = this.rangeStart;
+        el.rangeEnd = this.rangeEnd;
+        el.hoveringDate = this.hoveringDate;
+        el.activePanel = this.activePanel;
+        el.presets = this.presets;
+        el.showTime = this.showTime;
+        el.picker = this.picker;
+        el.leftPanelMode = this.leftPanelMode;
+        el.rightPanelMode = this.rightPanelMode;
+        el.disabledDateFn = this.disabledDate;
+        el.minDate = this.minDate;
+        el.maxDate = this.maxDate;
+    }
+    /**
+     * Handle header navigation actions.
+     * @param action - Header action type.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleHeaderAction(action, side) {
+        const viewDate = side === 'left' ? this.leftViewDate : this.rightViewDate;
+        const newDate = new Date(viewDate);
+        switch (action) {
+            case 'prevDecade':
+                newDate.setFullYear(newDate.getFullYear() - 10);
+                break;
+            case 'nextDecade':
+                newDate.setFullYear(newDate.getFullYear() + 10);
+                break;
+            case 'prevYear':
+                newDate.setFullYear(newDate.getFullYear() - 1);
+                break;
+            case 'nextYear':
+                newDate.setFullYear(newDate.getFullYear() + 1);
+                break;
+            case 'prevMonth':
+                newDate.setMonth(newDate.getMonth() - 1);
+                break;
+            case 'nextMonth':
+                newDate.setMonth(newDate.getMonth() + 1);
+                break;
+        }
+        if (side === 'left') {
+            this.leftViewDate = newDate;
+        }
+        else {
+            this.rightViewDate = newDate;
+        }
+    }
+    /**
+     * Handle month selection.
+     * @param month - Month index.
+     * @param year - Year value.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleMonthClick(month, year, side) {
+        const newDate = new Date(year, month, 1);
+        if (this.picker === 'date' || this.picker === 'week') {
+            if (side === 'left') {
+                this.leftViewDate = newDate;
+                this.leftPanelMode = 'date';
+            }
+            else {
+                this.rightViewDate = newDate;
+                this.rightPanelMode = 'date';
+            }
+        }
+        else if (this.picker === 'month') {
+            // Handle range selection for month picker
+            this.handleDateClick(newDate); // Treat as date click but it's month
+        }
+        // Else nothing? Or handle selection logic if needed
+    }
+    /**
+     * Handle year selection.
+     * @param year - Year value.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleYearClick(year, side) {
+        const viewDate = side === 'left' ? this.leftViewDate : this.rightViewDate;
+        const newDate = new Date(year, viewDate.getMonth(), 1);
+        if (this.picker === 'date' || this.picker === 'week' || this.picker === 'month') {
+            if (side === 'left') {
+                this.leftViewDate = newDate;
+                this.leftPanelMode = 'month';
+            }
+            else {
+                this.rightViewDate = newDate;
+                this.rightPanelMode = 'month';
+            }
+        }
+        else if (this.picker === 'year') {
+            // Handle range selection for year picker
+            this.handleDateClick(newDate);
+        }
+    }
+    /**
+     * Determine whether a date is disabled.
+     * @param date - Date to check.
+     * @returns boolean
+     */
+    isDateDisabled(date) {
+        const dateStr = this.toDateString(date);
+        if (this.minDate) {
+            const min = this.parseDate(this.minDate);
+            if (min && date < min)
+                return true;
+        }
+        if (this.maxDate) {
+            const max = this.parseDate(this.maxDate);
+            if (max && date > max)
+                return true;
+        }
+        if (this.disabledDate) {
+            return this.disabledDate(dateStr);
+        }
+        return false;
+    }
+    /**
+     * Handle date click and update selection.
+     * @param date - Selected date.
+     * @param _side - Panel side.
+     * @returns void
+     */
+    handleDateClick(date, _side) {
+        if (this.isDateDisabled(date))
+            return;
+        if (this.activeField === 'start') {
+            this.tempStartDate = date;
+            this.rangeStart = date;
+            this.startInputValue = this.formatDate(date);
+            this.activeField = 'end';
+            this.activePanel = 'right';
+            this.endInputRef?.focus();
+            // If end date is before start date, clear it
+            if (this.tempEndDate && this.tempEndDate < date) {
+                this.tempEndDate = null;
+                this.rangeEnd = null;
+                this.endInputValue = '';
+            }
+            this.xCalendarChange.emit({
+                dates: [date, this.tempEndDate],
+                dateStrings: [this.toDateString(date), this.tempEndDate ? this.toDateString(this.tempEndDate) : ''],
+            });
+        }
+        else {
+            // End field
+            if (this.tempStartDate && date < this.tempStartDate) {
+                // If clicked date is before start, swap them
+                this.tempEndDate = this.tempStartDate;
+                this.rangeEnd = this.tempStartDate;
+                this.tempStartDate = date;
+                this.rangeStart = date;
+                this.startInputValue = this.formatDate(date);
+                this.endInputValue = this.formatDate(this.tempEndDate);
+            }
+            else {
+                this.tempEndDate = date;
+                this.rangeEnd = date;
+                this.endInputValue = this.formatDate(date);
+            }
+            // Both dates selected, emit change and close
+            if (this.tempStartDate && this.tempEndDate) {
+                this.confirmSelection();
+                if (!this.showTime) {
+                    this.closeDropdown();
+                }
+            }
+        }
+    }
+    /**
+     * Handle time selection change.
+     * @param date - Updated date.
+     * @param side - Panel side.
+     * @returns void
+     */
+    handleTimeChange(date, side) {
+        if (this.isDateDisabled(date))
+            return;
+        if (side === 'left') {
+            this.tempStartDate = date;
+            this.rangeStart = date;
+            this.startInputValue = this.formatDate(date);
+        }
+        else {
+            this.tempEndDate = date;
+            this.rangeEnd = date;
+            this.endInputValue = this.formatDate(date);
+        }
+    }
+    /**
+     * Confirm selection and emit change.
+     * @returns void
+     */
+    confirmSelection() {
+        if (!this.tempStartDate)
+            return;
+        const startDate = new Date(this.tempStartDate);
+        const endDate = this.tempEndDate ? new Date(this.tempEndDate) : null;
+        if (this.showTime) {
+            startDate.setHours(this.startHour, this.startMinute, this.startSecond);
+            if (endDate) {
+                endDate.setHours(this.endHour, this.endMinute, this.endSecond);
+            }
+        }
+        this.value = {
+            start: this.toDateString(startDate),
+            end: endDate ? this.toDateString(endDate) : null,
+        };
+        this.startInputValue = this.formatDate(startDate);
+        this.endInputValue = endDate ? this.formatDate(endDate) : '';
+        this.xChange.emit({
+            value: this.value,
+            dates: [startDate, endDate],
+            dateStrings: [this.startInputValue, this.endInputValue],
+        });
+    }
+    /**
+     * Handle preset range click.
+     * @param preset - Preset range.
+     * @returns void
+     */
+    handlePresetClick(preset) {
+        const [start, end] = preset.value;
+        this.tempStartDate = start;
+        this.tempEndDate = end;
+        this.rangeStart = start;
+        this.rangeEnd = end;
+        this.startInputValue = this.formatDate(start);
+        this.endInputValue = this.formatDate(end);
+        this.value = {
+            start: this.toDateString(start),
+            end: this.toDateString(end),
+        };
+        this.xChange.emit({
+            value: this.value,
+            dates: [start, end],
+            dateStrings: [this.startInputValue, this.endInputValue],
+        });
+        this.closeDropdown();
+    }
+    /**
+     * Handle clear action.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleClear(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.value = { start: null, end: null };
+        this.tempStartDate = null;
+        this.tempEndDate = null;
+        this.rangeStart = null;
+        this.rangeEnd = null;
+        this.hoveringDate = null;
+        this.startInputValue = '';
+        this.endInputValue = '';
+        this.xChange.emit({
+            value: this.value,
+            dates: [null, null],
+            dateStrings: ['', ''],
+        });
+    }
+    /**
+     * Handle focus on start input.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleStartInputFocus = (e) => {
+        this.focused = true;
+        this.activeField = 'start';
+        this.activePanel = 'left';
+        this.openDropdown();
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle focus on end input.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleEndInputFocus = (e) => {
+        this.focused = true;
+        this.activeField = 'end';
+        this.activePanel = 'right';
+        this.openDropdown();
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handle input blur.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleInputBlur = (e) => {
+        setTimeout(() => {
+            this.focused = false;
+            this.xBlur.emit(e);
+        }, 150);
+    };
+    /**
+     * Track hover state on wrapper enter.
+     * @returns void
+     */
+    handleMouseEnter = () => {
+        this.hovering = true;
+    };
+    /**
+     * Track hover state on wrapper leave.
+     * @returns void
+     */
+    handleMouseLeave = () => {
+        this.hovering = false;
+        this.hoverDate = null;
+        this.hoveringDate = null;
+    };
+    // ========================================
+    // RENDER METHODS (used in main render)
+    // ========================================
+    /**
+     * Render calendar icon.
+     * @returns JSX.Element
+     */
+    renderCalendarIcon() {
+        return h("x-icon", { name: getIcon('date') });
+    }
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderClearIcon() {
+        return h("x-icon", { name: getIcon('clear') });
+    }
+    /**
+     * Render range picker inputs and suffix icons.
+     * @returns JSX.Element
+     */
+    render() {
+        const hasValue = this.value?.start || this.value?.end;
+        const showClear = this.allowClear && hasValue && !this.disabled && this.hovering;
+        return (h(Host, { key: '00e19a33c1014868a9633dbdc51b41ee3a05dc21', class: {
+                'x-range-picker': true,
+                'x-range-picker-focused': this.focused,
+                'x-range-picker-disabled': this.disabled,
+                'x-range-picker-borderless': !this.bordered,
+                [`x-range-picker-${this.size}`]: true,
+                [`x-range-picker-status-${this.status}`]: !!this.status,
+            } }, h("div", { key: 'f00988e37cfc98011cfd6ed3fbad7b5a961eec26', ref: el => (this.wrapperRef = el), class: {
+                'x-range-picker-input': true,
+                'disabled': this.disabled,
+            }, onClick: () => this.openDropdown(), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'e1edad50e940ccfba7c8d94b2de866ec8a3d1bcf', class: "x-range-picker-input-wrapper" }, h("input", { key: 'a208a2d3ffdf282eeda0ebda1c76b3187d4fa25f', ref: el => (this.startInputRef = el), id: this.inputId, name: this.name ? `${this.name}_start` : undefined, type: "text", class: {
+                'x-range-picker-input-start': true,
+                'x-range-picker-input-active': this.activeField === 'start',
+            }, value: this.startInputValue, placeholder: this.placeholder[0], disabled: this.disabled, readOnly: this.inputReadOnly || true, autoComplete: "off", onFocus: this.handleStartInputFocus, onBlur: this.handleInputBlur }), h("span", { key: '4879213dd2dfadedfa47fc6565a56dd381ed7719', class: "x-range-picker-separator" }, h("x-icon", { key: '308b44c0879bb6d1f4fa78ddc4df19d73bb3c4eb', name: "trending_flat", style: { fontSize: '12px', color: 'var(--x-color-text-quaternary)' } })), h("input", { key: '7d08499999e884c85f5f00a3c712285de6bb0458', ref: el => (this.endInputRef = el), name: this.name ? `${this.name}_end` : undefined, type: "text", class: {
+                'x-range-picker-input-end': true,
+                'x-range-picker-input-active': this.activeField === 'end',
+            }, value: this.endInputValue, placeholder: this.placeholder[1], disabled: this.disabled, readOnly: this.inputReadOnly || true, autoComplete: "off", onFocus: this.handleEndInputFocus, onBlur: this.handleInputBlur })), h("span", { key: '420c892277f1def6e5c445b9682cbfacf332b1d8', class: "x-range-picker-suffix" }, showClear ? (h("span", { class: "x-range-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : (h("span", { class: "x-range-picker-icon" }, this.renderCalendarIcon()))))));
+    }
+    static get is() { return "x-range-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-range-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-range-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker disabled></x-range-picker>"
+                        }],
+                    "text": "Whether the range picker is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "RangePickerValue",
+                    "resolved": "RangePickerValue",
+                    "references": {
+                        "RangePickerValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerValue",
+                            "referenceLocation": "RangePickerValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker value={{ start: '2026-01-01', end: '2026-01-31' }}></x-range-picker>"
+                        }],
+                    "text": "Current selected value."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{ start: null, end: null }"
+            },
+            "defaultValue": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerValue",
+                    "resolved": "RangePickerValue",
+                    "references": {
+                        "RangePickerValue": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerValue",
+                            "referenceLocation": "RangePickerValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker defaultValue={{ start: '2026-01-01', end: '2026-01-31' }}></x-range-picker>"
+                        }],
+                    "text": "Default value."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placeholder": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[string, string]",
+                    "resolved": "[string, string]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker placeholder={['From', 'To']}></x-range-picker>"
+                        }],
+                    "text": "Placeholder for start and end."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\r\n    translate('RangePicker.startPlaceholder', {}, 'Start date'),\r\n    translate('RangePicker.endPlaceholder', {}, 'End date'),\r\n  ]"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "RangePickerSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerSize",
+                            "referenceLocation": "RangePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker size=\"small\"></x-range-picker>"
+                        }],
+                    "text": "Size of range picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "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 picker=\"month\"></x-range-picker>"
+                        }],
+                    "text": "Picker mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "picker",
+                "defaultValue": "'date'"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker format=\"DD/MM/YYYY\"></x-range-picker>"
+                        }],
+                    "text": "Date format for display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'YYYY-MM-DD'"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker bordered={false}></x-range-picker>"
+                        }],
+                    "text": "Whether to show border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "RangePickerStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerStatus",
+                            "referenceLocation": "RangePickerStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker status=\"error\"></x-range-picker>"
+                        }],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RangePickerPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "RangePickerPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerPlacement",
+                            "referenceLocation": "RangePickerPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker placement=\"bottomRight\"></x-range-picker>"
+                        }],
+                    "text": "Dropdown placement."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker allowClear></x-range-picker>"
+                        }],
+                    "text": "Whether to allow clear."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker open></x-range-picker>"
+                        }],
+                    "text": "Whether the dropdown is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "showTime": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker showTime></x-range-picker>"
+                        }],
+                    "text": "Whether to show time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-time",
+                "defaultValue": "false"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker separator=\"to\"></x-range-picker>"
+                        }],
+                    "text": "Separator between start and end."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'~'"
+            },
+            "presets": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PresetRange[]",
+                    "resolved": "PresetRange[]",
+                    "references": {
+                        "PresetRange": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::PresetRange",
+                            "referenceLocation": "PresetRange"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker presets={[{ label: 'Today', value: [new Date(), new Date()] }]}></x-range-picker>"
+                        }],
+                    "text": "Preset ranges."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker inputId=\"range-start\"></x-range-picker>"
+                        }],
+                    "text": "Input ID for start input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker name=\"range\"></x-range-picker>"
+                        }],
+                    "text": "Name attribute for form."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker autofocus></x-range-picker>"
+                        }],
+                    "text": "Auto focus on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "disabledDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(currentDate: string) => boolean",
+                    "resolved": "(currentDate: string) => boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker disabledDate={(d) => d.startsWith('2026-01')}></x-range-picker>"
+                        }],
+                    "text": "Function to determine if a date should be disabled."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "minDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker minDate=\"2026-01-01\"></x-range-picker>"
+                        }],
+                    "text": "Minimum selectable date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date"
+            },
+            "maxDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker maxDate=\"2026-12-31\"></x-range-picker>"
+                        }],
+                    "text": "Maximum selectable date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "inputReadOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker inputReadOnly></x-range-picker>"
+                        }],
+                    "text": "Whether input is read only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-read-only",
+                "defaultValue": "false"
+            },
+            "weekStartDay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker weekStartDay={1}></x-range-picker>"
+                        }],
+                    "text": "Week start day (0 = Sunday, 1 = Monday, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-start-day",
+                "defaultValue": "0"
+            },
+            "allowEmpty": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[boolean, boolean]",
+                    "resolved": "[boolean, boolean]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker allowEmpty={[true, true]}></x-range-picker>"
+                        }],
+                    "text": "Allow empty for start or end."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[false, false]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeField": {},
+            "focused": {},
+            "hovering": {},
+            "hoverDate": {},
+            "leftViewDate": {},
+            "rightViewDate": {},
+            "rangeStart": {},
+            "rangeEnd": {},
+            "hoveringDate": {},
+            "activePanel": {},
+            "leftPanelMode": {},
+            "rightPanelMode": {},
+            "startInputValue": {},
+            "endInputValue": {},
+            "tempStartDate": {},
+            "tempEndDate": {},
+            "startHour": {},
+            "startMinute": {},
+            "startSecond": {},
+            "endHour": {},
+            "endMinute": {},
+            "endSecond": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker onXChange={(ev) => console.log(ev.detail)}></x-range-picker>"
+                        }],
+                    "text": "Emitted when value changes."
+                },
+                "complexType": {
+                    "original": "RangePickerChangeEventDetail",
+                    "resolved": "RangePickerChangeEventDetail",
+                    "references": {
+                        "RangePickerChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-range-picker/types.ts::RangePickerChangeEventDetail",
+                            "referenceLocation": "RangePickerChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-range-picker>"
+                        }],
+                    "text": "Emitted when panel opens/closes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "xBlur",
+                "name": "xBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker onXBlur={(ev) => console.log(ev)}></x-range-picker>"
+                        }],
+                    "text": "Emitted on blur."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFocus",
+                "name": "xFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker onXFocus={(ev) => console.log(ev)}></x-range-picker>"
+                        }],
+                    "text": "Emitted on focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xCalendarChange",
+                "name": "xCalendarChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-range-picker onXCalendarChange={(ev) => console.log(ev.detail)}></x-range-picker>"
+                        }],
+                    "text": "Emitted when calendar changes during selection."
+                },
+                "complexType": {
+                    "original": "{ dates: [Date | null, Date | null]; dateStrings: [string, string] }",
+                    "resolved": "{ dates: [Date, Date]; dateStrings: [string, string]; }",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}