@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1454 @@
+import { Host, h, } from "@stencil/core";
+import { PortalController } from "../x-portal/portal-controller";
+import { getIcon } from "../../utils/config";
+import { translate } from "../../locales/locale.service";
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+/**
+ * Time picker component with portal-based dropdown.
+ */
+export class XTimePicker {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ========================================
+    // PROPS
+    // ========================================
+    /**
+     * Whether the time picker is disabled.
+     * @example
+     * <x-time-picker disabled></x-time-picker>
+     */
+    disabled = false;
+    /**
+     * Current value (HH:mm:ss format).
+     * @example
+     * <x-time-picker value="12:30:00"></x-time-picker>
+     */
+    value = '';
+    /**
+     * Default value.
+     * @example
+     * <x-time-picker defaultValue="09:00:00"></x-time-picker>
+     */
+    defaultValue;
+    /**
+     * Placeholder text.
+     * @example
+     * <x-time-picker placeholder="Pick time"></x-time-picker>
+     */
+    placeholder = translate('TimePicker.placeholder', {}, 'Select time');
+    /**
+     * Size of time picker.
+     * @example
+     * <x-time-picker size="small"></x-time-picker>
+     */
+    size = 'middle';
+    /**
+     * Time format for display.
+     * @example
+     * <x-time-picker format="HH:mm"></x-time-picker>
+     */
+    format = 'HH:mm:ss';
+    /**
+     * Whether to show border.
+     * @example
+     * <x-time-picker bordered={false}></x-time-picker>
+     */
+    bordered = true;
+    /**
+     * Validation status.
+     * @example
+     * <x-time-picker status="error"></x-time-picker>
+     */
+    status;
+    /**
+     * Dropdown placement.
+     * @example
+     * <x-time-picker placement="bottomRight"></x-time-picker>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Whether to allow clear.
+     * @example
+     * <x-time-picker allowClear></x-time-picker>
+     */
+    allowClear = true;
+    /**
+     * Whether the dropdown is open.
+     * @example
+     * <x-time-picker open></x-time-picker>
+     */
+    open = false;
+    /**
+     * Use 12-hour format.
+     * @example
+     * <x-time-picker use12Hours></x-time-picker>
+     */
+    use12Hours = false;
+    /**
+     * Hour step.
+     * @example
+     * <x-time-picker hourStep={2}></x-time-picker>
+     */
+    hourStep = 1;
+    /**
+     * Minute step.
+     * @example
+     * <x-time-picker minuteStep={5}></x-time-picker>
+     */
+    minuteStep = 1;
+    /**
+     * Second step.
+     * @example
+     * <x-time-picker secondStep={10}></x-time-picker>
+     */
+    secondStep = 1;
+    /**
+     * Whether to show seconds column.
+     * @example
+     * <x-time-picker showSecond={false}></x-time-picker>
+     */
+    showSecond = true;
+    /**
+     * Whether to show "Now" button.
+     * @example
+     * <x-time-picker showNow={false}></x-time-picker>
+     */
+    showNow = true;
+    /**
+     * Input ID.
+     * @example
+     * <x-time-picker inputId="time-input"></x-time-picker>
+     */
+    inputId;
+    /**
+     * Name attribute for form.
+     * @example
+     * <x-time-picker name="time"></x-time-picker>
+     */
+    name;
+    /**
+     * Auto focus on mount.
+     * @example
+     * <x-time-picker autofocus></x-time-picker>
+     */
+    autofocus = false;
+    /**
+     * Whether input is read only.
+     * @example
+     * <x-time-picker inputReadOnly></x-time-picker>
+     */
+    inputReadOnly = false;
+    /**
+     * Disabled time configuration.
+     * @example
+     * <x-time-picker disabledTime={{ disabledHours: () => [0] }}></x-time-picker>
+     */
+    disabledTime;
+    // ========================================
+    // STATE
+    // ========================================
+    focused = false;
+    hovering = false;
+    selectedHour = 0;
+    selectedMinute = 0;
+    selectedSecond = 0;
+    selectedPeriod = 'AM';
+    inputValue = '';
+    // ========================================
+    // EVENTS
+    // ========================================
+    /**
+     * Emitted when value changes.
+     * @example
+     * <x-time-picker onXChange={(ev) => console.log(ev.detail)}></x-time-picker>
+     */
+    xChange;
+    /**
+     * Emitted when panel opens/closes.
+     * @example
+     * <x-time-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-time-picker>
+     */
+    xOpenChange;
+    /**
+     * Emitted on blur.
+     * @example
+     * <x-time-picker onXBlur={(ev) => console.log(ev)}></x-time-picker>
+     */
+    xBlur;
+    /**
+     * Emitted on focus.
+     * @example
+     * <x-time-picker onXFocus={(ev) => console.log(ev)}></x-time-picker>
+     */
+    xFocus;
+    // ========================================
+    // REFS
+    // ========================================
+    /**
+     * Input element reference.
+     */
+    inputRef;
+    /**
+     * Wrapper element reference.
+     */
+    wrapperRef;
+    /**
+     * Portal instance for dropdown.
+     */
+    portalInstance = null;
+    // ========================================
+    // LIFECYCLE
+    // ========================================
+    /**
+     * Component lifecycle method called before loading.
+     * Initializes internal state from `value` or `defaultValue`.
+     * Parses the time string into hour, minute, second, and period components.
+     */
+    componentWillLoad() {
+        if (this.value) {
+            this.parseValue(this.value);
+            this.inputValue = this.formatTime();
+        }
+        else if (this.defaultValue) {
+            this.value = this.defaultValue;
+            this.parseValue(this.defaultValue);
+            this.inputValue = this.formatTime();
+        }
+    }
+    /**
+     * Component lifecycle method called after loading.
+     * Handles auto-focus behavior if enabled.
+     */
+    componentDidLoad() {
+        if (this.autofocus && !this.disabled) {
+            this.setFocus();
+        }
+    }
+    /**
+     * Component lifecycle method called when disconnected.
+     * Destroys the portal instance to clean up the dropdown.
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ========================================
+    // WATCHERS
+    // ========================================
+    /**
+     * Watcher for `value` prop.
+     * Synchronizes internal state when the parent updates the value.
+     * Parses the new value and updates the input display.
+     *
+     * @param newValue - The new time string value.
+     */
+    valueChanged(newValue) {
+        if (newValue) {
+            this.parseValue(newValue);
+            this.inputValue = this.formatTime();
+        }
+        else {
+            this.inputValue = '';
+        }
+    }
+    /**
+     * Watcher for `open` prop.
+     * Manages the dropdown portal visibility.
+     *
+     * Flow:
+     * 1. Emits `xOpenChange` event.
+     * 2. If opening: creates/updates the portal and scrolls to selected time.
+     * 3. If closing: destroys the portal.
+     *
+     * @param newValue - The new open state.
+     */
+    openChanged(newValue) {
+        this.xOpenChange.emit(newValue);
+        if (newValue) {
+            this.createOrUpdatePortal();
+            // Scroll to selected values after portal is created
+            requestAnimationFrame(() => {
+                this.scrollToSelected();
+            });
+        }
+        else {
+            this.destroyPortal();
+        }
+    }
+    // ========================================
+    // LISTENERS
+    // ========================================
+    /**
+     * Handles clicks outside the component to close the dropdown.
+     *
+     * Flow:
+     * 1. Checks if dropdown is open.
+     * 2. Checks if click target is inside the component or the portal dropdown.
+     * 3. If outside both, closes the dropdown.
+     *
+     * @param ev - The mouse event.
+     */
+    handleWindowClick(ev) {
+        if (!this.open)
+            return;
+        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();
+        }
+    }
+    /**
+     * Handles keyboard navigation and actions.
+     *
+     * Flow:
+     * - Escape: Closes dropdown.
+     * - Enter: Opens dropdown if closed, or confirms selection if open.
+     * - Tab: Closes dropdown if open (to allow focus to move).
+     *
+     * @param ev - The keyboard event.
+     */
+    handleKeydown(ev) {
+        if (this.disabled)
+            return;
+        switch (ev.key) {
+            case 'Escape':
+                ev.preventDefault();
+                this.closeDropdown();
+                break;
+            case 'Enter':
+                ev.preventDefault();
+                if (!this.open) {
+                    this.openDropdown();
+                }
+                else {
+                    this.confirmSelection();
+                }
+                break;
+            case 'Tab':
+                if (this.open) {
+                    this.closeDropdown();
+                }
+                break;
+        }
+    }
+    // ========================================
+    // PUBLIC METHODS
+    // ========================================
+    /**
+     * Focus the time picker input programmatically.
+     * @returns Promise<void>
+     */
+    async setFocus() {
+        this.inputRef?.focus();
+        this.focused = true;
+    }
+    /**
+     * Remove focus from the time picker input programmatically.
+     * @returns Promise<void>
+     */
+    async setBlur() {
+        this.inputRef?.blur();
+        this.focused = false;
+    }
+    // ========================================
+    // PRIVATE METHODS
+    // ========================================
+    /**
+     * Parses a time string into internal state (hour, minute, second, period).
+     * Handles both 12-hour and 24-hour formats based on configuration.
+     *
+     * @param timeStr - The time string (e.g., "13:30:00").
+     */
+    parseValue(timeStr) {
+        if (!timeStr)
+            return;
+        // Parse HH:mm:ss or HH:mm
+        const parts = timeStr.split(':');
+        if (parts.length >= 2) {
+            let hour = parseInt(parts[0], 10);
+            const minute = parseInt(parts[1], 10);
+            const second = parts[2] ? parseInt(parts[2], 10) : 0;
+            if (this.use12Hours) {
+                if (hour >= 12) {
+                    this.selectedPeriod = 'PM';
+                    if (hour > 12)
+                        hour -= 12;
+                }
+                else {
+                    this.selectedPeriod = 'AM';
+                    if (hour === 0)
+                        hour = 12;
+                }
+            }
+            this.selectedHour = hour;
+            this.selectedMinute = minute;
+            this.selectedSecond = second;
+        }
+    }
+    /**
+     * Formats the current internal time state into a display string.
+     * Respects the `format` prop and `use12Hours` configuration.
+     *
+     * @returns string - The formatted time string.
+     */
+    formatTime() {
+        let hour = this.selectedHour;
+        if (this.use12Hours) {
+            if (this.selectedPeriod === 'PM' && hour !== 12) {
+                hour += 12;
+            }
+            else if (this.selectedPeriod === 'AM' && hour === 12) {
+                hour = 0;
+            }
+        }
+        const h = String(hour).padStart(2, '0');
+        const m = String(this.selectedMinute).padStart(2, '0');
+        const s = String(this.selectedSecond).padStart(2, '0');
+        let result = this.format
+            .replace('HH', h)
+            .replace('mm', m)
+            .replace('ss', s);
+        if (this.use12Hours) {
+            result = result.replace('A', this.selectedPeriod);
+        }
+        return result;
+    }
+    /**
+     * Generates the standard HH:mm:ss value string from internal state.
+     * Always returns 24-hour format for the `value` prop.
+     *
+     * @returns string - HH:mm:ss formatted string.
+     */
+    getValueString() {
+        let hour = this.selectedHour;
+        if (this.use12Hours) {
+            if (this.selectedPeriod === 'PM' && hour !== 12) {
+                hour += 12;
+            }
+            else if (this.selectedPeriod === 'AM' && hour === 12) {
+                hour = 0;
+            }
+        }
+        const h = String(hour).padStart(2, '0');
+        const m = String(this.selectedMinute).padStart(2, '0');
+        const s = String(this.selectedSecond).padStart(2, '0');
+        return `${h}:${m}:${s}`;
+    }
+    /**
+     * Opens the dropdown menu if not disabled.
+     */
+    openDropdown() {
+        if (this.disabled || this.open)
+            return;
+        this.open = true;
+    }
+    /**
+     * Closes the dropdown menu.
+     */
+    closeDropdown() {
+        if (!this.open)
+            return;
+        this.open = false;
+    }
+    // ========================================
+    // PORTAL MANAGEMENT
+    // ========================================
+    /**
+     * Gets the wrapper element to anchor the portal.
+     * @returns HTMLElement | undefined
+     */
+    getWrapperEl() {
+        return this.wrapperRef || undefined;
+    }
+    /**
+     * Creates a new portal instance or updates an existing one.
+     * Sets the portal target, placement, and content.
+     */
+    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,
+            });
+        }
+    }
+    /**
+     * Updates the content of an existing portal.
+     * Called when internal state changes while the dropdown is open.
+     */
+    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,
+        });
+    }
+    /**
+     * Destroys the portal instance and clears the reference.
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+        }
+    }
+    // ========================================
+    // BUILD DROPDOWN ELEMENT
+    // ========================================
+    /**
+     * Constructs the dropdown content element for the portal.
+     *
+     * Flow:
+     * 1. Creates a custom `x-time-picker-dropdown-content` element.
+     * 2. Assigns current state (selected time, config, steps, disabled rules) to the element properties.
+     * 3. Attaches event listeners:
+     *    - `xTimeChange`: Updates local state and portal when user picks time.
+     *    - `xNowClick`: Handles "Now" button click.
+     *    - `xOkClick`: Handles "OK" button click to confirm.
+     *
+     * @returns HTMLElement - The configured dropdown element.
+     */
+    buildDropdownElement() {
+        const dropdownEl = document.createElement('x-time-picker-dropdown-content');
+        const classes = {
+            'x-time-picker-dropdown': true,
+            'x-time-picker-dropdown-hidden': !this.open,
+            [`x-time-picker-dropdown-placement-${this.placement}`]: true,
+        };
+        dropdownEl.dropdownClasses = classes;
+        dropdownEl.dropdownStyle = {};
+        dropdownEl.selectedHour = this.selectedHour;
+        dropdownEl.selectedMinute = this.selectedMinute;
+        dropdownEl.selectedSecond = this.selectedSecond;
+        dropdownEl.use12Hours = this.use12Hours;
+        dropdownEl.showSecond = this.showSecond;
+        dropdownEl.showNow = this.showNow;
+        dropdownEl.hourStep = this.hourStep;
+        dropdownEl.minuteStep = this.minuteStep;
+        dropdownEl.secondStep = this.secondStep;
+        dropdownEl.selectedPeriod = this.selectedPeriod || 'AM';
+        if (this.disabledTime) {
+            dropdownEl.disabledHours = this.disabledTime.disabledHours;
+            dropdownEl.disabledMinutes = this.disabledTime.disabledMinutes;
+            dropdownEl.disabledSeconds = this.disabledTime.disabledSeconds;
+        }
+        // Add event listeners
+        dropdownEl.addEventListener('xTimeChange', ((e) => {
+            const { hour, minute, second, period } = e.detail;
+            this.selectedHour = hour;
+            this.selectedMinute = minute;
+            this.selectedSecond = second;
+            if (period)
+                this.selectedPeriod = period;
+            this.updatePortal();
+        }));
+        dropdownEl.addEventListener('xNowClick', (() => {
+            this.handleNowClick();
+        }));
+        dropdownEl.addEventListener('xOkClick', (() => {
+            this.confirmSelection();
+        }));
+        return dropdownEl;
+    }
+    // ========================================
+    // SCROLL & SELECTION
+    // ========================================
+    /**
+     * Scroll dropdown to selected items.
+     * This is a placeholder as the scrolling logic is delegated to the dropdown component.
+     */
+    scrollToSelected() {
+        // Scrolling is now handled by the dropdown content component
+    }
+    /**
+     * Confirms the current selection and closes the dropdown.
+     *
+     * Flow:
+     * 1. Formats the current time into `value` (24h) and `inputValue` (display format).
+     * 2. Emits `xChange` event with full details.
+     * 3. Closes the dropdown.
+     */
+    confirmSelection() {
+        const valueStr = this.getValueString();
+        this.value = valueStr;
+        this.inputValue = this.formatTime();
+        this.xChange.emit({
+            value: valueStr,
+            timeString: this.inputValue,
+            hour: this.selectedHour,
+            minute: this.selectedMinute,
+            second: this.selectedSecond,
+        });
+        this.closeDropdown();
+    }
+    /**
+     * Handles the "Now" button click.
+     * Selects the current system time and confirms immediately.
+     */
+    handleNowClick() {
+        const now = new Date();
+        let hour = now.getHours();
+        if (this.use12Hours) {
+            if (hour >= 12) {
+                this.selectedPeriod = 'PM';
+                if (hour > 12)
+                    hour -= 12;
+            }
+            else {
+                this.selectedPeriod = 'AM';
+                if (hour === 0)
+                    hour = 12;
+            }
+        }
+        this.selectedHour = hour;
+        this.selectedMinute = now.getMinutes();
+        this.selectedSecond = now.getSeconds();
+        this.confirmSelection();
+    }
+    /**
+     * Handles the clear icon click.
+     * Resets the value to empty string and emits change.
+     *
+     * @param e - The mouse event.
+     */
+    handleClear(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.value = '';
+        this.inputValue = '';
+        this.selectedHour = 0;
+        this.selectedMinute = 0;
+        this.selectedSecond = 0;
+        this.xChange.emit({
+            value: null,
+            timeString: '',
+            hour: 0,
+            minute: 0,
+            second: 0,
+        });
+    }
+    /**
+     * Handles focus events on the input.
+     * Opens the dropdown and emits `xFocus`.
+     *
+     * @param e - The focus event.
+     */
+    handleInputFocus = (e) => {
+        this.focused = true;
+        this.openDropdown();
+        this.xFocus.emit(e);
+    };
+    /**
+     * Handles blur events on the input.
+     * Uses a timeout to allow for potential clicks inside the dropdown.
+     * Emits `xBlur`.
+     *
+     * @param e - The focus event.
+     */
+    handleInputBlur = (e) => {
+        setTimeout(() => {
+            this.focused = false;
+            this.xBlur.emit(e);
+        }, 100);
+    };
+    /**
+     * Sets hovering state to true when mouse enters the wrapper.
+     * Used to show the clear icon.
+     */
+    handleMouseEnter = () => {
+        this.hovering = true;
+    };
+    /**
+     * Sets hovering state to false when mouse leaves the wrapper.
+     */
+    handleMouseLeave = () => {
+        this.hovering = false;
+    };
+    // ========================================
+    // RENDER ICONS
+    // ========================================
+    /**
+     * Renders the clock icon.
+     * @returns JSX.Element
+     */
+    renderClockIcon() {
+        return h("x-icon", { name: getIcon('time') });
+    }
+    /**
+     * Renders the clear icon.
+     * @returns JSX.Element
+     */
+    renderClearIcon() {
+        return h("x-icon", { name: getIcon('clear') });
+    }
+    // ========================================
+    // RENDER
+    // ========================================
+    /**
+     * Main render method for the TimePicker.
+     *
+     * Flow:
+     * 1. Determines if clear icon should be shown (based on value, hover, and config).
+     * 2. Constructs host classes based on state (focused, disabled, size, status).
+     * 3. Renders the wrapper div.
+     * 4. Renders the input element with read-only state (since picking is done via dropdown).
+     * 5. Renders suffix icons (clear or clock).
+     *
+     * @returns JSX.Element
+     */
+    render() {
+        const showClear = this.allowClear && this.value && !this.disabled && this.hovering;
+        const hostClasses = {
+            'x-time-picker': true,
+            'x-time-picker-focused': this.focused,
+            'x-time-picker-disabled': this.disabled,
+            'x-time-picker-borderless': !this.bordered,
+            'x-time-picker-open': this.open,
+            [`x-time-picker-${this.size}`]: true,
+            [`x-time-picker-status-${this.status}`]: !!this.status,
+        };
+        return (h(Host, { key: '2d1c34e7fdd47198cb3c7fcba371efeb0f0e52b1', class: hostClasses }, h("div", { key: '91556b58579b41e887d0290608d3a4137e517184', ref: el => (this.wrapperRef = el), class: {
+                'x-time-picker-wrapper': true,
+                'disabled': this.disabled,
+            }, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'fbfdf3442817c35bb29f3c96bbe5c9aac017b6aa', class: "x-time-picker-input", onClick: () => this.openDropdown() }, h("input", { key: '4d7f00a4d18e7034b18a8271ff067bda17b186c5', 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 || true, autoComplete: "off", onFocus: this.handleInputFocus, onBlur: this.handleInputBlur })), h("span", { key: 'b04f94f4bf630ef4e93185f402e8cd4b19cb865d', class: "x-time-picker-suffix" }, showClear ? (h("span", { class: "x-time-picker-clear", onClick: e => this.handleClear(e) }, this.renderClearIcon())) : (h("span", { class: "x-time-picker-icon" }, this.renderClockIcon()))))));
+    }
+    static get is() { return "x-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-time-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-time-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-time-picker disabled></x-time-picker>"
+                        }],
+                    "text": "Whether the time 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-time-picker value=\"12:30:00\"></x-time-picker>"
+                        }],
+                    "text": "Current value (HH:mm:ss format)."
+                },
+                "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-time-picker defaultValue=\"09:00:00\"></x-time-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-time-picker placeholder=\"Pick time\"></x-time-picker>"
+                        }],
+                    "text": "Placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "translate('TimePicker.placeholder', {}, 'Select time')"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "TimePickerSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/types.ts::TimePickerSize",
+                            "referenceLocation": "TimePickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker size=\"small\"></x-time-picker>"
+                        }],
+                    "text": "Size of time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker format=\"HH:mm\"></x-time-picker>"
+                        }],
+                    "text": "Time format for display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'HH:mm:ss'"
+            },
+            "bordered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker bordered={false}></x-time-picker>"
+                        }],
+                    "text": "Whether to show border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bordered",
+                "defaultValue": "true"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerStatus",
+                    "resolved": "\"error\" | \"warning\"",
+                    "references": {
+                        "TimePickerStatus": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/types.ts::TimePickerStatus",
+                            "referenceLocation": "TimePickerStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker status=\"error\"></x-time-picker>"
+                        }],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TimePickerPlacement",
+                    "resolved": "\"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "TimePickerPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/types.ts::TimePickerPlacement",
+                            "referenceLocation": "TimePickerPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker placement=\"bottomRight\"></x-time-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-time-picker allowClear></x-time-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-time-picker open></x-time-picker>"
+                        }],
+                    "text": "Whether the dropdown is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "use12Hours": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker use12Hours></x-time-picker>"
+                        }],
+                    "text": "Use 12-hour format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "use-1-2-hours",
+                "defaultValue": "false"
+            },
+            "hourStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker hourStep={2}></x-time-picker>"
+                        }],
+                    "text": "Hour step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-step",
+                "defaultValue": "1"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker minuteStep={5}></x-time-picker>"
+                        }],
+                    "text": "Minute step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "1"
+            },
+            "secondStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker secondStep={10}></x-time-picker>"
+                        }],
+                    "text": "Second step."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "second-step",
+                "defaultValue": "1"
+            },
+            "showSecond": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker showSecond={false}></x-time-picker>"
+                        }],
+                    "text": "Whether to show seconds column."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-second",
+                "defaultValue": "true"
+            },
+            "showNow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker showNow={false}></x-time-picker>"
+                        }],
+                    "text": "Whether to show \"Now\" button."
+                },
+                "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-time-picker inputId=\"time-input\"></x-time-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-time-picker name=\"time\"></x-time-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-time-picker autofocus></x-time-picker>"
+                        }],
+                    "text": "Auto focus on mount."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autofocus",
+                "defaultValue": "false"
+            },
+            "inputReadOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker inputReadOnly></x-time-picker>"
+                        }],
+                    "text": "Whether input is read only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "input-read-only",
+                "defaultValue": "false"
+            },
+            "disabledTime": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisabledTimeConfig",
+                    "resolved": "DisabledTimeConfig",
+                    "references": {
+                        "DisabledTimeConfig": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/types.ts::DisabledTimeConfig",
+                            "referenceLocation": "DisabledTimeConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker disabledTime={{ disabledHours: () => [0] }}></x-time-picker>"
+                        }],
+                    "text": "Disabled time configuration."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {},
+            "hovering": {},
+            "selectedHour": {},
+            "selectedMinute": {},
+            "selectedSecond": {},
+            "selectedPeriod": {},
+            "inputValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker onXChange={(ev) => console.log(ev.detail)}></x-time-picker>"
+                        }],
+                    "text": "Emitted when value changes."
+                },
+                "complexType": {
+                    "original": "TimePickerChangeEventDetail",
+                    "resolved": "TimePickerChangeEventDetail",
+                    "references": {
+                        "TimePickerChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-time-picker/types.ts::TimePickerChangeEventDetail",
+                            "referenceLocation": "TimePickerChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-time-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-time-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-time-picker onXBlur={(ev) => console.log(ev)}></x-time-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-time-picker onXFocus={(ev) => console.log(ev)}></x-time-picker>"
+                        }],
+                    "text": "Emitted on focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    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
+            }];
+    }
+}