easy-component-ui 3.0.15 → 4.0.2

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

@@ -1,510 +1,469 @@
-var Y = Object.defineProperty;
-var J = (a) => {
-  throw TypeError(a);
-};
-var tt = (a, r, s) => r in a ? Y(a, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[r] = s;
-var C = (a, r, s) => tt(a, typeof r != "symbol" ? r + "" : r, s), K = (a, r, s) => r.has(a) || J("Cannot " + s);
-var t = (a, r, s) => (K(a, r, "read from private field"), s ? s.call(a) : r.get(a)), n = (a, r, s) => r.has(a) ? J("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, s), w = (a, r, s, e) => (K(a, r, "write to private field"), e ? e.call(a, s) : r.set(a, s), s);
-import { F as st } from "../core/FormBase.js";
-import { s as it } from "../css/ea-time-picker.style.js";
-import { n as et } from "./ea-calendar2.js";
+import { E as S } from "../core/EaFormAssociatedBase.ts.js";
+import { c as w } from "../utils/bem.ts.js";
+import { q as m, a as _, l as p, C as A } from "../core/decorator.js";
+import { E as g } from "../utils/Enum.ts.js";
+import { t as f } from "../utils/timeout.ts.js";
+import { s as T } from "../css/ea-time-picker.style.js";
 import "./ea-icon.js";
 import "./ea-input.js";
-import { t as Z } from "../utils/timeout.js";
-import { E as nt } from "../utils/Variables.js";
-class Q extends Event {
-  constructor(r) {
+class b extends Event {
+  constructor(e) {
     super("ea-visible-change", {
       bubbles: !0,
       cancelable: !0,
       composed: !0
-    }), this.detail = r;
+    }), this.detail = e;
+  }
+}
+class C extends Event {
+  constructor(e) {
+    super("change", {
+      bubbles: !0,
+      composed: !0
+    }), this.detail = e;
+  }
+}
+class W extends Event {
+  constructor() {
+    super("focus", {
+      bubbles: !0,
+      composed: !0
+    });
   }
 }
-var f, u, O, v, y, S, g, i, $, M, H, G, A, D, L, E, k, B, P, I, x, V, W, F, z, _, T, j, N, q, R, U;
-class lt extends st {
+class E extends Event {
   constructor() {
-    super();
-    n(this, H);
-    /** @type {HTMLElement} */
-    n(this, f);
-    /** @type {HTMLElement} */
-    n(this, u);
-    /** @type {HTMLElement} */
-    n(this, O);
-    /** @type {HTMLElement} */
-    n(this, v);
-    /** @type {HTMLElement} */
-    n(this, y);
-    /** @type {HTMLElement} */
-    n(this, S);
-    n(this, g, new AbortController());
-    n(this, i, {
+    super("blur", {
+      bubbles: !0,
+      composed: !0
+    });
+  }
+}
+var I = Object.defineProperty, V = Object.getOwnPropertyDescriptor, r = (t, e, i, s) => {
+  for (var n = s > 1 ? void 0 : s ? V(e, i) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (n = (s ? h(e, i, n) : h(n)) || n);
+  return s && n && I(e, i, n), n;
+};
+const y = "ea-time-picker", o = w(y);
+let a = class extends S {
+  constructor() {
+    super(...arguments), this._uniqueId = a._instanceCount++, this._states = {
       hour: 0,
       minute: 0,
       second: 0,
-      isScrolling: !1,
       isAutoScrolling: !1,
       scrollTimeout: null,
       isFirstOpen: !0
-    });
-    C(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (s) => {
-          await customElements.whenDefined("ea-input"), t(this, u).label = s;
-        }
-      },
-      value: {
-        type: String,
-        default: "",
-        observer: (s) => {
-          this.setValue(s), s && (t(this, M).call(this, s), t(this, D).call(this), t(this, L).call(this));
-        }
-      },
-      width: {
-        type: String,
-        default: "",
-        observer: (s) => {
-          t(this, f) && t(this, f).style.setProperty("--ea-time-picker-width", s);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (s) => {
-          t(this, u) && t(this, u).toggleAttribute("disabled", s), this.updateContainerClasslist();
-        }
-      },
-      align: {
-        type: ["left", "center", "right"],
-        default: "left",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: nt,
-        default: "",
-        observer: (s) => {
-          t(this, u).setAttribute("size", s);
-        }
-      },
-      "limit-range-start": {
-        type: String,
-        default: "00:00:00"
-      },
-      "limit-range-end": {
-        type: String,
-        default: "23:59:59"
-      },
-      required: {
-        type: Boolean,
-        default: !1,
-        observer: async (s) => {
-          await customElements.whenDefined("ea-input"), t(this, u).toggleAttribute("required", s);
-        }
-      }
-    }));
-    /**
-     * 生成时间项HTML
-     * @param {number} start
-     * @param {number} end
-     * @param {string} type
-     * @return {string}
-     */
-    n(this, $, (s, e, l) => {
-      const o = this.ns, h = [], d = l === "hour" ? 23 : 59;
-      for (let c = 0; c <= d; c++) {
-        const b = c < s || c > e, p = t(this, A).call(this, c);
-        h.push(
-          `<li class="${o.e("dropdown-item")} ${b ? "is-disabled" : ""}" data-value="${c}" part="dropdown-item">${p}</li>`
+    }, this.label = "", this.placeholder = "Select time", this.value = "", this.width = "", this.disabled = !1, this.align = "left", this.size = "default", this.limitRangeStart = "00:00:00", this.limitRangeEnd = "23:59:59", this.required = !1, this._generateTimeItems = (t, e) => {
+      const i = [];
+      for (let s = t; s <= e; s++) {
+        const n = this._formatNumber(s);
+        i.push(
+          `<li class="${o.e("dropdown-item")}" data-value="${s}" part="dropdown-item" role="option" tabindex="-1" aria-selected="false">${n}</li>`
         );
       }
-      return h.join("");
-    });
-    /**
-     * 解析时间值
-     * @param {string} value
-     */
-    n(this, M, (s) => {
-      const [e = 0, l = 0, o = 0] = s.split(":").map(Number);
-      t(this, i).hour = e, t(this, i).minute = l, t(this, i).second = o;
-    });
-    /**
-     * 格式化数字
-     * @param {number} num
-     * @return {string}
-     */
-    n(this, A, (s) => s < 10 ? `0${s}` : String(s));
-    /**
-     * 更新输入框值
-     */
-    n(this, D, () => {
-      t(this, u) && (t(this, u).value = t(this, H, G));
-    });
-    /**
-     * 更新选中状态
-     */
-    n(this, L, () => {
-      t(this, E).call(this, t(this, v), t(this, i).hour), t(this, E).call(this, t(this, y), t(this, i).minute), t(this, E).call(this, t(this, S), t(this, i).second);
-    });
-    /**
-     * 更新单个容器的选中状态
-     * @param {HTMLElement} wrap
-     * @param {number} value
-     */
-    n(this, E, (s, e) => {
-      if (!s) return;
-      s.querySelectorAll("li").forEach((o) => {
-        const h = parseInt(o.dataset.value, 10);
-        o.classList.toggle("is-active", h === e);
+      return i.join("");
+    }, this._parseValue = (t) => {
+      const [e = 0, i = 0, s = 0] = t.split(":").map(Number);
+      this._states.hour = e, this._states.minute = i, this._states.second = s;
+    }, this._formatNumber = (t) => t < 10 ? `0${t}` : String(t), this._updateInputValue = () => {
+      this._input && (this._input.value = this._timeValue);
+    }, this._setupAria = () => {
+      this._input.setAttribute("role", "combobox"), this._input.setAttribute("aria-expanded", "false"), this._input.setAttribute("aria-haspopup", "listbox"), this.label && this._input.setAttribute("aria-label", this.label);
+      const t = this._container.querySelector(
+        `.${o.e("dropdown")}`
+      );
+      if (t) {
+        const e = `ea-time-picker-${this._uniqueId}-listbox`;
+        t.id = e, t.setAttribute("role", "listbox"), t.setAttribute("aria-label", this.label || "Select time"), this._input.setAttribute("aria-controls", e);
+      }
+      this._hourWrap && this._hourWrap.setAttribute("aria-label", "Hours"), this._minuteWrap && this._minuteWrap.setAttribute("aria-label", "Minutes"), this._secondWrap && this._secondWrap.setAttribute("aria-label", "Seconds");
+    }, this._updateAriaExpanded = () => {
+      const t = this._container.classList.contains("is-open");
+      this._input.setAttribute("aria-expanded", String(t));
+    }, this._updateDropdownInert = () => {
+      const t = this._container.querySelector(
+        `.${o.e("dropdown")}`
+      );
+      t && (t.inert = this.disabled);
+    }, this._updateSelectionState = () => {
+      this._updateWrapSelection(this._hourWrap, this._states.hour), this._updateWrapSelection(this._minuteWrap, this._states.minute), this._updateWrapSelection(this._secondWrap, this._states.second);
+    }, this._updateWrapSelection = (t, e) => {
+      if (!t) return;
+      t.querySelectorAll("li").forEach((s) => {
+        const l = parseInt(s.dataset.value, 10) === e;
+        s.classList.toggle("is-active", l), s.setAttribute("aria-selected", String(l));
       });
-    });
-    /**
-     * 获取最接近目标值的可用选项
-     * @param {HTMLElement} wrap
-     * @param {number} targetValue
-     * @return {number|null}
-     */
-    n(this, k, (s, e) => {
-      if (!s) return null;
-      const l = s.querySelectorAll("li:not(.is-disabled)");
-      if (!l.length) return null;
-      let o = null, h = 1 / 0;
-      return l.forEach((d) => {
-        const c = parseInt(d.dataset.value, 10), b = Math.abs(c - e);
-        b < h && (h = b, o = c);
-      }), o;
-    });
-    /**
-     * 检查是否设置了 Limited Range
-     * @return {boolean}
-     */
-    n(this, B, () => this.hasAttribute("limit-range-start") || this.hasAttribute("limit-range-end"));
-    /**
-     * 根据 limit-range 设置时间项的禁用状态
-     */
-    n(this, P, () => {
-      const [s, e, l] = this["limit-range-start"].split(":").map(Number), [o, h, d] = this["limit-range-end"].split(":").map(Number);
-      t(this, I).call(this, t(this, v), s, o), t(this, I).call(this, t(this, y), e, h), t(this, I).call(this, t(this, S), l, d);
-    });
-    /**
-     * 应用范围到指定容器
-     * @param {HTMLElement} wrap
-     * @param {number} start
-     * @param {number} end
-     */
-    n(this, I, (s, e, l) => {
-      if (!s) return;
-      s.querySelectorAll("li").forEach((h) => {
-        const d = parseInt(h.dataset.value, 10), c = d < e || d > l;
-        h.classList.toggle("is-disabled", c);
+    }, this._getClosestAvailableValue = (t, e) => {
+      if (!t) return null;
+      const i = t.querySelectorAll("li:not(.is-disabled)");
+      if (!i.length) return null;
+      let s = null, n = 1 / 0;
+      return i.forEach((l) => {
+        const h = parseInt(l.dataset.value, 10), d = Math.abs(h - e);
+        d < n && (n = d, s = h);
+      }), s;
+    }, this._hasLimitedRange = () => this.hasAttribute("limit-range-start") || this.hasAttribute("limit-range-end"), this._applyLimitRange = () => {
+      const [t = 0, e = 0, i = 0] = this.limitRangeStart.split(":").map(Number), [s = 23, n = 59, l = 59] = this.limitRangeEnd.split(":").map(Number);
+      this._applyRangeToWrap(this._hourWrap, t, s), this._applyRangeToWrap(this._minuteWrap, e, n), this._applyRangeToWrap(this._secondWrap, i, l);
+    }, this._applyRangeToWrap = (t, e, i) => {
+      if (!t) return;
+      t.querySelectorAll("li").forEach((n) => {
+        const l = parseInt(n.dataset.value, 10), h = l < e || l > i;
+        n.classList.toggle("is-disabled", h);
       });
-    });
-    /**
-     * 打开下拉框
-     */
-    n(this, x, () => {
+    }, this._openDropdown = () => {
       if (this.disabled) return;
-      const s = t(this, f).classList.contains("is-open");
-      if (t(this, f).classList.add("is-open"), this.updateContainerClasslist(), s || this.dispatchEvent(new Q({ visible: !0 })), t(this, i).isFirstOpen) {
-        const e = this.value && this.value.trim() !== "", l = t(this, B).call(this);
-        if (!e && l) {
-          const o = /* @__PURE__ */ new Date(), h = o.getHours(), d = o.getMinutes(), c = o.getSeconds(), b = t(this, k).call(this, t(this, v), h), p = t(this, k).call(this, t(this, y), d), m = t(this, k).call(this, t(this, S), c);
-          b !== null && (t(this, i).hour = b, t(this, T).call(this, t(this, v), b, !1)), p !== null && (t(this, i).minute = p, t(this, T).call(this, t(this, y), p, !1)), m !== null && (t(this, i).second = m, t(this, T).call(this, t(this, S), m, !1)), t(this, L).call(this);
+      const t = this._container.classList.contains("is-open");
+      if (this._container.classList.add("is-open"), this.updateContainerClasslist(), this._updateAriaExpanded(), t || this.dispatchEvent(new b({ visible: !0 })), this._states.isFirstOpen) {
+        const e = this.value && this.value.trim() !== "", i = this._hasLimitedRange();
+        if (!e && i) {
+          const s = /* @__PURE__ */ new Date(), n = s.getHours(), l = s.getMinutes(), h = s.getSeconds(), d = this._getClosestAvailableValue(
+            this._hourWrap,
+            n
+          ), c = this._getClosestAvailableValue(
+            this._minuteWrap,
+            l
+          ), u = this._getClosestAvailableValue(
+            this._secondWrap,
+            h
+          );
+          d !== null && (this._states.hour = d, this._scrollToValue(this._hourWrap, d, !1)), c !== null && (this._states.minute = c, this._scrollToValue(this._minuteWrap, c, !1)), u !== null && (this._states.second = u, this._scrollToValue(this._secondWrap, u, !1)), this._updateSelectionState();
         } else
-          t(this, T).call(this, t(this, v), t(this, i).hour, !1), t(this, T).call(this, t(this, y), t(this, i).minute, !1), t(this, T).call(this, t(this, S), t(this, i).second, !1);
-        t(this, i).isFirstOpen = !1;
+          this._scrollToValue(this._hourWrap, this._states.hour, !1), this._scrollToValue(this._minuteWrap, this._states.minute, !1), this._scrollToValue(this._secondWrap, this._states.second, !1);
+        this._states.isFirstOpen = !1;
       }
-    });
-    /**
-     * 关闭下拉框
-     */
-    n(this, V, () => {
-      const s = t(this, f).classList.contains("is-open");
-      t(this, f).classList.remove("is-open"), this.updateContainerClasslist(), s && this.dispatchEvent(
-        new Q({ visible: !1 })
+    }, this._closeDropdown = () => {
+      const t = this._container.classList.contains("is-open");
+      this._container.classList.remove("is-open"), this.updateContainerClasslist(), this._updateAriaExpanded(), t && this.dispatchEvent(
+        new b({ visible: !1 })
       );
-    });
-    /**
-     * 切换下拉框显示状态
-     */
-    n(this, W, () => {
-      this.disabled || (t(this, f).classList.contains("is-open") ? t(this, V).call(this) : t(this, x).call(this));
-    });
-    /**
-     * 点击外部关闭下拉
-     * @param {MouseEvent} e
-     */
-    n(this, F, (s) => {
-      const e = s.composedPath();
-      e.includes(this) || e.includes(this.shadowRoot) || t(this, V).call(this);
-    });
-    /**
-     * 输入框焦点事件
-     */
-    n(this, z, () => {
-      this.emit("focus");
-    });
-    /**
-     * 输入框失焦事件
-     */
-    n(this, _, () => {
-      this.emit("blur");
-    });
-    /**
-     * 滚动到指定值
-     * @param {HTMLElement} wrap
-     * @param {number} value
-     * @param {boolean} smooth
-     */
-    n(this, T, (s, e, l = !0) => {
-      if (!s) return;
-      const o = s.querySelectorAll("li:not(.is-disabled)");
-      if (!o.length) return;
-      const h = o[0].getBoundingClientRect().height, d = s.querySelector(`li[data-value="${e}"]`);
-      if (d && !d.classList.contains("is-disabled")) {
-        const c = h * e - 1;
-        s.scrollTo({ top: c, behavior: l ? "smooth" : "auto" });
+    }, this._scrollToValue = (t, e, i = !0) => {
+      if (!t) return;
+      const s = t.querySelector(
+        `li[data-value="${e}"]`
+      );
+      if (s && !s.classList.contains("is-disabled")) {
+        const n = s.getBoundingClientRect().height * e - 1;
+        t.scrollTo({ top: n, behavior: i ? "smooth" : "auto" });
       }
-    });
-    /**
-     * 处理时间列表滚动停止
-     * @param {HTMLElement} wrap
-     * @param {string} type
-     */
-    n(this, j, (s, e) => {
-      t(this, i).scrollTimeout && clearTimeout(t(this, i).scrollTimeout), t(this, i).scrollTimeout = Z(() => {
-        if (t(this, i).isAutoScrolling) return;
-        const l = s.querySelectorAll("li"), o = s.querySelectorAll("li:not(.is-disabled)");
-        if (!o.length) return;
-        const h = o[0].getBoundingClientRect().height, { scrollTop: d } = s, c = Math.round(d / h), b = Math.max(0, Math.min(l.length - 1, c));
-        let p = l[b];
-        if (p && p.classList.contains("is-disabled")) {
-          for (let m = b; m < l.length; m++)
-            if (!l[m].classList.contains("is-disabled")) {
-              p = l[m];
+    }, this._handleScrollStop = (t, e) => {
+      this._states.scrollTimeout && clearTimeout(this._states.scrollTimeout), this._states.scrollTimeout = setTimeout(() => {
+        if (this._states.isAutoScrolling) return;
+        const i = t.querySelectorAll("li"), s = t.querySelectorAll("li:not(.is-disabled)");
+        if (!s.length) return;
+        const n = s[0].getBoundingClientRect().height, { scrollTop: l } = t, h = Math.round(l / n), d = Math.max(0, Math.min(i.length - 1, h));
+        let c = i[d];
+        if (c && c.classList.contains("is-disabled")) {
+          for (let u = d; u < i.length; u++)
+            if (!i[u].classList.contains("is-disabled")) {
+              c = i[u];
               break;
             }
-          if (p.classList.contains("is-disabled")) {
-            for (let m = b; m >= 0; m--)
-              if (!l[m].classList.contains("is-disabled")) {
-                p = l[m];
+          if (c.classList.contains("is-disabled")) {
+            for (let u = d; u >= 0; u--)
+              if (!i[u].classList.contains("is-disabled")) {
+                c = i[u];
                 break;
               }
           }
         }
-        if (p && !p.classList.contains("is-disabled")) {
-          const m = parseInt(p.dataset.value, 10);
-          t(this, N).call(this, e, m);
-          const X = h * m;
-          t(this, i).isAutoScrolling = !0, s.scrollTo({ top: X, behavior: "smooth" }), Z(() => {
-            t(this, i).isAutoScrolling = !1;
+        if (c && !c.classList.contains("is-disabled")) {
+          const u = parseInt(c.dataset.value, 10);
+          this._setTimeValue(e, u);
+          const v = n * u;
+          this._states.isAutoScrolling = !0, t.scrollTo({ top: v, behavior: "smooth" }), f(() => {
+            this._states.isAutoScrolling = !1;
           }, 300);
         }
-        t(this, i).isScrolling = !1;
       }, 150);
-    });
-    /**
-     * 设置时间值
-     * @param {string} type
-     * @param {number} value
-     */
-    n(this, N, (s, e) => {
-      switch (s) {
+    }, this._handleItemClick = (t, e, i) => {
+      const s = t.target.closest("li");
+      if (!s || s.classList.contains("is-disabled")) return;
+      const n = parseInt(s.dataset.value, 10);
+      this._setTimeValue(e, n);
+      const h = s.getBoundingClientRect().height * n;
+      this._states.isAutoScrolling = !0, this._states.scrollTimeout && clearTimeout(this._states.scrollTimeout), i.scrollTo({ top: h, behavior: "smooth" }), f(() => {
+        this._states.isAutoScrolling = !1;
+      }, 1e3);
+    }, this._setTimeValue = (t, e) => {
+      switch (t) {
         case "hour":
-          t(this, i).hour = e;
+          this._states.hour = e;
           break;
         case "minute":
-          t(this, i).minute = e;
+          this._states.minute = e;
           break;
         case "second":
-          t(this, i).second = e;
+          this._states.second = e;
           break;
       }
-      const l = t(this, H, G);
-      this.setAttribute("value", l), t(this, D).call(this), t(this, L).call(this), this.emit("change", { detail: { value: l } });
-    });
-    /**
-     * 处理时间项点击
-     * @param {HTMLElement} wrap
-     * @param {string} type
-     */
-    n(this, q, (s, e) => {
-      s.addEventListener(
-        "click",
-        (l) => {
-          const o = l.target.closest("li");
-          if (!o || o.classList.contains("is-disabled")) return;
-          const h = parseInt(o.dataset.value, 10);
-          t(this, N).call(this, e, h);
-          const c = o.getBoundingClientRect().height * h;
-          t(this, i).isAutoScrolling = !0, t(this, i).scrollTimeout && clearTimeout(t(this, i).scrollTimeout), s.scrollTo({ top: c, behavior: "smooth" }), Z(() => {
-            t(this, i).isAutoScrolling = !1;
-          }, 1e3);
-        },
-        { signal: t(this, g).signal }
-      );
-    });
-    /**
-     * 处理时间列表滚动
-     * @param {HTMLElement} wrap
-     * @param {string} type
-     */
-    n(this, R, (s, e) => {
-      s.addEventListener(
-        "scroll",
-        () => {
-          t(this, i).isScrolling = !0, t(this, j).call(this, s, e);
-        },
-        { signal: t(this, g).signal }
-      );
-    });
-    /**
-     * 绑定事件
-     */
-    n(this, U, () => {
-      var s;
-      (s = t(this, g)) == null || s.abort(), w(this, g, new AbortController()), t(this, u).addEventListener("click", t(this, W), {
-        signal: t(this, g).signal
-      }), t(this, u).addEventListener("focus", t(this, z), {
-        signal: t(this, g).signal
-      }), t(this, u).addEventListener("blur", t(this, _), {
-        signal: t(this, g).signal
-      }), window.addEventListener("click", t(this, F), {
-        signal: t(this, g).signal
-      }), t(this, q).call(this, t(this, v), "hour"), t(this, q).call(this, t(this, y), "minute"), t(this, q).call(this, t(this, S), "second"), t(this, R).call(this, t(this, v), "hour"), t(this, R).call(this, t(this, y), "minute"), t(this, R).call(this, t(this, S), "second");
-    });
-    /**
-     * 使组件获取焦点
-     * @return {void}
-     */
-    C(this, "focus", () => {
-      t(this, u).focus();
-    });
-    /**
-     * 使组件失去焦点
-     * @return {void}
-     */
-    C(this, "blur", () => {
-      t(this, u).blur();
-    });
-    /**
-     * 打开时间选择器弹窗
-     * @return {void}
-     */
-    C(this, "handleOpen", () => {
-      t(this, x).call(this);
-    });
-    /**
-     * 关闭时间选择器弹窗
-     * @return {void}
-     */
-    C(this, "handleClose", () => {
-      t(this, V).call(this);
-    });
-    this.stylesheet = it, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "value",
-      "width",
-      "size",
-      "disabled",
-      "align",
-      "limit-range-start",
-      "limit-range-end"
-    ];
+      const i = this._timeValue;
+      this.setAttribute("value", i), this._updateInputValue(), this._updateSelectionState(), this.dispatchEvent(new C({ value: i }));
+    }, this.focus = () => {
+      this._input.focus();
+    }, this.blur = () => {
+      this._input.blur();
+    }, this.handleOpen = () => {
+      this._openDropdown();
+    }, this.handleClose = () => {
+      this._closeDropdown();
+    };
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
     var e;
-    const s = this.computedClasslist(
-      "ea-time-picker",
-      {},
+    const t = o(
+      {
+        [this.size]: this.size && this.size !== "default"
+      },
       {
         disabled: this.disabled,
-        open: (e = t(this, f)) == null ? void 0 : e.classList.contains("is-open"),
-        [`align-${this.align}`]: this.align
+        open: (e = this._container) == null ? void 0 : e.classList.contains("is-open"),
+        [`align-${this.align}`]: this.align && this.align !== "left"
       }
     );
-    return t(this, f) && (t(this, f).className = s), s;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    const s = et("time-picker");
-    this.ns = s, this.shadowRoot.innerHTML = this.html(`
-      <div class='${s.b()}' part='container'>
-        <ea-input 
-          class="${s.e("input")}"
-          part='input' 
-          autocomplete="off" 
-          readonly 
+  html() {
+    return `
+      <div class='${o()}' part='container'>
+        <ea-input
+          class="${o.e("input")}"
+          part='input'
+          autocomplete="off"
+          readonly
           prefix-icon="clock"
         ></ea-input>
-        <div class="${s.e("dropdown")}" part='dropdown'>
-          <div class="${s.e("dropdown-inner-wrap")}" part='dropdown-inner-wrap'>
-            <ul class="${s.e("dropdown-inner")} ${s.m("hour")}" part='dropdown-time'>
-              ${t(this, $).call(this, 0, 23, "hour")}
+        <div class="${o.e("dropdown")}" part='dropdown'>
+          <div class="${o.e("dropdown-inner-wrap")}" part='dropdown-inner-wrap'>
+            <ul class="${o.e("dropdown-inner")} ${o.e("dropdown-inner")}--hour" part='dropdown-time'>
+              ${this._generateTimeItems(0, 23)}
             </ul>
-            <ul class="${s.e("dropdown-inner")} ${s.m("minute")}" part='dropdown-time'>
-              ${t(this, $).call(this, 0, 59, "minute")}
+            <ul class="${o.e("dropdown-inner")} ${o.e("dropdown-inner")}--minute" part='dropdown-time'>
+              ${this._generateTimeItems(0, 59)}
             </ul>
-            <ul class="${s.e("dropdown-inner")} ${s.m("second")}" part='dropdown-time'>
-              ${t(this, $).call(this, 0, 59, "second")}
+            <ul class="${o.e("dropdown-inner")} ${o.e("dropdown-inner")}--second" part='dropdown-time'>
+              ${this._generateTimeItems(0, 59)}
             </ul>
           </div>
         </div>
       </div>
-    `), w(this, f, this.shadowRoot.querySelector(s.cb())), w(this, u, this.shadowRoot.querySelector(s.ce("input"))), w(this, O, this.shadowRoot.querySelector(s.ce("dropdown"))), w(this, v, this.shadowRoot.querySelector(s.cm("hour"))), w(this, y, this.shadowRoot.querySelector(s.cm("minute"))), w(this, S, this.shadowRoot.querySelector(s.cm("second")));
+    `;
+  }
+  /** @returns 格式化的时间值字符串 HH:mm:ss */
+  get _timeValue() {
+    return `${this._formatNumber(this._states.hour)}:${this._formatNumber(this._states.minute)}:${this._formatNumber(this._states.second)}`;
+  }
+  _handleInputClick() {
+    this._openDropdown();
+  }
+  _handleInputFocus(t) {
+    t.stopPropagation(), this.dispatchEvent(new W()), this._openDropdown();
+  }
+  _handleInputBlur(t) {
+    t.stopPropagation(), this.dispatchEvent(new E());
+  }
+  _handleFocusOut() {
+    requestAnimationFrame(() => {
+      this.contains(document.activeElement) || this._closeDropdown();
+    });
+  }
+  _handleKeydown(t) {
+    t.key === "Escape" && (t.preventDefault(), this._closeDropdown());
+  }
+  _handleWindowClick(t) {
+    const e = t.composedPath();
+    e.includes(this) || e.includes(this.shadowRoot) || this._closeDropdown();
+  }
+  _handleHourClick(t) {
+    this._handleItemClick(t, "hour", this._hourWrap);
+  }
+  _handleMinuteClick(t) {
+    this._handleItemClick(t, "minute", this._minuteWrap);
+  }
+  _handleSecondClick(t) {
+    this._handleItemClick(t, "second", this._secondWrap);
+  }
+  _handleHourScroll() {
+    this._handleScrollStop(this._hourWrap, "hour");
+  }
+  _handleMinuteScroll() {
+    this._handleScrollStop(this._minuteWrap, "minute");
+  }
+  _handleSecondScroll() {
+    this._handleScrollStop(this._secondWrap, "second");
   }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
   get validationTarget() {
-    return t(this, u);
+    return this._input;
   }
-  /**
-   * 更新表单验证状态
-   */
   updateValidity() {
-    const s = this.value !== "" && this.value != null;
-    this.required && !s ? this.internals.setValidity({ valueMissing: !0 }, "请选择时间", this) : this.internals.setValidity({}, "", this);
+    const t = this.value !== "" && this.value != null;
+    this.required && !t ? this.internals.setValidity({ valueMissing: !0 }, "请选择时间", this) : this.internals.setValidity({}, "", this);
   }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
   checkValidity() {
     return this.updateValidity(), this.internals.validity.valid;
   }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
   reportValidity() {
     return this.updateValidity(), this.internals.reportValidity();
   }
-  connectedCallback() {
-    var s;
-    super.connectedCallback(), (s = t(this, g)) == null || s.abort(), w(this, g, new AbortController()), t(this, P).call(this), t(this, U).call(this), this.hasAttribute("value") && t(this, M).call(this, this.value);
+  $mount() {
+    this.updateContainerClasslist(), this._applyLimitRange(), this._setupAria(), this._updateDropdownInert(), this.hasAttribute("value") && this._parseValue(this.value);
   }
-  $beforeUnmounted() {
-    var s;
-    (s = t(this, g)) == null || s.abort(), t(this, i).scrollTimeout && clearTimeout(t(this, i).scrollTimeout);
+  $beforeUnmount() {
+    this._states.scrollTimeout && clearTimeout(this._states.scrollTimeout);
   }
-}
-f = new WeakMap(), u = new WeakMap(), O = new WeakMap(), v = new WeakMap(), y = new WeakMap(), S = new WeakMap(), g = new WeakMap(), i = new WeakMap(), $ = new WeakMap(), M = new WeakMap(), H = new WeakSet(), G = function() {
-  return `${t(this, A).call(this, t(this, i).hour)}:${t(this, A).call(this, t(this, i).minute)}:${t(this, A).call(this, t(this, i).second)}`;
-}, A = new WeakMap(), D = new WeakMap(), L = new WeakMap(), E = new WeakMap(), k = new WeakMap(), B = new WeakMap(), P = new WeakMap(), I = new WeakMap(), x = new WeakMap(), V = new WeakMap(), W = new WeakMap(), F = new WeakMap(), z = new WeakMap(), _ = new WeakMap(), T = new WeakMap(), j = new WeakMap(), N = new WeakMap(), q = new WeakMap(), R = new WeakMap(), U = new WeakMap();
-customElements.get("ea-time-picker") || customElements.define("ea-time-picker", lt);
+};
+a._instanceCount = 0;
+r([
+  m(o.cb())
+], a.prototype, "_container", 2);
+r([
+  m(o.ce("input"))
+], a.prototype, "_input", 2);
+r([
+  m(`${o.ce("dropdown-inner")}--hour`)
+], a.prototype, "_hourWrap", 2);
+r([
+  m(`${o.ce("dropdown-inner")}--minute`)
+], a.prototype, "_minuteWrap", 2);
+r([
+  m(`${o.ce("dropdown-inner")}--second`)
+], a.prototype, "_secondWrap", 2);
+r([
+  _({
+    type: String,
+    default: "",
+    observer(t) {
+      this._input && (this._input.label = t);
+    }
+  })
+], a.prototype, "label", 2);
+r([
+  _({
+    type: String,
+    default: "Select time",
+    observer(t) {
+      this._input && (this._input.placeholder = t);
+    }
+  })
+], a.prototype, "placeholder", 2);
+r([
+  _({
+    type: String,
+    default: "",
+    observer(t) {
+      this.setValue(t), t && (this._parseValue(t), this._updateInputValue(), this._updateSelectionState());
+    }
+  })
+], a.prototype, "value", 2);
+r([
+  _({
+    type: String,
+    default: "",
+    observer(t) {
+      this._container && this._container.style.setProperty("--ea-time-picker-width", t);
+    }
+  })
+], a.prototype, "width", 2);
+r([
+  _({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer(t) {
+      this._input && this._input.toggleAttribute("disabled", t), t && this._closeDropdown(), this._updateDropdownInert(), this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "disabled", 2);
+r([
+  _({
+    type: g(["left", "center", "right"]),
+    default: "left",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "align", 2);
+r([
+  _({
+    type: g(["large", "default", "small"]),
+    default: "default",
+    observer(t) {
+      this._input && this._input.setAttribute("size", t);
+    }
+  })
+], a.prototype, "size", 2);
+r([
+  _({
+    type: String,
+    default: "00:00:00",
+    observer() {
+      this._applyLimitRange();
+    }
+  })
+], a.prototype, "limitRangeStart", 2);
+r([
+  _({
+    type: String,
+    default: "23:59:59",
+    observer() {
+      this._applyLimitRange();
+    }
+  })
+], a.prototype, "limitRangeEnd", 2);
+r([
+  _({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._input && this._input.toggleAttribute("required", t);
+    }
+  })
+], a.prototype, "required", 2);
+r([
+  p("click", o.ce("input"))
+], a.prototype, "_handleInputClick", 1);
+r([
+  p("focus", o.ce("input"))
+], a.prototype, "_handleInputFocus", 1);
+r([
+  p("blur", o.ce("input"))
+], a.prototype, "_handleInputBlur", 1);
+r([
+  p("focusout")
+], a.prototype, "_handleFocusOut", 1);
+r([
+  p("keydown")
+], a.prototype, "_handleKeydown", 1);
+r([
+  p("click", "window")
+], a.prototype, "_handleWindowClick", 1);
+r([
+  p("click", `${o.ce("dropdown-inner")}--hour`)
+], a.prototype, "_handleHourClick", 1);
+r([
+  p("click", `${o.ce("dropdown-inner")}--minute`)
+], a.prototype, "_handleMinuteClick", 1);
+r([
+  p("click", `${o.ce("dropdown-inner")}--second`)
+], a.prototype, "_handleSecondClick", 1);
+r([
+  p("scroll", `${o.ce("dropdown-inner")}--hour`)
+], a.prototype, "_handleHourScroll", 1);
+r([
+  p("scroll", `${o.ce("dropdown-inner")}--minute`)
+], a.prototype, "_handleMinuteScroll", 1);
+r([
+  p("scroll", `${o.ce("dropdown-inner")}--second`)
+], a.prototype, "_handleSecondScroll", 1);
+a = r([
+  A(y, { styles: [T] })
+], a);
+const P = a;
 export {
-  lt as EaTimePicker
+  a as EaTimePicker,
+  P as default
 };