@xlabs-store/core 0.0.1

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

@@ -0,0 +1,1209 @@
+import { Host, h, } from "@stencil/core";
+import { PortalController } from "../x-portal";
+import { getIcon } from "../../utils/config";
+import { createColor } from "./types";
+/**
+ * @component x-color-picker
+ * @description Color picker component following Ant Design specification.
+ * Uses x-color-picker-panel component rendered in a portal.
+ *
+ * @slot - Custom trigger content
+ *
+ * @example
+ * <x-color-picker value="#1677ff"></x-color-picker>
+ */
+export class XColorPicker {
+    /**
+     * Host element reference.
+     */
+    el;
+    // ==================== Props ====================
+    /**
+     * Allow clearing color selected
+     * @default false
+     * @example
+     * <x-color-picker allowClear></x-color-picker>
+     */
+    allowClear = false;
+    /**
+     * Default value of color
+     * @example
+     * <x-color-picker defaultValue="#ff4d4f"></x-color-picker>
+     */
+    defaultValue;
+    /**
+     * Default format of color
+     * @default 'hex'
+     * @example
+     * <x-color-picker defaultFormat="rgb"></x-color-picker>
+     */
+    defaultFormat = 'hex';
+    /**
+     * Disable ColorPicker
+     * @default false
+     * @example
+     * <x-color-picker disabled></x-color-picker>
+     */
+    disabled = false;
+    /**
+     * Disable Alpha slider
+     * @default false
+     * @example
+     * <x-color-picker disabledAlpha></x-color-picker>
+     */
+    disabledAlpha = false;
+    /**
+     * Disable format selector
+     * @default false
+     * @example
+     * <x-color-picker disabledFormat></x-color-picker>
+     */
+    disabledFormat = false;
+    /**
+     * Format of color
+     * @example
+     * <x-color-picker format="hsb"></x-color-picker>
+     */
+    format;
+    /**
+     * Whether to show popup
+     * @example
+     * <x-color-picker open></x-color-picker>
+     */
+    open;
+    /**
+     * Preset colors
+     * @example
+     * <x-color-picker presets={[{ label: 'Primary', colors: ['#1677ff'] }]}></x-color-picker>
+     */
+    presets;
+    /**
+     * Placement of popup
+     * @default 'bottomLeft'
+     * @example
+     * <x-color-picker placement="topLeft"></x-color-picker>
+     */
+    placement = 'bottomLeft';
+    /**
+     * Show color text
+     * @default false
+     * @example
+     * <x-color-picker showText></x-color-picker>
+     */
+    showText = false;
+    /**
+     * Size of trigger
+     * @default 'middle'
+     * @example
+     * <x-color-picker size="small"></x-color-picker>
+     */
+    size = 'middle';
+    /**
+     * Trigger mode
+     * @default 'click'
+     * @example
+     * <x-color-picker trigger="hover"></x-color-picker>
+     */
+    trigger = 'click';
+    /**
+     * Value of color
+     * @example
+     * <x-color-picker value="#1677ff"></x-color-picker>
+     */
+    value;
+    /**
+     * Custom class names
+     * @example
+     * <x-color-picker classNames={{ root: 'my-color-picker' }}></x-color-picker>
+     */
+    classNames;
+    /**
+     * Custom styles
+     * @example
+     * <x-color-picker styles={{ root: { minWidth: '120px' } }}></x-color-picker>
+     */
+    styles;
+    // ==================== Events ====================
+    /**
+     * Callback when value is changed
+     * @example
+     * <x-color-picker onXChange={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xChange;
+    /**
+     * Called when color pick ends
+     * @example
+     * <x-color-picker onXChangeComplete={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xChangeComplete;
+    /**
+     * Callback when format is changed
+     * @example
+     * <x-color-picker onXFormatChange={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xFormatChange;
+    /**
+     * Callback when open is changed
+     * @example
+     * <x-color-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-color-picker>
+     */
+    xOpenChange;
+    /**
+     * Called when clear
+     * @example
+     * <x-color-picker onXClear={() => {}}></x-color-picker>
+     */
+    xClear;
+    // ==================== State ====================
+    /**
+     * Internal open state for uncontrolled mode.
+     */
+    internalOpen = false;
+    /**
+     * Internal color format.
+     */
+    internalFormat = 'hex';
+    /**
+     * Internal color object.
+     */
+    internalColor = null;
+    /**
+     * Cleared state flag.
+     */
+    isCleared = false;
+    // ==================== Private Properties ====================
+    /**
+     * Trigger element reference.
+     */
+    triggerRef;
+    /**
+     * Portal instance for panel.
+     */
+    portalInstance = null;
+    /**
+     * Panel element reference.
+     */
+    panelElement = null;
+    /**
+     * Dragging flag for hover behavior.
+     */
+    isDragging = false;
+    // ==================== Lifecycle ====================
+    /**
+     * Initialize format and color.
+     * @returns void
+     */
+    componentWillLoad() {
+        // Initialize format
+        this.internalFormat = this.format ?? this.defaultFormat;
+        // Initialize color
+        const initialValue = this.value ?? this.defaultValue ?? '#1677ff';
+        if (typeof initialValue === 'string') {
+            this.internalColor = createColor(initialValue);
+        }
+    }
+    /**
+     * Cleanup portal on disconnect.
+     * @returns void
+     */
+    disconnectedCallback() {
+        this.destroyPortal();
+    }
+    // ==================== Watchers ====================
+    /**
+     * Sync internal color when value changes.
+     * @param newValue - New color value.
+     * @returns void
+     */
+    handleValueChange(newValue) {
+        if (typeof newValue === 'string') {
+            this.internalColor = createColor(newValue);
+            this.isCleared = false;
+        }
+    }
+    /**
+     * Sync format when format prop changes.
+     * @param newFormat - New format.
+     * @returns void
+     */
+    handleFormatChange(newFormat) {
+        if (newFormat) {
+            this.internalFormat = newFormat;
+        }
+    }
+    /**
+     * Sync open state when controlled prop changes.
+     * @param newOpen - Open state.
+     * @returns void
+     */
+    handleOpenPropChange(newOpen) {
+        if (newOpen !== undefined) {
+            this.setOpen(newOpen);
+        }
+    }
+    // ==================== Listeners ====================
+    /**
+     * Close panel on outside click.
+     *
+     * Flow:
+     * 1. Checks if panel is open.
+     * 2. Determines click target.
+     * 3. Checks if click is inside the trigger element or the portal panel.
+     * 4. If outside both, closes the panel by calling \`setOpen(false)\`.
+     *
+     * @param e - Mouse event.
+     * @returns void
+     */
+    handleDocumentClick(e) {
+        if (!this.internalOpen)
+            return;
+        const path = e.composedPath();
+        const isInsideTrigger = path.includes(this.el);
+        const portalEl = this.portalInstance?.getElement();
+        const isInsidePanel = portalEl ? path.includes(portalEl) : false;
+        if (!isInsideTrigger && !isInsidePanel) {
+            this.setOpen(false);
+        }
+    }
+    /**
+     * Close panel on Escape key.
+     * @param e - Keyboard event.
+     * @returns void
+     */
+    handleKeydown(e) {
+        if (e.key === 'Escape' && this.internalOpen) {
+            this.setOpen(false);
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Get current color object
+     * @returns Promise<Color | null>
+     * @example
+     * const color = await el.getColor()
+     */
+    async getColor() {
+        return this.internalColor;
+    }
+    // ==================== Private Methods ====================
+    /**
+     * Update open state and portal.
+     *
+     * Flow:
+     * 1. Checks if disabled; returns if true.
+     * 2. Updates `internalOpen` state.
+     * 3. Emits `xOpenChange` event.
+     * 4. Calls `updatePortal` (if opening) or `destroyPortal` (if closing).
+     *
+     * @param open - Open state.
+     * @returns void
+     */
+    setOpen(open) {
+        if (this.disabled)
+            return;
+        this.internalOpen = open;
+        this.xOpenChange.emit({ open });
+        if (open) {
+            this.updatePortal();
+        }
+        else {
+            this.destroyPortal();
+        }
+    }
+    /**
+     * Handle trigger click.
+     * @returns void
+     */
+    handleTriggerClick = () => {
+        if (this.trigger === 'click') {
+            this.setOpen(!this.internalOpen);
+        }
+    };
+    /**
+     * Handle trigger mouse enter.
+     * @returns void
+     */
+    handleTriggerMouseEnter = () => {
+        if (this.trigger === 'hover') {
+            this.setOpen(true);
+        }
+    };
+    /**
+     * Handle trigger mouse leave.
+     * @returns void
+     */
+    handleTriggerMouseLeave = () => {
+        if (this.trigger === 'hover' && !this.isDragging) {
+            const portalEl = this.portalInstance?.getElement();
+            setTimeout(() => {
+                if (!portalEl?.matches(':hover') && !this.el.matches(':hover')) {
+                    this.setOpen(false);
+                }
+            }, 100);
+        }
+    };
+    /**
+     * Handle clear action.
+     * @param e - Event.
+     * @returns void
+     */
+    handleClear = (e) => {
+        e.stopPropagation();
+        this.isCleared = true;
+        this.xClear.emit();
+    };
+    // ==================== Portal Management ====================
+    /**
+     * Build color picker panel element.
+     * @returns HTMLElement
+     */
+    buildPanelElement() {
+        // Create x-color-picker-panel component
+        const panelEl = document.createElement('x-color-picker-panel');
+        // Set props on the panel element
+        panelEl.color = this.internalColor;
+        panelEl.format = this.internalFormat;
+        panelEl.disabledAlpha = this.disabledAlpha;
+        panelEl.disabledFormat = this.disabledFormat;
+        panelEl.presets = this.presets;
+        panelEl.allowClear = this.allowClear;
+        // Apply custom class and styles
+        if (this.classNames?.popup) {
+            panelEl.classList.add(...this.classNames.popup.split(' '));
+        }
+        if (this.styles?.popup) {
+            Object.assign(panelEl.style, this.styles.popup);
+        }
+        // Bind events
+        panelEl.addEventListener('colorChange', (e) => {
+            this.handleColorChange(e.detail);
+        });
+        panelEl.addEventListener('colorChangeComplete', (e) => {
+            this.xChangeComplete.emit(e.detail);
+            this.isDragging = false;
+        });
+        panelEl.addEventListener('formatChange', (e) => {
+            this.internalFormat = e.detail;
+            this.xFormatChange.emit({ format: e.detail });
+        });
+        panelEl.addEventListener('colorClear', () => {
+            this.isCleared = true;
+            this.xClear.emit();
+            this.setOpen(false);
+        });
+        // Track dragging state
+        panelEl.addEventListener('mousedown', () => {
+            this.isDragging = true;
+        });
+        return panelEl;
+    }
+    /**
+     * Get trigger element for portal target.
+     * @returns HTMLElement
+     */
+    getWrapperEl() {
+        return this.triggerRef;
+    }
+    /**
+     * Create or update portal for panel.
+     *
+     * Flow:
+     * 1. Checks if `internalOpen` is true.
+     * 2. Builds or reuses the panel element.
+     * 3. Uses `PortalController` to render the panel:
+     *    - Creates new instance if none exists.
+     *    - Updates existing instance with new content/position.
+     * 4. Requests animation frame to ensure position update.
+     *
+     * @returns void
+     */
+    updatePortal() {
+        if (!this.internalOpen) {
+            this.destroyPortal();
+            return;
+        }
+        this.panelElement = this.buildPanelElement();
+        if (!this.portalInstance) {
+            this.portalInstance = PortalController.create({
+                open: true,
+                target: this.getWrapperEl(),
+                placement: this.placement,
+                content: this.panelElement,
+                zIndex: 1050,
+            });
+        }
+        else {
+            this.portalInstance.update({
+                open: true,
+                target: this.getWrapperEl(),
+                placement: this.placement,
+                content: this.panelElement,
+            });
+        }
+        // Update position after render
+        requestAnimationFrame(() => {
+            if (this.portalInstance) {
+                this.portalInstance.update({});
+            }
+        });
+    }
+    /**
+     * Destroy portal instance if present.
+     * @returns void
+     */
+    destroyPortal() {
+        if (this.portalInstance) {
+            this.portalInstance.destroy();
+            this.portalInstance = null;
+            this.panelElement = null;
+        }
+    }
+    /**
+     * Handle color change from panel.
+     * @param color - New color.
+     * @returns void
+     */
+    handleColorChange(color) {
+        this.internalColor = color;
+        this.isCleared = false;
+        this.value = color.toHexString();
+        this.xChange.emit({
+            color,
+            css: color.toCssString(),
+        });
+        // Update panel element with new color
+        if (this.panelElement) {
+            this.panelElement.color = color;
+        }
+    }
+    // ==================== Render ====================
+    /**
+     * Get display text for current color.
+     * @returns string
+     */
+    getDisplayText() {
+        if (!this.internalColor || this.isCleared)
+            return '';
+        if (typeof this.showText === 'function') {
+            return this.showText(this.internalColor);
+        }
+        switch (this.internalFormat) {
+            case 'rgb':
+                return this.internalColor.toRgbString();
+            case 'hsb':
+                return this.internalColor.toHsbString();
+            default:
+                return this.internalColor.toHexString().toUpperCase();
+        }
+    }
+    /**
+     * Render down arrow icon.
+     * @returns JSX.Element
+     */
+    renderDownArrow() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" />
+        // </svg>
+        h("x-icon", { name: getIcon('arrowDown') }));
+    }
+    /**
+     * Render clear icon.
+     * @returns JSX.Element
+     */
+    renderCloseIcon() {
+        return (
+        // <svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor">
+        //   <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" />
+        // </svg>
+        h("x-icon", { name: getIcon('clear') }));
+    }
+    /**
+     * Render trigger and optional text.
+     * @returns JSX.Element
+     */
+    render() {
+        const hostClasses = {
+            'x-color-picker': true,
+            'x-color-picker-sm': this.size === 'small',
+            'x-color-picker-lg': this.size === 'large',
+            'x-color-picker-disabled': this.disabled,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const colorValue = this.internalColor && !this.isCleared
+            ? this.internalColor.toCssString()
+            : 'transparent';
+        return (h(Host, { key: 'f8f38365b7fd8c36aac0d9dc1799fc568516fea9', class: hostClasses, style: this.styles?.root }, h("div", { key: '8df150a9ac5477f34c21ef391c6a110a9518127e', class: "x-color-picker-trigger", ref: (el) => (this.triggerRef = el), onClick: this.handleTriggerClick, onMouseEnter: this.handleTriggerMouseEnter, onMouseLeave: this.handleTriggerMouseLeave, tabindex: this.disabled ? -1 : 0, role: "button", "aria-haspopup": "true", "aria-expanded": this.internalOpen ? 'true' : 'false' }, h("slot", { key: '77c612bde00f68546e52eb30351f9e26c724bbd8' }, h("div", { key: '19ddcbfc6acea0c985d263abeae54facb1878856', class: {
+                'x-color-picker-color-block': true,
+                'x-color-picker-color-block-cleared': this.isCleared,
+            } }, h("div", { key: 'd6223ba45365f694a1b760fc0779273903a3e080', class: "x-color-picker-color-block-inner", style: { background: colorValue } })), this.showText && (h("span", { key: 'b80debccfafa45df16aeabedfafcc9e0721a3a4d', class: "x-color-picker-text" }, this.getDisplayText())), this.allowClear && !this.isCleared && this.internalColor && (h("span", { key: '8caa5439b9ad31915420be95deb94eff604bc411', class: "x-color-picker-clear", onClick: this.handleClear }, this.renderCloseIcon())), h("span", { key: 'ed22036212268e812ebfe9869918cd31fcebaaef', class: {
+                'x-color-picker-arrow': true,
+                'x-color-picker-arrow-open': this.internalOpen,
+            } }, this.renderDownArrow())))));
+    }
+    static get is() { return "x-color-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-color-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-color-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker allowClear></x-color-picker>"
+                        }],
+                    "text": "Allow clearing color selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorType",
+                    "resolved": "Color | GradientColorStop[] | string",
+                    "references": {
+                        "ColorType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorType",
+                            "referenceLocation": "ColorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker defaultValue=\"#ff4d4f\"></x-color-picker>"
+                        }],
+                    "text": "Default value of color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-value"
+            },
+            "defaultFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorFormat",
+                    "resolved": "\"hex\" | \"hsb\" | \"rgb\"",
+                    "references": {
+                        "ColorFormat": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorFormat",
+                            "referenceLocation": "ColorFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'hex'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker defaultFormat=\"rgb\"></x-color-picker>"
+                        }],
+                    "text": "Default format of color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-format",
+                "defaultValue": "'hex'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker disabled></x-color-picker>"
+                        }],
+                    "text": "Disable ColorPicker"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledAlpha": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker disabledAlpha></x-color-picker>"
+                        }],
+                    "text": "Disable Alpha slider"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-alpha",
+                "defaultValue": "false"
+            },
+            "disabledFormat": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker disabledFormat></x-color-picker>"
+                        }],
+                    "text": "Disable format selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-format",
+                "defaultValue": "false"
+            },
+            "format": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ColorFormat",
+                    "resolved": "\"hex\" | \"hsb\" | \"rgb\"",
+                    "references": {
+                        "ColorFormat": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorFormat",
+                            "referenceLocation": "ColorFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker format=\"hsb\"></x-color-picker>"
+                        }],
+                    "text": "Format of color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker open></x-color-picker>"
+                        }],
+                    "text": "Whether to show popup"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open"
+            },
+            "presets": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PresetColor[]",
+                    "resolved": "PresetColor[]",
+                    "references": {
+                        "PresetColor": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::PresetColor",
+                            "referenceLocation": "PresetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker presets={[{ label: 'Primary', colors: ['#1677ff'] }]}></x-color-picker>"
+                        }],
+                    "text": "Preset colors"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerPlacement",
+                    "resolved": "\"bottom\" | \"bottomLeft\" | \"bottomRight\" | \"top\" | \"topLeft\" | \"topRight\"",
+                    "references": {
+                        "ColorPickerPlacement": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorPickerPlacement",
+                            "referenceLocation": "ColorPickerPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottomLeft'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker placement=\"topLeft\"></x-color-picker>"
+                        }],
+                    "text": "Placement of popup"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottomLeft'"
+            },
+            "showText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | ((color: Color) => string)",
+                    "resolved": "((color: Color) => string) | boolean",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::Color",
+                            "referenceLocation": "Color"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker showText></x-color-picker>"
+                        }],
+                    "text": "Show color text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-text",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerSize",
+                    "resolved": "\"large\" | \"middle\" | \"small\"",
+                    "references": {
+                        "ColorPickerSize": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorPickerSize",
+                            "referenceLocation": "ColorPickerSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'middle'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker size=\"small\"></x-color-picker>"
+                        }],
+                    "text": "Size of trigger"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'middle'"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerTrigger",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {
+                        "ColorPickerTrigger": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorPickerTrigger",
+                            "referenceLocation": "ColorPickerTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'click'"
+                        }, {
+                            "name": "example",
+                            "text": "<x-color-picker trigger=\"hover\"></x-color-picker>"
+                        }],
+                    "text": "Trigger mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "defaultValue": "'click'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ColorType",
+                    "resolved": "Color | GradientColorStop[] | string",
+                    "references": {
+                        "ColorType": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorType",
+                            "referenceLocation": "ColorType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker value=\"#1677ff\"></x-color-picker>"
+                        }],
+                    "text": "Value of color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerClassNames",
+                    "resolved": "ColorPickerClassNames",
+                    "references": {
+                        "ColorPickerClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorPickerClassNames",
+                            "referenceLocation": "ColorPickerClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker classNames={{ root: 'my-color-picker' }}></x-color-picker>"
+                        }],
+                    "text": "Custom class names"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPickerStyles",
+                    "resolved": "ColorPickerStyles",
+                    "references": {
+                        "ColorPickerStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorPickerStyles",
+                            "referenceLocation": "ColorPickerStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker styles={{ root: { minWidth: '120px' } }}></x-color-picker>"
+                        }],
+                    "text": "Custom styles"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalOpen": {},
+            "internalFormat": {},
+            "internalColor": {},
+            "isCleared": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xChange",
+                "name": "xChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker onXChange={(ev) => console.log(ev.detail)}></x-color-picker>"
+                        }],
+                    "text": "Callback when value is changed"
+                },
+                "complexType": {
+                    "original": "ColorChangeEventDetail",
+                    "resolved": "ColorChangeEventDetail",
+                    "references": {
+                        "ColorChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorChangeEventDetail",
+                            "referenceLocation": "ColorChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xChangeComplete",
+                "name": "xChangeComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker onXChangeComplete={(ev) => console.log(ev.detail)}></x-color-picker>"
+                        }],
+                    "text": "Called when color pick ends"
+                },
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "Color",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::Color",
+                            "referenceLocation": "Color"
+                        }
+                    }
+                }
+            }, {
+                "method": "xFormatChange",
+                "name": "xFormatChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker onXFormatChange={(ev) => console.log(ev.detail)}></x-color-picker>"
+                        }],
+                    "text": "Callback when format is changed"
+                },
+                "complexType": {
+                    "original": "FormatChangeEventDetail",
+                    "resolved": "FormatChangeEventDetail",
+                    "references": {
+                        "FormatChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::FormatChangeEventDetail",
+                            "referenceLocation": "FormatChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xOpenChange",
+                "name": "xOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker onXOpenChange={(ev) => console.log(ev.detail)}></x-color-picker>"
+                        }],
+                    "text": "Callback when open is changed"
+                },
+                "complexType": {
+                    "original": "OpenChangeEventDetail",
+                    "resolved": "OpenChangeEventDetail",
+                    "references": {
+                        "OpenChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::OpenChangeEventDetail",
+                            "referenceLocation": "OpenChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "xClear",
+                "name": "xClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<x-color-picker onXClear={() => {}}></x-color-picker>"
+                        }],
+                    "text": "Called when clear"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getColor": {
+                "complexType": {
+                    "signature": "() => Promise<Color | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Color": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::Color",
+                            "referenceLocation": "Color"
+                        }
+                    },
+                    "return": "Promise<Color>"
+                },
+                "docs": {
+                    "text": "Get current color object",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise<Color | null>"
+                        }, {
+                            "name": "example",
+                            "text": "const color = await el.getColor()"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "format",
+                "methodName": "handleFormatChange"
+            }, {
+                "propName": "open",
+                "methodName": "handleOpenPropChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}