@xlabs-store/core 0.0.1

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

@@ -0,0 +1,575 @@
+import { h } from "@stencil/core";
+import { createColor } from "./types";
+/**
+ * @component x-color-picker-panel
+ * @description Internal panel component for color picker. Renders the color selection UI.
+ * This component is rendered inside a portal by x-color-picker.
+ *
+ * @internal
+ */
+export class XColorPickerPanel {
+    el;
+    // ==================== Props ====================
+    /**
+     * Current color value
+     */
+    color;
+    /**
+     * Current format
+     */
+    format = 'hex';
+    /**
+     * Whether to disable alpha slider
+     */
+    disabledAlpha = false;
+    /**
+     * Whether to disable format selector
+     */
+    disabledFormat = false;
+    /**
+     * Preset colors
+     */
+    presets;
+    /**
+     * Whether to show clear button
+     */
+    allowClear = false;
+    // ==================== State ====================
+    formatDropdownOpen = false;
+    // ==================== Events ====================
+    /**
+     * Emitted when color changes during interaction
+     */
+    colorChange;
+    /**
+     * Emitted when color picking is complete (mouse up)
+     */
+    colorChangeComplete;
+    /**
+     * Emitted when format changes
+     */
+    formatChange;
+    /**
+     * Emitted when clear button is clicked
+     */
+    colorClear;
+    // ==================== Private Properties ====================
+    paletteRef;
+    isDragging = false;
+    // ==================== Lifecycle ====================
+    componentDidLoad() {
+        // Initialize if color is provided as string
+        if (!this.color) {
+            this.color = createColor('#1677ff');
+        }
+    }
+    // ==================== Watchers ====================
+    handleColorPropChange(newColor) {
+        if (typeof newColor === 'string') {
+            this.color = createColor(newColor);
+        }
+    }
+    // ==================== Public Methods ====================
+    /**
+     * Update the color externally
+     */
+    async setColor(color) {
+        this.color = typeof color === 'string' ? createColor(color) : color;
+    }
+    // ==================== Event Handlers ====================
+    handlePaletteMouseDown = (e) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.updateColorFromPalette(e);
+        const onMove = (e) => {
+            if (this.isDragging) {
+                this.updateColorFromPalette(e);
+            }
+        };
+        const onUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.colorChangeComplete.emit(this.color);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    updateColorFromPalette(e) {
+        if (!this.paletteRef)
+            return;
+        const rect = this.paletteRef.getBoundingClientRect();
+        const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+        const newHsb = {
+            h: this.color.hsb.h,
+            s: x,
+            b: 1 - y,
+            a: this.color.hsb.a,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+    }
+    handleHueSliderMouseDown = (e) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.updateHueFromSlider(e);
+        const slider = e.currentTarget;
+        const onMove = (e) => {
+            if (this.isDragging) {
+                this.updateHueFromSlider(e, slider);
+            }
+        };
+        const onUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.colorChangeComplete.emit(this.color);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    updateHueFromSlider(e, slider) {
+        const el = slider || e.currentTarget;
+        const rect = el.getBoundingClientRect();
+        const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const newHsb = {
+            ...this.color.hsb,
+            h: percent * 360,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+    }
+    handleAlphaSliderMouseDown = (e) => {
+        e.preventDefault();
+        this.isDragging = true;
+        this.updateAlphaFromSlider(e);
+        const slider = e.currentTarget;
+        const onMove = (e) => {
+            if (this.isDragging) {
+                this.updateAlphaFromSlider(e, slider);
+            }
+        };
+        const onUp = () => {
+            this.isDragging = false;
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            this.colorChangeComplete.emit(this.color);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    };
+    updateAlphaFromSlider(e, slider) {
+        const el = slider || e.currentTarget;
+        const rect = el.getBoundingClientRect();
+        const percent = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+        const newHsb = {
+            ...this.color.hsb,
+            a: percent,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+    }
+    handleFormatChange = (newFormat) => {
+        this.format = newFormat;
+        this.formatDropdownOpen = false;
+        this.formatChange.emit(this.format);
+    };
+    toggleFormatDropdown = (e) => {
+        e.stopPropagation();
+        this.formatDropdownOpen = !this.formatDropdownOpen;
+    };
+    closeFormatDropdown = () => {
+        this.formatDropdownOpen = false;
+    };
+    handleHexInputChange = (e) => {
+        const input = e.target;
+        let hex = input.value.trim();
+        if (!hex.startsWith('#'))
+            hex = '#' + hex;
+        try {
+            this.color = createColor(hex);
+            this.colorChange.emit(this.color);
+            this.colorChangeComplete.emit(this.color);
+        }
+        catch {
+            // Invalid color, reset input
+            input.value = this.color.toHex().toUpperCase();
+        }
+    };
+    handleRgbInputChange = (index, e) => {
+        const input = e.target;
+        const rgb = this.color.toRgb();
+        const values = [rgb.r, rgb.g, rgb.b];
+        values[index] = Math.max(0, Math.min(255, parseInt(input.value) || 0));
+        this.color = createColor({
+            r: values[0],
+            g: values[1],
+            b: values[2],
+            a: rgb.a,
+        });
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handleHsbInputChange = (index, e) => {
+        const input = e.target;
+        const hsb = this.color.toHsb();
+        const values = [hsb.h, hsb.s * 100, hsb.b * 100];
+        values[index] = parseFloat(input.value) || 0;
+        this.color = createColor({
+            h: Math.max(0, Math.min(360, values[0])),
+            s: Math.max(0, Math.min(100, values[1])) / 100,
+            b: Math.max(0, Math.min(100, values[2])) / 100,
+            a: hsb.a,
+        });
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handleAlphaInputChange = (e) => {
+        const input = e.target;
+        const alpha = Math.max(0, Math.min(100, parseInt(input.value) || 0)) / 100;
+        const newHsb = {
+            ...this.color.hsb,
+            a: alpha,
+        };
+        this.color = createColor(newHsb);
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handlePresetColorClick = (colorStr) => {
+        this.color = createColor(colorStr);
+        this.colorChange.emit(this.color);
+        this.colorChangeComplete.emit(this.color);
+    };
+    handleClearClick = () => {
+        this.colorClear.emit();
+    };
+    // ==================== Render ====================
+    renderFormatDropdown() {
+        if (this.disabledFormat)
+            return null;
+        const formats = [
+            { value: 'hex', label: 'HEX' },
+            { value: 'rgb', label: 'RGB' },
+            { value: 'hsb', label: 'HSB' },
+        ];
+        return (h("div", { class: "x-color-picker-format-dropdown" }, h("button", { type: "button", class: "x-color-picker-format-trigger", onClick: this.toggleFormatDropdown, onBlur: () => setTimeout(this.closeFormatDropdown, 150) }, h("span", null, this.format.toUpperCase()), h("svg", { class: { 'x-color-picker-format-arrow': true, 'is-open': this.formatDropdownOpen }, viewBox: "64 64 896 896", width: "1em", height: "1em", fill: "currentColor" }, h("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" }))), this.formatDropdownOpen && (h("div", { class: "x-color-picker-format-menu" }, formats.map((f) => (h("div", { class: {
+                'x-color-picker-format-option': true,
+                'is-selected': this.format === f.value,
+            }, onClick: () => this.handleFormatChange(f.value) }, f.label)))))));
+    }
+    renderInputs() {
+        const color = this.color;
+        const rgb = color.toRgb();
+        const hsb = color.toHsb();
+        if (this.format === 'hex') {
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "text", class: "x-color-picker-input x-color-picker-input-hex", value: color.toHex().toUpperCase(), maxLength: 8, onChange: this.handleHexInputChange }), h("span", { class: "x-color-picker-input-label" }, "#")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+        }
+        else if (this.format === 'rgb') {
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.r), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "R")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.g), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "G")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(rgb.b), min: 0, max: 255, onChange: (e) => this.handleRgbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(rgb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+        }
+        else {
+            return (h("div", { class: "x-color-picker-input-group" }, h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.h), min: 0, max: 360, onChange: (e) => this.handleHsbInputChange(0, e) }), h("span", { class: "x-color-picker-input-label" }, "H")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.s * 100), min: 0, max: 100, onChange: (e) => this.handleHsbInputChange(1, e) }), h("span", { class: "x-color-picker-input-label" }, "S")), h("div", { class: "x-color-picker-input-wrapper" }, h("input", { type: "number", class: "x-color-picker-input", value: Math.round(hsb.b * 100), min: 0, max: 100, onChange: (e) => this.handleHsbInputChange(2, e) }), h("span", { class: "x-color-picker-input-label" }, "B")), !this.disabledAlpha && (h("div", { class: "x-color-picker-input-wrapper x-color-picker-input-alpha-wrapper" }, h("input", { type: "number", class: "x-color-picker-input x-color-picker-input-alpha", value: Math.round(hsb.a * 100), min: 0, max: 100, onChange: this.handleAlphaInputChange }), h("span", { class: "x-color-picker-input-label" }, "%")))));
+        }
+    }
+    renderPresets() {
+        if (!this.presets || this.presets.length === 0)
+            return null;
+        return this.presets.map((preset) => (h("div", { class: "x-color-picker-presets" }, preset.label && (h("div", { class: "x-color-picker-presets-label" }, h("span", null, preset.label))), h("div", { class: "x-color-picker-presets-colors" }, preset.colors.map((presetColor) => {
+            const colorStr = typeof presetColor === 'string'
+                ? presetColor
+                : presetColor.color || '#000';
+            return (h("div", { class: "x-color-picker-preset-color", onClick: () => this.handlePresetColorClick(colorStr) }, h("div", { class: "x-color-picker-preset-color-inner", style: { background: colorStr } })));
+        })))));
+    }
+    render() {
+        if (!this.color)
+            return null;
+        const hsb = this.color.toHsb();
+        return (h("div", { class: "x-color-picker-panel" }, h("div", { class: "x-color-picker-palette", ref: (el) => (this.paletteRef = el), style: { background: `hsl(${hsb.h}, 100%, 50%)` }, onMouseDown: this.handlePaletteMouseDown }, h("div", { class: "x-color-picker-palette-saturation" }), h("div", { class: "x-color-picker-palette-brightness" }), h("div", { class: "x-color-picker-palette-handler", style: {
+                left: `${hsb.s * 100}%`,
+                top: `${(1 - hsb.b) * 100}%`,
+                background: this.color.toHexString(),
+            } })), h("div", { class: "x-color-picker-slider-container" }, h("div", { class: "x-color-picker-slider-group" }, h("div", { class: "x-color-picker-slider x-color-picker-slider-hue", onMouseDown: this.handleHueSliderMouseDown }, h("div", { class: "x-color-picker-slider-rail" }), h("div", { class: "x-color-picker-slider-handle", style: { left: `${(hsb.h / 360) * 100}%` } })), h("div", { class: "x-color-picker-slider-preview" }, h("div", { class: "x-color-picker-slider-preview-inner", style: { background: this.color.toCssString() } }))), !this.disabledAlpha && (h("div", { class: "x-color-picker-slider-group" }, h("div", { class: "x-color-picker-slider x-color-picker-slider-alpha", onMouseDown: this.handleAlphaSliderMouseDown }, h("div", { class: "x-color-picker-slider-rail" }), h("div", { class: "x-color-picker-slider-alpha-gradient", style: {
+                background: `linear-gradient(to right, transparent, ${this.color.toHexString()})`,
+            } }), h("div", { class: "x-color-picker-slider-handle", style: { left: `${hsb.a * 100}%` } }))))), h("div", { class: "x-color-picker-input-container" }, this.renderFormatDropdown(), this.renderInputs()), this.renderPresets(), this.allowClear && (h("button", { type: "button", class: "x-color-picker-clear-btn", onClick: this.handleClearClick }, "Clear"))));
+    }
+    static get is() { return "x-color-picker-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-color-picker-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-color-picker-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "Color",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::Color",
+                            "referenceLocation": "Color"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current color value"
+                },
+                "getter": false,
+                "setter": 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": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current format"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'hex'"
+            },
+            "disabledAlpha": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to 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": [],
+                    "text": "Whether to disable format selector"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-format",
+                "defaultValue": "false"
+            },
+            "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": [],
+                    "text": "Preset colors"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "allowClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show clear button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-clear",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "formatDropdownOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "colorChange",
+                "name": "colorChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when color changes during interaction"
+                },
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "Color",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::Color",
+                            "referenceLocation": "Color"
+                        }
+                    }
+                }
+            }, {
+                "method": "colorChangeComplete",
+                "name": "colorChangeComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when color picking is complete (mouse up)"
+                },
+                "complexType": {
+                    "original": "Color",
+                    "resolved": "Color",
+                    "references": {
+                        "Color": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::Color",
+                            "referenceLocation": "Color"
+                        }
+                    }
+                }
+            }, {
+                "method": "formatChange",
+                "name": "formatChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when format changes"
+                },
+                "complexType": {
+                    "original": "ColorFormat",
+                    "resolved": "\"hex\" | \"hsb\" | \"rgb\"",
+                    "references": {
+                        "ColorFormat": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-color-picker/types.ts::ColorFormat",
+                            "referenceLocation": "ColorFormat"
+                        }
+                    }
+                }
+            }, {
+                "method": "colorClear",
+                "name": "colorClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setColor": {
+                "complexType": {
+                    "signature": "(color: Color | string) => Promise<void>",
+                    "parameters": [{
+                            "name": "color",
+                            "type": "string | Color",
+                            "docs": ""
+                        }],
+                    "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<void>"
+                },
+                "docs": {
+                    "text": "Update the color externally",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "handleColorPropChange"
+            }];
+    }
+}