easy-component-ui 3.0.14 → 3.0.15

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

@@ -0,0 +1,888 @@
+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 "./ea-input.js";
+import { E as G } from "../utils/Utils.js";
+import "./ea-popper.js";
+import "./ea-button.js";
+class Rt extends Event {
+  constructor(n) {
+    super("ea-active-change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = n;
+  }
+}
+class qt extends Event {
+  constructor(n) {
+    super("ea-invalid-color", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = n;
+  }
+}
+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 {
+  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} 饱和度拖拽控制器 */
+      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 F(),
+      /** @type {boolean} 是否正在拖拽 */
+      isDragging: !1,
+      /** @type {string} 上一个验证通过的颜色值 */
+      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,
+        s: 1,
+        v: 1,
+        a: 1
+      });
+      this.style.setProperty(
+        "--ea-color-picker-panel-background-color",
+        e.toString(this["color-format"])
+      );
+    });
+    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"),
+      {},
+      {
+        disabled: this.disabled,
+        border: this.border,
+        "show-alpha": this["show-alpha"],
+        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>
+          </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, 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();
+  }
+  /**
+   * 重置光标和滑块位置到初始状态
+   */
+  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);
+  }
+}
+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
+    }
+  ), t(this, g).addEventListener(
+    "blur",
+    a(this, o, vt).bind(this),
+    {
+      signal: t(this, y).signal
+    }
+  ), t(this, L) && t(this, L).addEventListener(
+    "click",
+    a(this, o, pt).bind(this),
+    {
+      signal: t(this, y).signal
+    }
+  );
+}, /**
+ * 处理饱和度和值的更新
+ * @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
+    }
+  );
+}, /**
+ * 处理色调的更新
+ * @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
+    }
+  );
+}, /**
+ * 处理透明度的更新
+ * @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
+    }
+  );
+}, /**
+ * 更新光标位置
+ */
+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 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}"
+          ></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 });
+  }
+}
+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 {
+  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} 弹窗是否打开 */
+      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) => {
+        }
+      },
+      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);
+        }
+      }
+    }));
+    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")}" 
+          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" 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>
+            </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() {
+    var e;
+    super.connectedCallback(), (e = t(this, S)) == null || e.abort(), d(this, S, new AbortController()), a(this, r, ft).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, $).className = e, e;
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, S)) == null || e.abort();
+  }
+  /**
+   * 手动显示颜色选择器面板
+   */
+  show() {
+    a(this, r, at).call(this);
+  }
+  /**
+   * 手动隐藏颜色选择器面板
+   */
+  hide() {
+    a(this, r, O).call(this);
+  }
+  /**
+   * 使颜色选择器获得焦点
+   */
+  focus() {
+    t(this, $) && t(this, $).focus();
+  }
+  /**
+   * 使颜色选择器失去焦点
+   */
+  blur() {
+    t(this, $) && t(this, $).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();
+  }
+}
+$ = 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
+    }
+  ));
+}, /**
+ * 处理触发器点击事件
+ * @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;
+    }
+    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"
+      );
+    }
+  }
+}, /**
+ * 更新状态图标
+ * @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);
+export {
+  Dt as EaColorPicker,
+  Lt as EaColorPickerPanel
+};