easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-input.js

@@ -1,588 +1,604 @@
-var B = Object.defineProperty;
-var $ = (n) => {
-  throw TypeError(n);
-};
-var F = (n, o, t) => o in n ? B(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
-var T = (n, o, t) => F(n, typeof o != "symbol" ? o + "" : o, t), k = (n, o, t) => o.has(n) || $("Cannot " + t);
-var e = (n, o, t) => (k(n, o, "read from private field"), t ? t.call(n) : o.get(n)), a = (n, o, t) => o.has(n) ? $("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(n) : o.set(n, t), h = (n, o, t, s) => (k(n, o, "write to private field"), s ? s.call(n, t) : o.set(n, t), t);
-import { F as I } from "../core/FormBase.js";
-import { E as M } from "../utils/Utils.js";
-import { s as V } from "../css/ea-input.style.js";
-class U extends Event {
-  constructor(o) {
-    super("ea-clear", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = o;
+import { a as x } from "../core/EaFormAssociatedBase.ts.js";
+import { c as v } from "../utils/bem.ts.js";
+import { q as l, a as r, l as _, C as w, p as m } from "../core/decorator.js";
+import { h as c } from "../utils/html.ts.js";
+import { E as d } from "../utils/Enum.ts.js";
+import { s as C } from "../css/ea-input.style.js";
+import "./ea-icon.js";
+class E extends Event {
+  constructor(e) {
+    super("ea-clear", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = e;
+  }
+}
+class I extends Event {
+  constructor(e) {
+    super("input", { bubbles: !0, composed: !0 }), this.detail = e;
+  }
+}
+class A extends Event {
+  constructor(e = {}) {
+    super("focus", { bubbles: !0, composed: !0 }), this.detail = e;
+  }
+}
+class L extends Event {
+  constructor(e = {}) {
+    super("blur", { bubbles: !0, composed: !0 }), this.detail = e;
+  }
+}
+class $ extends Event {
+  constructor(e) {
+    super("change", { bubbles: !0, composed: !0 }), this.detail = e;
   }
 }
-var g, C, _, w, m, i, R, b, y, p, x, S, v, u, l, d, r, P, O, E, A, q, z, L, H, f;
-class G extends I {
+var T = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (t, e, o, n) => {
+  for (var h = n > 1 ? void 0 : n ? S(e, o) : e, p = t.length - 1, u; p >= 0; p--)
+    (u = t[p]) && (h = (n ? u(e, o, h) : u(h)) || h);
+  return n && h && T(e, o, h), h;
+};
+const y = "ea-input", a = v(y), P = [
+  "textarea",
+  "text",
+  "button",
+  "checkbox",
+  "color",
+  "date",
+  "datetime-local",
+  "email",
+  "file",
+  "hidden",
+  "image",
+  "month",
+  "number",
+  "password",
+  "radio",
+  "range",
+  "reset",
+  "search",
+  "submit",
+  "tel",
+  "time",
+  "url",
+  "week"
+];
+let i = class extends x {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    a(this, g);
-    /** @type {HTMLElement} */
-    a(this, C);
-    /** @type {HTMLElement} */
-    a(this, _);
-    /** @type {HTMLElement} */
-    a(this, w);
-    /** @type {HTMLElement} */
-    a(this, m);
-    /** @type {HTMLInputElement | HTMLTextAreaElement} */
-    a(this, i);
-    /** @type {HTMLElement} */
-    a(this, R);
-    /** @type {HTMLElement} */
-    a(this, b);
-    /** @type {HTMLElement} */
-    a(this, y);
-    /** @type {HTMLElement} */
-    a(this, p);
-    /** @type {HTMLElement} */
-    a(this, x);
-    /** @type {HTMLElement} */
-    a(this, S);
-    /** @type {HTMLElement} */
-    a(this, v);
-    /** @type {AbortController} */
-    a(this, u);
-    a(this, l, {
-      /** @type {AbortController} */
-      clearableController: null,
-      /** @type {AbortController} */
-      showPasswordController: null,
-      /** @type {AbortController} */
-      autosizeController: null,
-      /** @type {AbortController} */
-      wordCountController: null
-    });
-    a(this, d, {
-      isFocus: !1,
-      isMouseenter: !1,
-      originTextareaHeight: 0,
-      isOriginalRendered: !1
-    });
-    a(this, r, {
-      isOriginalRenderedPromise: new Promise((t) => {
-        h(this, d, new Proxy(e(this, d), {
-          set: (s, c, N) => (c === "isOriginalRendered" && N && t(!0), Reflect.set(s, c, N))
-        }));
-      })
-    });
-    T(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, v).textContent = t;
-        }
-      },
-      type: {
-        type: [
-          "textarea",
-          "text",
-          "button",
-          "checkbox",
-          "color",
-          "date",
-          "datetime-local",
-          "email",
-          "file",
-          "hidden",
-          "image",
-          "month",
-          "number",
-          "password",
-          "radio",
-          "range",
-          "reset",
-          "search",
-          "submit",
-          "tel",
-          "time",
-          "url",
-          "week"
-        ],
-        default: "text",
-        observer: async (t) => {
-          e(this, P).call(this, t), this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: ["large", "default", "small"],
-        default: "default",
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, t = typeof t == "string" && t === "" ? null : t, e(this, i).value = t, this.setValue(t), this.resetCustomValidity(), (this.clearable || this["show-password"]) && this.updateContainerClasslist();
-        }
-      },
-      required: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).required = t;
-        }
-      },
-      placeholder: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).placeholder = t;
-        }
-      },
-      maxlength: {
-        type: Number,
-        default: void 0,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, this.hasAttribute("maxlength") && (e(this, i).maxLength = t);
-        }
-      },
-      minlength: {
-        type: Number,
-        default: void 0,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, this.hasAttribute("minlength") && (e(this, i).minLength = t);
-        }
-      },
-      clearable: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var s;
-          (s = e(this, l).clearableController) == null || s.abort(), this.updateContainerClasslist(), t && (e(this, l).clearableController = new AbortController(), e(this, y).addEventListener(
-            "click",
-            e(this, z),
-            {
-              signal: e(this, l).clearableController.signal
-            }
-          ));
-        }
-      },
-      "clear-icon": {
-        type: String,
-        default: "xmark",
-        observer: (t) => {
-          this.clearable && e(this, y).setAttribute("name", t);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).disabled = t, this.updateContainerClasslist();
-        }
-      },
-      "show-password": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          var s;
-          this.type !== "textarea" && ((s = e(this, l).showPasswordController) == null || s.abort(), this.type === "text" ? e(this, p).name = "eye" : this.type === "password" && (e(this, p).name = "eye-slash"), t && (this.type === "password" || this.type === "text") && (e(this, l).showPasswordController = new AbortController(), e(this, p).addEventListener(
-            "click",
-            e(this, L),
-            {
-              signal: e(this, l).showPasswordController.signal
-            }
-          )), this.updateContainerClasslist());
-        }
-      },
-      "prefix-icon": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          t && (e(this, w).innerHTML = `<ea-icon class="ea-input__prefix-icon" part="prefix-icon" name="${t}"></ea-icon>`);
-        }
-      },
-      "suffix-icon": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          t && (e(this, b).innerHTML = `<ea-icon class="ea-input__suffix-icon" part="suffix-icon" name="${t}"></ea-icon>`);
-        }
-      },
-      "show-word-limit": {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var s;
-          this.type !== "textarea" && this.type !== "text" || (await e(this, r).isOriginalRenderedPromise, (s = e(this, l).wordCountController) == null || s.abort(), t && this.hasAttribute("maxlength") && (e(this, l).wordCountController = new AbortController(), e(this, f).call(this), e(this, i).addEventListener(
-            "input",
-            e(this, f),
-            {
-              signal: e(this, l).wordCountController.signal
-            }
-          )), this.updateContainerClasslist());
-        }
-      },
-      rows: {
-        type: Number,
-        default: 2,
-        observer: async (t) => {
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, e(this, i).rows = t);
-        }
-      },
-      autosize: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var s;
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, (s = e(this, l).autosizeController) == null || s.abort(), e(this, i).clientHeight, e(this, d).originTextareaHeight = e(this, i).scrollHeight, t && (e(this, l).autosizeController = new AbortController(), e(this, i).addEventListener("input", e(this, H), {
-            signal: e(this, l).autosizeController.signal
-          })));
-        }
-      },
-      "min-rows": {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, e(this, i).minRows = t);
-        }
-      },
-      "max-rows": {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          this.type === "textarea" && (await e(this, r).isOriginalRenderedPromise, e(this, i).maxRows = t);
-        }
-      },
-      autocomplete: {
-        type: String,
-        default: "off",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).autocomplete = t;
-        }
-      },
-      name: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).name = t;
-        }
-      },
-      readonly: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).readOnly = t;
-        }
-      },
-      max: {
-        type: Number,
-        default: Number.MAX_SAFE_INTEGER,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).max = t;
-        }
-      },
-      min: {
-        type: Number,
-        default: Number.MIN_SAFE_INTEGER,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).min = t;
-        }
-      },
-      step: {
-        type: Number,
-        default: 1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).step = t;
-        }
-      },
-      pattern: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).pattern = t;
-        }
-      },
-      resize: {
-        type: ["none", "both", "horizontal", "vertical"],
-        default: "vertical",
-        observer: (t) => {
-          this.style.setProperty("--ea-input-resize", t);
-        }
-      },
-      autofocus: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).autofocus = t;
-        }
-      },
-      form: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).form = t;
-        }
-      },
-      "aria-label": {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).setAttribute("aria-label", t);
-        }
-      },
-      tabindex: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).tabIndex = t;
-        }
-      },
-      inputmode: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          await e(this, r).isOriginalRenderedPromise, e(this, i).inputMode = t;
-        }
-      }
-    }));
-    /**
-     * 渲染函数，因为在 vue 环境下 constructor 中，有概率获取不到 type，所以渲染会出问题。
-     * 所以最后的办法就是 将与 original 相关的 js 逻辑，需要等待 original 渲染完成之后再执行。
-     * @param {String} type
-     */
-    a(this, P, (t) => {
-      const s = this.id || Math.random().toString(36).substring(2, 7), c = t === "textarea" ? `<textarea id="${s}" class="ea-input__original" part="original"></textarea>` : `<input id="${s}" class="ea-input__original" type="${t}" part="original" />`;
-      e(this, m).innerHTML = c, h(this, i, e(this, m).querySelector(".ea-input__original")), e(this, i).value = this.value, e(this, d).isOriginalRendered = !0;
-    });
-    /**
-     * 输入框内容发生改变时触发
-     * @param {FocusEvent} e 事件对象
-     */
-    a(this, O, (t) => {
-      e(this, d).isFocus = !0, this.updateContainerClasslist();
-    });
-    /**
-     * 输入框失去焦点时触发
-     * @param {FocusEvent} e 事件对象
-     */
-    a(this, E, (t) => {
-      e(this, d).isFocus = !1, this.updateContainerClasslist();
-    });
-    /**
-     * 输入框内容发生改变时触发
-     * @param {InputEvent} e 事件对象
-     */
-    a(this, A, (t) => {
-      const { value: s } = t.target;
-      this.value = s;
-    });
-    /**
-     * 初始化基本事件
-     */
-    a(this, q, () => {
-      e(this, i).addEventListener("focus", e(this, O), {
-        signal: e(this, u).signal
-      }), e(this, i).addEventListener("blur", e(this, E), {
-        signal: e(this, u).signal
-      }), e(this, i).addEventListener("input", e(this, A), {
-        signal: e(this, u).signal
-      });
-    });
-    /**
-     * 清空按钮点击时触发
-     */
-    a(this, z, () => {
-      const t = this.value;
-      this.clear(), this["show-word-limit"] && (this.type === "textarea" || this.type === "text") && e(this, f).call(this), this.focus(), this.dispatchEvent(new U({ oldValue: t }));
-    });
-    /**
-     * 显示密码按钮点击时触发
-     */
-    a(this, L, () => {
-      this.type === "password" ? (this.type = "text", e(this, p).name = "eye") : this.type === "text" && (this.type = "password", e(this, p).name = "eye-slash"), this.focus();
-    });
-    /**
-     * 自动调整高度
-     * @param {InputEvent} e
-     */
-    a(this, H, (t) => {
-      const s = e(this, d).originTextareaHeight / this.rows;
-      this["min-rows"] > 0 && e(this, i).scrollHeight < this["min-rows"] * s || this["max-rows"] > 0 && e(this, i).scrollHeight > this["max-rows"] * s || (e(this, i).style.height = `${e(this, d).originTextareaHeight}px`, e(this, i).scrollHeight, e(this, i).style.height = `${t.target.scrollHeight + 2}px`);
-    });
-    /**
-     * 当包含 show-word-limit 属性时，更新字数统计
-     */
-    a(this, f, () => {
-      e(this, x).textContent = `${e(this, i).value.length} / ${this.maxlength}`;
-    });
-    this.stylesheet = V, this.$render();
-  }
-  static get observedAttributes() {
-    return M.Array.toLowerCamelCase([
-      ...super.observedAttributes,
-      "label",
-      "type",
-      "disabled",
-      "value",
-      "size",
-      "placeholder",
-      "maxlength",
-      "minlength",
-      "clearable",
-      "clear-icon",
-      "show-password",
-      "disabled",
-      "prefix-icon",
-      "suffix-icon",
-      "show-word-limit",
-      "rows",
-      "autosize",
-      "min-rows",
-      "max-rows",
-      "autocomplete",
-      "name",
-      "readonly",
-      "max",
-      "min",
-      "step",
-      "resize",
-      "autofocus",
-      "form",
-      "aria-label",
-      "tabindex",
-      "inputmode"
-    ]);
-  }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
+    super(...arguments), this._isFocus = !1, this._originTextareaHeight = 0, this._originalAbortController = null, this.label = "", this.type = "text", this.size = "default", this.value = "", this.required = !1, this.placeholder = "", this.maxlength = null, this.minlength = null, this.clearable = !1, this.clearIcon = "xmark", this.disabled = !1, this.showPassword = !1, this.prefixIcon = "", this.suffixIcon = "", this.showWordLimit = !1, this.rows = 2, this.autosize = !1, this.minRows = null, this.maxRows = null, this.autocomplete = "off", this.name = "", this.readonly = !1, this.max = null, this.min = null, this.step = 1, this.pattern = null, this.resize = "vertical", this.autofocus = !1, this.tabindex = "", this.inputmode = "";
+  }
   get validationTarget() {
-    return e(this, i);
+    return this._original;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-input",
+    var f;
+    const t = this.type === "textarea", e = this.type === "text", o = !t && this.querySelector("[slot=prepend]"), n = !t && this.querySelector("[slot=append]"), h = this.showPassword && this.value && !t && (this.type === "password" || this.type === "text"), p = this.showWordLimit && (t || e), u = this.clearable && ((f = this.value) == null ? void 0 : f.length) && !t, b = !t && this.size !== "default", g = a(
       {
-        ["--size-" + this.size]: this.type !== "textarea" && this.size !== "default",
-        "--has-prepend": this.type !== "textarea" && this.querySelector("[slot=prepend]"),
-        "--has-append": this.type !== "textarea" && this.querySelector("[slot=append]"),
-        "--textarea": this.type === "textarea",
-        "--show-password": this["show-password"] && this.value && this.type !== "textarea",
-        "--show-word-limit": this["show-word-limit"] && (this.type === "textarea" || this.type === "text")
+        textarea: t,
+        "show-password": h,
+        "show-word-limit": p,
+        "has-prepend": o,
+        "has-append": n,
+        ["size-" + this.size]: b
       },
       {
-        focus: e(this, d).isFocus,
+        focus: this._isFocus,
         disabled: this.disabled,
-        clearable: this.clearable && this.value && this.type !== "textarea"
+        clearable: u
       }
     );
-    return e(this, g).className = t, t;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <label class="ea-input" part="container">
-        <span class="ea-input__form-label" part="label"></span>
-        <section class="ea-input__region" part="region">
-          <div class="ea-input__prepend" part="prepend">
+    return this._container && (this._container.className = g), g;
+  }
+  _renderOriginal(t) {
+    const e = this.getAttribute("id") || Math.random().toString(36).substring(2, 7), o = t === "textarea" ? `<textarea id="${e}" class="${a.e("original")}" part="original"></textarea>` : `<input id="${e}" class="${a.e("original")}" type="${t}" part="original" />`;
+    if (this._originalWrapper.innerHTML = c(o), this._original.value = this.value, this._original.disabled = this.disabled, this._original.readOnly = this.readonly, this._original.placeholder = this.placeholder, this._original.required = this.required, this._original.autocomplete = this.autocomplete, this._original.autofocus = this.autofocus, this._original.name = this.name, this.maxlength && this.maxlength > 0 && (this._original.maxLength = this.maxlength), this.minlength && this.minlength > 0 && (this._original.minLength = this.minlength), t !== "textarea") {
+      const n = this._original;
+      n.max = this.max, n.min = this.min, n.step = this.step, this.pattern && (n.pattern = this.pattern);
+    }
+    this.tabindex && (this._original.tabIndex = this.tabindex ? parseInt(this.tabindex) : 0);
+  }
+  html() {
+    const t = this.getAttribute("id") || Math.random().toString(36).substring(2, 7), e = this.type === "textarea" ? `<textarea id="${t}" class="${a.e("original")}" part="original"></textarea>` : `<input id="${t}" class="${a.e("original")}" type="${this.type || "text"}" part="original" />`;
+    return `
+      <label class="${a()}" part="container">
+        <span class="${a.e("form-label")}" part="label"></span>
+        <section class="${a.e("region")}" part="region">
+          <div class="${a.e("prepend")}" part="prepend">
             <slot name="prepend"></slot>
           </div>
-          <div class="ea-input__inner" part="inner">
-            <span class="ea-input__prefix" part="prefix">
+          <div class="${a.e("inner")}" part="inner">
+            <span class="${a.e("prefix")}" part="prefix">
               <slot name="prefix"></slot>
             </span>
-            <span class="ea-input__original-wrapper" part="original-wrapper">
+            <span class="${a.e("original-wrapper")}" part="original-wrapper">
+              ${e}
             </span>
-            <span class="ea-input__suffix" part="suffix">
-              <ea-icon class="ea-input__clear-icon" name="xmark" part="clear-icon"></ea-icon>
-              <ea-icon class="ea-input__show-password-icon" name="eye-slash" part="show-password-icon"></ea-icon>
-              <span class="ea-input__suffix-icon" part="suffix-icon">
+            <span class="${a.e("suffix")}" part="suffix">
+              <ea-icon class="${a.e("clear-icon")}" name="xmark" part="clear-icon"></ea-icon>
+              <ea-icon class="${a.e("show-password-icon")}" name="eye-slash" part="show-password-icon"></ea-icon>
+              <span class="${a.e("suffix-icon")}" part="suffix-icon">
                 <slot name="suffix"></slot>
               </span>
-              <span class="ea-input__word-count" part="count"></span>
+              <span class="${a.e("word-count")}" part="count"></span>
             </span>
           </div>
-          <div class="ea-input__append" part="append">
+          <div class="${a.e("append")}" part="append">
             <slot name="append"></slot>
           </div>
         </section>
-      </div>
-    `, h(this, g, this.shadowRoot.querySelector(".ea-input")), h(this, v, this.shadowRoot.querySelector(".ea-input__form-label")), h(this, C, this.shadowRoot.querySelector(".ea-input__prepend")), h(this, _, this.shadowRoot.querySelector(".ea-input__inner")), h(this, w, this.shadowRoot.querySelector(
-      ".ea-input__prefix slot[name='prefix']"
-    )), h(this, m, this.shadowRoot.querySelector(
-      ".ea-input__original-wrapper"
-    )), h(this, R, this.shadowRoot.querySelector(".ea-input__suffix")), h(this, b, this.shadowRoot.querySelector(".ea-input__suffix-icon")), h(this, y, this.shadowRoot.querySelector(".ea-input__clear-icon")), h(this, p, this.shadowRoot.querySelector(
-      ".ea-input__show-password-icon"
-    )), h(this, x, this.shadowRoot.querySelector(".ea-input__word-count")), h(this, S, this.shadowRoot.querySelector(".ea-input__append"));
-  }
-  /**
-   * 获取焦点
-   */
-  focus() {
-    e(this, d).isFocus = !0, e(this, i).focus();
-  }
-  /**
-   * 失去焦点
-   */
+      </label>
+    `;
+  }
+  focus(t) {
+    this._isFocus = !0, this._original.focus(t);
+  }
   blur() {
-    e(this, d).isFocus = !1, e(this, i).blur();
+    this._isFocus = !1, this._original.blur();
   }
-  /**
-   * 清空输入框内容
-   */
   clear() {
-    this.value = "", e(this, i).value = "", this["show-word-limit"] && this.maxlength && e(this, f).call(this);
+    this.value = "", this._original.value = "", this.showWordLimit && this.maxlength && this._updateWordCount();
   }
-  /**
-   * 选中输入框内容
-   */
   select() {
-    e(this, i).select();
+    this._original.select();
   }
-  connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = e(this, u)) == null || t.abort(), h(this, u, new AbortController()), this.hasAttribute("type") || (this.type = this.type), this.updateContainerClasslist(), e(this, q).call(this);
+  setRangeText(t, e, o, n = "preserve") {
+    this._original instanceof HTMLInputElement ? this._original.setRangeText(t, e, o, n) : this._original instanceof HTMLTextAreaElement && this._original.setRangeText(t, e, o, n), this.value = this._original.value;
   }
-  $beforeUnmounted() {
-    var t, s;
-    (t = e(this, u)) == null || t.abort(), h(this, u, null);
-    for (const c in e(this, l))
-      (s = e(this, l)[c]) == null || s.abort(), e(this, l)[c] = null;
+  setSelectionRange(t, e, o) {
+    this._original.setSelectionRange(
+      t,
+      e,
+      o
+    );
+  }
+  showPicker() {
+    this._original instanceof HTMLInputElement && "showPicker" in this._original && this._original.showPicker();
+  }
+  stepDown(t) {
+    if (this._original instanceof HTMLInputElement)
+      try {
+        this._original.stepDown(t), this.value = this._original.value;
+      } catch {
+      }
+  }
+  stepUp(t) {
+    if (this._original instanceof HTMLInputElement)
+      try {
+        this._original.stepUp(t), this.value = this._original.value;
+      } catch {
+      }
+  }
+  _handleClearIconClick() {
+    if (!this.clearable) return;
+    const t = this.value;
+    this.clear(), this.showWordLimit && (this.type === "textarea" || this.type === "text") && this._updateWordCount(), this.focus(), this.dispatchEvent(new E({ oldValue: t }));
+  }
+  _handleShowPasswordIconClick() {
+    this.showPassword && (this.type === "password" ? this.type = "text" : this.type === "text" && (this.type = "password"), this.focus());
+  }
+  _handleInput(t) {
+    const { value: e } = t.target;
+    this.value = e, this.dispatchEvent(new I({ value: e }));
+  }
+  _handleFocus() {
+    this._isFocus = !0, this.updateContainerClasslist(), this.dispatchEvent(new A());
+  }
+  _handleBlur() {
+    this._isFocus = !1, this.updateContainerClasslist(), this.dispatchEvent(new L());
+  }
+  _handleAutosize(t) {
+    if (!this.autosize || this.type !== "textarea") return;
+    const e = this._originTextareaHeight / this.rows;
+    this.minRows > 0 && this._original.scrollHeight < this.minRows * e || this.maxRows > 0 && this._original.scrollHeight > this.maxRows * e || (this._original.style.height = `${this._originTextareaHeight}px`, this._original.scrollHeight, this._original.style.height = `${t.target.scrollHeight + 2}px`);
+  }
+  _handleChange(t) {
+    const { value: e } = t.target;
+    this.value = e, this.dispatchEvent(new $({ value: e }));
+  }
+  /** 更新字数统计 */
+  _updateWordCount() {
+    !this.showWordLimit || !this.maxlength || (this._wordCount.textContent = `${this._original.value.length} / ${this.maxlength}`);
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._bindOriginalEvents();
+  }
+  _bindOriginalEvents() {
+    this._originalAbortController && this._originalAbortController.abort(), this._originalAbortController = new AbortController();
+    const { signal: t } = this._originalAbortController;
+    this._originalWrapper.addEventListener(
+      "input",
+      (e) => {
+        e.target.classList.contains(a.e("original")) && (e.stopPropagation(), this._handleInput(e), this._handleAutosize(e));
+      },
+      { signal: t }
+    ), this._originalWrapper.addEventListener(
+      "focusin",
+      (e) => {
+        e.target.classList.contains(a.e("original")) && (e.stopPropagation(), this._handleFocus());
+      },
+      { signal: t }
+    ), this._originalWrapper.addEventListener(
+      "focusout",
+      (e) => {
+        e.target.classList.contains(a.e("original")) && (e.stopPropagation(), this._handleBlur());
+      },
+      { signal: t }
+    ), this._originalWrapper.addEventListener(
+      "change",
+      (e) => {
+        e.target.classList.contains(a.e("original")) && (e.stopPropagation(), this._handleChange(e));
+      },
+      { signal: t }
+    );
+  }
+  $beforeUnmount() {
+    this._originalAbortController && (this._originalAbortController.abort(), this._originalAbortController = null);
   }
-  /**
-   * 更新表单验证状态
-   */
   updateValidity() {
+    var e, o, n, h;
     super.updateValidity();
     const t = this.value || "";
-    this.minlength > 0 && t.length > 0 && t.length < this.minlength && (this.internals.setValidity(
+    this.minlength > 0 && t.length > 0 && t.length < this.minlength && ((e = this.internals) == null || e.setValidity(
       { tooShort: !0 },
       `请至少输入 ${this.minlength} 个字符`,
-      e(this, i)
-    ), this.internals.reportValidity()), this.maxlength > 0 && t.length > this.maxlength && (this.internals.setValidity(
+      this._original
+    ), (o = this.internals) == null || o.reportValidity()), this.maxlength > 0 && t.length > this.maxlength && ((n = this.internals) == null || n.setValidity(
       { tooLong: !0 },
       `请最多输入 ${this.maxlength} 个字符`,
-      e(this, i)
-    ), this.internals.reportValidity());
+      this._original
+    ), (h = this.internals) == null || h.reportValidity()), this._syncAriaInvalid();
+  }
+  _syncAriaInvalid() {
+    var e, o;
+    ((o = (e = this.internals) == null ? void 0 : e.validity) == null ? void 0 : o.valid) ?? !0 ? this._original.removeAttribute("aria-invalid") : this._original.setAttribute("aria-invalid", "true");
   }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
   checkValidity() {
-    return this.updateValidity(), this.internals.validity.valid;
+    var t, e;
+    return this.updateValidity(), ((e = (t = this.internals) == null ? void 0 : t.validity) == null ? void 0 : e.valid) ?? !0;
   }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
   reportValidity() {
-    return this.updateValidity(), this.internals.reportValidity();
+    var t;
+    return this.updateValidity(), ((t = this.internals) == null ? void 0 : t.reportValidity()) ?? !0;
   }
-}
-g = new WeakMap(), C = new WeakMap(), _ = new WeakMap(), w = new WeakMap(), m = new WeakMap(), i = new WeakMap(), R = new WeakMap(), b = new WeakMap(), y = new WeakMap(), p = new WeakMap(), x = new WeakMap(), S = new WeakMap(), v = new WeakMap(), u = new WeakMap(), l = new WeakMap(), d = new WeakMap(), r = new WeakMap(), P = new WeakMap(), O = new WeakMap(), E = new WeakMap(), A = new WeakMap(), q = new WeakMap(), z = new WeakMap(), L = new WeakMap(), H = new WeakMap(), f = new WeakMap();
-window.customElements.get("ea-input") || window.customElements.define("ea-input", G);
+};
+s([
+  l(a.cb())
+], i.prototype, "_container", 2);
+s([
+  l(a.ce("prepend"))
+], i.prototype, "_prepend", 2);
+s([
+  l(a.ce("inner"))
+], i.prototype, "_inner", 2);
+s([
+  l('slot[name="prefix"]')
+], i.prototype, "_prefixSlot", 2);
+s([
+  l(a.ce("original-wrapper"))
+], i.prototype, "_originalWrapper", 2);
+s([
+  l(a.ce("original"))
+], i.prototype, "_original", 2);
+s([
+  l(a.ce("suffix"))
+], i.prototype, "_suffix", 2);
+s([
+  l(a.ce("suffix-icon"))
+], i.prototype, "_suffixIcon", 2);
+s([
+  l(a.ce("clear-icon"))
+], i.prototype, "_clearIcon", 2);
+s([
+  l(a.ce("show-password-icon"))
+], i.prototype, "_showPasswordIcon", 2);
+s([
+  l(a.ce("word-count"))
+], i.prototype, "_wordCount", 2);
+s([
+  l(a.ce("append"))
+], i.prototype, "_append", 2);
+s([
+  l(a.ce("form-label"))
+], i.prototype, "_label", 2);
+s([
+  m({ type: Boolean, default: !1 })
+], i.prototype, "_isFocus", 2);
+s([
+  m({ type: Number, default: 0 })
+], i.prototype, "_originTextareaHeight", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._label.textContent = t;
+    }
+  })
+], i.prototype, "label", 2);
+s([
+  r({
+    type: d(P),
+    default: "text",
+    observer(t, e) {
+      const o = e === "textarea", n = t === "textarea";
+      o !== n ? this._renderOriginal(t) : !n && this._original instanceof HTMLInputElement && (this._original.type = t), this.showPassword && !n && (t === "text" ? this._showPasswordIcon.setAttribute("name", "eye") : t === "password" && this._showPasswordIcon.setAttribute("name", "eye-slash")), this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "type", 2);
+s([
+  r({
+    type: d(["large", "default", "small"]),
+    default: "default",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "size", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      t = typeof t == "string" && t === "" ? null : t, this._original.value = t || "", this.setValue(t), this.resetCustomValidity(), (this.clearable || this.showPassword) && this.updateContainerClasslist(), this.showWordLimit && this.maxlength && this._updateWordCount();
+    }
+  })
+], i.prototype, "value", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-required",
+      target: a.ce("original"),
+      map: (t) => String(t)
+    },
+    observer(t) {
+      this._original.required = t;
+    }
+  })
+], i.prototype, "required", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._original.placeholder = t;
+    }
+  })
+], i.prototype, "placeholder", 2);
+s([
+  r({
+    type: Number,
+    default: void 0,
+    observer(t) {
+      this.hasAttribute("maxlength") && (this._original.maxLength = t);
+    }
+  })
+], i.prototype, "maxlength", 2);
+s([
+  r({
+    type: Number,
+    default: void 0,
+    observer(t) {
+      t > 0 && (this._original.minLength = t);
+    }
+  })
+], i.prototype, "minlength", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "clearable", 2);
+s([
+  r({
+    type: String,
+    default: "xmark",
+    observer(t) {
+      this.clearable && this._clearIcon.setAttribute("name", t);
+    }
+  })
+], i.prototype, "clearIcon", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      target: ".ea-input__original",
+      map: (t) => String(t)
+    },
+    observer(t) {
+      this._original.disabled = t, this.updateContainerClasslist();
+    }
+  })
+], i.prototype, "disabled", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this.type !== "textarea" && (t && (this.type === "text" ? this._showPasswordIcon.setAttribute("name", "eye") : this.type === "password" && this._showPasswordIcon.setAttribute("name", "eye-slash")), this.updateContainerClasslist());
+    }
+  })
+], i.prototype, "showPassword", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      t && (this._prefixSlot.innerHTML = c(
+        `<ea-icon class="${a.e("prefix-icon")}" part="prefix-icon" name="${t}"></ea-icon>`
+      ));
+    }
+  })
+], i.prototype, "prefixIcon", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      t && (this._suffixIcon.innerHTML = c(
+        `<ea-icon class="${a.e("suffix-icon-item")}" part="suffix-icon" name="${t}"></ea-icon>`
+      ));
+    }
+  })
+], i.prototype, "suffixIcon", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this.type !== "textarea" && this.type !== "text" || (t && this.hasAttribute("maxlength") && this._updateWordCount(), this.updateContainerClasslist());
+    }
+  })
+], i.prototype, "showWordLimit", 2);
+s([
+  r({
+    type: Number,
+    default: 2,
+    observer(t) {
+      this.type === "textarea" && this._original instanceof HTMLTextAreaElement && (this._original.rows = t);
+    }
+  })
+], i.prototype, "rows", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this.type === "textarea" && (this._original.clientHeight, this._originTextareaHeight = this._original.scrollHeight);
+    }
+  })
+], i.prototype, "autosize", 2);
+s([
+  r({
+    type: Number,
+    default: 0
+  })
+], i.prototype, "minRows", 2);
+s([
+  r({
+    type: Number,
+    default: 0
+  })
+], i.prototype, "maxRows", 2);
+s([
+  r({
+    type: String,
+    default: "off",
+    observer(t) {
+      this._original.autocomplete = t;
+    }
+  })
+], i.prototype, "autocomplete", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._original.name = t;
+    }
+  })
+], i.prototype, "name", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._original.readOnly = t;
+    }
+  })
+], i.prototype, "readonly", 2);
+s([
+  r({
+    type: Number,
+    default: Number.MAX_SAFE_INTEGER,
+    observer(t) {
+      this._original instanceof HTMLInputElement && (this._original.max = t);
+    }
+  })
+], i.prototype, "max", 2);
+s([
+  r({
+    type: Number,
+    default: Number.MIN_SAFE_INTEGER,
+    observer(t) {
+      this._original instanceof HTMLInputElement && (this._original.min = t);
+    }
+  })
+], i.prototype, "min", 2);
+s([
+  r({
+    type: Number,
+    default: 1,
+    observer(t) {
+      this._original instanceof HTMLInputElement && (this._original.step = t);
+    }
+  })
+], i.prototype, "step", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._original instanceof HTMLInputElement && (t ? this._original.pattern = t : this._original.removeAttribute("pattern"));
+    }
+  })
+], i.prototype, "pattern", 2);
+s([
+  r({
+    type: d(["none", "both", "horizontal", "vertical"]),
+    default: "vertical"
+  })
+], i.prototype, "resize", 2);
+s([
+  r({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._original.autofocus = t;
+    }
+  })
+], i.prototype, "autofocus", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      target: ".ea-input__original",
+      map: (t) => t || null
+    }
+  })
+], i.prototype, "ariaLabel", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._original.tabIndex = t ? parseInt(t) : 0;
+    }
+  })
+], i.prototype, "tabindex", 2);
+s([
+  r({
+    type: String,
+    default: "",
+    observer(t) {
+      this._original.inputMode = t;
+    }
+  })
+], i.prototype, "inputmode", 2);
+s([
+  _("click", a.ce("clear-icon"))
+], i.prototype, "_handleClearIconClick", 1);
+s([
+  _("click", a.ce("show-password-icon"))
+], i.prototype, "_handleShowPasswordIconClick", 1);
+i = s([
+  w(y, { styles: [C] })
+], i);
 export {
-  G as EaInput
+  i as EaInput
 };