easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-color-picker.js

@@ -0,0 +1,888 @@
+var Et = Object.defineProperty;
+var ot = (n) => {
+  throw TypeError(n);
+};
+var xt = (n, h, e) => h in n ? Et(n, h, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[h] = e;
+var D = (n, h, e) => xt(n, typeof h != "symbol" ? h + "" : h, e), tt = (n, h, e) => h.has(n) || ot("Cannot " + e);
+var t = (n, h, e) => (tt(n, h, "read from private field"), e ? e.call(n) : h.get(n)), l = (n, h, e) => h.has(n) ? ot("Cannot add the same private member more than once") : h instanceof WeakSet ? h.add(n) : h.set(n, e), d = (n, h, e, a) => (tt(n, h, "write to private field"), a ? a.call(n, e) : h.set(n, e), e), i = (n, h, e) => (tt(n, h, "access private method"), e);
+import { F as Mt } from "../core/FormBase.js";
+import { n as rt } from "./ea-calendar2.js";
+import { C as H } from "../utils/Color.js";
+import { s as kt } from "../css/ea-color-picker.style.js";
+import { E as $t } from "../utils/Variables.js";
+import { B as At } from "./Base.js";
+import { s as Rt } from "../css/ea-color-picker-panel.style.js";
+import "./ea-input.js";
+import { E as G } from "../utils/Utils.js";
+import "./ea-popper.js";
+import "./ea-button.js";
+class Pt extends Event {
+  constructor(h) {
+    super("ea-active-change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = h;
+  }
+}
+class qt extends Event {
+  constructor(h) {
+    super("ea-invalid-color", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = h;
+  }
+}
+var W, x, M, $, P, A, J, q, L, f, B, m, v, s, o, lt, nt, ht, ct, et, I, ut, T, dt, pt, st, it, Z, vt, bt;
+class Lt extends At {
+  constructor() {
+    super();
+    l(this, o);
+    /** @type {HTMLDivElement} */
+    l(this, W);
+    /** @type {HTMLDivElement} */
+    l(this, x);
+    /** @type {HTMLDivElement} */
+    l(this, M);
+    /** @type {HTMLDivElement} */
+    l(this, $);
+    /** @type {HTMLDivElement} */
+    l(this, P);
+    /** @type {HTMLDivElement} */
+    l(this, A);
+    /** @type {HTMLDivElement} */
+    l(this, J);
+    /** @type {HTMLDivElement} */
+    l(this, q);
+    /** @type {HTMLDivElement} */
+    l(this, L);
+    /** @type {HTMLInputElement} */
+    l(this, f);
+    /** @type {HTMLDivElement} */
+    l(this, B);
+    l(this, m, new AbortController());
+    l(this, v, {
+      /** @type {AbortController | null} 饱和度拖拽控制器 */
+      saturationMove: null,
+      /** @type {AbortController | null} 色调拖拽控制器 */
+      hueMove: null,
+      /** @type {AbortController | null} 透明度拖拽控制器 */
+      alphaMove: null
+    });
+    l(this, s, {
+      /** @type {boolean} 是否首次更新值 */
+      isFirstValueUpdate: !1,
+      /** @type {number} 色调值 (0-360) */
+      hue: 0,
+      /** @type {number} 饱和度值 (0-1) */
+      saturation: 1,
+      /** @type {number} 亮度值 (0-1) */
+      value: 1,
+      /** @type {number} 透明度值 (0-1) */
+      alpha: 1,
+      /** @type {import("@/utils/Color").Color} 当前颜色对象 */
+      color: new H(),
+      /** @type {boolean} 是否正在拖拽 */
+      isDragging: !1,
+      /** @type {string} 上一个验证通过的颜色值 */
+      lastValidValue: ""
+    });
+    D(this, "state", this.properties({
+      value: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, s).lastValidValue = e, i(this, o, et).call(this), t(this, I).call(this), i(this, o, Z).call(this);
+        }
+      },
+      "color-format": {
+        type: ["hsl", "hsv", "hex", "rgb", "rgba"],
+        default: () => this.hasAttribute("show-alpha") ? "rgba" : "hex",
+        observer: (e) => {
+          this.value && (this.value = t(this, s).color.toString(e));
+        }
+      },
+      "show-alpha": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      border: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      clearable: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          i(this, o, it).call(this);
+        }
+      }
+    }));
+    D(this, "propStates", this.properties({
+      predefine: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: (e) => {
+          i(this, o, dt).call(this, e);
+        }
+      }
+    }));
+    /**
+     * 更新饱和度面板的背景颜色
+     */
+    l(this, I, () => {
+      const e = new H({
+        h: t(this, s).hue,
+        s: 1,
+        v: 1,
+        a: 1
+      });
+      t(this, x).style.setProperty(
+        "--ea-color-picker-panel-background-color",
+        e.toString(this["color-format"])
+      );
+    });
+    this.stylesheet = Rt, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "value",
+      "color-format",
+      "predefine",
+      "show-alpha",
+      "disabled",
+      "border",
+      "clearable"
+    ];
+  }
+  $render() {
+    const e = rt("color-picker-panel");
+    this.ns = e, this.shadowRoot.innerHTML = this.html(`
+      <div class="${e.b()}" part="container">
+        <div class="${e.e("wrapper")}" part="wrapper">
+          <div class="${e.e("svpanel")}" part="svpanel">
+            <div class="${e.e("cursor")} ${e.e("svpanel-cursor")}" part="svpanel-cursor"></div>
+          </div>
+          <div class="${e.e("hue-slider")} ${e.m("vertical")}" part="hue-slider">
+            <div class="${e.e("thumb")} ${e.e("hue-slider-thumb")}" part="hue-slider-thumb"></div>
+          </div>
+        </div>
+        <div class="${e.e("alpha-slider")}" part="alpha-slider">
+          <div class="${e.e("thumb")} ${e.e("alpha-slider-thumb")}" part="alpha-slider-thumb"></div>
+        </div>
+        <div class="${e.e("predefine")}" part="predefine">
+          <div class="${e.e("colors")}" part="predefine-colors"></div>
+        </div>
+        <div class="${e.e("footer")}" part="footer">
+          <div class="${e.e("text-display")}" part="text-display"></div>
+          <ea-input class="${e.e("color-input")}" part="color-input" type="text" size="small"></ea-input>
+          <section class="${e.e("append")}" part="append">
+            <slot name="footer"></slot>
+          </section>
+        </div>
+      </div>
+    `), d(this, W, this.shadowRoot.querySelector(e.cb())), d(this, x, this.shadowRoot.querySelector(e.ce("svpanel"))), d(this, M, this.shadowRoot.querySelector(
+      e.ce("svpanel-cursor")
+    )), d(this, $, this.shadowRoot.querySelector(e.ce("hue-slider"))), d(this, P, this.shadowRoot.querySelector(e.ce("hue-slider-thumb"))), d(this, A, this.shadowRoot.querySelector(e.ce("alpha-slider"))), d(this, J, this.shadowRoot.querySelector(
+      e.ce("alpha-slider-bar")
+    )), d(this, q, this.shadowRoot.querySelector(
+      e.ce("alpha-slider-thumb")
+    )), d(this, L, this.shadowRoot.querySelector(e.ce("predefine"))), d(this, f, this.shadowRoot.querySelector(e.ce("color-input"))), d(this, B, this.shadowRoot.querySelector(e.ce("text-display"))), this.updateContainerClasslist(), i(this, o, it).call(this);
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, m)) == null || e.abort(), d(this, m, new AbortController()), i(this, o, lt).call(this);
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      this.ns.b("container"),
+      {},
+      {
+        disabled: this.disabled,
+        border: this.border,
+        "show-alpha": this["show-alpha"],
+        clearable: this.clearable
+      }
+    );
+    return t(this, W).className = e, e;
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, m)) == null || e.abort();
+  }
+}
+W = new WeakMap(), x = new WeakMap(), M = new WeakMap(), $ = new WeakMap(), P = new WeakMap(), A = new WeakMap(), J = new WeakMap(), q = new WeakMap(), L = new WeakMap(), f = new WeakMap(), B = new WeakMap(), m = new WeakMap(), v = new WeakMap(), s = new WeakMap(), o = new WeakSet(), /**
+ * 绑定组件事件监听器
+ */
+lt = function() {
+  t(this, x).addEventListener(
+    "mousedown",
+    i(this, o, nt).bind(this),
+    {
+      signal: t(this, m).signal
+    }
+  ), t(this, $).addEventListener("mousedown", i(this, o, ht).bind(this), {
+    signal: t(this, m).signal
+  }), t(this, A).addEventListener(
+    "mousedown",
+    i(this, o, ct).bind(this),
+    {
+      signal: t(this, m).signal
+    }
+  ), t(this, f).addEventListener(
+    "change",
+    i(this, o, ut).bind(this),
+    {
+      signal: t(this, m).signal
+    }
+  ), t(this, f).addEventListener(
+    "blur",
+    i(this, o, vt).bind(this),
+    {
+      signal: t(this, m).signal
+    }
+  ), t(this, L) && t(this, L).addEventListener(
+    "click",
+    i(this, o, pt).bind(this),
+    {
+      signal: t(this, m).signal
+    }
+  );
+}, /**
+ * 处理饱和度和值的更新
+ * @param {MouseEvent} e - 鼠标事件对象
+ */
+nt = function(e) {
+  var c, b;
+  if ((c = t(this, v).saturationMove) == null || c.abort(), (b = t(this, v).hueMove) == null || b.abort(), this.disabled) return;
+  e.preventDefault(), t(this, v).saturationMove = new AbortController(), t(this, s).isDragging = !0;
+  const a = (u) => {
+    const p = t(this, x).getBoundingClientRect(), V = Math.max(0, Math.min(u.clientX - p.left, p.width)), E = Math.max(0, Math.min(u.clientY - p.top, p.height)), C = V / p.width, Q = 1 - E / p.height;
+    t(this, s).saturation = C, t(this, s).value = Q, t(this, s).color.setValue({
+      h: t(this, s).hue,
+      s: C,
+      v: Q,
+      a: t(this, s).alpha
+    }), this.value = t(this, s).color.toString(this["color-format"]), i(this, o, T).call(this), t(this, M).style.left = C * p.width + "px", t(this, M).style.top = (1 - Q) * p.height + "px";
+  };
+  a(e), window.addEventListener("mousemove", a, {
+    signal: t(this, v).saturationMove.signal
+  }), window.addEventListener(
+    "mouseup",
+    () => {
+      var u;
+      (u = t(this, v).saturationMove) == null || u.abort(), t(this, s).isDragging = !1;
+    },
+    {
+      signal: t(this, v).saturationMove.signal
+    }
+  );
+}, /**
+ * 处理色调的更新
+ * @param {MouseEvent} e - 鼠标事件对象
+ */
+ht = function(e) {
+  var c, b;
+  if ((c = t(this, v).hueMove) == null || c.abort(), (b = t(this, v).saturationMove) == null || b.abort(), this.disabled) return;
+  e.preventDefault(), t(this, v).hueMove = new AbortController(), t(this, s).isDragging = !0;
+  const a = (u) => {
+    const p = t(this, $).getBoundingClientRect(), E = (1 - Math.max(0.01, Math.min(u.clientY - p.top, p.height)) / p.height) * 360;
+    t(this, s).hue = E, t(this, s).color.setValue({
+      h: E,
+      s: t(this, s).saturation,
+      v: t(this, s).value,
+      a: t(this, s).alpha
+    }), this.value = t(this, s).color.toString(this["color-format"]), i(this, o, T).call(this), t(this, P).style.top = (1 - E / 360) * p.height + "px", t(this, I).call(this);
+  };
+  a(e), window.addEventListener("mousemove", a, {
+    signal: t(this, v).hueMove.signal
+  }), window.addEventListener(
+    "mouseup",
+    () => {
+      var u;
+      (u = t(this, v).hueMove) == null || u.abort(), t(this, s).isDragging = !1;
+    },
+    {
+      signal: t(this, v).hueMove.signal
+    }
+  );
+}, /**
+ * 处理透明度的更新
+ * @param {MouseEvent} e - 鼠标事件对象
+ */
+ct = function(e) {
+  var c, b, u;
+  if ((c = t(this, v).alphaMove) == null || c.abort(), (b = t(this, v).saturationMove) == null || b.abort(), (u = t(this, v).hueMove) == null || u.abort(), this.disabled) return;
+  e.preventDefault(), t(this, v).alphaMove = new AbortController(), t(this, s).isDragging = !0;
+  const a = (p) => {
+    const V = t(this, A).getBoundingClientRect(), E = Math.max(0, Math.min(p.clientX - V.left, V.width)), C = Number((E / V.width).toFixed(2));
+    Math.abs(t(this, s).alpha - C) > 1e-3 && (t(this, s).alpha = C, t(this, s).color.setValue({
+      h: t(this, s).hue,
+      s: t(this, s).saturation,
+      v: t(this, s).value,
+      a: C
+    }), this.value = t(this, s).color.toString(this["color-format"]), i(this, o, T).call(this), t(this, q).style.left = C * V.width + "px");
+  };
+  a(e), window.addEventListener("mousemove", a, {
+    signal: t(this, v).alphaMove.signal
+  }), window.addEventListener(
+    "mouseup",
+    () => {
+      var p;
+      (p = t(this, v).alphaMove) == null || p.abort(), t(this, s).isDragging = !1;
+    },
+    {
+      signal: t(this, v).alphaMove.signal
+    }
+  );
+}, /**
+ * 更新光标位置
+ */
+et = function() {
+  if (!t(this, s).isFirstValueUpdate) {
+    t(this, s).color.setValue(this.value);
+    const e = t(this, s).color.hsvStrToHsvObject(
+      t(this, s).color.toHsv(!0)
+    );
+    if (e) {
+      const a = parseInt(e.h), c = e.s, b = e.v, u = e.a ? parseFloat(e.a) : 1;
+      t(this, s).hue = a, t(this, s).saturation = c, t(this, s).value = b, t(this, s).alpha = u;
+    }
+    t(this, s).isFirstValueUpdate = !0;
+  }
+  if (t(this, M) && t(this, x)) {
+    const e = t(this, s).saturation, a = t(this, s).value, c = t(this, x).getBoundingClientRect(), b = G.CSS.px2num(
+      this.style.getPropertyValue("--ea-color-picker-panel-svpanel-width")
+    ) || 280, u = G.CSS.px2num(
+      this.style.getPropertyValue("--ea-color-picker-panel-svpanel-height")
+    ) || 180, p = Math.max(
+      0,
+      Math.min(c.width, b),
+      b
+    ), V = Math.max(
+      0,
+      Math.min(c.height, u),
+      u
+    ), E = e * p, C = (1 - a) * V;
+    t(this, M).style.left = E + "px", t(this, M).style.top = C + "px";
+  }
+  if (t(this, P) && t(this, $)) {
+    const e = t(this, s).hue, a = t(this, $).getBoundingClientRect(), c = G.CSS.px2num(
+      this.style.getPropertyValue(
+        "--ea-color-picker-panel-hue-slider-height"
+      )
+    ) || 180, b = Math.max(0, Math.min(a.height, c), c), u = (1 - e / 360) * b;
+    t(this, P).style.top = u + "px";
+  }
+  if (t(this, q) && t(this, A)) {
+    const e = t(this, s).alpha, a = t(this, A).getBoundingClientRect(), c = G.CSS.px2num(
+      this.style.getPropertyValue(
+        "--ea-color-picker-panel-alpha-slider-width"
+      )
+    ) || 280, b = Math.max(0, Math.min(a.width, c), c), u = e * b;
+    t(this, q).style.left = u + "px";
+  }
+}, I = new WeakMap(), /**
+ * 处理颜色输入框变化事件
+ * @param {Event} e - 事件对象
+ */
+ut = function(e) {
+  const a = e.target.value;
+  try {
+    const c = new H(a);
+    this.value = c.toString(this["color-format"]), i(this, o, T).call(this);
+  } catch {
+    t(this, f).value = this.value;
+  }
+}, /**
+ * 触发颜色变化事件
+ */
+T = function() {
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: {
+        value: this.value,
+        color: t(this, s).color
+      },
+      bubbles: !0,
+      composed: !0
+    })
+  ), this.dispatchEvent(
+    new Pt({ value: this.value })
+  );
+}, /**
+ * 渲染预设颜色列表
+ * @param {Array} list - 预设颜色列表
+ */
+dt = function(e) {
+  !e || e.length === 0 || (t(this, L).innerHTML = this.html(
+    e.map(
+      (a) => `
+          <div class="${this.ns.e("predefine-color")}" 
+            part="predefine-color" 
+            style="background-color: ${a}"
+            data-color="${a}"
+          ></div>
+        `
+    ).join("")
+  ));
+}, /**
+ * 处理预设颜色点击事件
+ * @param {MouseEvent} e - 鼠标事件对象
+ */
+pt = function(e) {
+  if (this.disabled) return;
+  const a = e.target.closest(this.ns.ce("predefine-color"));
+  if (!a) return;
+  const c = a.getAttribute("data-color");
+  c && i(this, o, st).call(this, c);
+}, /**
+ * 根据颜色值更新所有相关状态
+ * @param {string} colorValue - 颜色值字符串
+ */
+st = function(e) {
+  i(this, o, Z).call(this), this.value = e, t(this, s).color.setValue(e);
+  const a = t(this, s).color.hsvStrToHsvObject(
+    t(this, s).color.toHsv(!0)
+  );
+  if (a) {
+    const c = parseInt(a.h), b = a.s, u = a.v, p = a.a ? parseFloat(a.a) : 1;
+    t(this, s).hue = c, t(this, s).saturation = b, t(this, s).value = u, t(this, s).alpha = p;
+  }
+  i(this, o, et).call(this), t(this, I).call(this), i(this, o, T).call(this);
+}, /**
+ * 更新文字展示模式
+ */
+it = function() {
+  !t(this, f) || !t(this, B) || (i(this, o, Z).call(this), this.updateContainerClasslist());
+}, /**
+ * 更新颜色输入框的值
+ */
+Z = function() {
+  this.clearable && t(this, f) ? t(this, f).setAttribute("value", this.value) : !this.clearable && t(this, B) && (t(this, B).textContent = this.value);
+}, /**
+ * 处理颜色输入框blur事件
+ * @param {FocusEvent} e - 焦点事件对象
+ */
+vt = function(e) {
+  if (!t(this, f)) return;
+  const a = t(this, f).getAttribute("value") || "";
+  if (!a) {
+    this.value = "", t(this, s).lastValidValue = "";
+    return;
+  }
+  i(this, o, bt).call(this, a) ? (t(this, s).lastValidValue = a, i(this, o, st).call(this, a)) : (t(this, f).setAttribute("value", t(this, s).lastValidValue || ""), this.dispatchEvent(
+    new qt({ value: a })
+  ));
+}, /**
+ * 验证颜色格式是否合法
+ * @param {string} colorValue - 颜色值
+ * @returns {boolean} 是否合法
+ */
+bt = function(e) {
+  return H.isValidColor(e);
+};
+customElements.get("ea-color-picker-panel") || customElements.define("ea-color-picker-panel", Lt);
+class Bt extends Event {
+  constructor() {
+    super("ea-clear", { bubbles: !0, composed: !0 });
+  }
+}
+var k, w, F, K, R, U, S, X, Y, _, y, g, N, r, gt, ft, mt, wt, yt, Ct, at, O, z, j, St, Vt;
+class Dt extends Mt {
+  constructor() {
+    super();
+    l(this, r);
+    /** @type {HTMLDivElement} */
+    l(this, k);
+    /** @type {import("@/common/ea-popper").EaPopper} */
+    l(this, w);
+    /** @type {HTMLDivElement} */
+    l(this, F);
+    /** @type {HTMLDivElement} */
+    l(this, K);
+    /** @type {HTMLDivElement} */
+    l(this, R);
+    /** @type {import("@/components/ea-icon").EaIcon} */
+    l(this, U);
+    /** @type {import("@/components/ea-color-picker-panel").EaColorPickerPanel} */
+    l(this, S);
+    /** @type {HTMLLabelElement} */
+    l(this, X);
+    /** @type {import("@/components/ea-button").EaButton} */
+    l(this, Y);
+    /** @type {import("@/components/ea-button").EaButton} */
+    l(this, _);
+    l(this, y, new AbortController());
+    l(this, g, {
+      /** @type {boolean} 弹窗是否打开 */
+      isOpen: !1,
+      /** @type {import("@/utils/Color").Color} 当前颜色对象 */
+      color: new H(),
+      isPanelDefined: !1,
+      /** @type {string} 打开面板前的颜色值 */
+      previousValue: ""
+    });
+    l(this, N, {
+      /** @type {AbortController | null} 关闭弹窗的控制器 */
+      close: null
+    });
+    D(this, "state", this.properties({
+      label: {
+        type: String,
+        default: "",
+        observer: async (e) => {
+          t(this, X).textContent = e;
+        }
+      },
+      value: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          i(this, r, z).call(this), i(this, r, j).call(this, e), t(this, S).setAttribute("value", e);
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      clearable: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      size: {
+        type: $t,
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      "color-format": {
+        type: ["hsl", "hsv", "hex", "rgb"],
+        default: "hex",
+        observer: (e) => {
+          t(this, S).setAttribute("color-format", e);
+        }
+      },
+      "show-alpha": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, S).setAttribute("show-alpha", e);
+        }
+      },
+      clearable: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          t(this, S).setAttribute("clearable", e);
+        }
+      },
+      tabindex: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+        }
+      },
+      required: {
+        type: Boolean,
+        default: !1
+      }
+    }));
+    D(this, "propState", this.properties({
+      predefine: {
+        props: !0,
+        type: Array,
+        default: [],
+        observer: async (e) => {
+          t(this, g).isPanelDefined || (await customElements.whenDefined("ea-color-picker-panel"), t(this, g).isPanelDefined = !0), t(this, S).predefine = e;
+        }
+      }
+    }));
+    D(this, "popperState", this.properties({
+      placement: {
+        type: [
+          "top",
+          "top-start",
+          "top-end",
+          "bottom",
+          "bottom-start",
+          "bottom-end",
+          "left",
+          "left-start",
+          "left-end",
+          "right",
+          "right-start",
+          "right-end"
+        ],
+        default: "bottom",
+        observer: (e) => {
+          t(this, w).setAttribute("placement", e);
+        }
+      }
+    }));
+    this.stylesheet = kt, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "label",
+      "value",
+      "disabled",
+      "clearable",
+      "size",
+      "color-format",
+      "predefine",
+      "tabindex",
+      "placement",
+      "show-alpha",
+      "required"
+    ];
+  }
+  $render() {
+    const e = rt("color-picker");
+    this.ns = e, this.shadowRoot.innerHTML = this.html(`
+      <label class="${e.e("form-label")}" part="form-label"></label>
+      <div class="${e.b("container")}" part="container" tabindex="${this.tabindex}">
+        <ea-popper 
+          class="${e.e("popper")}" 
+          part="popper"
+          show-arrow="false"
+        >
+          <div class="${e.e("trigger")}" part="trigger" slot="reference">
+            <div class="${e.e("outer")}" part="outer">
+              <div class="${e.e("inner")}" part="inner"></div>
+            </div>
+            <div class="${e.e("icon-wrapper")}" part="icon-wrapper">
+              <ea-icon class="${e.e("icon", "status")}" part="status-icon" icon="icon-cancel"></ea-icon>
+            </div>
+          </div>
+          <ea-color-picker-panel class="${e.e("panel")}" part="panel">
+            <div slot="footer" class="${e.e("footer-actions")}" part="footer-actions">
+              <ea-button class="${e.e("clear-btn")}" part="clear-btn" plain text>clear</ea-button>
+              <ea-button class="${e.e("confirm-btn")}" part="confirm-btn" plain>ok</ea-button>
+            </div>
+          </ea-color-picker-panel>
+        </ea-popper>
+      </div>
+    `), d(this, X, this.shadowRoot.querySelector(e.ce("form-label"))), d(this, k, this.shadowRoot.querySelector(e.cb())), d(this, w, this.shadowRoot.querySelector(e.ce("popper"))), d(this, F, this.shadowRoot.querySelector(e.ce("trigger"))), d(this, K, this.shadowRoot.querySelector(e.ce("outer"))), d(this, R, this.shadowRoot.querySelector(e.ce("inner"))), d(this, U, this.shadowRoot.querySelector(e.ce("icon", "status"))), d(this, S, this.shadowRoot.querySelector(e.ce("panel"))), d(this, Y, this.shadowRoot.querySelector(this.ns.ce("clear-btn"))), d(this, _, this.shadowRoot.querySelector(this.ns.ce("confirm-btn"))), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, y)) == null || e.abort(), d(this, y, new AbortController()), i(this, r, gt).call(this);
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      this.ns.b("container"),
+      {
+        ["--" + this.size]: this.size
+      },
+      {
+        "has-value": this.value,
+        disabled: this.disabled
+      }
+    );
+    return t(this, k).className = e, e;
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, y)) == null || e.abort();
+  }
+  /**
+   * 手动显示颜色选择器面板
+   */
+  show() {
+    i(this, r, at).call(this);
+  }
+  /**
+   * 手动隐藏颜色选择器面板
+   */
+  hide() {
+    i(this, r, O).call(this);
+  }
+  /**
+   * 使颜色选择器获得焦点
+   */
+  focus() {
+    t(this, k) && t(this, k).focus();
+  }
+  /**
+   * 使颜色选择器失去焦点
+   */
+  blur() {
+    t(this, k) && t(this, k).blur();
+  }
+  /**
+   * 获取验证目标元素
+   * @returns {HTMLElement}
+   */
+  get validationTarget() {
+    return this;
+  }
+  /**
+   * 更新表单验证状态
+   */
+  updateValidity() {
+    this.required && !this.value ? this.internals.setValidity(
+      { valueMissing: !0 },
+      "请选择一个颜色",
+      this
+    ) : this.internals.setValidity({}, "", this);
+  }
+  /**
+   * 检查表单字段的有效性
+   * @returns {boolean} 如果字段有效返回 true，否则返回 false
+   */
+  checkValidity() {
+    return this.updateValidity(), this.internals.checkValidity();
+  }
+  /**
+   * 报告表单字段的有效性（显示验证提示）
+   * @returns {boolean} 如果字段有效返回 true，否则返回 false
+   */
+  reportValidity() {
+    return this.updateValidity(), this.internals.reportValidity();
+  }
+}
+k = new WeakMap(), w = new WeakMap(), F = new WeakMap(), K = new WeakMap(), R = new WeakMap(), U = new WeakMap(), S = new WeakMap(), X = new WeakMap(), Y = new WeakMap(), _ = new WeakMap(), y = new WeakMap(), g = new WeakMap(), N = new WeakMap(), r = new WeakSet(), /**
+ * 绑定组件事件监听器
+ */
+gt = function() {
+  !t(this, F) || !t(this, w) || (t(this, F).addEventListener("click", i(this, r, ft).bind(this), {
+    signal: t(this, y).signal
+  }), t(this, w).addEventListener("show", i(this, r, mt).bind(this), {
+    signal: t(this, y).signal
+  }), t(this, w).addEventListener("hide", i(this, r, wt).bind(this), {
+    signal: t(this, y).signal
+  }), t(this, S).addEventListener("change", i(this, r, yt).bind(this), {
+    signal: t(this, y).signal
+  }), t(this, Y).addEventListener("click", i(this, r, St).bind(this), {
+    signal: t(this, y).signal
+  }), t(this, _).addEventListener(
+    "click",
+    i(this, r, Vt).bind(this),
+    {
+      signal: t(this, y).signal
+    }
+  ));
+}, /**
+ * 处理触发器点击事件
+ * @param {MouseEvent} e - 鼠标事件对象
+ */
+ft = function(e) {
+  var a;
+  this.disabled || ((a = t(this, N).close) == null || a.abort(), t(this, N).close = new AbortController(), t(this, g).previousValue = this.value, i(this, r, at).call(this), document.addEventListener("click", i(this, r, Ct).bind(this), {
+    signal: t(this, N).close.signal
+  }));
+}, /**
+ * 处理弹窗显示事件
+ */
+mt = function() {
+  t(this, g).isOpen = !0, this.updateContainerClasslist();
+}, /**
+ * 处理弹窗隐藏事件
+ */
+wt = function() {
+  t(this, g).isOpen = !1, this.updateContainerClasslist(), t(this, g).previousValue !== void 0 && t(this, g).previousValue !== this.value && (this.value = t(this, g).previousValue, i(this, r, z).call(this), i(this, r, j).call(this));
+}, /**
+ * 处理面板颜色变化事件
+ * @param {CustomEvent} e - 自定义事件对象
+ */
+yt = function(e) {
+  const { value: a } = e.detail;
+  this.value = a, i(this, r, z).call(this), i(this, r, j).call(this);
+}, /**
+ * 处理文档点击事件（用于关闭弹窗）
+ * @param {MouseEvent} e - 鼠标事件对象
+ */
+Ct = function(e) {
+  t(this, g).isOpen && (!this.contains(e.target) || e.target !== this) && i(this, r, O).call(this);
+}, /**
+ * 显示颜色选择器弹窗
+ */
+at = function() {
+  t(this, w) && t(this, w).show();
+}, /**
+ * 隐藏颜色选择器弹窗
+ */
+O = function() {
+  t(this, w) && t(this, w).hide();
+}, /**
+ * 更新触发元素的背景颜色
+ */
+z = function() {
+  if (t(this, R)) {
+    if (!this.value) {
+      t(this, R).style.setProperty(
+        "--ea-color-picker-inner-background-color",
+        "transparent"
+      );
+      return;
+    }
+    try {
+      const e = new H(this.value);
+      t(this, R).style.setProperty(
+        "--ea-color-picker-inner-background-color",
+        e.toRgb(!0)
+      );
+    } catch {
+      t(this, R).style.setProperty(
+        "--ea-color-picker-inner-background-color",
+        "transparent"
+      );
+    }
+  }
+}, /**
+ * 更新状态图标
+ * @param {string} colorValue - 颜色值
+ */
+j = function(e = this.value) {
+  t(this, U) && t(this, U).setAttribute(
+    "icon",
+    e ? "icon-angle-down" : "icon-cancel"
+  );
+}, /**
+ * 处理清除按钮点击事件
+ */
+St = function() {
+  this.value = "", i(this, r, z).call(this), i(this, r, j).call(this), this.emit("change", { detail: { value: "" } }), this.dispatchEvent(new Bt()), t(this, g).previousValue = "", i(this, r, O).call(this);
+}, /**
+ * 处理确认按钮点击事件
+ */
+Vt = function() {
+  t(this, g).previousValue = this.value, i(this, r, O).call(this);
+};
+customElements.get("ea-color-picker") || customElements.define("ea-color-picker", Dt);
+export {
+  Dt as EaColorPicker,
+  Lt as EaColorPickerPanel
+};