@xlabs-store/core 0.0.1

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

@@ -0,0 +1,2110 @@
+import { Host, h, } from "@stencil/core";
+import { PortalController } from "../x-portal/portal-controller";
+import { getIcon } from "../../utils/config";
+import { translate } from "../../locales/locale.service";
+const MONTHS_FULL = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+/**
+ * Date picker component with portal-based dropdown.
+ */
+export class XDatePicker {
+    /**
+     * Host element reference for slot access.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Whether the date picker is disabled.
+     * @example
+     * <x-date-picker disabled></x-date-picker>
+     */
+    disabled = false;
+    /**
+     * Current selected value (ISO string or Date compatible string).
+     * @example
+     * <x-date-picker value="2026-01-01"></x-date-picker>
+     */
+    value = '';
+    /**
+     * Default value.
+     * @example
+     * <x-date-picker defaultValue="2026-01-01"></x-date-picker>
+     */
+    defaultValue;
+    /**
+     * Placeholder text.
+     * @example
+     * <x-date-picker placeholder="Pick a date"></x-date-picker>
+     */
+    placeholder = translate('DatePicker.lang.placeholder', {}, 'Select date');
+    /**
+     * Size of date picker: 'large' | 'middle' | 'small'.
+     * @example
+     * <x-date-picker size="small"></x-date-picker>
+     */
+    size = 'middle';
+    /**
+     * Picker mode: 'date' | 'week' | 'month' | 'quarter' | 'year'.
+     * @example
+     * <x-date-picker picker="month"></x-date-picker>
+     */
+    picker = 'date';
+    /**
+     * Date format for display (simplified: YYYY-MM-DD, DD/MM/YYYY, etc.)
+     * If not specified, uses default format based on picker mode:
+     * - date: YYYY-MM-DD (or YYYY-MM-DD HH:mm:ss with showTime)
+     * - week: YYYY-wo
+     * - month: YYYY-MM
+     * - quarter: YYYY-[Q]Q
+     * - year: YYYY
+     * @example
+     * <x-date-picker format="DD/MM/YYYY"></x-date-picker>
+     */
+    format;
+    /**
+     * Whether to show border.
+     * @example
+     * <x-date-picker bordered={false}></x-date-picker>
+     */
+    bordered = true;
+    /**
+     * Validation status.
+     * @example
+     * <x-date-picker status="error"></x-date-picker>
+     */
+    status;
+    /**
+     * Dropdown placement.
+     * @example
+     * <x-date-picker placement="bottomRight"></x-date-picker>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Whether to allow clear.
+     * @example
+     * <x-date-picker allowClear></x-date-picker>
+     */
+    allowClear = true;
+    /**
+     * Whether the dropdown is open.
+     * @example
+     * <x-date-picker open></x-date-picker>
+     */
+    open = false;
+    /**
+     * Whether to show time picker.
+     * @example
+     * <x-date-picker showTime></x-date-picker>
+     */
+    showTime = false;
+    /**
+     * Whether to show today button.
+     * @example
+     * <x-date-picker showToday={false}></x-date-picker>
+     */
+    showToday = true;
+    /**
+     * Whether to show now button (for time picker).
+     * @example
+     * <x-date-picker showNow={false}></x-date-picker>
+     */
+    showNow = true;
+    /**
+     * Input ID.
+     * @example
+     * <x-date-picker inputId="date-input"></x-date-picker>
+     */
+    inputId;
+    /**
+     * Name attribute for form.
+     * @example
+     * <x-date-picker name="date"></x-date-picker>
+     */
+    name;
+    /**
+     * Auto focus on mount.
+     * @example
+     * <x-date-picker autofocus></x-date-picker>
+     */
+    autofocus = false;
+    /**
+     * Function to determine if a date should be disabled
+     * Accepts date string 'YYYY-MM-DD' and returns boolean
+     * @example
+     * <x-date-picker disabledDate={(d) => d.startsWith('2026-01')}></x-date-picker>
+     */
+    disabledDate;
+    /**
+     * Minimum selectable date.
+     * @example
+     * <x-date-picker minDate="2026-01-01"></x-date-picker>
+     */
+    minDate;
+    /**
+     * Maximum selectable date.
+     * @example
+     * <x-date-picker maxDate="2026-12-31"></x-date-picker>
+     */
+    maxDate;
+    /**
+     * Default panel date when opening.
+     * @example
+     * <x-date-picker defaultPickerValue="2026-03-01"></x-date-picker>
+     */
+    defaultPickerValue;
+    /**
+     * Suffix icon slot name.
+     * @example
+     * <x-date-picker suffixIcon="calendar"></x-date-picker>
+     */
+    suffixIcon;
+    /**
+     * Super previous icon slot name.
+     * @example
+     * <x-date-picker superPrevIcon="double-left"></x-date-picker>
+     */
+    superPrevIcon;
+    /**
+     * Super next icon slot name.
+     * @example
+     * <x-date-picker superNextIcon="double-right"></x-date-picker>
+     */
+    superNextIcon;
+    /**
+     * Previous icon slot name.
+     * @example
+     * <x-date-picker prevIcon="left"></x-date-picker>
+     */
+    prevIcon;
+    /**
+     * Next icon slot name.
+     * @example
+     * <x-date-picker nextIcon="right"></x-date-picker>
+     */
+    nextIcon;
+    /**
+     * Whether input is read only.
+     * @example
+     * <x-date-picker inputReadOnly></x-date-picker>
+     */
+    inputReadOnly = false;
+    /**
+     * Week start day (0 = Sunday, 1 = Monday, etc.).
+     * @example
+     * <x-date-picker weekStartDay={1}></x-date-picker>
+     */
+    weekStartDay = 0;
+    // ========================================
+    // STATE
+    // ========================================
+    currentViewDate = new Date();
+    focused = false;
+    panelMode = 'date';
+    hoverDate = null;
+    inputValue = '';
+    // Time picker state
+    selectedHour = 0;
+    selectedMinute = 0;
+    selectedSecond = 0;
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when value changes.
+     * @example
+     * <x-date-picker onXChange={(ev) => console.log(ev.detail)}></x-date-picker>
+     */
+    xChange;
+    /**
+     * Emitted when panel opens/closes.
+     * @example
+     * <x-date-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-date-picker>
+     */
+    xOpenChange;
+    /**
+     * Emitted on blur.
+     * @example
+     * <x-date-picker onXBlur={(ev) => console.log(ev)}></x-date-picker>
+     */
+    xBlur;
+    /**
+     * Emitted on focus.
+     * @example
+     * <x-date-picker onXFocus={(ev) => console.log(ev)}></x-date-picker>
+     */
+    xFocus;
+    /**
+     * Emitted when panel mode changes.
+     * @example
+     * <x-date-picker onXPanelChange={(ev) => console.log(ev.detail)}></x-date-picker>
+     */
+    xPanelChange;
+    // ========================================
+    // REFS
+    // ========================================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Wrapper element reference.
+     */
+    wrapperRef;
+    /**
+     * Portal instance for dropdown.
+     */
+    portalInstance = null;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Initialize state from value/defaults before render.
+     *
+     * Flow:
+     * 1. Checks `value` prop:
+     *    - Parses ISO string to Date.
+     *    - Formats display value.
+     *    - Extracts time components.
+     * 2. If no value, checks `defaultValue`.
+     * 3. If no default, checks `defaultPickerValue` for view date.
+     * 4. Sets initial `panelMode` based on `picker` prop.
+     *
+     * @returns void
+     */
+    componentWillLoad() {
+        if (this.value) {
+            this.currentViewDate = this.parseDate(this.value) || new Date();
+            this.inputValue = this.formatDate(this.currentViewDate);
+            this.extractTime(this.currentViewDate);
+        }
+        else if (this.defaultValue) {
+            this.value = this.defaultValue;
+            this.currentViewDate = this.parseDate(this.defaultValue) || new Date();
+            this.inputValue = this.formatDate(this.currentViewDate);
+            this.extractTime(this.currentViewDate);
+        }
+        else if (this.defaultPickerValue) {
+            this.currentViewDate = this.parseDate(this.defaultPickerValue) || new Date();
+        }
+        // Set initial panel mode based on picker prop
+        this.panelMode = 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.
+     * @param newValue - New ISO value.
+     * @returns void
+     */
+    valueChanged(newValue) {
+        if (newValue) {
+            const date = this.parseDate(newValue);
+            if (date) {
+                this.currentViewDate = date;
+                this.inputValue = this.formatDate(date);
+                this.extractTime(date);
+            }
+        }
+        else {
+            this.inputValue = '';
+        }
+    }
+    /**
+     * Handle open state changes and portal sync.
+     * @param newValue - Open state.
+     * @returns void
+     */
+    openChanged(newValue) {
+        this.xOpenChange.emit(newValue);
+        if (newValue) {
+            this.panelMode = 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;
+        // Use composedPath for Shadow DOM compatibility
+        const path = ev.composedPath();
+        const isInsideComponent = path.includes(this.el);
+        // Check if click is inside portal dropdown
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePortal = portalEl ? path.includes(portalEl) : false;
+        if (!isInsideComponent && !isInsidePortal) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle keyboard navigation and confirmation.
+     * @param ev - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        // Check if input is focused and editable
+        const isInputEditable = this.focused && !this.inputReadOnly;
+        switch (ev.key) {
+            case 'Escape':
+                ev.preventDefault();
+                this.closeDropdown();
+                this.inputRef?.blur();
+                break;
+            case 'Enter':
+                ev.preventDefault();
+                if (!this.open) {
+                    this.openDropdown();
+                }
+                else if (isInputEditable) {
+                    // Parse and confirm typed value
+                    const date = this.parseInputValue(this.inputValue);
+                    if (date && !this.isDateDisabled(date)) {
+                        this.handleDateClick(date);
+                    }
+                }
+                else if (this.panelMode === 'date') {
+                    // Confirm current selection
+                    this.handleDateClick(this.currentViewDate);
+                }
+                break;
+            case 'ArrowDown':
+                // Only navigate if input is readonly or not focused
+                if (!isInputEditable) {
+                    ev.preventDefault();
+                    if (!this.open) {
+                        this.openDropdown();
+                    }
+                    else {
+                        this.navigateDate(7);
+                    }
+                }
+                break;
+            case 'ArrowUp':
+                if (!isInputEditable) {
+                    ev.preventDefault();
+                    if (this.open) {
+                        this.navigateDate(-7);
+                    }
+                }
+                break;
+            case 'ArrowLeft':
+                if (!isInputEditable) {
+                    ev.preventDefault();
+                    if (this.open) {
+                        this.navigateDate(-1);
+                    }
+                }
+                break;
+            case 'ArrowRight':
+                if (!isInputEditable) {
+                    ev.preventDefault();
+                    if (this.open) {
+                        this.navigateDate(1);
+                    }
+                }
+                break;
+            case 'PageUp':
+                ev.preventDefault();
+                if (this.open) {
+                    if (ev.shiftKey) {
+                        this.changeYear(-1);
+                    }
+                    else {
+                        this.changeMonth(-1);
+                    }
+                }
+                break;
+            case 'PageDown':
+                ev.preventDefault();
+                if (this.open) {
+                    if (ev.shiftKey) {
+                        this.changeYear(1);
+                    }
+                    else {
+                        this.changeMonth(1);
+                    }
+                }
+                break;
+            case 'Tab':
+                if (this.open) {
+                    this.closeDropdown();
+                }
+                break;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Focus the input programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.setFocus()
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+        this.focused = true;
+    }
+    /**
+     * Blur the input programmatically.
+     * @returns Promise<void>
+     * @example
+     * await el.setBlur()
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+        this.focused = false;
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Determine initial panel mode based on picker.
+     * @returns panel mode
+     */
+    getInitialPanelMode() {
+        switch (this.picker) {
+            case 'week':
+                return 'week';
+            case 'month':
+                return 'month';
+            case 'quarter':
+                return 'quarter';
+            case 'year':
+                return 'year';
+            default:
+                return 'date';
+        }
+    }
+    /**
+     * 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 the default format based on picker mode
+     * @returns string
+     */
+    getDefaultFormat() {
+        switch (this.picker) {
+            case 'week':
+                return 'YYYY-wo';
+            case 'month':
+                return 'YYYY-MM';
+            case 'quarter':
+                return 'YYYY-[Q]Q';
+            case 'year':
+                return 'YYYY';
+            case 'date':
+            default:
+                return this.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+        }
+    }
+    /**
+     * Get the effective format (user-provided or default)
+     * @returns string
+     */
+    getEffectiveFormat() {
+        return this.format || this.getDefaultFormat();
+    }
+    /**
+     * Get week number of 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 of a date (1-4)
+     * @param date - Date to evaluate.
+     * @returns number
+     */
+    getQuarter(date) {
+        return Math.floor(date.getMonth() / 3) + 1;
+    }
+    /**
+     * Format a date using current format settings.
+     * @param date - Date to format.
+     * @returns string
+     */
+    formatDate(date) {
+        if (!date || isNaN(date.getTime()))
+            return '';
+        const format = this.getEffectiveFormat();
+        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');
+        const weekNumber = String(this.getWeekNumber(date)).padStart(2, '0');
+        const quarter = this.getQuarter(date);
+        let formatted = format
+            .replace('YYYY', String(year))
+            .replace('[Q]Q', `Q${quarter}`)
+            .replace('wo', weekNumber)
+            .replace('MM', month)
+            .replace('DD', day)
+            .replace('HH', hours)
+            .replace('mm', minutes)
+            .replace('ss', seconds);
+        return formatted;
+    }
+    /**
+     * 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 date into state.
+     * @param date - Date to extract from.
+     * @returns void
+     */
+    extractTime(date) {
+        if (!date)
+            return;
+        this.selectedHour = date.getHours();
+        this.selectedMinute = date.getMinutes();
+        this.selectedSecond = date.getSeconds();
+    }
+    /**
+     * Open dropdown if allowed.
+     * @returns void
+     */
+    openDropdown() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+        this.panelMode = this.getInitialPanelMode();
+    }
+    /**
+     * Close dropdown.
+     * @returns void
+     */
+    closeDropdown() {
+        if (!this.open)
+            return;
+        this.open = false;
+    }
+    // ========================================
+    // PORTAL MANAGEMENT
+    // ========================================
+    /**
+     * Get trigger wrapper element for portal.
+     * @returns HTMLElement | undefined
+     */
+    getWrapperEl() {
+        return this.wrapperRef || undefined;
+    }
+    /**
+     * Create portal or update existing instance.
+     * @returns void
+     */
+    createOrUpdatePortal() {
+        if (!this.open)
+            return;
+        const triggerEl = this.getWrapperEl();
+        if (!triggerEl)
+            return;
+        const dropdownContent = this.buildDropdownElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: triggerEl,
+                placement: this.placement,
+                zIndex: 1050,
+                content: dropdownContent,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: triggerEl,
+                placement: this.placement,
+                zIndex: 1050,
+                content: dropdownContent,
+            });
+        }
+    }
+    /**
+     * Update portal content and placement.
+     * @returns void
+     */
+    updatePortal() {
+        if (!this.open || !this.portalInstance)
+            return;
+        const triggerEl = this.getWrapperEl();
+        if (!triggerEl)
+            return;
+        const dropdownContent = this.buildDropdownElement();
+        this.portalInstance.update({
+            open: true,
+            target: triggerEl,
+            placement: this.placement,
+            zIndex: 1050,
+            content: dropdownContent,
+        });
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    /**
+     * Build dropdown content element and wire events.
+     *
+     * Flow:
+     * 1. Creates `x-date-picker-dropdown-content` element.
+     * 2. Passes all relevant props (dates, modes, time, constraints).
+     * 3. Attaches event listeners for user interactions:
+     *    - Date/Month/Year selection.
+     *    - Navigation (prev/next).
+     *    - Time changes.
+     *    - Mode switching.
+     *    - OK/Now/Today actions.
+     *
+     * @returns HTMLElement
+     */
+    buildDropdownElement() {
+        const dropdownEl = document.createElement('x-date-picker-dropdown-content');
+        const classes = {
+            'x-date-picker-dropdown': true,
+            'x-date-picker-dropdown-hidden': !this.open,
+            [`x-date-picker-dropdown-placement-${this.placement}`]: true,
+        };
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = {};
+        dropdownEl.panelMode = this.panelMode;
+        dropdownEl.currentViewDate = this.currentViewDate;
+        dropdownEl.selectedDate = this.parseDate(this.value);
+        dropdownEl.showTime = this.showTime;
+        dropdownEl.showToday = this.showToday;
+        dropdownEl.showNow = this.showNow;
+        dropdownEl.selectedHour = this.selectedHour;
+        dropdownEl.selectedMinute = this.selectedMinute;
+        dropdownEl.selectedSecond = this.selectedSecond;
+        dropdownEl.use12Hours = false;
+        dropdownEl.hourStep = 1;
+        dropdownEl.minuteStep = 1;
+        dropdownEl.secondStep = 1;
+        dropdownEl.disabledDateFn = this.disabledDate;
+        dropdownEl.minDate = this.minDate;
+        dropdownEl.maxDate = this.maxDate;
+        dropdownEl.weekStartDay = this.weekStartDay;
+        // Add event listeners for dropdown events
+        dropdownEl.addEventListener('xDateClick', ((e) => {
+            this.handleDateClick(e.detail.date);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xMonthClick', ((e) => {
+            this.handleMonthClick(e.detail.month);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xYearClick', ((e) => {
+            this.handleYearClick(e.detail.year);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xQuarterClick', ((e) => {
+            this.handleQuarterClick(e.detail.year, e.detail.quarter);
+        }));
+        dropdownEl.addEventListener('xWeekClick', ((e) => {
+            this.handleWeekClick(e.detail.date, e.detail.weekNumber);
+        }));
+        dropdownEl.addEventListener('xHeaderAction', ((e) => {
+            const { action } = e.detail;
+            if (action === 'prevYear')
+                this.changeYear(-1);
+            else if (action === 'nextYear')
+                this.changeYear(1);
+            else if (action === 'prevMonth')
+                this.changeMonth(-1);
+            else if (action === 'nextMonth')
+                this.changeMonth(1);
+            else if (action === 'prevDecade')
+                this.changeDecade(-1);
+            else if (action === 'nextDecade')
+                this.changeDecade(1);
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xTodayClick', (() => {
+            this.handleTodayClick();
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xNowClick', (() => {
+            this.handleNowClick();
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xOkClick', (() => {
+            this.handleOk();
+        }));
+        dropdownEl.addEventListener('xTimeChange', ((e) => {
+            const { hour, minute, second } = e.detail;
+            this.selectedHour = hour;
+            this.selectedMinute = minute;
+            this.selectedSecond = second;
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xPanelModeChange', ((e) => {
+            this.panelMode = e.detail;
+            this.updatePortal();
+        }));
+        return dropdownEl;
+    }
+    /**
+     * Navigate by a number of days.
+     * @param days - Day offset.
+     * @returns void
+     */
+    navigateDate(days) {
+        const newDate = new Date(this.currentViewDate);
+        newDate.setDate(newDate.getDate() + days);
+        this.currentViewDate = newDate;
+    }
+    /**
+     * Change view month by offset.
+     * @param offset - Month offset.
+     * @returns void
+     */
+    changeMonth(offset) {
+        const newDate = new Date(this.currentViewDate);
+        newDate.setMonth(newDate.getMonth() + offset);
+        this.currentViewDate = newDate;
+    }
+    /**
+     * Change view year by offset.
+     * @param offset - Year offset.
+     * @returns void
+     */
+    changeYear(offset) {
+        const newDate = new Date(this.currentViewDate);
+        newDate.setFullYear(newDate.getFullYear() + offset);
+        this.currentViewDate = newDate;
+    }
+    /**
+     * Change view decade by offset.
+     * @param offset - Decade offset.
+     * @returns void
+     */
+    changeDecade(offset) {
+        const newDate = new Date(this.currentViewDate);
+        newDate.setFullYear(newDate.getFullYear() + offset * 10);
+        this.currentViewDate = newDate;
+    }
+    /**
+     * 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.disabledDate) {
+            return this.disabledDate(dateStr);
+        }
+        return false;
+    }
+    /**
+     * Handle date selection.
+     * @param date - Selected date.
+     * @returns void
+     */
+    handleDateClick(date) {
+        if (this.isDateDisabled(date))
+            return;
+        if (this.showTime) {
+            // Apply current time selection
+            date.setHours(this.selectedHour, this.selectedMinute, this.selectedSecond);
+        }
+        const dateStr = this.toDateString(date);
+        this.value = dateStr;
+        this.inputValue = this.formatDate(date);
+        this.currentViewDate = date;
+        this.xChange.emit({
+            value: dateStr,
+            date: date,
+            dateString: this.inputValue,
+        });
+        if (!this.showTime) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle month selection.
+     * @param month - Month index.
+     * @returns void
+     */
+    handleMonthClick(month) {
+        const newDate = new Date(this.currentViewDate);
+        newDate.setMonth(month);
+        this.currentViewDate = newDate;
+        if (this.picker === 'month') {
+            // Emit change for month picker
+            const dateStr = `${newDate.getFullYear()}-${String(month + 1).padStart(2, '0')}`;
+            this.value = dateStr;
+            this.inputValue = `${MONTHS_FULL[month]} ${newDate.getFullYear()}`;
+            this.xChange.emit({
+                value: dateStr,
+                date: newDate,
+                dateString: this.inputValue,
+            });
+            this.closeDropdown();
+        }
+        else {
+            // Switch to date panel
+            this.panelMode = 'date';
+            this.xPanelChange.emit({ value: newDate, mode: 'date' });
+        }
+    }
+    /**
+     * Handle year selection.
+     * @param year - Year value.
+     * @returns void
+     */
+    handleYearClick(year) {
+        const newDate = new Date(this.currentViewDate);
+        newDate.setFullYear(year);
+        this.currentViewDate = newDate;
+        if (this.picker === 'year') {
+            // Emit change for year picker
+            this.value = String(year);
+            this.inputValue = String(year);
+            this.xChange.emit({
+                value: String(year),
+                date: newDate,
+                dateString: String(year),
+            });
+            this.closeDropdown();
+        }
+        else if (this.picker === 'quarter') {
+            // Switch to quarter panel
+            this.panelMode = 'quarter';
+            this.xPanelChange.emit({ value: newDate, mode: 'quarter' });
+            this.updatePortal();
+        }
+        else {
+            // Switch to month panel
+            this.panelMode = 'month';
+            this.xPanelChange.emit({ value: newDate, mode: 'month' });
+            this.updatePortal();
+        }
+    }
+    /**
+     * Handle week selection.
+     * @param weekDate - Week date.
+     * @param weekNumber - Week number.
+     * @returns void
+     */
+    handleWeekClick(weekDate, weekNumber) {
+        const year = weekDate.getFullYear();
+        const dateStr = `${year}-${String(weekNumber).padStart(2, '0')}`;
+        this.value = dateStr;
+        this.inputValue = this.formatDate(weekDate);
+        this.currentViewDate = weekDate;
+        this.xChange.emit({
+            value: dateStr,
+            date: weekDate,
+            dateString: this.inputValue,
+        });
+        this.closeDropdown();
+    }
+    /**
+     * Handle quarter selection.
+     * @param year - Year value.
+     * @param quarter - Quarter index.
+     * @returns void
+     */
+    handleQuarterClick(year, quarter) {
+        const dateStr = `${year}-Q${quarter}`;
+        const quarterStartMonth = (quarter - 1) * 3;
+        const quarterDate = new Date(year, quarterStartMonth, 1);
+        this.value = dateStr;
+        this.inputValue = this.formatDate(quarterDate);
+        this.currentViewDate = quarterDate;
+        this.xChange.emit({
+            value: dateStr,
+            date: quarterDate,
+            dateString: this.inputValue,
+        });
+        this.closeDropdown();
+    }
+    /**
+     * Handle today action.
+     * @returns void
+     */
+    handleTodayClick() {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        this.handleDateClick(today);
+    }
+    /**
+     * Handle now action.
+     * @returns void
+     */
+    handleNowClick() {
+        const now = new Date();
+        this.selectedHour = now.getHours();
+        this.selectedMinute = now.getMinutes();
+        this.selectedSecond = now.getSeconds();
+        this.handleDateClick(now);
+    }
+    /**
+     * Handle clear action.
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleClear(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.value = '';
+        this.inputValue = '';
+        this.xChange.emit({
+            value: null,
+            date: null,
+            dateString: '',
+        });
+    }
+    /**
+     * Parse input text into a Date.
+     * @param inputValue - Input value.
+     * @returns Date | null
+     */
+    parseInputValue(inputValue) {
+        if (!inputValue || !inputValue.trim())
+            return null;
+        const value = inputValue.trim();
+        // Try direct ISO parse first
+        let date = new Date(value);
+        if (!isNaN(date.getTime()))
+            return date;
+        // Parse based on format
+        const format = this.format.toUpperCase();
+        // Common formats patterns
+        const patterns = [
+            {
+                format: 'YYYY-MM-DD',
+                regex: /^(\d{4})-(\d{1,2})-(\d{1,2})$/,
+                parse: m => new Date(+m[1], +m[2] - 1, +m[3]),
+            },
+            {
+                format: 'DD-MM-YYYY',
+                regex: /^(\d{1,2})-(\d{1,2})-(\d{4})$/,
+                parse: m => new Date(+m[3], +m[2] - 1, +m[1]),
+            },
+            {
+                format: 'MM-DD-YYYY',
+                regex: /^(\d{1,2})-(\d{1,2})-(\d{4})$/,
+                parse: m => new Date(+m[3], +m[1] - 1, +m[2]),
+            },
+            {
+                format: 'YYYY/MM/DD',
+                regex: /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/,
+                parse: m => new Date(+m[1], +m[2] - 1, +m[3]),
+            },
+            {
+                format: 'DD/MM/YYYY',
+                regex: /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,
+                parse: m => new Date(+m[3], +m[2] - 1, +m[1]),
+            },
+            {
+                format: 'MM/DD/YYYY',
+                regex: /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/,
+                parse: m => new Date(+m[3], +m[1] - 1, +m[2]),
+            },
+            {
+                format: 'YYYY.MM.DD',
+                regex: /^(\d{4})\.(\d{1,2})\.(\d{1,2})$/,
+                parse: m => new Date(+m[1], +m[2] - 1, +m[3]),
+            },
+            {
+                format: 'DD.MM.YYYY',
+                regex: /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/,
+                parse: m => new Date(+m[3], +m[2] - 1, +m[1]),
+            },
+        ];
+        // Try to match input against all patterns
+        for (const pattern of patterns) {
+            const match = value.match(pattern.regex);
+            if (match) {
+                const parsed = pattern.parse(match);
+                if (parsed && !isNaN(parsed.getTime())) {
+                    return parsed;
+                }
+            }
+        }
+        // Try parsing with flexible format (numbers only)
+        const numbersOnly = value.replace(/\D/g, '');
+        if (numbersOnly.length === 8) {
+            // Could be YYYYMMDD or DDMMYYYY
+            if (format.startsWith('YYYY')) {
+                date = new Date(+numbersOnly.slice(0, 4), +numbersOnly.slice(4, 6) - 1, +numbersOnly.slice(6, 8));
+            }
+            else if (format.startsWith('DD')) {
+                date = new Date(+numbersOnly.slice(4, 8), +numbersOnly.slice(2, 4) - 1, +numbersOnly.slice(0, 2));
+            }
+            else if (format.startsWith('MM')) {
+                date = new Date(+numbersOnly.slice(4, 8), +numbersOnly.slice(0, 2) - 1, +numbersOnly.slice(2, 4));
+            }
+            if (!isNaN(date.getTime()))
+                return date;
+        }
+        return null;
+    }
+    /**
+     * Handle input typing and update view date.
+     * @param e - Input event.
+     * @returns void
+     */
+    handleInputChange(e) {
+        const target = e.target;
+        this.inputValue = target.value;
+        // Try to parse input
+        const date = this.parseInputValue(target.value);
+        if (date && !this.isDateDisabled(date)) {
+            this.currentViewDate = date;
+            // Don't close dropdown, just update view
+        }
+    }
+    /**
+     * Handle input blur and validate value.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleInputBlur(e) {
+        // Small delay to check if blur is due to clicking on dropdown
+        setTimeout(() => {
+            // Validate input on blur
+            if (this.inputValue) {
+                const date = this.parseInputValue(this.inputValue);
+                if (date && !this.isDateDisabled(date)) {
+                    // Apply the date
+                    const dateStr = this.toDateString(date);
+                    this.value = dateStr;
+                    this.inputValue = this.formatDate(date);
+                    this.currentViewDate = date;
+                    this.xChange.emit({
+                        value: dateStr,
+                        date: date,
+                        dateString: this.inputValue,
+                    });
+                }
+                else if (this.value) {
+                    // Restore previous valid value
+                    const prevDate = this.parseDate(this.value);
+                    this.inputValue = prevDate ? this.formatDate(prevDate) : '';
+                }
+                else {
+                    // Clear invalid input
+                    this.inputValue = '';
+                }
+            }
+            this.focused = false;
+            this.xBlur.emit(e);
+        }, 100);
+    }
+    /**
+     * Handle input focus and open dropdown.
+     * @param e - Focus event.
+     * @returns void
+     */
+    handleInputFocus(e) {
+        this.focused = true;
+        this.openDropdown();
+        this.xFocus.emit(e);
+    }
+    /**
+     * Handle OK confirmation for time selection.
+     * @returns void
+     */
+    handleOk() {
+        const date = new Date(this.currentViewDate);
+        date.setHours(this.selectedHour, this.selectedMinute, this.selectedSecond);
+        this.handleDateClick(date);
+        this.closeDropdown();
+    }
+    // ========================================
+    // RENDER METHODS
+    // ========================================
+    /**
+     * Render calendar icon.
+     * @returns JSX.Element
+     */
+    renderCalendarIcon() {
+        return h("x-icon", { name: getIcon('calendar') });
+    }
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderClearIcon() {
+        return h("x-icon", { name: getIcon('clear') });
+    }
+    /**
+     * Render date picker input and suffix icons.
+     * @returns JSX.Element
+     */
+    render() {
+        const showClear = this.allowClear && this.value && !this.disabled;
+        const hostClasses = {
+            'x-picker': true,
+            'x-picker-focused': this.focused,
+            'x-picker-disabled': this.disabled,
+            'x-picker-borderless': !this.bordered,
+            'x-picker-open': this.open,
+            [`x-picker-${this.size}`]: true,
+            [`x-picker-status-${this.status}`]: !!this.status,
+        };
+        return (h(Host, { key: '2624f3204269edda5b9c6885849a1157373901a1', class: hostClasses }, h("div", { key: '8be5c72ac3f7d4ac6552307432d8352fe31a4a33', ref: el => (this.wrapperRef = el), class: {
+                'x-picker-wrapper': true,
+                'disabled': this.disabled,
+            } }, h("div", { key: '8e1effa81fc92a9dbfa5ab76427e19dd66e54517', class: "x-picker-input", onClick: () => this.openDropdown() }, h("input", { key: '4a10f356eac53d4c24366008f3562bd6caf7f2aa', ref: el => (this.inputRef = el), id: this.inputId, name: this.name, type: "text", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.inputReadOnly, autoComplete: "off", onInput: e => this.handleInputChange(e), onFocus: e => this.handleInputFocus(e), onBlur: e => this.handleInputBlur(e) })), h("span", { key: 'ffca45dfa43ed2c0ad6324ad9035600a415b575d', class: "x-picker-suffix" }, showClear && (h("span", { key: '971d8462185669bdb60a3c0f42a0a7ba888fc340', class: "x-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())), h("span", { key: '333fe7ff5344837b076608f0570eb161e5915297', class: "x-picker-icon", onClick: () => {
+                this.openDropdown();
+                this.inputRef?.focus();
+            } }, this.renderCalendarIcon())))));
+    }
+    static get is() { return "x-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-date-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-date-picker disabled></x-date-picker>"
+                        }],
+                    "text": "Whether the date picker is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker value=\"2026-01-01\"></x-date-picker>"
+                        }],
+                    "text": "Current selected value (ISO string or Date compatible string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker defaultValue=\"2026-01-01\"></x-date-picker>"
+                        }],
+                    "text": "Default value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker placeholder=\"Pick a date\"></x-date-picker>"
+                        }],
+                    "text": "Placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('DatePicker.lang.placeholder', {}, 'Select date')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "DatePickerSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/types.ts::DatePickerSize",
+                            "referenceLocation": "DatePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker size=\"small\"></x-date-picker>"
+                        }],
+                    "text": "Size of date picker: 'large' | 'middle' | 'small'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "picker": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerMode",
+                    "resolved": "\"date\" | \"month\" | \"quarter\" | \"week\" | \"year\"",
+                    "references": {
+                        "DatePickerMode": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/types.ts::DatePickerMode",
+                            "referenceLocation": "DatePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker picker=\"month\"></x-date-picker>"
+                        }],
+                    "text": "Picker mode: 'date' | 'week' | 'month' | 'quarter' | 'year'."
+                },
+                "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-date-picker format=\"DD/MM/YYYY\"></x-date-picker>"
+                        }],
+                    "text": "Date format for display (simplified: YYYY-MM-DD, DD/MM/YYYY, etc.)\r\nIf not specified, uses default format based on picker mode:\r\n- date: YYYY-MM-DD (or YYYY-MM-DD HH:mm:ss with showTime)\r\n- week: YYYY-wo\r\n- month: YYYY-MM\r\n- quarter: YYYY-[Q]Q\r\n- year: YYYY"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker bordered={false}></x-date-picker>"
+                        }],
+                    "text": "Whether to show border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "DatePickerStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/types.ts::DatePickerStatus",
+                            "referenceLocation": "DatePickerStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker status=\"error\"></x-date-picker>"
+                        }],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "DatePickerPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/types.ts::DatePickerPlacement",
+                            "referenceLocation": "DatePickerPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker placement=\"bottomRight\"></x-date-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-date-picker allowClear></x-date-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-date-picker open></x-date-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-date-picker showTime></x-date-picker>"
+                        }],
+                    "text": "Whether to show time picker."
+                },
+                "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 showToday={false}></x-date-picker>"
+                        }],
+                    "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 showNow={false}></x-date-picker>"
+                        }],
+                    "text": "Whether to show now button (for time picker)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-now",
+                "defaultValue": "true"
+            },
+            "inputId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker inputId=\"date-input\"></x-date-picker>"
+                        }],
+                    "text": "Input ID."
+                },
+                "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-date-picker name=\"date\"></x-date-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-date-picker autofocus></x-date-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-date-picker disabledDate={(d) => d.startsWith('2026-01')}></x-date-picker>"
+                        }],
+                    "text": "Function to determine if a date should be disabled\r\nAccepts date string 'YYYY-MM-DD' and returns boolean"
+                },
+                "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-date-picker minDate=\"2026-01-01\"></x-date-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-date-picker maxDate=\"2026-12-31\"></x-date-picker>"
+                        }],
+                    "text": "Maximum selectable date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date"
+            },
+            "defaultPickerValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker defaultPickerValue=\"2026-03-01\"></x-date-picker>"
+                        }],
+                    "text": "Default panel date when opening."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-picker-value"
+            },
+            "suffixIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker suffixIcon=\"calendar\"></x-date-picker>"
+                        }],
+                    "text": "Suffix icon slot name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suffix-icon"
+            },
+            "superPrevIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker superPrevIcon=\"double-left\"></x-date-picker>"
+                        }],
+                    "text": "Super previous icon slot name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "super-prev-icon"
+            },
+            "superNextIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker superNextIcon=\"double-right\"></x-date-picker>"
+                        }],
+                    "text": "Super next icon slot name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "super-next-icon"
+            },
+            "prevIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker prevIcon=\"left\"></x-date-picker>"
+                        }],
+                    "text": "Previous icon slot name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "prev-icon"
+            },
+            "nextIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker nextIcon=\"right\"></x-date-picker>"
+                        }],
+                    "text": "Next icon slot name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-icon"
+            },
+            "inputReadOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker inputReadOnly></x-date-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-date-picker weekStartDay={1}></x-date-picker>"
+                        }],
+                    "text": "Week start day (0 = Sunday, 1 = Monday, etc.)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "week-start-day",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentViewDate": {},
+            "focused": {},
+            "panelMode": {},
+            "hoverDate": {},
+            "inputValue": {},
+            "selectedHour": {},
+            "selectedMinute": {},
+            "selectedSecond": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker onXChange={(ev) => console.log(ev.detail)}></x-date-picker>"
+                        }],
+                    "text": "Emitted when value changes."
+                },
+                "complexType": {
+                    "original": "DatePickerChangeEventDetail",
+                    "resolved": "DatePickerChangeEventDetail",
+                    "references": {
+                        "DatePickerChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-date-picker/types.ts::DatePickerChangeEventDetail",
+                            "referenceLocation": "DatePickerChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-date-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-date-picker onXBlur={(ev) => console.log(ev)}></x-date-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-date-picker onXFocus={(ev) => console.log(ev)}></x-date-picker>"
+                        }],
+                    "text": "Emitted on focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "xPanelChange",
+                "name": "xPanelChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-date-picker onXPanelChange={(ev) => console.log(ev.detail)}></x-date-picker>"
+                        }],
+                    "text": "Emitted when panel mode changes."
+                },
+                "complexType": {
+                    "original": "{ value: Date; mode: string }",
+                    "resolved": "{ value: Date; mode: 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
+            }];
+    }
+}