import { h } from "@stencil/core";
/**
 * ColorPickerPanel 颜色选择器面板组件
 * 颜色选择器面板，用于嵌入到其他组件中
 */
export class ColorPickerPanel {
    /**
     * 绑定值
     */
    modelValue;
    /**
     * 颜色格式
     */
    colorFormat = 'hex';
    /**
     * 是否显示透明度
     * @default false
     */
    showAlpha = false;
    /**
     * 预定义颜色
     */
    predefine;
    currentColor = '#409EFF';
    /**
     * 值改变事件
     */
    hbChange;
    componentDidLoad() {
        if (this.modelValue) {
            this.currentColor = this.modelValue;
        }
    }
    handleValueChange() {
        if (this.modelValue) {
            this.currentColor = this.modelValue;
        }
    }
    handleColorSelect = (color) => {
        this.currentColor = color;
        this.modelValue = color;
        this.hbChange.emit(color);
    };
    handleInputChange = (e) => {
        const target = e.target;
        this.handleColorSelect(target.value);
    };
    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }
    render() {
        const rgb = this.hexToRgb(this.currentColor);
        const predefinedColors = this.predefine || [
            '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1',
            '#1e90ff', '#c71585', '#000000', '#ffffff', '#808080',
        ];
        return (h("div", { key: '7f5215f6908b85c016b9fc68423d63736adc64ac', class: "hb-color-picker-panel" }, h("div", { key: '6e918eb9cfd1932f6b01bd1b4e34eab37f12d486', class: "hb-color-picker-panel__saturation" }, h("div", { key: '72b61931cb7d87060868328de1675998ebd59ec1', class: "hb-color-picker-panel__saturation-white" }), h("div", { key: 'a4e3f1c4ab9217793e710cf940ec15539eaa2f9d', class: "hb-color-picker-panel__saturation-black" }), h("div", { key: '68f53e538a84d86c6093a56a1cbc566e08a2e43e', class: "hb-color-picker-panel__saturation-pointer", style: {
                left: rgb ? `${(rgb.r / 255) * 100}%` : '50%',
                top: rgb ? `${(1 - rgb.g / 255) * 100}%` : '50%',
            } })), h("div", { key: '990b800e049ea8c5fd421a011486df34754584df', class: "hb-color-picker-panel__controls" }, h("div", { key: 'f2ae82fe0034874c623c259efdaeb4f4101c9b4b', class: "hb-color-picker-panel__hue" }, h("div", { key: '85a4d5b390e52856addafe49f9a467ab9554d895', class: "hb-color-picker-panel__hue-bar" })), this.showAlpha && (h("div", { key: 'c4d984971839bed5d5af92d9a15942f30f44073e', class: "hb-color-picker-panel__alpha" }, h("div", { key: 'b61fd80f873c2c62561f4d814a397e5a8eed2cb6', class: "hb-color-picker-panel__alpha-bar", style: { backgroundColor: this.currentColor } })))), h("div", { key: '64b5d37078471a314c26ef3e3e64c54887310cc1', class: "hb-color-picker-panel__input" }, h("input", { key: '2769607efa327d7b3c9c5e3fda4842a553c30cd2', type: "text", class: "hb-color-picker-panel__input-hex", value: this.currentColor, onInput: this.handleInputChange }), rgb && (h("div", { key: '4d3bf72b243b12f5f39d9c3f9800877a6d1eae9c', class: "hb-color-picker-panel__input-rgb" }, h("input", { key: 'd71850226823825cdc9eacc3cf8ff8a9b4d2c001', type: "number", min: "0", max: "255", value: rgb.r }), h("input", { key: 'ac86df2ab2e50574ddfb4938a85154e58969170e', type: "number", min: "0", max: "255", value: rgb.g }), h("input", { key: '457450f4ccdfe741dc28077a7160c504608cc23c', type: "number", min: "0", max: "255", value: rgb.b })))), this.predefine && this.predefine.length > 0 && (h("div", { key: 'b6ed00f9d32b953c4985a2336ee7901b61c64931', class: "hb-color-picker-panel__predefine" }, predefinedColors.map((color) => (h("div", { class: {
                'hb-color-picker-panel__predefine-color': true,
                'hb-color-picker-panel__predefine-color--selected': color === this.currentColor,
            }, style: { backgroundColor: color }, onClick: () => this.handleColorSelect(color) })))))));
    }
    static get is() { return "hb-color-picker-panel"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["color-picker-panel.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["color-picker-panel.css"]
        };
    }
    static get properties() {
        return {
            "modelValue": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u7ED1\u5B9A\u503C"
                },
                "getter": false,
                "setter": false,
                "attribute": "model-value",
                "reflect": false
            },
            "colorFormat": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'hsl' | 'hsv' | 'hex' | 'rgb'",
                    "resolved": "\"hex\" | \"hsl\" | \"hsv\" | \"rgb\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u989C\u8272\u683C\u5F0F"
                },
                "getter": false,
                "setter": false,
                "attribute": "color-format",
                "reflect": false,
                "defaultValue": "'hex'"
            },
            "showAlpha": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "\u662F\u5426\u663E\u793A\u900F\u660E\u5EA6"
                },
                "getter": false,
                "setter": false,
                "attribute": "show-alpha",
                "reflect": false,
                "defaultValue": "false"
            },
            "predefine": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "\u9884\u5B9A\u4E49\u989C\u8272"
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "currentColor": {}
        };
    }
    static get events() {
        return [{
                "method": "hbChange",
                "name": "hbChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u503C\u6539\u53D8\u4E8B\u4EF6"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "modelValue",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=ColorPickerPanel.js.map
