easy-component-ui 3.0.13 → 3.0.14

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

@@ -1,888 +0,0 @@
-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
-};