easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-message-box.js

@@ -1,612 +1,591 @@
-var $ = Object.defineProperty;
-var O = (i) => {
-  throw TypeError(i);
-};
-var z = (i, s, e) => s in i ? $(i, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[s] = e;
-var H = (i, s, e) => z(i, typeof s != "symbol" ? s + "" : s, e), I = (i, s, e) => s.has(i) || O("Cannot " + e);
-var t = (i, s, e) => (I(i, s, "read from private field"), e ? e.call(i) : s.get(i)), a = (i, s, e) => s.has(i) ? O("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, e), l = (i, s, e, n) => (I(i, s, "write to private field"), n ? n.call(i, e) : s.set(i, e), e);
-import { EaOverlay as V } from "./ea-overlay.js";
+import { EaOverlay as z } from "./ea-overlay.js";
 import "./ea-input.js";
-import { s as N } from "../css/ea-message-box.style.js";
-import { t as K } from "../utils/timeout.js";
-import { E as U } from "../utils/Utils.js";
-var m, f, v, y, g, B, C, o, _, E, r, h, c, u, b, S, L, T, w, M;
-class D extends V {
+import { q as h, a, p as b, l as y, C as K } from "../core/decorator.js";
+import { c as H } from "../utils/bem.ts.js";
+import { h as R } from "../utils/html.ts.js";
+import { E as _ } from "../utils/Enum.ts.js";
+import { b as V } from "../core/constants.js";
+import { s as Y } from "../css/ea-message-box.style.js";
+import "./ea-icon.js";
+import { c as X } from "../utils/case-convert.ts.js";
+class q extends Event {
+  constructor(i) {
+    super("ea-confirm", { bubbles: !0, composed: !0 }), this.detail = i ?? {};
+  }
+}
+class k extends Event {
+  constructor(i) {
+    super("ea-cancel", { bubbles: !0, composed: !0 }), this.detail = i ?? {};
+  }
+}
+class F extends Event {
+  constructor(i) {
+    super("ea-message-close", { bubbles: !0, composed: !0 }), this.detail = i ?? {};
+  }
+}
+var j = Object.defineProperty, G = Object.getOwnPropertyDescriptor, n = (t, i, e, o) => {
+  for (var l = o > 1 ? void 0 : o ? G(i, e) : i, p = t.length - 1, u; p >= 0; p--)
+    (u = t[p]) && (l = (o ? u(i, e, l) : u(l)) || l);
+  return o && l && j(i, e, l), l;
+};
+const U = "ea-message-box", Z = H(U), r = H("ea-message-box-main"), J = _(["alert", "confirm", "prompt", "personalized"]), Q = _([
+  "primary",
+  "success",
+  "info",
+  "warning",
+  "error"
+]), W = _(["small", "medium", "large"]);
+let s = class extends z {
   constructor() {
-    super(...arguments);
-    /** @type {HTMLElement} */
-    a(this, m);
-    /** @type {HTMLElement} */
-    a(this, f);
-    /** @type {HTMLElement} */
-    a(this, v);
-    /** @type {HTMLElement} */
-    a(this, y);
-    /** @type {HTMLElement} */
-    a(this, g);
-    /** @type {HTMLElement} */
-    a(this, B);
-    /** @type {HTMLElement} */
-    a(this, C);
-    /** @type {HTMLInputElement} */
-    a(this, o);
-    /** @type {HTMLElement} */
-    a(this, _);
-    /** @type {HTMLElement} */
-    a(this, E);
-    /** @type {HTMLElement} */
-    a(this, r);
-    /** @type {HTMLElement} */
-    a(this, h);
-    /** @type {AbortController} */
-    a(this, c);
-    a(this, u, {
-      inputPattern: null,
-      dangerouslyUseHTMLString: !1,
-      confirmButtonLoading: !1
-    });
-    H(this, "state", this.properties({
-      boxType: {
-        type: ["alert", "confirm", "prompt", "personalized"],
-        default: "personalized",
-        observer: async (e) => {
-          const n = this.shadowRoot.querySelector(
-            ".ea-overlay__content"
-          );
-          t(this, S).call(this, e, n), t(this, m).className = this.updateContainerClasslist();
-        }
-      },
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: async (e) => {
-          this.status = e, t(this, m).className = this.updateContainerClasslist();
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, v).textContent = e;
-        }
-      },
-      message: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          this.dangerouslyUseHTMLString ? t(this, C).innerHTML = e : t(this, C).textContent = e;
-        }
-      },
-      type: {
-        type: ["primary", "success", "info", "warning", "error"],
-        default: "",
-        observer: (e) => {
-          const n = {
-            primary: "circle-info",
-            success: "circle-check",
-            info: "circle-info",
-            warning: "triangle-exclamation",
-            error: "circle-xmark"
-          };
-          this.icon = n[e], t(this, m).className = this.updateContainerClasslist();
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, y) && (t(this, y).name = e);
-        }
-      },
-      closeIcon: {
-        type: String,
-        default: "xmark",
-        observer: (e) => {
-          t(this, g).name = e;
-        }
-      },
-      showClose: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          t(this, g).style.display = e ? "block" : "none";
-        }
-      },
-      showCancelButton: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, h) && (t(this, h).style.display = e ? "inline-block" : "none");
-        }
-      },
-      showConfirmButton: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          t(this, r) && (t(this, r).style.display = e ? "inline-block" : "none");
-        }
-      },
-      confirmButtonText: {
-        type: String,
-        default: "OK",
-        observer: (e) => {
-          t(this, r).textContent = e;
-        }
-      },
-      closeOnPressEscape: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-        }
-      },
-      center: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, m).className = this.updateContainerClasslist();
-        }
-      },
-      roundButton: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, r) && t(this, r).setAttribute("round", e), t(this, h) && t(this, h).setAttribute("round", e);
-        }
-      },
-      buttonSize: {
-        type: ["small", "medium", "large"],
-        default: "medium",
-        observer: (e) => {
-          t(this, r) && t(this, r).setAttribute("size", e), t(this, h) && t(this, h).setAttribute("size", e);
-        }
-      },
-      showInput: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, o).style.display = e ? "block" : "none";
-        }
-      },
-      inputPlaceholder: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, o) && (t(this, o).placeholder = e);
-        }
-      },
-      inputType: {
-        type: String,
-        default: "text",
-        observer: (e) => {
-          t(this, o) && (t(this, o).type = e);
-        }
-      },
-      inputValue: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, o) && (t(this, o).value = e);
-        }
-      },
-      inputErrorMessage: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, o) && this.inputPattern && (t(this, _).textContent = e);
+    super(...arguments), this.boxType = "personalized", this.heading = "", this.message = "", this.variant = "", this.icon = "", this.closeIcon = "xmark", this.showClose = !0, this.showCancelButton = !1, this.showConfirmButton = !0, this.confirmButtonText = "OK", this.cancelButtonText = "Cancel", this.center = !1, this.roundButton = !1, this.buttonSize = "medium", this.showInput = !1, this.inputPlaceholder = "", this.inputType = "text", this.inputValue = "", this.inputPattern = "", this.inputErrorMessage = "", this.movable = !1, this.inputValidator = null, this.dangerouslyUseHTMLString = !1, this.confirmButtonLoading = !1, this.distinguishCancelAndClose = !1;
+  }
+  /** 同步输入框属性 */
+  _syncInputProps() {
+    this._input && (this.inputPlaceholder && this._input.setAttribute("placeholder", this.inputPlaceholder), this.inputType && this._input.setAttribute("type", this.inputType), this.inputValue && this._input.setAttribute("value", this.inputValue));
+  }
+  /** 执行输入验证 */
+  async _validateInput() {
+    var e, o, l, p, u, d, f, C, g, v, B, E, A, x, w, T, P, S, M, I, L, O;
+    if (!this.showInput || !this._input) return !0;
+    (o = (e = this._input).setCustomValidity) == null || o.call(e, "");
+    const t = this._input.value || this._input.getAttribute("value") || "";
+    if (this.inputValidator)
+      try {
+        const m = await this.inputValidator(t);
+        if (m === !0) {
+          const $ = ((p = (l = this._input).checkValidity) == null ? void 0 : p.call(l)) ?? !0;
+          return $ || (d = (u = this._input).reportValidity) == null || d.call(u), $;
         }
+        const N = typeof m == "string" ? m : this.inputErrorMessage || "Validation failed";
+        return (C = (f = this._input).setCustomValidity) == null || C.call(f, N), (v = (g = this._input).reportValidity) == null || v.call(g), !1;
+      } catch {
+        return !1;
+      }
+    if (this.inputPattern)
+      try {
+        if (!new RegExp(this.inputPattern).test(t))
+          return (E = (B = this._input).setCustomValidity) == null || E.call(
+            B,
+            this.inputErrorMessage || "Invalid input"
+          ), (x = (A = this._input).reportValidity) == null || x.call(A), !1;
+      } catch {
+        return (T = (w = this._input).setCustomValidity) == null || T.call(
+          w,
+          this.inputErrorMessage || "Invalid pattern"
+        ), (S = (P = this._input).reportValidity) == null || S.call(P), !1;
+      }
+    const i = ((I = (M = this._input).checkValidity) == null ? void 0 : I.call(M)) ?? !0;
+    return i || (O = (L = this._input).reportValidity) == null || O.call(L), i;
+  }
+  updateContainerClasslist() {
+    const t = super.updateContainerClasslist(), i = Z(
+      {
+        [this.variant]: !!this.variant,
+        center: this.center,
+        draggable: this.movable
       },
-      draggable: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, m).className = this.updateContainerClasslist();
-        }
+      {
+        "close-hidden": !this.showClose,
+        "cancel-hidden": !this.showCancelButton,
+        "confirm-hidden": !this.showConfirmButton,
+        "input-visible": this.showInput,
+        [`${this.boxType}-box`]: !!this.boxType
       }
-    }));
-    /**
-     * 派发事件
-     * @param {string} customEventName 自定义事件名称
-     * @param {object} detail 自定义事件详情
-     */
-    a(this, b, (e, n) => {
-      this.emit(e, {
-        detail: n,
-        bubbles: !0,
-        composed: !0
-      });
-    });
-    a(this, S, (e, n) => {
-      n.innerHTML = `
-      <div class="ea-message-box-main" part="container">
-        <header class="ea-message-box-main__header" part="header">
-          <div class="ea-message-box-main__title-container" part="title-wrap">
-            <ea-icon class="ea-message-box-main__type-icon" part="type-icon"></ea-icon>
-            <span class="ea-message-box-main__title" part="title"></span>
+    ), e = `${t} ${i}`.trim();
+    return this._container && (this._container.className = e), e;
+  }
+  html() {
+    const t = document.createElement("template");
+    t.innerHTML = super.html();
+    const i = t.content.querySelector(".ea-overlay__content");
+    return i.innerHTML = `
+      <div class='${r()}' part='container'>
+        <header class='${r.e("header")}' part='header'>
+          <div class='${r.e("title-container")}' part='title-wrap'>
+            <ea-icon class='${r.e("type-icon")}' part='type-icon'></ea-icon>
+            <span class='${r.e("title")}' part='title'></span>
           </div>
-          <ea-icon class="ea-message-box-main__icon-close" name="xmark" part="close-icon"></ea-icon>
+          <ea-icon class='${r.e("icon-close")}' name='xmark' part='close-icon'></ea-icon>
         </header>
-        <main class="ea-message-box-main__content" part="content">
-          <div class="ea-message-box-main__description" part="description"></div>
-          <ea-input class="ea-message-box-main__input" part="input"></ea-input>
-          <div class="ea-message-box-main__invalid-message" part="invalid-message"></div>
-        </main>
-        <footer class="ea-message-box-main__footer" part="footer">
-          <ea-button class="ea-message-box-main__cancel-button" part="cancel-button">Cancel</ea-button>
-          <ea-button class="ea-message-box-main__confirm-button" type="primary" part="confirm-button">OK</ea-button>
-        </footer>
+        <form class='${r.e("form")}' part='content'>
+          <div class='${r.e("description")}' part='description'></div>
+          <ea-input class='${r.e("input")}' part='input'></ea-input>
+          <footer class='${r.e("footer")}' part='footer'>
+            <ea-button class='${r.e("cancel-button")}' part='cancel-button'>Cancel</ea-button>
+            <ea-button class='${r.e("confirm-button")}' variant='primary' type='submit' part='confirm-button'>OK</ea-button>
+          </footer>
+        </form>
       </div>
-    `, l(this, m, this.shadowRoot.querySelector(".ea-overlay")), l(this, f, this.shadowRoot.querySelector(
-        ".ea-message-box-main__header"
-      )), l(this, v, this.shadowRoot.querySelector(".ea-message-box-main__title")), l(this, y, this.shadowRoot.querySelector(
-        ".ea-message-box-main__type-icon"
-      )), l(this, g, this.shadowRoot.querySelector(
-        ".ea-message-box-main__icon-close"
-      )), l(this, B, this.shadowRoot.querySelector(
-        ".ea-message-box-main__content"
-      )), l(this, E, this.shadowRoot.querySelector(
-        ".ea-message-box-main__footer"
-      )), l(this, h, this.shadowRoot.querySelector(
-        ".ea-message-box-main__cancel-button"
-      )), l(this, r, this.shadowRoot.querySelector(
-        ".ea-message-box-main__confirm-button"
-      )), l(this, C, this.shadowRoot.querySelector(
-        ".ea-message-box-main__description"
-      )), l(this, o, this.shadowRoot.querySelector(".ea-message-box-main__input")), l(this, _, this.shadowRoot.querySelector(
-        ".ea-message-box-main__invalid-message"
-      )), t(this, o) && K(() => {
-        t(this, o).focus();
-      }, 0);
-    });
-    /**
-     * 处理带有匹配规则的输入框输入
-     * @returns {Promise<boolean>} Promise.
-     */
-    a(this, L, () => new Promise((e, n) => {
-      if (!t(this, o) || !this.inputPattern) return e(!0);
-      const d = this.inputPattern.test(t(this, o).value);
-      t(this, m).classList.toggle("is-invalid", !d), d ? e(!0) : n(
-        new Error(
-          `[EaMessageBox] ${this["input-error-message"] || "input pattern is not valid."}`
-        )
-      );
-    }));
-    /**
-     * 初始化确认事件
-     */
-    a(this, T, async () => {
-      var e;
-      try {
-        await t(this, L).call(this), (e = t(this, c)) == null || e.abort(), t(this, b).call(this, "confirm");
-      } catch {
-      }
-    });
-    /**
-     * 触发取消事件
-     */
-    a(this, w, () => {
-      this.distinguishCancelAndClose ? t(this, b).call(this, "message-close") : t(this, b).call(this, "cancel");
-    });
-    /**
-     * 初始化拖拽事件
-     */
-    a(this, M, (e) => {
-      if (!t(this, f).contains(e.target) || t(this, f) === e.target)
-        return;
-      const n = new AbortController(), d = this.shadowRoot.querySelector(
-        ".ea-overlay__content"
-      );
-      window.addEventListener(
-        "mousemove",
-        (x) => {
-          d.style.left = x.clientX + "px", d.style.top = x.clientY + "px";
-        },
-        {
-          signal: n.signal
-        }
-      ), window.addEventListener(
-        "mouseup",
-        () => {
-          n.abort();
-        },
-        { signal: n.signal }
-      );
-    });
+    `, t.innerHTML;
   }
-  // ------- inputPattern -------
-  // #region
-  get inputPattern() {
-    return t(this, u).inputPattern;
+  /** 根据 distinguishCancelAndClose 设置派发关闭类事件 */
+  _dispatchCloseEvent() {
+    this.distinguishCancelAndClose ? this.dispatchEvent(new F()) : this.dispatchEvent(new k());
   }
-  set inputPattern(e) {
-    t(this, u).inputPattern = e;
+  _handleFormSubmit(t) {
+    t.preventDefault(), this._validateInput().then((i) => {
+      if (i) {
+        const e = this.showInput && this._input ? this._input.value || this._input.getAttribute("value") || "" : void 0;
+        this.dispatchEvent(new q({ value: e }));
+      }
+    });
   }
-  // #endregion
-  // ------- end -------
-  // ------- dangerouslyUseHTMLString -------
-  // #region
-  get dangerouslyUseHTMLString() {
-    return t(this, u).dangerouslyUseHTMLString;
+  _handleCancelClick() {
+    this.dispatchEvent(new k());
   }
-  set dangerouslyUseHTMLString(e) {
-    t(this, u).dangerouslyUseHTMLString = e;
+  _handleCloseIconClick() {
+    this.showClose && this._dispatchCloseEvent();
   }
-  // #endregion
-  // ------- end -------
-  // ------- confirmButtonLoading -------
-  // #region
-  get confirmButtonLoading() {
-    return t(this, u).confirmButtonLoading;
+  _handleDragStart(t) {
+    if (!this.movable || !this._header.contains(t.target) || this._closeIcon.contains(t.target)) return;
+    const i = new AbortController(), e = this._overlayContent.getBoundingClientRect(), o = t.clientX - e.left, l = t.clientY - e.top, p = (d) => {
+      this._overlayContent.style.left = d.clientX - o + "px", this._overlayContent.style.top = d.clientY - l + "px";
+    }, u = () => {
+      i.abort();
+    };
+    window.addEventListener("mousemove", p, {
+      signal: i.signal
+    }), window.addEventListener("mouseup", u, {
+      signal: i.signal
+    });
   }
-  set confirmButtonLoading(e) {
-    t(this, u).confirmButtonLoading = e, t(this, r) && (t(this, o).disabled = e, t(this, r).loading = e);
+  _handleKeyDown(t) {
+    !this.visible || !this.closeOnPressEscape || t.key !== "Escape" || (t.stopImmediatePropagation(), t.preventDefault(), this._dispatchCloseEvent());
   }
-  // #endregion
-  // ------- end -------
-  // ------- distinguishCancelAndClose -------
-  // #region
-  get distinguishCancelAndClose() {
-    return t(this, u).distinguishCancelAndClose;
+  _handleMaskClick(t) {
+    !this.closeOnClickModal && t.target !== this._overlayContent || [...this.children].find(
+      (e) => e === t.target || e.contains(t.target)
+    ) || this._overlayContent === t.target || this._overlayContent.contains(t.target) || this._dispatchCloseEvent();
   }
-  set distinguishCancelAndClose(e) {
-    t(this, u).distinguishCancelAndClose = e;
+  $mount() {
+    var t;
+    (t = super.$mount) == null || t.call(this);
+    try {
+      this.setAttribute("role", "alertdialog");
+    } catch {
+      this.role = "alertdialog";
+    }
+    this.setAttribute("aria-modal", "true"), this.style.setProperty("--ea-overlay-content-width", "100%"), this.style.setProperty("--ea-overlay-content-max-width", "420px"), this.style.setProperty("--ea-overlay-content-height", "auto"), this._syncInputProps(), this.updateContainerClasslist();
   }
-  // #endregion
-  // ------- end -------
-  static get observedAttributes() {
-    return U.Array.toLowerCamelCase([
-      ...super.observedAttributes,
-      "boxType",
-      "visible",
-      "title",
-      "message",
-      "type",
-      "icon",
-      "showClose",
-      "closeIcon",
-      "showCancelButton",
-      "showConfirmButton",
-      "cancelButtonText",
-      "confirmButtonText",
-      "closeOnClickModal",
-      "center",
-      "roundButton",
-      "buttonSize",
-      "closeOnPressEscape",
-      "showInput",
-      "inputPlaceholder",
-      "inputType",
-      "inputValue",
-      // "inputPattern",
-      "inputErrorMessage",
-      "draggable"
-    ]);
+  $mounted() {
+    this._updateAriaLabelledBy(), this._updateAriaDescribedBy();
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    var e;
-    return `${super.updateContainerClasslist()} ${this.computedClasslist(
-      "ea-message-box",
-      {
-        "--visible": this.visible,
-        "--center": this.center,
-        [`--${this.type}`]: this.type,
-        "--draggable": this.draggable
-      },
-      {
-        invalid: t(this, o) && ((e = t(this, o)) == null ? void 0 : e.invalid),
-        [`${this["box-type"]}-box`]: this["box-type"]
-      }
-    )}`;
+  /** 更新 aria-labelledby 指向标题元素 */
+  _updateAriaLabelledBy() {
+    this._title && this.heading ? (this._title.id || (this._title.id = `ea-message-box-title-${s._idCounter++}`), this.setAttribute("aria-labelledby", this._title.id)) : this.heading ? (this.setAttribute("aria-label", this.heading), this.removeAttribute("aria-labelledby")) : (this.removeAttribute("aria-label"), this.removeAttribute("aria-labelledby"));
   }
-  connectedCallback() {
-    var e;
-    this.setAttribute("role", "dialog"), this["content-width"] = "100%", this["content-max-width"] = "420px", this["content-height"] = "auto", super.connectedCallback(), this.assignedStyle(N), (e = t(this, c)) == null || e.abort(), l(this, c, new AbortController()), t(this, r) && t(this, r).addEventListener("click", t(this, T), {
-      signal: t(this, c).signal
-    }), this["show-close"] && t(this, g).addEventListener(
-      "click",
-      t(this, w),
-      { signal: t(this, c).signal }
-    ), t(this, h) && t(this, h).addEventListener(
-      "click",
-      () => {
-        var n;
-        (n = t(this, c)) == null || n.abort(), t(this, b).call(this, "cancel");
-      },
-      { signal: t(this, c).signal }
-    ), this["close-on-press-escape"] && this.addEventListener(
-      "keydown",
-      (n) => {
-        n.key === "Escape" && t(this, w).call(this);
-      },
-      { signal: t(this, c).signal }
-    ), this.addEventListener("close", t(this, w), {
-      signal: t(this, c).signal
-    }), this.draggable && this.shadowRoot.addEventListener("mousedown", t(this, M), {
-      signal: t(this, c).signal
-    });
+  /** 更新 aria-describedby 指向描述内容 */
+  _updateAriaDescribedBy() {
+    this.message && this._description ? (this._description.id || (this._description.id = `ea-message-box-desc-${s._idCounter++}`), this.setAttribute("aria-describedby", this._description.id)) : this.removeAttribute("aria-describedby");
   }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, c)) == null || e.abort();
+  $beforeUnmount() {
+    var t;
+    (t = super.$beforeUnmount) == null || t.call(this);
   }
-}
-m = new WeakMap(), f = new WeakMap(), v = new WeakMap(), y = new WeakMap(), g = new WeakMap(), B = new WeakMap(), C = new WeakMap(), o = new WeakMap(), _ = new WeakMap(), E = new WeakMap(), r = new WeakMap(), h = new WeakMap(), c = new WeakMap(), u = new WeakMap(), b = new WeakMap(), S = new WeakMap(), L = new WeakMap(), T = new WeakMap(), w = new WeakMap(), M = new WeakMap();
-window.customElements.get("ea-message-box") || window.customElements.define("ea-message-box", D);
-var P, k, A, q;
-class X {
-  /**
-   *
-   * @param {MessageBoxOptions} options
-   */
-  constructor(s) {
-    /** @type {MessageBoxOptions} */
-    a(this, P, {
+};
+s._idCounter = 0;
+n([
+  h(r.ce("header"))
+], s.prototype, "_header", 2);
+n([
+  h(r.ce("title"))
+], s.prototype, "_title", 2);
+n([
+  h(r.ce("type-icon"))
+], s.prototype, "_typeIcon", 2);
+n([
+  h(r.ce("icon-close"))
+], s.prototype, "_closeIcon", 2);
+n([
+  h(r.ce("content"))
+], s.prototype, "_content", 2);
+n([
+  h(r.ce("description"))
+], s.prototype, "_description", 2);
+n([
+  h(r.ce("input"))
+], s.prototype, "_input", 2);
+n([
+  h(r.ce("form"))
+], s.prototype, "_form", 2);
+n([
+  h(r.ce("cancel-button"))
+], s.prototype, "_cancelButton", 2);
+n([
+  h(r.ce("confirm-button"))
+], s.prototype, "_confirmButton", 2);
+n([
+  a({
+    type: J,
+    default: "personalized",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "boxType", 2);
+n([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this._title && (this._title.textContent = t), this._updateAriaLabelledBy();
+    }
+  })
+], s.prototype, "heading", 2);
+n([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this._description && (this.dangerouslyUseHTMLString ? this._description.innerHTML = R(t) : this._description.textContent = t, this._updateAriaDescribedBy());
+    }
+  })
+], s.prototype, "message", 2);
+n([
+  a({
+    type: Q,
+    default: "",
+    observer(t) {
+      t && V[t] && (this.icon = V[t]), this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "variant", 2);
+n([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this._typeIcon && this._typeIcon.setAttribute("name", t);
+    }
+  })
+], s.prototype, "icon", 2);
+n([
+  a({
+    type: String,
+    default: "xmark",
+    observer(t) {
+      this._closeIcon && this._closeIcon.setAttribute("name", t);
+    }
+  })
+], s.prototype, "closeIcon", 2);
+n([
+  a({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "showClose", 2);
+n([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "showCancelButton", 2);
+n([
+  a({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "showConfirmButton", 2);
+n([
+  a({
+    type: String,
+    default: "OK",
+    observer(t) {
+      this._confirmButton && (this._confirmButton.textContent = t);
+    }
+  })
+], s.prototype, "confirmButtonText", 2);
+n([
+  a({
+    type: String,
+    default: "Cancel",
+    observer(t) {
+      this._cancelButton && (this._cancelButton.textContent = t);
+    }
+  })
+], s.prototype, "cancelButtonText", 2);
+n([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "center", 2);
+n([
+  a({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._confirmButton && this._confirmButton.setAttribute("round", String(t)), this._cancelButton && this._cancelButton.setAttribute("round", String(t));
+    }
+  })
+], s.prototype, "roundButton", 2);
+n([
+  a({
+    type: W,
+    default: "medium",
+    observer(t) {
+      this._confirmButton && this._confirmButton.setAttribute("size", t), this._cancelButton && this._cancelButton.setAttribute("size", t);
+    }
+  })
+], s.prototype, "buttonSize", 2);
+n([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._syncInputProps();
+    }
+  })
+], s.prototype, "showInput", 2);
+n([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this._input && this._input.setAttribute("placeholder", t);
+    }
+  })
+], s.prototype, "inputPlaceholder", 2);
+n([
+  a({
+    type: String,
+    default: "text",
+    observer(t) {
+      this._input && this._input.setAttribute("type", t);
+    }
+  })
+], s.prototype, "inputType", 2);
+n([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this._input && this._input.setAttribute("value", t);
+    }
+  })
+], s.prototype, "inputValue", 2);
+n([
+  a({
+    type: String,
+    default: ""
+  })
+], s.prototype, "inputPattern", 2);
+n([
+  a({
+    type: String,
+    default: ""
+  })
+], s.prototype, "inputErrorMessage", 2);
+n([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "movable", 2);
+n([
+  b({
+    type: Function,
+    default: null
+  })
+], s.prototype, "inputValidator", 2);
+n([
+  b({
+    type: Boolean,
+    default: !1
+  })
+], s.prototype, "dangerouslyUseHTMLString", 2);
+n([
+  b({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._confirmButton && (this._input && (this._input.disabled = t), this._confirmButton.setAttribute("loading", String(t)));
+    }
+  })
+], s.prototype, "confirmButtonLoading", 2);
+n([
+  b({
+    type: Boolean,
+    default: !1
+  })
+], s.prototype, "distinguishCancelAndClose", 2);
+n([
+  y("submit", r.ce("form"))
+], s.prototype, "_handleFormSubmit", 1);
+n([
+  y("click", r.ce("cancel-button"))
+], s.prototype, "_handleCancelClick", 1);
+n([
+  y("click", r.ce("icon-close"))
+], s.prototype, "_handleCloseIconClick", 1);
+n([
+  y("mousedown", r.ce("header"))
+], s.prototype, "_handleDragStart", 1);
+n([
+  y("keydown", "document")
+], s.prototype, "_handleKeyDown", 1);
+n([
+  y("click", ".ea-overlay__mask")
+], s.prototype, "_handleMaskClick", 1);
+s = n([
+  K(U, { styles: [Y] })
+], s);
+const tt = [
+  "appendTo",
+  "inputPattern",
+  "inputValidator",
+  "beforeClose",
+  "confirmButtonLoading",
+  "dangerouslyUseHTMLString",
+  "distinguishCancelAndClose"
+], D = [
+  "closeOnClickModal",
+  "closeOnPressEscape",
+  "showCancelButton",
+  "showClose",
+  "showConfirmButton"
+];
+class et {
+  constructor(i) {
+    this._defaultOptions = {
       boxType: "personalized",
       distinguishCancelAndClose: !1,
-      title: "",
+      heading: "",
       dangerouslyUseHTMLString: !1,
       message: "",
       icon: "",
-      type: "primary",
-      closeIcon: "icon-cancel",
+      variant: "primary",
+      closeIcon: "xmark",
       showClose: !0,
-      // lockScroll: true,
       showCancelButton: !1,
       showConfirmButton: !0,
       confirmButtonLoading: !1,
       cancelButtonText: "Cancel",
       confirmButtonText: "OK",
       closeOnClickModal: !0,
-      closeOnPressEscape: !1,
+      closeOnPressEscape: !0,
       showInput: !1,
       inputPlaceholder: "",
       inputType: "text",
       inputValue: "",
       inputPattern: null,
-      //   inputValidator: null,
       inputErrorMessage: "",
+      inputValidator: null,
       center: !1,
-      draggable: !1,
+      movable: !1,
       roundButton: !1,
       buttonSize: "medium",
       appendTo: "body",
       beforeClose: null
-    });
-    a(this, k, [
-      "inputPattern",
-      "inputValidator",
-      "beforeClose",
-      "confirmButtonLoading",
-      "dangerouslyUseHTMLString",
-      "distinguishCancelAndClose"
-    ]);
-    /**
-     * 元素添加
-     * @param {HTMLElement} el
-     * @param {String | HTMLElement} appendTo
-     */
-    a(this, A, (s, e) => {
-      if (e instanceof HTMLElement)
-        e.appendChild(s);
-      else {
-        const n = document.querySelector(e);
-        n ? n.appendChild(s) : document.body.appendChild(s);
-      }
-    });
-    /**
-     * 元素渲染
-     * @param {MessageBoxOptions} options
-     * @returns
-     */
-    a(this, q, (s) => {
-      const e = document.createElement("ea-message-box");
-      for (const n in s)
-        if (t(this, k).includes(n))
-          e[n] = s[n];
-        else {
-          const d = U.String.toLowerCamelCase(n);
-          e.setAttribute(d, s[n]);
-        }
-      return e;
-    });
-    s = Object.assign(
-      { boxType: s.boxType },
-      t(this, P),
-      s
-    );
-    const e = t(this, q).call(this, s);
-    this.instance = e, t(this, A).call(this, e, s.appendTo);
+    };
+    const e = Object.assign(
+      { boxType: i.boxType },
+      this._defaultOptions,
+      i
+    ), o = this._renderer(e);
+    this.instance = o, this._appendToHandler(o, e.appendTo), this._applyDeferredBooleanProps(o, e), this._applyExcludedProps(o, e);
+  }
+  _appendToHandler(i, e) {
+    if (e instanceof HTMLElement)
+      e.appendChild(i);
+    else {
+      const o = document.querySelector(e || "body");
+      o ? o.appendChild(i) : document.body.appendChild(i);
+    }
+  }
+  _renderer(i) {
+    const e = document.createElement("ea-message-box");
+    for (const o in i) {
+      if (o === "appendTo" || D.includes(o) || tt.includes(o))
+        continue;
+      const l = X(o);
+      e.setAttribute(l, String(i[o]));
+    }
+    return e;
+  }
+  _applyDeferredBooleanProps(i, e) {
+    for (const o of D)
+      o in e && (i[o] = e[o]);
+  }
+  _applyExcludedProps(i, e) {
+    e.inputPattern instanceof RegExp ? i.inputPattern = e.inputPattern.source : typeof e.inputPattern == "string" && (i.inputPattern = e.inputPattern), e.inputValidator && (i.inputValidator = e.inputValidator), e.beforeClose && (i.beforeClose = e.beforeClose), e.dangerouslyUseHTMLString && (i.dangerouslyUseHTMLString = !0), e.distinguishCancelAndClose && (i.distinguishCancelAndClose = !0), e.confirmButtonLoading && (i.confirmButtonLoading = !0);
   }
 }
-P = new WeakMap(), k = new WeakMap(), A = new WeakMap(), q = new WeakMap();
-const p = (i) => {
-  const s = new AbortController(), e = new X(i).instance;
-  return e.visible = !0, e.addEventListener(
-    "closed",
-    () => {
-      e.remove(), s.abort();
-    },
-    { signal: s.signal }
-  ), new Promise((n, d) => {
+const c = (t) => {
+  const i = new AbortController(), e = new et(t).instance;
+  let o = "confirm", l;
+  if (t.beforeClose) {
+    const p = t.beforeClose;
+    e.beforeClose = (u) => {
+      p(o, e, u);
+    };
+  }
+  return e.setAttribute("visible", "true"), new Promise((p, u) => {
     e.addEventListener(
-      "confirm",
-      async (x) => {
-        if (i.beforeClose)
-          try {
-            await i.beforeClose(
-              "confirm",
-              e,
-              () => e.hide()
-            );
-          } catch {
-          }
-        else
-          e.hide();
-        n("confirm");
+      "ea-closed",
+      () => {
+        e.remove(), i.abort(), o === "confirm" ? p(l ?? "confirm") : u(o === "cancel" ? "cancel" : "close");
       },
-      { signal: s.signal }
+      { signal: i.signal }
     ), e.addEventListener(
-      "cancel",
-      async (x) => {
-        if (i.beforeClose)
-          try {
-            await i.beforeClose(
-              "cancel",
-              e,
-              () => e.hide()
-            );
-          } catch {
-          }
-        else
-          e.hide();
-        d("cancel");
+      "ea-confirm",
+      (d) => {
+        o = "confirm";
+        const f = d.detail;
+        f && "value" in f && (l = f.value), e.removeAttribute("visible");
       },
-      { signal: s.signal }
+      { signal: i.signal }
     ), e.addEventListener(
-      "message-close",
-      async (x) => {
-        if (i.beforeClose)
-          try {
-            await i.beforeClose(
-              "close",
-              e,
-              () => e.hide()
-            );
-          } catch {
-          }
-        else
-          e.hide();
-        d("close");
+      "ea-cancel",
+      () => {
+        o = "cancel", e.removeAttribute("visible");
       },
-      {
-        signal: s.signal
-      }
+      { signal: i.signal }
+    ), e.addEventListener(
+      "ea-message-close",
+      () => {
+        o = "close", e.removeAttribute("visible");
+      },
+      { signal: i.signal }
     );
   });
 };
-p.alert = (i = "", s = "", e = "") => p({
-  message: i,
-  title: s,
+c.alert = (t = "", i = "", e = {}) => c({
+  message: t,
+  heading: i,
   closeOnClickModal: !1,
+  closeOnPressEscape: !1,
   showConfirmButton: !0,
   boxType: "alert",
   ...e
 });
-p.confirm = (i = "", s = "", e = "") => p({
-  message: i,
-  title: s,
+c.confirm = (t = "", i = "", e = {}) => c({
+  message: t,
+  heading: i,
   showConfirmButton: !0,
   showCancelButton: !0,
   closeOnPressEscape: !0,
   boxType: "confirm",
   ...e
 });
-p.prompt = (i = "", s = "", e = "") => p({
-  message: i,
-  title: s,
+c.prompt = (t = "", i = "", e = {}) => c({
+  message: t,
+  heading: i,
   showConfirmButton: !0,
   showCancelButton: !0,
   showInput: !0,
@@ -614,11 +593,11 @@ p.prompt = (i = "", s = "", e = "") => p({
   boxType: "prompt",
   ...e
 });
-window.$alert = p.alert;
-window.$confirm = p.confirm;
-window.$prompt = p.prompt;
-window.$msgbox = p;
+window.$alert = c.alert;
+window.$confirm = c.confirm;
+window.$prompt = c.prompt;
+window.$msgbox = c;
 export {
-  p as EaMessageBox,
-  D as EaMessageBoxElement
+  c as EaMessageBox,
+  s as EaMessageBoxElement
 };