easy-component-ui 3.0.15 → 4.0.3

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

@@ -1,888 +1,1128 @@
-var xt = Object.defineProperty;
-var ot = (h) => {
-  throw TypeError(h);
-};
-var Et = (h, n, e) => n in h ? xt(h, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[n] = e;
-var T = (h, n, e) => Et(h, typeof n != "symbol" ? n + "" : n, e), tt = (h, n, e) => n.has(h) || ot("Cannot " + e);
-var t = (h, n, e) => (tt(h, n, "read from private field"), e ? e.call(h) : n.get(h)), l = (h, n, e) => n.has(h) ? ot("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(h) : n.set(h, e), d = (h, n, e, i) => (tt(h, n, "write to private field"), i ? i.call(h, e) : n.set(h, e), e), a = (h, n, e) => (tt(h, n, "access private method"), e);
-import { F as kt } from "../core/FormBase.js";
-import { n as rt } from "./ea-calendar2.js";
-import { C as F } from "../utils/Color.js";
-import { s as Mt } 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 Pt } from "../css/ea-color-picker-panel.style.js";
+import { a as nt } from "../core/EaFormAssociatedBase.ts.js";
+import { c as R } from "../utils/bem.ts.js";
+import { q as C, a as w, l as S, C as W, p as z } from "../core/decorator.js";
+import { h as P } from "../utils/html.ts.js";
+import { E as H } from "../utils/Enum.ts.js";
+import { E as lt } from "../core/EaBase.ts.js";
+import { p as ht } from "../utils/Utils.ts.js";
 import "./ea-input.js";
-import { E as G } from "../utils/Utils.js";
+import { s as ut } from "../css/ea-color-picker-panel.style.js";
 import "./ea-popper.js";
 import "./ea-button.js";
-class Rt extends Event {
-  constructor(n) {
+import "./ea-icon.js";
+import { s as pt } from "../css/ea-color-picker.style.js";
+var N = (t) => {
+  throw TypeError(t);
+}, D = (t, e, s) => e.has(t) || N("Cannot " + s), A = (t, e, s) => (D(t, e, "read from private field"), s ? s.call(t) : e.get(t)), F = (t, e, s) => e.has(t) ? N("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), B = (t, e, s, a) => (D(t, e, "write to private field"), e.set(t, s), s), m = (t, e, s) => (D(t, e, "access private method"), s), $, M, q, k, j, U, G, X, Y, J, K, Q, Z, tt, et, st, V, L, O, at, rt;
+const T = class I {
+  constructor(e) {
+    F(this, M), F(this, $), B(this, $, this.parse(e));
+  }
+  parse(e) {
+    return e ? typeof e == "string" ? m(this, M, K).call(this, e) || m(this, M, V).call(this) : typeof e == "object" ? m(this, M, st).call(this, e) : m(this, M, V).call(this) : m(this, M, V).call(this);
+  }
+  static parseStringStrict(e) {
+    var s, a, i, r;
+    return !e || typeof e != "string" ? null : (e = e.trim().toLowerCase(), e.startsWith("#") ? m(s = I, k, j).call(s, e) : e.startsWith("rgb") ? m(a = I, k, U).call(a, e) : e.startsWith("hsl") ? m(i = I, k, G).call(i, e) : e.startsWith("hsv") ? m(r = I, k, X).call(r, e) : null);
+  }
+  hsvStrToHsvObject(e) {
+    const s = e.match(
+      /hsv\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*(\d*\.?\d+)\s*)?\)/
+    );
+    if (s) {
+      const a = parseInt(s[1]), i = parseInt(s[2]) / 100, r = parseInt(s[3]) / 100, o = s[4] ? parseFloat(s[4]) : 1;
+      return { h: a, s: i, v: r, a: o };
+    }
+    return null;
+  }
+  toHex(e = !1) {
+    const { r: s, g: a, b: i, a: r } = A(this, $), o = (u) => {
+      const p = Math.round(u).toString(16);
+      return p.length === 1 ? "0" + p : p;
+    };
+    let n = `#${o(s)}${o(a)}${o(i)}`;
+    return e && r < 1 && (n += o(r * 255)), n;
+  }
+  toRgb(e = !1) {
+    const { r: s, g: a, b: i, a: r } = A(this, $);
+    return e && r < 1 ? `rgba(${s}, ${a}, ${i}, ${r})` : `rgb(${s}, ${a}, ${i})`;
+  }
+  toHsl(e = !1) {
+    const s = m(this, M, at).call(this);
+    return e && s.a < 1 ? `hsla(${s.h}, ${s.s}%, ${s.l}%, ${s.a})` : `hsl(${s.h}, ${s.s}%, ${s.l}%)`;
+  }
+  toHsv(e = !1) {
+    const s = m(this, M, rt).call(this);
+    return e && s.a < 1 ? `hsv(${s.h}, ${s.s}%, ${s.v}%, ${s.a})` : `hsv(${s.h}, ${s.s}%, ${s.v}%)`;
+  }
+  toString(e = "hex") {
+    switch (e.toLowerCase()) {
+      case "hex":
+        return this.toHex();
+      case "hexa":
+        return this.toHex(!0);
+      case "rgb":
+        return this.toRgb();
+      case "rgba":
+        return this.toRgb(!0);
+      case "hsl":
+        return this.toHsl();
+      case "hsla":
+        return this.toHsl(!0);
+      case "hsv":
+        return this.toHsv();
+      default:
+        return this.toHex();
+    }
+  }
+  getValue() {
+    return { ...A(this, $) };
+  }
+  setValue(e) {
+    B(this, $, this.parse(e));
+  }
+  getBrightness() {
+    const { r: e, g: s, b: a } = A(this, $);
+    return (e * 0.299 + s * 0.587 + a * 0.114) / 255;
+  }
+  isLight() {
+    return this.getBrightness() > 0.5;
+  }
+  isDark() {
+    return this.getBrightness() <= 0.5;
+  }
+  static isValidColor(e) {
+    return !e || typeof e != "string" ? !1 : I.parseStringStrict(e) !== null;
+  }
+};
+$ = /* @__PURE__ */ new WeakMap();
+M = /* @__PURE__ */ new WeakSet();
+q = function(t) {
+  return t = t.trim().toLowerCase(), t.startsWith("#") ? m(this, M, Q).call(this, t) : t.startsWith("rgb") ? m(this, M, Z).call(this, t) : t.startsWith("hsl") ? m(this, M, tt).call(this, t) : t.startsWith("hsv") ? m(this, M, et).call(this, t) : null;
+};
+k = /* @__PURE__ */ new WeakSet();
+j = function(t) {
+  if (t = t.replace("#", ""), ![3, 6, 8].includes(t.length))
+    return null;
+  if (t.length === 3 && (t = t.split("").map((s) => s + s).join("")), t.length === 6) {
+    const s = parseInt(t.substring(0, 2), 16), a = parseInt(t.substring(2, 4), 16), i = parseInt(t.substring(4, 6), 16);
+    return { r: s, g: a, b: i, a: 1 };
+  }
+  if (t.length === 8) {
+    const s = parseInt(t.substring(0, 2), 16), a = parseInt(t.substring(2, 4), 16), i = parseInt(t.substring(4, 6), 16), r = parseInt(t.substring(6, 8), 16) / 255;
+    return { r: s, g: a, b: i, a: r };
+  }
+  return null;
+};
+U = function(t) {
+  const e = t.match(
+    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?\)/
+  );
+  if (e) {
+    const s = parseInt(e[1]), a = parseInt(e[2]), i = parseInt(e[3]), r = e[4] ? parseFloat(e[4]) : 1;
+    return s < 0 || s > 255 || a < 0 || a > 255 || i < 0 || i > 255 || r < 0 || r > 1 ? null : { r: s, g: a, b: i, a: r };
+  }
+  return null;
+};
+G = function(t) {
+  var e;
+  const s = t.match(
+    /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*(\d*\.?\d+)\s*)?\)/
+  );
+  if (s) {
+    const a = parseInt(s[1]), i = parseInt(s[2]) / 100, r = parseInt(s[3]) / 100, o = s[4] ? parseFloat(s[4]) : 1;
+    return a < 0 || a > 360 || i < 0 || i > 1 || r < 0 || r > 1 || o < 0 || o > 1 ? null : m(e = T, k, Y).call(e, { h: a, s: i, l: r, a: o });
+  }
+  return null;
+};
+X = function(t) {
+  var e;
+  const s = t.match(
+    /hsv\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*(\d*\.?\d+)\s*)?\)/
+  );
+  if (s) {
+    const a = parseInt(s[1]), i = parseInt(s[2]) / 100, r = parseInt(s[3]) / 100, o = s[4] ? parseFloat(s[4]) : 1;
+    return a < 0 || a > 360 || i < 0 || i > 1 || r < 0 || r > 1 || o < 0 || o > 1 ? null : m(e = T, k, J).call(e, { h: a, s: i, v: r, a: o });
+  }
+  return null;
+};
+Y = function(t) {
+  const { h: e, s, l: a, a: i = 1 } = t;
+  if (s === 0) {
+    const l = Math.round(a * 255);
+    return { r: l, g: l, b: l, a: i };
+  }
+  const r = (l, x, y) => (y < 0 && (y += 1), y > 1 && (y -= 1), y < 1 / 6 ? l + (x - l) * 6 * y : y < 1 / 2 ? x : y < 2 / 3 ? l + (x - l) * (2 / 3 - y) * 6 : l), o = a < 0.5 ? a * (1 + s) : a + s - a * s, n = 2 * a - o, u = e / 360, p = Math.round(r(n, o, u + 1 / 3) * 255), c = Math.round(r(n, o, u) * 255), b = Math.round(r(n, o, u - 1 / 3) * 255);
+  return { r: p, g: c, b, a: i };
+};
+J = function(t) {
+  const { h: e, s, v: a, a: i = 1 } = t, r = Math.floor(e / 60) % 6, o = e / 60 - r, n = a * (1 - s), u = a * (1 - o * s), p = a * (1 - (1 - o) * s);
+  let c, b, l;
+  switch (r) {
+    case 0:
+      [c, b, l] = [a, p, n];
+      break;
+    case 1:
+      [c, b, l] = [u, a, n];
+      break;
+    case 2:
+      [c, b, l] = [n, a, p];
+      break;
+    case 3:
+      [c, b, l] = [n, u, a];
+      break;
+    case 4:
+      [c, b, l] = [p, n, a];
+      break;
+    case 5:
+      [c, b, l] = [a, n, u];
+      break;
+  }
+  return {
+    r: Math.round(c * 255),
+    g: Math.round(b * 255),
+    b: Math.round(l * 255),
+    a: i
+  };
+};
+K = function(t) {
+  return m(this, M, q).call(this, t);
+};
+Q = function(t) {
+  if (t = t.replace("#", ""), ![3, 6, 8].includes(t.length))
+    return null;
+  if (t.length === 3 && (t = t.split("").map((s) => s + s).join("")), t.length === 6) {
+    const s = parseInt(t.substring(0, 2), 16), a = parseInt(t.substring(2, 4), 16), i = parseInt(t.substring(4, 6), 16);
+    return { r: s, g: a, b: i, a: 1 };
+  }
+  if (t.length === 8) {
+    const s = parseInt(t.substring(0, 2), 16), a = parseInt(t.substring(2, 4), 16), i = parseInt(t.substring(4, 6), 16), r = parseInt(t.substring(6, 8), 16) / 255;
+    return { r: s, g: a, b: i, a: r };
+  }
+  return null;
+};
+Z = function(t) {
+  const e = t.match(
+    /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*(\d*\.?\d+)\s*)?\)/
+  );
+  if (e) {
+    const s = parseInt(e[1]), a = parseInt(e[2]), i = parseInt(e[3]), r = e[4] ? parseFloat(e[4]) : 1;
+    return s < 0 || s > 255 || a < 0 || a > 255 || i < 0 || i > 255 || r < 0 || r > 1 ? null : { r: s, g: a, b: i, a: r };
+  }
+  return null;
+};
+tt = function(t) {
+  const e = t.match(
+    /hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*(\d*\.?\d+)\s*)?\)/
+  );
+  if (e) {
+    const s = parseInt(e[1]), a = parseInt(e[2]) / 100, i = parseInt(e[3]) / 100, r = e[4] ? parseFloat(e[4]) : 1;
+    return s < 0 || s > 360 || a < 0 || a > 1 || i < 0 || i > 1 || r < 0 || r > 1 ? null : m(this, M, L).call(this, { h: s, s: a, l: i, a: r });
+  }
+  return null;
+};
+et = function(t) {
+  const e = this.hsvStrToHsvObject(t);
+  if (e) {
+    const s = e.h, a = e.s, i = e.v, r = e.a;
+    return s < 0 || s > 360 || a < 0 || a > 1 || i < 0 || i > 1 || r < 0 || r > 1 ? null : m(this, M, O).call(this, { h: s, s: a, v: i, a: r });
+  }
+  return null;
+};
+st = function(t) {
+  const { r: e, g: s, b: a, a: i = 1, h: r, s: o, l: n, v: u } = t;
+  return e !== void 0 && s !== void 0 && a !== void 0 ? {
+    r: Math.max(0, Math.min(255, e)),
+    g: Math.max(0, Math.min(255, s)),
+    b: Math.max(0, Math.min(255, a)),
+    a: Math.max(0, Math.min(1, i))
+  } : r !== void 0 && o !== void 0 && n !== void 0 ? m(this, M, L).call(this, {
+    h: Math.max(0, Math.min(360, r)),
+    s: Math.max(0, Math.min(1, o)),
+    l: Math.max(0, Math.min(1, n)),
+    a: Math.max(0, Math.min(1, i))
+  }) : r !== void 0 && o !== void 0 && u !== void 0 ? m(this, M, O).call(this, {
+    h: Math.max(0, Math.min(360, r)),
+    s: Math.max(0, Math.min(1, o)),
+    v: Math.max(0, Math.min(1, u)),
+    a: Math.max(0, Math.min(1, i))
+  }) : m(this, M, V).call(this);
+};
+V = function() {
+  return { r: 0, g: 0, b: 0, a: 1 };
+};
+L = function(t) {
+  const { h: e, s, l: a, a: i = 1 } = t;
+  if (s === 0) {
+    const l = Math.round(a * 255);
+    return { r: l, g: l, b: l, a: i };
+  }
+  const r = (l, x, y) => (y < 0 && (y += 1), y > 1 && (y -= 1), y < 1 / 6 ? l + (x - l) * 6 * y : y < 1 / 2 ? x : y < 2 / 3 ? l + (x - l) * (2 / 3 - y) * 6 : l), o = a < 0.5 ? a * (1 + s) : a + s - a * s, n = 2 * a - o, u = e / 360, p = Math.round(r(n, o, u + 1 / 3) * 255), c = Math.round(r(n, o, u) * 255), b = Math.round(r(n, o, u - 1 / 3) * 255);
+  return { r: p, g: c, b, a: i };
+};
+O = function(t) {
+  const { h: e, s, v: a, a: i = 1 } = t, r = Math.floor(e / 60) % 6, o = e / 60 - r, n = a * (1 - s), u = a * (1 - o * s), p = a * (1 - (1 - o) * s);
+  let c, b, l;
+  switch (r) {
+    case 0:
+      [c, b, l] = [a, p, n];
+      break;
+    case 1:
+      [c, b, l] = [u, a, n];
+      break;
+    case 2:
+      [c, b, l] = [n, a, p];
+      break;
+    case 3:
+      [c, b, l] = [n, u, a];
+      break;
+    case 4:
+      [c, b, l] = [p, n, a];
+      break;
+    case 5:
+      [c, b, l] = [a, n, u];
+      break;
+  }
+  return {
+    r: Math.round(c * 255),
+    g: Math.round(b * 255),
+    b: Math.round(l * 255),
+    a: i
+  };
+};
+at = function() {
+  const { r: t, g: e, b: s, a } = A(this, $), i = t / 255, r = e / 255, o = s / 255, n = Math.max(i, r, o), u = Math.min(i, r, o), p = n - u;
+  let c = 0, b = 0;
+  const l = (n + u) / 2;
+  if (p !== 0) {
+    switch (b = l > 0.5 ? p / (2 - n - u) : p / (n + u), n) {
+      case i:
+        c = (r - o) / p + (r < o ? 6 : 0);
+        break;
+      case r:
+        c = (o - i) / p + 2;
+        break;
+      case o:
+        c = (i - r) / p + 4;
+        break;
+    }
+    c *= 60;
+  }
+  return {
+    h: Math.round(c),
+    s: Math.round(b * 100),
+    l: Math.round(l * 100),
+    a
+  };
+};
+rt = function() {
+  const { r: t, g: e, b: s, a } = A(this, $), i = t / 255, r = e / 255, o = s / 255, n = Math.max(i, r, o), u = Math.min(i, r, o), p = n - u;
+  let c = 0;
+  const b = n === 0 ? 0 : p / n, l = n;
+  if (p !== 0) {
+    switch (n) {
+      case i:
+        c = (r - o) / p + (r < o ? 6 : 0);
+        break;
+      case r:
+        c = (o - i) / p + 2;
+        break;
+      case o:
+        c = (i - r) / p + 4;
+        break;
+    }
+    c *= 60;
+  }
+  return {
+    h: Math.round(c),
+    s: Math.round(b * 100),
+    v: Math.round(l * 100),
+    a
+  };
+};
+F(T, k);
+let E = T;
+class ct extends Event {
+  constructor(e) {
+    super("ea-clear", { bubbles: !0, composed: !0 }), this.detail = e || {};
+  }
+}
+class dt extends Event {
+  constructor(e) {
     super("ea-active-change", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = n;
+    }), this.detail = e;
   }
 }
-class qt extends Event {
-  constructor(n) {
+class _t extends Event {
+  constructor(e) {
     super("ea-invalid-color", {
       bubbles: !0,
       composed: !0
-    }), this.detail = n;
+    }), this.detail = e;
   }
 }
-var W, A, m, P, k, R, J, M, L, g, B, y, v, s, o, lt, ht, nt, ut, et, D, ct, H, dt, pt, st, it, Z, vt, bt;
-class Lt extends At {
+var ft = Object.defineProperty, vt = Object.getOwnPropertyDescriptor, g = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? vt(e, s) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (a ? o(e, s, i) : o(i)) || i);
+  return a && i && ft(e, s, i), i;
+};
+const it = "ea-color-picker-panel", h = R(it), bt = ["hsl", "hsv", "hex", "rgb", "rgba"];
+let v = class extends lt {
   constructor() {
-    super();
-    l(this, o);
-    /** @type {HTMLDivElement} */
-    l(this, W);
-    /** @type {HTMLDivElement} */
-    l(this, A);
-    /** @type {HTMLDivElement} */
-    l(this, m);
-    /** @type {HTMLDivElement} */
-    l(this, P);
-    /** @type {HTMLDivElement} */
-    l(this, k);
-    /** @type {HTMLDivElement} */
-    l(this, R);
-    /** @type {HTMLDivElement} */
-    l(this, J);
-    /** @type {HTMLDivElement} */
-    l(this, M);
-    /** @type {HTMLDivElement} */
-    l(this, L);
-    /** @type {HTMLInputElement} */
-    l(this, g);
-    /** @type {HTMLDivElement} */
-    l(this, B);
-    l(this, y, new AbortController());
-    l(this, v, {
-      /** @type {AbortController | null} 饱和度拖拽控制器 */
+    super(...arguments), this.value = "", this.colorFormat = "hex", this.showAlpha = !1, this.disabled = !1, this.border = !1, this.clearable = !0, this.predefine = [], this._abortControllerStates = {
       saturationMove: null,
-      /** @type {AbortController | null} 色调拖拽控制器 */
       hueMove: null,
-      /** @type {AbortController | null} 透明度拖拽控制器 */
       alphaMove: null
-    });
-    l(this, s, {
-      /** @type {boolean} 是否首次更新值 */
+    }, this._states = {
       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 F(),
-      /** @type {boolean} 是否正在拖拽 */
-      isDragging: !1,
-      /** @type {string} 上一个验证通过的颜色值 */
+      color: new E(),
       lastValidValue: ""
-    });
-    T(this, "state", this.properties({
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, s).lastValidValue = e, a(this, o, et).call(this), t(this, D).call(this), a(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) => {
-          a(this, o, it).call(this);
-        }
-      }
-    }));
-    T(this, "propStates", this.properties({
-      predefine: {
-        props: !0,
-        type: Array,
-        default: [],
-        observer: (e) => {
-          a(this, o, dt).call(this, e);
-        }
-      }
-    }));
-    /**
-     * 更新饱和度面板的背景颜色
-     */
-    l(this, D, () => {
-      const e = new F({
-        h: t(this, s).hue,
+    }, this._updateSvpanelStatus = () => {
+      const t = new E({
+        h: this._states.hue,
         s: 1,
         v: 1,
         a: 1
       });
       this.style.setProperty(
         "--ea-color-picker-panel-background-color",
-        e.toString(this["color-format"])
+        t.toString(this._getEffectiveFormat())
       );
-    });
-    this.stylesheet = Pt, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "value",
-      "color-format",
-      "predefine",
-      "show-alpha",
-      "disabled",
-      "border",
-      "clearable"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+    };
+  }
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      this.ns.b("container"),
+    const t = h(
       {},
       {
         disabled: this.disabled,
         border: this.border,
-        "show-alpha": this["show-alpha"],
+        "show-alpha": this.showAlpha,
         clearable: this.clearable
       }
     );
-    return t(this, W).className = e, e;
-  }
-  $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>
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    return P(`
+      <div class="${h.b()}" part="container">
+        <div class="${h.e("wrapper")}" part="wrapper">
+          <div class="${h.e("svpanel")}" part="svpanel" role="slider" aria-label="Saturation and brightness" aria-valuemin="0" aria-valuemax="100">
+            <div class="${h.e("cursor")} ${h.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 class="${h.e("hue-slider")} ${h.m("vertical")}" part="hue-slider" role="slider" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-orientation="vertical">
+            <div class="${h.e("thumb")} ${h.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 class="${h.e("alpha-slider")}" part="alpha-slider" role="slider" aria-label="Opacity" aria-valuemin="0" aria-valuemax="100">
+          <div class="${h.e("thumb")} ${h.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 class="${h.e("predefine")}" part="predefine">
+          <div class="${h.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">
+        <div class="${h.e("footer")}" part="footer">
+          <div class="${h.e("text-display")}" part="text-display"></div>
+          <ea-input class="${h.e("color-input")}" part="color-input" type="text" size="small"></ea-input>
+          <section class="${h.e("append")}" part="append">
             <slot name="footer"></slot>
           </section>
         </div>
       </div>
-    `), d(this, W, this.shadowRoot.querySelector(e.cb())), d(this, A, this.shadowRoot.querySelector(e.ce("svpanel"))), d(this, m, this.shadowRoot.querySelector(
-      e.ce("svpanel-cursor")
-    )), d(this, P, this.shadowRoot.querySelector(e.ce("hue-slider"))), d(this, k, this.shadowRoot.querySelector(e.ce("hue-slider-thumb"))), d(this, R, this.shadowRoot.querySelector(e.ce("alpha-slider"))), d(this, J, this.shadowRoot.querySelector(
-      e.ce("alpha-slider-bar")
-    )), d(this, M, this.shadowRoot.querySelector(
-      e.ce("alpha-slider-thumb")
-    )), d(this, L, this.shadowRoot.querySelector(e.ce("predefine"))), d(this, g, this.shadowRoot.querySelector(e.ce("color-input"))), d(this, B, this.shadowRoot.querySelector(e.ce("text-display"))), this.updateContainerClasslist(), a(this, o, it).call(this);
-  }
-  connectedCallback() {
-    var e;
-    super.connectedCallback(), (e = t(this, y)) == null || e.abort(), d(this, y, new AbortController()), a(this, o, lt).call(this);
+    `);
   }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, y)) == null || e.abort();
+  _handleSaturationMouseDown(t) {
+    var s, a;
+    if ((s = this._abortControllerStates.saturationMove) == null || s.abort(), (a = this._abortControllerStates.hueMove) == null || a.abort(), this.disabled) return;
+    t.preventDefault(), this._abortControllerStates.saturationMove = new AbortController();
+    const e = (i) => {
+      const r = this._saturation.getBoundingClientRect(), o = Math.max(0, Math.min(i.clientX - r.left, r.width)), n = Math.max(0, Math.min(i.clientY - r.top, r.height)), u = o / r.width, p = 1 - n / r.height;
+      this._states.saturation = u, this._states.value = p, this._states.color.setValue({
+        h: this._states.hue,
+        s: u,
+        v: p,
+        a: this._states.alpha
+      }), this.value = this._states.color.toString(this._getEffectiveFormat()), this._emitChangeEvent(), this._saturationThumb.style.left = u * r.width + "px", this._saturationThumb.style.top = (1 - p) * r.height + "px";
+    };
+    e(t), window.addEventListener("mousemove", e, {
+      signal: this._abortControllerStates.saturationMove.signal
+    }), window.addEventListener(
+      "mouseup",
+      () => {
+        var i;
+        (i = this._abortControllerStates.saturationMove) == null || i.abort();
+      },
+      {
+        signal: this._abortControllerStates.saturationMove.signal
+      }
+    );
   }
-  /**
-   * 重置光标和滑块位置到初始状态
-   */
-  resetCursorPosition() {
-    t(this, s).hue = 0, t(this, s).saturation = 1, t(this, s).value = 1, t(this, s).alpha = 1, t(this, s).isFirstValueUpdate = !1, t(this, m) && (t(this, m).style.left = "", t(this, m).style.top = ""), t(this, k) && (t(this, k).style.top = ""), t(this, M) && (t(this, M).style.left = ""), t(this, D).call(this);
+  _handleHueMouseDown(t) {
+    var s, a;
+    if ((s = this._abortControllerStates.hueMove) == null || s.abort(), (a = this._abortControllerStates.saturationMove) == null || a.abort(), this.disabled) return;
+    t.preventDefault(), this._abortControllerStates.hueMove = new AbortController();
+    const e = (i) => {
+      const r = this._hue.getBoundingClientRect(), n = (1 - Math.max(0.01, Math.min(i.clientY - r.top, r.height)) / r.height) * 360;
+      this._states.hue = n, this._states.color.setValue({
+        h: n,
+        s: this._states.saturation,
+        v: this._states.value,
+        a: this._states.alpha
+      }), this.value = this._states.color.toString(this._getEffectiveFormat()), this._emitChangeEvent(), this._hueThumb.style.top = (1 - n / 360) * r.height + "px", this._updateSvpanelStatus();
+    };
+    e(t), window.addEventListener("mousemove", e, {
+      signal: this._abortControllerStates.hueMove.signal
+    }), window.addEventListener(
+      "mouseup",
+      () => {
+        var i;
+        (i = this._abortControllerStates.hueMove) == null || i.abort();
+      },
+      {
+        signal: this._abortControllerStates.hueMove.signal
+      }
+    );
   }
-}
-W = new WeakMap(), A = new WeakMap(), m = new WeakMap(), P = new WeakMap(), k = new WeakMap(), R = new WeakMap(), J = new WeakMap(), M = new WeakMap(), L = new WeakMap(), g = new WeakMap(), B = new WeakMap(), y = new WeakMap(), v = new WeakMap(), s = new WeakMap(), o = new WeakSet(), /**
- * 绑定组件事件监听器
- */
-lt = function() {
-  t(this, A).addEventListener(
-    "mousedown",
-    a(this, o, ht).bind(this),
-    {
-      signal: t(this, y).signal
-    }
-  ), t(this, P).addEventListener("mousedown", a(this, o, nt).bind(this), {
-    signal: t(this, y).signal
-  }), t(this, R).addEventListener(
-    "mousedown",
-    a(this, o, ut).bind(this),
-    {
-      signal: t(this, y).signal
-    }
-  ), t(this, g).addEventListener(
-    "change",
-    a(this, o, ct).bind(this),
-    {
-      signal: t(this, y).signal
+  _handleAlphaMouseDown(t) {
+    var s, a, i;
+    if ((s = this._abortControllerStates.alphaMove) == null || s.abort(), (a = this._abortControllerStates.saturationMove) == null || a.abort(), (i = this._abortControllerStates.hueMove) == null || i.abort(), this.disabled) return;
+    t.preventDefault(), this._abortControllerStates.alphaMove = new AbortController();
+    const e = (r) => {
+      const o = this._alpha.getBoundingClientRect(), n = Math.max(0, Math.min(r.clientX - o.left, o.width)), u = Number((n / o.width).toFixed(2));
+      Math.abs(this._states.alpha - u) > 1e-3 && (this._states.alpha = u, this._states.color.setValue({
+        h: this._states.hue,
+        s: this._states.saturation,
+        v: this._states.value,
+        a: u
+      }), this.value = this._states.color.toString(this._getEffectiveFormat()), this._emitChangeEvent(), this._alphaThumb.style.left = u * o.width + "px");
+    };
+    e(t), window.addEventListener("mousemove", e, {
+      signal: this._abortControllerStates.alphaMove.signal
+    }), window.addEventListener(
+      "mouseup",
+      () => {
+        var r;
+        (r = this._abortControllerStates.alphaMove) == null || r.abort();
+      },
+      {
+        signal: this._abortControllerStates.alphaMove.signal
+      }
+    );
+  }
+  _handleColorInputChange(t) {
+    const s = t.target.value;
+    try {
+      const a = new E(s);
+      this.value = a.toString(this._getEffectiveFormat()), this._emitChangeEvent();
+    } catch {
+      this._colorInput.value = this.value;
     }
-  ), t(this, g).addEventListener(
-    "blur",
-    a(this, o, vt).bind(this),
-    {
-      signal: t(this, y).signal
+  }
+  _handleColorInputBlur() {
+    if (!this._colorInput) return;
+    const t = this._colorInput.getAttribute("value") || "";
+    if (!t) {
+      this.value = "", this._states.lastValidValue = "";
+      return;
     }
-  ), t(this, L) && t(this, L).addEventListener(
-    "click",
-    a(this, o, pt).bind(this),
-    {
-      signal: t(this, y).signal
+    this._validateColor(t) ? (this._states.lastValidValue = t, this._updateColorFromValue(t)) : (this._colorInput.setAttribute("value", this._states.lastValidValue || ""), this.dispatchEvent(
+      new _t({ value: t })
+    ));
+  }
+  _handlePredefineListClick(t) {
+    if (this.disabled) return;
+    const e = t.target.closest(
+      h.ce("predefine-color")
+    );
+    if (!e) return;
+    const s = e.getAttribute("data-color");
+    s && this._updateColorFromValue(s);
+  }
+  /** 获取有效的颜色格式，考虑透明度 */
+  _getEffectiveFormat() {
+    const t = this.colorFormat;
+    return this.showAlpha && {
+      hex: "rgba",
+      rgb: "rgba",
+      hsl: "hsla"
+    }[t] || t;
+  }
+  /** 从当前颜色对象解析 HSV 值 */
+  _parseHsvFromColor() {
+    const t = this._states.color.hsvStrToHsvObject(
+      this._states.color.toHsv(!0)
+    );
+    t && (this._states.hue = parseInt(t.h), this._states.saturation = t.s, this._states.value = t.v, this._states.alpha = t.a ? parseFloat(t.a) : 1);
+  }
+  /** 获取滑块尺寸 */
+  _getSliderSize(t, e, s, a) {
+    const i = t.getBoundingClientRect(), r = ht(this.style.getPropertyValue(e)) || s;
+    return Math.max(0, Math.min(i[a], r), r);
+  }
+  /** 更新所有滑块光标位置 */
+  _updateCursorPosition() {
+    if (!this._states.isFirstValueUpdate && this.value && (this._states.color.setValue(this.value), this._parseHsvFromColor(), this._states.isFirstValueUpdate = !0), this._saturationThumb && this._saturation) {
+      const t = this._states.saturation, e = this._states.value, s = this._getSliderSize(
+        this._saturation,
+        "--ea-color-picker-panel-svpanel-width",
+        280,
+        "width"
+      ), a = this._getSliderSize(
+        this._saturation,
+        "--ea-color-picker-panel-svpanel-height",
+        180,
+        "height"
+      ), i = t * s, r = (1 - e) * a;
+      this._saturationThumb.style.left = i + "px", this._saturationThumb.style.top = r + "px";
     }
-  );
-}, /**
- * 处理饱和度和值的更新
- * @param {MouseEvent} e - 鼠标事件对象
- */
-ht = function(e) {
-  var u, b;
-  if ((u = t(this, v).saturationMove) == null || u.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 i = (c) => {
-    const p = t(this, A).getBoundingClientRect(), x = Math.max(0, Math.min(c.clientX - p.left, p.width)), E = Math.max(0, Math.min(c.clientY - p.top, p.height)), V = x / p.width, Q = 1 - E / p.height;
-    t(this, s).saturation = V, t(this, s).value = Q, t(this, s).color.setValue({
-      h: t(this, s).hue,
-      s: V,
-      v: Q,
-      a: t(this, s).alpha
-    }), this.value = t(this, s).color.toString(this["color-format"]), a(this, o, H).call(this), t(this, m).style.left = V * p.width + "px", t(this, m).style.top = (1 - Q) * p.height + "px";
-  };
-  i(e), window.addEventListener("mousemove", i, {
-    signal: t(this, v).saturationMove.signal
-  }), window.addEventListener(
-    "mouseup",
-    () => {
-      var c;
-      (c = t(this, v).saturationMove) == null || c.abort(), t(this, s).isDragging = !1;
-    },
-    {
-      signal: t(this, v).saturationMove.signal
+    if (this._hueThumb && this._hue) {
+      const t = this._states.hue, e = this._getSliderSize(
+        this._hue,
+        "--ea-color-picker-panel-hue-slider-height",
+        180,
+        "height"
+      ), s = (1 - t / 360) * e;
+      this._hueThumb.style.top = s + "px";
     }
-  );
-}, /**
- * 处理色调的更新
- * @param {MouseEvent} e - 鼠标事件对象
- */
-nt = function(e) {
-  var u, b;
-  if ((u = t(this, v).hueMove) == null || u.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 i = (c) => {
-    const p = t(this, P).getBoundingClientRect(), E = (1 - Math.max(0.01, Math.min(c.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"]), a(this, o, H).call(this), t(this, k).style.top = (1 - E / 360) * p.height + "px", t(this, D).call(this);
-  };
-  i(e), window.addEventListener("mousemove", i, {
-    signal: t(this, v).hueMove.signal
-  }), window.addEventListener(
-    "mouseup",
-    () => {
-      var c;
-      (c = t(this, v).hueMove) == null || c.abort(), t(this, s).isDragging = !1;
-    },
-    {
-      signal: t(this, v).hueMove.signal
+    if (this._alphaThumb && this._alpha) {
+      const t = this._states.alpha, e = this._getSliderSize(
+        this._alpha,
+        "--ea-color-picker-panel-alpha-slider-width",
+        280,
+        "width"
+      ), s = t * e;
+      this._alphaThumb.style.left = s + "px";
     }
-  );
-}, /**
- * 处理透明度的更新
- * @param {MouseEvent} e - 鼠标事件对象
- */
-ut = function(e) {
-  var u, b, c;
-  if ((u = t(this, v).alphaMove) == null || u.abort(), (b = t(this, v).saturationMove) == null || b.abort(), (c = t(this, v).hueMove) == null || c.abort(), this.disabled) return;
-  e.preventDefault(), t(this, v).alphaMove = new AbortController(), t(this, s).isDragging = !0;
-  const i = (p) => {
-    const x = t(this, R).getBoundingClientRect(), E = Math.max(0, Math.min(p.clientX - x.left, x.width)), V = Number((E / x.width).toFixed(2));
-    Math.abs(t(this, s).alpha - V) > 1e-3 && (t(this, s).alpha = V, t(this, s).color.setValue({
-      h: t(this, s).hue,
-      s: t(this, s).saturation,
-      v: t(this, s).value,
-      a: V
-    }), this.value = t(this, s).color.toString(this["color-format"]), a(this, o, H).call(this), t(this, M).style.left = V * x.width + "px");
-  };
-  i(e), window.addEventListener("mousemove", i, {
-    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
+    this._updateSliderAriaValues();
+  }
+  /** 更新所有滑块的 aria-valuenow 属性 */
+  _updateSliderAriaValues() {
+    if (this._saturation) {
+      const t = Math.round(this._states.value * 100);
+      this._saturation.setAttribute("aria-valuenow", String(t));
     }
-  );
-}, /**
- * 更新光标位置
- */
-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)
+    this._hue && this._hue.setAttribute("aria-valuenow", String(Math.round(this._states.hue))), this._alpha && this._alpha.setAttribute("aria-valuenow", String(Math.round(this._states.alpha * 100)));
+  }
+  /** 触发颜色变化事件 */
+  _emitChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          value: this.value,
+          color: this._states.color
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.dispatchEvent(
+      new dt({ value: this.value })
     );
-    if (e) {
-      const i = parseInt(e.h), u = e.s, b = e.v, c = e.a ? parseFloat(e.a) : 1;
-      t(this, s).hue = i, t(this, s).saturation = u, t(this, s).value = b, t(this, s).alpha = c;
-    }
-    t(this, s).isFirstValueUpdate = !0;
-  }
-  if (t(this, m) && t(this, A)) {
-    const e = t(this, s).saturation, i = t(this, s).value, u = t(this, A).getBoundingClientRect(), b = G.CSS.px2num(
-      this.style.getPropertyValue("--ea-color-picker-panel-svpanel-width")
-    ) || 280, c = G.CSS.px2num(
-      this.style.getPropertyValue("--ea-color-picker-panel-svpanel-height")
-    ) || 180, p = Math.max(
-      0,
-      Math.min(u.width, b),
-      b
-    ), x = Math.max(
-      0,
-      Math.min(u.height, c),
-      c
-    ), E = e * p, V = (1 - i) * x;
-    t(this, m).style.left = E + "px", t(this, m).style.top = V + "px";
-  }
-  if (t(this, k) && t(this, P)) {
-    const e = t(this, s).hue, i = t(this, P).getBoundingClientRect(), u = G.CSS.px2num(
-      this.style.getPropertyValue(
-        "--ea-color-picker-panel-hue-slider-height"
-      )
-    ) || 180, b = Math.max(0, Math.min(i.height, u), u), c = (1 - e / 360) * b;
-    t(this, k).style.top = c + "px";
-  }
-  if (t(this, M) && t(this, R)) {
-    const e = t(this, s).alpha, i = t(this, R).getBoundingClientRect(), u = G.CSS.px2num(
-      this.style.getPropertyValue(
-        "--ea-color-picker-panel-alpha-slider-width"
-      )
-    ) || 280, b = Math.max(0, Math.min(i.width, u), u), c = e * b;
-    t(this, M).style.left = c + "px";
-  }
-}, D = new WeakMap(), /**
- * 处理颜色输入框变化事件
- * @param {Event} e - 事件对象
- */
-ct = function(e) {
-  const i = e.target.value;
-  try {
-    const u = new F(i);
-    this.value = u.toString(this["color-format"]), a(this, o, H).call(this);
-  } catch {
-    t(this, g).value = this.value;
-  }
-}, /**
- * 触发颜色变化事件
- */
-H = function() {
-  this.dispatchEvent(
-    new CustomEvent("change", {
-      detail: {
-        value: this.value,
-        color: t(this, s).color
-      },
-      bubbles: !0,
-      composed: !0
-    })
-  ), this.dispatchEvent(
-    new Rt({ value: this.value })
-  );
-}, /**
- * 渲染预设颜色列表
- * @param {Array} list - 预设颜色列表
- */
-dt = function(e) {
-  !e || e.length === 0 || (t(this, L).innerHTML = this.html(
-    e.map(
-      (i) => `
-          <div class="${this.ns.e("predefine-color")}" 
-            part="predefine-color" 
-            style="background-color: ${i}"
-            data-color="${i}"
+  }
+  /** 渲染预定义颜色列表 */
+  _renderPredefineColors(t) {
+    if (this._predefineList) {
+      if (!t || t.length === 0) {
+        this._predefineList.innerHTML = "";
+        return;
+      }
+      this._predefineList.innerHTML = P(
+        t.map(
+          (e) => `
+          <div class="${h.e("predefine-color")}"
+            part="predefine-color"
+            style="background-color: ${e}"
+            data-color="${e}"
           ></div>
         `
-    ).join("")
-  ));
-}, /**
- * 处理预设颜色点击事件
- * @param {MouseEvent} e - 鼠标事件对象
- */
-pt = function(e) {
-  if (this.disabled) return;
-  const i = e.target.closest(this.ns.ce("predefine-color"));
-  if (!i) return;
-  const u = i.getAttribute("data-color");
-  u && a(this, o, st).call(this, u);
-}, /**
- * 根据颜色值更新所有相关状态
- * @param {string} colorValue - 颜色值字符串
- */
-st = function(e) {
-  a(this, o, Z).call(this), this.value = e, t(this, s).color.setValue(e);
-  const i = t(this, s).color.hsvStrToHsvObject(
-    t(this, s).color.toHsv(!0)
-  );
-  if (i) {
-    const u = parseInt(i.h), b = i.s, c = i.v, p = i.a ? parseFloat(i.a) : 1;
-    t(this, s).hue = u, t(this, s).saturation = b, t(this, s).value = c, t(this, s).alpha = p;
-  }
-  a(this, o, et).call(this), t(this, D).call(this), a(this, o, H).call(this);
-}, /**
- * 更新文字展示模式
- */
-it = function() {
-  !t(this, g) || !t(this, B) || (a(this, o, Z).call(this), this.updateContainerClasslist());
-}, /**
- * 更新颜色输入框的值
- */
-Z = function() {
-  this.clearable && t(this, g) ? t(this, g).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, g)) return;
-  const i = t(this, g).getAttribute("value") || "";
-  if (!i) {
-    this.value = "", t(this, s).lastValidValue = "";
-    return;
-  }
-  a(this, o, bt).call(this, i) ? (t(this, s).lastValidValue = i, a(this, o, st).call(this, i)) : (t(this, g).setAttribute("value", t(this, s).lastValidValue || ""), this.dispatchEvent(
-    new qt({ value: i })
-  ));
-}, /**
- * 验证颜色格式是否合法
- * @param {string} colorValue - 颜色值
- * @returns {boolean} 是否合法
- */
-bt = function(e) {
-  return F.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 });
+        ).join("")
+      );
+    }
   }
-}
-var $, w, I, K, q, U, C, X, Y, _, S, f, N, r, ft, gt, mt, yt, wt, Ct, at, O, z, j, St, Vt;
-class Dt extends kt {
+  /** 从颜色值更新所有状态 */
+  _updateColorFromValue(t) {
+    this._updateColorInputValue(), this.value = t, this._states.color.setValue(t), this._parseHsvFromColor(), this._updateCursorPosition(), this._updateSvpanelStatus(), this._emitChangeEvent();
+  }
+  /** 更新文本显示模式 */
+  _updateTextDisplayMode() {
+    !this._colorInput || !this._textDisplay || (this._updateColorInputValue(), this.updateContainerClasslist());
+  }
+  /** 更新颜色输入框的值 */
+  _updateColorInputValue() {
+    this.clearable && this._colorInput ? this._colorInput.setAttribute("value", this.value) : !this.clearable && this._textDisplay && (this._textDisplay.textContent = this.value);
+  }
+  /** 验证颜色值是否合法 */
+  _validateColor(t) {
+    return E.isValidColor(t);
+  }
+  resetCursorPosition() {
+    this._states.hue = 0, this._states.saturation = 1, this._states.value = 1, this._states.alpha = 1, this._states.isFirstValueUpdate = !1, this._saturationThumb && (this._saturationThumb.style.left = "", this._saturationThumb.style.top = ""), this._hueThumb && (this._hueThumb.style.top = ""), this._alphaThumb && (this._alphaThumb.style.left = ""), this._updateSvpanelStatus();
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._updateTextDisplayMode();
+  }
+  $mounted() {
+    if (this.value) {
+      this._states.color.setValue(this.value);
+      const t = this._states.color.toString(this._getEffectiveFormat());
+      if (t !== this.value) {
+        this.value = t;
+        return;
+      }
+    }
+    this._updateCursorPosition();
+  }
+};
+g([
+  C(h.cb())
+], v.prototype, "_container", 2);
+g([
+  C(h.ce("svpanel"))
+], v.prototype, "_saturation", 2);
+g([
+  C(h.ce("svpanel-cursor"))
+], v.prototype, "_saturationThumb", 2);
+g([
+  C(h.ce("hue-slider"))
+], v.prototype, "_hue", 2);
+g([
+  C(h.ce("hue-slider-thumb"))
+], v.prototype, "_hueThumb", 2);
+g([
+  C(h.ce("alpha-slider"))
+], v.prototype, "_alpha", 2);
+g([
+  C(h.ce("alpha-slider-thumb"))
+], v.prototype, "_alphaThumb", 2);
+g([
+  C(h.ce("predefine"))
+], v.prototype, "_predefineList", 2);
+g([
+  C(h.ce("color-input"))
+], v.prototype, "_colorInput", 2);
+g([
+  C(h.ce("text-display"))
+], v.prototype, "_textDisplay", 2);
+g([
+  w({
+    type: String,
+    default: "",
+    observer(t) {
+      this._states.lastValidValue = t, t && this._states.color.setValue(t), this._updateCursorPosition(), this._updateSvpanelStatus(), this._updateColorInputValue();
+    }
+  })
+], v.prototype, "value", 2);
+g([
+  w({
+    type: H(bt),
+    default: "hex",
+    observer(t) {
+      this.value && (this.value = this._states.color.toString(this._getEffectiveFormat()));
+    }
+  })
+], v.prototype, "colorFormat", 2);
+g([
+  w({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this.value && (this.value = this._states.color.toString(this._getEffectiveFormat())), this._updateCursorPosition();
+    }
+  })
+], v.prototype, "showAlpha", 2);
+g([
+  w({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], v.prototype, "disabled", 2);
+g([
+  w({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], v.prototype, "border", 2);
+g([
+  w({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this._updateTextDisplayMode();
+    }
+  })
+], v.prototype, "clearable", 2);
+g([
+  z({
+    type: Array,
+    default: [],
+    observer(t) {
+      this._renderPredefineColors(t);
+    }
+  })
+], v.prototype, "predefine", 2);
+g([
+  S("mousedown", h.ce("svpanel"))
+], v.prototype, "_handleSaturationMouseDown", 1);
+g([
+  S("mousedown", h.ce("hue-slider"))
+], v.prototype, "_handleHueMouseDown", 1);
+g([
+  S("mousedown", h.ce("alpha-slider"))
+], v.prototype, "_handleAlphaMouseDown", 1);
+g([
+  S("change", h.ce("color-input"))
+], v.prototype, "_handleColorInputChange", 1);
+g([
+  S("blur", h.ce("color-input"))
+], v.prototype, "_handleColorInputBlur", 1);
+g([
+  S("click", h.ce("predefine"))
+], v.prototype, "_handlePredefineListClick", 1);
+v = g([
+  W(it, { styles: [ut] })
+], v);
+var gt = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, f = (t, e, s, a) => {
+  for (var i = a > 1 ? void 0 : a ? mt(e, s) : e, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (i = (a ? o(e, s, i) : o(i)) || i);
+  return a && i && gt(e, s, i), i;
+};
+const ot = "ea-color-picker", d = R(ot), Ct = ["hsl", "hsv", "hex", "rgb", "rgba"], yt = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end"
+];
+let _ = class extends nt {
   constructor() {
-    super();
-    l(this, r);
-    /** @type {HTMLDivElement} */
-    l(this, $);
-    /** @type {import("@/common/ea-popper").EaPopper} */
-    l(this, w);
-    /** @type {HTMLDivElement} */
-    l(this, I);
-    /** @type {HTMLDivElement} */
-    l(this, K);
-    /** @type {HTMLDivElement} */
-    l(this, q);
-    /** @type {import("@/components/ea-icon").EaIcon} */
-    l(this, U);
-    /** @type {import("@/components/ea-color-picker/components/ea-color-picker-panel").EaColorPickerPanel} */
-    l(this, C);
-    /** @type {HTMLLabelElement} */
-    l(this, X);
-    /** @type {import("@/components/ea-button").EaButton} */
-    l(this, Y);
-    /** @type {import("@/components/ea-button").EaButton} */
-    l(this, _);
-    l(this, S, new AbortController());
-    l(this, f, {
-      /** @type {boolean} 弹窗是否打开 */
+    super(...arguments), this.label = "", this.value = "", this.disabled = !1, this.clearable = !1, this.size = "", this.colorFormat = "hex", this.showAlpha = !1, this.tabindex = 0, this.required = !1, this.placement = "bottom", this.predefine = [], this._uniqueId = _._instanceCount++, this._abortControllerStates = {
+      close: null
+    }, this._states = {
       isOpen: !1,
-      /** @type {import("@/utils/Color").Color} 当前颜色对象 */
-      color: new F(),
       isPanelDefined: !1,
-      /** @type {string} 打开面板前的颜色值 */
       previousValue: ""
-    });
-    l(this, N, {
-      /** @type {AbortController | null} 关闭弹窗的控制器 */
-      close: null
-    });
-    T(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (e) => {
-          t(this, X).textContent = e;
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          a(this, r, z).call(this), a(this, r, j).call(this, e), t(this, C).setAttribute("value", e);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      clearable: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          this.updateContainerClasslist(), t(this, C).setAttribute("clearable", e);
-        }
-      },
-      size: {
-        type: $t,
-        default: "",
-        observer: (e) => {
-          this.updateContainerClasslist();
-        }
-      },
-      "color-format": {
-        type: ["hsl", "hsv", "hex", "rgb"],
-        default: "hex",
-        observer: (e) => {
-          t(this, C).setAttribute("color-format", e);
-        }
-      },
-      "show-alpha": {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, C).setAttribute("show-alpha", e);
-        }
-      },
-      tabindex: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-        }
+    };
+  }
+  updateContainerClasslist() {
+    const t = d(
+      {
+        [this.size]: !!this.size
       },
-      required: {
-        type: Boolean,
-        default: !1
-      }
-    }));
-    T(this, "propState", this.properties({
-      predefine: {
-        props: !0,
-        type: Array,
-        default: [],
-        observer: async (e) => {
-          t(this, f).isPanelDefined || (await customElements.whenDefined("ea-color-picker-panel"), t(this, f).isPanelDefined = !0), t(this, C).predefine = e;
-        }
-      }
-    }));
-    T(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);
-        }
+      {
+        "has-value": !!this.value,
+        disabled: this.disabled
       }
-    }));
-    this.stylesheet = Mt, 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")}" 
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    return P(`
+      <label class="${d.e("form-label")}" part="form-label"></label>
+      <div class="${d()}" part="container" tabindex="${this.tabindex}">
+        <ea-popper
+          class="${d.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 class="${d.e("trigger")}" part="trigger" slot="reference">
+            <div class="${d.e("outer")}" part="outer">
+              <div class="${d.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" name="xmark"></ea-icon>
+            <div class="${d.e("icon-wrapper")}" part="icon-wrapper">
+              <ea-icon class="${d.e("icon")} ${d.e("status")}" part="status-icon" name="xmark"></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>
+          <ea-color-picker-panel class="${d.e("panel")}" part="panel">
+            <div slot="footer" class="${d.e("footer-actions")}" part="footer-actions">
+              <ea-button class="${d.e("clear-btn")}" part="clear-btn" plain text>clear</ea-button>
+              <ea-button class="${d.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, $, this.shadowRoot.querySelector(e.cb())), d(this, w, this.shadowRoot.querySelector(e.ce("popper"))), d(this, I, this.shadowRoot.querySelector(e.ce("trigger"))), d(this, K, this.shadowRoot.querySelector(e.ce("outer"))), d(this, q, this.shadowRoot.querySelector(e.ce("inner"))), d(this, U, this.shadowRoot.querySelector(e.ce("icon", "status"))), d(this, C, 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() {
+  _handleTriggerClick(t) {
     var e;
-    super.connectedCallback(), (e = t(this, S)) == null || e.abort(), d(this, S, new AbortController()), a(this, r, ft).call(this);
+    this.disabled || ((e = this._abortControllerStates.close) == null || e.abort(), this._abortControllerStates.close = new AbortController(), this._states.previousValue = this.value, this._showPopper(), document.addEventListener("click", this._handleDocumentClick.bind(this), {
+      signal: this._abortControllerStates.close.signal
+    }));
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const e = this.computedClasslist(
-      this.ns.b("container"),
-      {
-        ["--" + this.size]: this.size
-      },
-      {
-        "has-value": this.value,
-        disabled: this.disabled
+  _handlePopperShow() {
+    this._states.isOpen = !0, this.updateContainerClasslist(), this._updateAriaExpanded();
+  }
+  _handlePopperHide() {
+    this._states.isOpen = !1, this.updateContainerClasslist(), this._updateAriaExpanded(), this._states.previousValue !== void 0 && this._states.previousValue !== this.value && (this.value = this._states.previousValue, this._updateTriggerColor(), this._updateStatusIcon());
+  }
+  _handlePanelChange(t) {
+    const { value: e } = t.detail;
+    this.value = e, this._updateTriggerColor(), this._updateStatusIcon();
+  }
+  _handleClearClick() {
+    var t, e;
+    this.value = "", this._panel.style.setProperty(
+      "--ea-color-picker-panel-background-color",
+      "#ff0000"
+    ), (e = (t = this._panel).resetCursorPosition) == null || e.call(t), this._updateTriggerColor(), this._updateStatusIcon(), this.emit("change", { detail: { value: "" } }), this.dispatchEvent(new ct()), this._states.previousValue = "", this._hidePopper();
+  }
+  _handleConfirmClick() {
+    this._states.previousValue = this.value, this._hidePopper();
+  }
+  /** 处理文档点击事件，点击外部时关闭弹出层 */
+  _handleDocumentClick(t) {
+    this._states.isOpen && (!this.contains(t.target) || t.target !== this) && this._hidePopper();
+  }
+  /** 显示弹出层 */
+  _showPopper() {
+    this._popper && this._popper.show();
+  }
+  /** 隐藏弹出层 */
+  _hidePopper() {
+    this._popper && this._popper.hide();
+  }
+  /** 更新触发器内层背景颜色 */
+  _updateTriggerColor() {
+    if (this._inner) {
+      if (!this.value) {
+        this._inner.style.setProperty(
+          "--ea-color-picker-inner-background-color",
+          "transparent"
+        );
+        return;
       }
-    );
-    return t(this, $).className = e, e;
+      try {
+        const t = new E(this.value);
+        this._inner.style.setProperty(
+          "--ea-color-picker-inner-background-color",
+          t.toRgb(!0)
+        );
+      } catch {
+        this._inner.style.setProperty(
+          "--ea-color-picker-inner-background-color",
+          "transparent"
+        );
+      }
+    }
   }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, S)) == null || e.abort();
+  /** 更新状态图标 */
+  _updateStatusIcon(t = this.value) {
+    this._statusIcon && this._statusIcon.setAttribute("name", t ? "angle-down" : "xmark");
+  }
+  /** 设置触发器的 ARIA 属性，遵循 W3C disclosure 模式 */
+  _setupAria() {
+    this._trigger && (this._trigger.setAttribute("aria-expanded", "false"), this._trigger.setAttribute("aria-haspopup", "dialog"), this._trigger.setAttribute("role", "button"), this._trigger.hasAttribute("tabindex") || this._trigger.setAttribute("tabindex", "0"));
+  }
+  /** 更新触发器的 aria-expanded 状态 */
+  _updateAriaExpanded() {
+    this._trigger && this._trigger.setAttribute("aria-expanded", String(this._states.isOpen));
   }
-  /**
-   * 手动显示颜色选择器面板
-   */
   show() {
-    a(this, r, at).call(this);
+    this._showPopper();
   }
-  /**
-   * 手动隐藏颜色选择器面板
-   */
   hide() {
-    a(this, r, O).call(this);
+    this._hidePopper();
   }
-  /**
-   * 使颜色选择器获得焦点
-   */
   focus() {
-    t(this, $) && t(this, $).focus();
+    this._container && this._container.focus();
   }
-  /**
-   * 使颜色选择器失去焦点
-   */
   blur() {
-    t(this, $) && t(this, $).blur();
+    this._container && this._container.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
-   */
+    this.required && !this.value ? this.setValidity({ valueMissing: !0 }, "请选择一个颜色") : this.setValidity({});
+  }
   checkValidity() {
-    return this.updateValidity(), this.internals.checkValidity();
+    return this.updateValidity(), this.internals && typeof this.internals.checkValidity == "function" ? this.internals.checkValidity() : !this.required || !!this.value;
   }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean} 如果字段有效返回 true，否则返回 false
-   */
   reportValidity() {
-    return this.updateValidity(), this.internals.reportValidity();
+    return this.updateValidity(), this.internals && typeof this.internals.reportValidity == "function" ? this.internals.reportValidity() : !this.required || !!this.value;
   }
-}
-$ = new WeakMap(), w = new WeakMap(), I = new WeakMap(), K = new WeakMap(), q = new WeakMap(), U = new WeakMap(), C = new WeakMap(), X = new WeakMap(), Y = new WeakMap(), _ = new WeakMap(), S = new WeakMap(), f = new WeakMap(), N = new WeakMap(), r = new WeakSet(), /**
- * 绑定组件事件监听器
- */
-ft = function() {
-  !t(this, I) || !t(this, w) || (t(this, I).addEventListener("click", a(this, r, gt).bind(this), {
-    signal: t(this, S).signal
-  }), t(this, w).addEventListener("show", a(this, r, mt).bind(this), {
-    signal: t(this, S).signal
-  }), t(this, w).addEventListener("hide", a(this, r, yt).bind(this), {
-    signal: t(this, S).signal
-  }), t(this, C).addEventListener("change", a(this, r, wt).bind(this), {
-    signal: t(this, S).signal
-  }), t(this, Y).addEventListener("click", a(this, r, St).bind(this), {
-    signal: t(this, S).signal
-  }), t(this, _).addEventListener(
-    "click",
-    a(this, r, Vt).bind(this),
-    {
-      signal: t(this, S).signal
+  $mount() {
+    this.updateContainerClasslist(), this._setupAria();
+  }
+  $mounted() {
+    this._panel && (this._panel.setAttribute("color-format", this.colorFormat), this._panel.setAttribute("clearable", String(this.clearable)), this._panel.setAttribute("value", this.value), this._panel.setAttribute("show-alpha", String(this.showAlpha)), this._panel.predefine = this.predefine);
+  }
+};
+_._instanceCount = 0;
+f([
+  C(d.ce("form-label"))
+], _.prototype, "_label", 2);
+f([
+  C(d.cb())
+], _.prototype, "_container", 2);
+f([
+  C(d.ce("popper"))
+], _.prototype, "_popper", 2);
+f([
+  C(d.ce("trigger"))
+], _.prototype, "_trigger", 2);
+f([
+  C(d.ce("outer"))
+], _.prototype, "_outer", 2);
+f([
+  C(d.ce("inner"))
+], _.prototype, "_inner", 2);
+f([
+  C(d.ce("icon") + d.ce("status"))
+], _.prototype, "_statusIcon", 2);
+f([
+  C(d.ce("panel"))
+], _.prototype, "_panel", 2);
+f([
+  C(d.ce("clear-btn"))
+], _.prototype, "_clearBtn", 2);
+f([
+  C(d.ce("confirm-btn"))
+], _.prototype, "_confirmBtn", 2);
+f([
+  w({
+    type: String,
+    default: "",
+    observer(t) {
+      this._label.textContent = t;
+    },
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-color-picker__trigger",
+      map: (t) => t || "颜色选择"
     }
-  ));
-}, /**
- * 处理触发器点击事件
- * @param {MouseEvent} e - 鼠标事件对象
- */
-gt = function(e) {
-  var i;
-  this.disabled || ((i = t(this, N).close) == null || i.abort(), t(this, N).close = new AbortController(), t(this, f).previousValue = this.value, a(this, r, at).call(this), document.addEventListener("click", a(this, r, Ct).bind(this), {
-    signal: t(this, N).close.signal
-  }));
-}, /**
- * 处理弹窗显示事件
- */
-mt = function() {
-  t(this, f).isOpen = !0, this.updateContainerClasslist();
-}, /**
- * 处理弹窗隐藏事件
- */
-yt = function() {
-  t(this, f).isOpen = !1, this.updateContainerClasslist(), t(this, f).previousValue !== void 0 && t(this, f).previousValue !== this.value && (this.value = t(this, f).previousValue, a(this, r, z).call(this), a(this, r, j).call(this));
-}, /**
- * 处理面板颜色变化事件
- * @param {CustomEvent} e - 自定义事件对象
- */
-wt = function(e) {
-  const { value: i } = e.detail;
-  this.value = i, a(this, r, z).call(this), a(this, r, j).call(this);
-}, /**
- * 处理文档点击事件（用于关闭弹窗）
- * @param {MouseEvent} e - 鼠标事件对象
- */
-Ct = function(e) {
-  t(this, f).isOpen && (!this.contains(e.target) || e.target !== this) && a(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, q)) {
-    if (!this.value) {
-      t(this, q).style.setProperty(
-        "--ea-color-picker-inner-background-color",
-        "transparent"
-      );
-      return;
+  })
+], _.prototype, "label", 2);
+f([
+  w({
+    type: String,
+    default: "",
+    observer() {
+      this.setValue(this.value || null), this._updateTriggerColor(), this._updateStatusIcon(), this._panel && this._panel.setAttribute("value", this.value);
     }
-    try {
-      const e = new F(this.value);
-      t(this, q).style.setProperty(
-        "--ea-color-picker-inner-background-color",
-        e.toRgb(!0)
-      );
-    } catch {
-      t(this, q).style.setProperty(
-        "--ea-color-picker-inner-background-color",
-        "transparent"
-      );
+  })
+], _.prototype, "value", 2);
+f([
+  w({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    },
+    a11y: {
+      ariaAttr: "aria-disabled",
+      target: ".ea-color-picker__trigger",
+      map: (t) => String(t)
     }
-  }
-}, /**
- * 更新状态图标
- * @param {string} colorValue - 颜色值
- */
-j = function(e = this.value) {
-  t(this, U) && t(this, U).setAttribute("name", e ? "angle-down" : "xmark");
-}, /**
- * 处理清除按钮点击事件
- */
-St = function() {
-  var e, i;
-  this.value = "", t(this, C).style.setProperty(
-    "--ea-color-picker-panel-background-color",
-    "#ff0000"
-  ), (i = (e = t(this, C)).resetCursorPosition) == null || i.call(e), a(this, r, z).call(this), a(this, r, j).call(this), this.emit("change", { detail: { value: "" } }), this.dispatchEvent(new Bt()), t(this, f).previousValue = "", a(this, r, O).call(this);
-}, /**
- * 处理确认按钮点击事件
- */
-Vt = function() {
-  t(this, f).previousValue = this.value, a(this, r, O).call(this);
-};
-customElements.get("ea-color-picker") || customElements.define("ea-color-picker", Dt);
+  })
+], _.prototype, "disabled", 2);
+f([
+  w({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._panel && this._panel.setAttribute("clearable", String(this.clearable));
+    }
+  })
+], _.prototype, "clearable", 2);
+f([
+  w({
+    type: ["small", "medium", "large"],
+    default: "",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], _.prototype, "size", 2);
+f([
+  w({
+    type: H(Ct),
+    default: "hex",
+    observer(t) {
+      this._panel && this._panel.setAttribute("color-format", t);
+    }
+  })
+], _.prototype, "colorFormat", 2);
+f([
+  w({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._panel && this._panel.setAttribute("show-alpha", String(t));
+    }
+  })
+], _.prototype, "showAlpha", 2);
+f([
+  w({
+    type: Number,
+    default: 0
+  })
+], _.prototype, "tabindex", 2);
+f([
+  w({
+    type: Boolean,
+    default: !1
+  })
+], _.prototype, "required", 2);
+f([
+  w({
+    type: H(yt),
+    default: "bottom",
+    observer(t) {
+      this._popper.setAttribute("placement", t);
+    }
+  })
+], _.prototype, "placement", 2);
+f([
+  z({
+    type: Array,
+    default: [],
+    observer(t) {
+      this._states.isPanelDefined ? this._panel.predefine = t : customElements.whenDefined("ea-color-picker-panel").then(() => {
+        this._states.isPanelDefined = !0, this._panel.predefine = t;
+      });
+    }
+  })
+], _.prototype, "predefine", 2);
+f([
+  S("click", d.ce("trigger"))
+], _.prototype, "_handleTriggerClick", 1);
+f([
+  S("show", d.ce("popper"))
+], _.prototype, "_handlePopperShow", 1);
+f([
+  S("hide", d.ce("popper"))
+], _.prototype, "_handlePopperHide", 1);
+f([
+  S("change", d.ce("panel"))
+], _.prototype, "_handlePanelChange", 1);
+f([
+  S("click", d.ce("clear-btn"))
+], _.prototype, "_handleClearClick", 1);
+f([
+  S("click", d.ce("confirm-btn"))
+], _.prototype, "_handleConfirmClick", 1);
+_ = f([
+  W(ot, { styles: [pt] })
+], _);
 export {
-  Dt as EaColorPicker,
-  Lt as EaColorPickerPanel
+  E as Color,
+  _ as EaColorPicker,
+  v as EaColorPickerPanel
 };