easy-component-ui 2.1.0 → 3.0.0

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

@@ -0,0 +1,514 @@
+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 "./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) {
+    super("ea-visible-change", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    }), this.detail = r;
+  }
+}
+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 {
+  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, {
+      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>`
+        );
+      }
+      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);
+      });
+    });
+    /**
+     * 获取最接近目标值的可用选项
+     * @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);
+      });
+    });
+    /**
+     * 打开下拉框
+     */
+    n(this, x, () => {
+      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);
+        } 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;
+      }
+    });
+    /**
+     * 关闭下拉框
+     */
+    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 })
+      );
+    });
+    /**
+     * 切换下拉框显示状态
+     */
+    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" });
+      }
+    });
+    /**
+     * 处理时间列表滚动停止
+     * @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];
+              break;
+            }
+          if (p.classList.contains("is-disabled")) {
+            for (let m = b; m >= 0; m--)
+              if (!l[m].classList.contains("is-disabled")) {
+                p = l[m];
+                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;
+          }, 300);
+        }
+        t(this, i).isScrolling = !1;
+      }, 150);
+    });
+    /**
+     * 设置时间值
+     * @param {string} type
+     * @param {number} value
+     */
+    n(this, N, (s, e) => {
+      switch (s) {
+        case "hour":
+          t(this, i).hour = e;
+          break;
+        case "minute":
+          t(this, i).minute = e;
+          break;
+        case "second":
+          t(this, i).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"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    var e;
+    const s = this.computedClasslist(
+      "ea-time-picker",
+      {},
+      {
+        disabled: this.disabled,
+        open: (e = t(this, f)) == null ? void 0 : e.classList.contains("is-open"),
+        [`align-${this.align}`]: this.align
+      }
+    );
+    return t(this, f) && (t(this, f).className = s), s;
+  }
+  $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 
+          prefix-icon="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")}
+            </ul>
+            <ul class="${s.e("dropdown-inner")} ${s.m("minute")}" part='dropdown-time'>
+              ${t(this, $).call(this, 0, 59, "minute")}
+            </ul>
+            <ul class="${s.e("dropdown-inner")} ${s.m("second")}" part='dropdown-time'>
+              ${t(this, $).call(this, 0, 59, "second")}
+            </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 {HTMLElement}
+   */
+  get validationTarget() {
+    return t(this, u);
+  }
+  /**
+   * 更新表单验证状态
+   */
+  updateValidity() {
+    const s = this.value !== "" && this.value != null;
+    this.required && !s ? 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);
+  }
+  $beforeUnmounted() {
+    var s;
+    (s = t(this, g)) == null || s.abort(), t(this, i).scrollTimeout && clearTimeout(t(this, i).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);
+export {
+  lt as EaTimePicker
+};

package/dist/components/ea-timeline.js

@@ -0,0 +1,186 @@
+var b = Object.defineProperty;
+var u = (t) => {
+  throw TypeError(t);
+};
+var C = (t, s, e) => s in t ? b(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var y = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || u("Cannot " + e);
+var a = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), i = (t, s, e) => s.has(t) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), o = (t, s, e, h) => (w(t, s, "write to private field"), h ? h.call(t, e) : s.set(t, e), e);
+import { B as f } from "./Base.js";
+import { s as _ } from "../css/ea-timeline.style.js";
+import { s as v } from "../css/ea-timeline-item.style.js";
+import { c as S } from "../utils/Variables.js";
+class g extends f {
+  static get observedAttributes() {
+    return [...super.observedAttributes];
+  }
+  constructor() {
+    super(), this.stylesheet = _, this.$render();
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-timeline' part='container'>
+        <slot></slot>
+      </div>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-timeline") || window.customElements.define("ea-timeline", g);
+var n, m, r, c, p, d, l;
+class R extends f {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    i(this, n);
+    /** @type {HTMLElement} */
+    i(this, m);
+    /** @type {HTMLElement} */
+    i(this, r);
+    /** @type {HTMLElement} */
+    i(this, c);
+    /** @type {HTMLElement} */
+    i(this, p);
+    /** @type {HTMLElement} */
+    i(this, d);
+    /** @type {HTMLElement} */
+    i(this, l);
+    y(this, "state", this.properties({
+      type: {
+        type: S,
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      timestamp: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          a(this, l).textContent = e;
+        }
+      },
+      "hide-timestamp": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          a(this, l).style.display = e ? "none" : "block";
+        }
+      },
+      color: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (!CSS.supports("color", e))
+            return console.warn(
+              `[EaTag] The color value ${e} is not supported.`
+            );
+          a(this, r) && (this.style.setProperty("--ea-timeline-item-dot-color", e), a(this, r).style.borderColor = e);
+        }
+      },
+      hollow: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      icon: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          a(this, r).innerHTML = `<ea-icon class="ea-timeline-item__icon-dot" part='icon-dot' icon="${e}"></ea-icon>`;
+        }
+      },
+      size: {
+        type: ["normal", "large"],
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      placement: {
+        type: ["top", "bottom"],
+        default: "",
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      },
+      center: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    this.stylesheet = v, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "type",
+      "timestamp",
+      "hide-timestamp",
+      "color",
+      "hollow",
+      "icon",
+      "placement",
+      "size",
+      "center"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-timeline-item",
+      {
+        ["--" + this.type]: this.type,
+        ["--" + this.size]: this.size,
+        ["--" + this.placement]: this.placement,
+        "--center": this.center
+      },
+      {
+        "hollow-dot": this.hollow
+      }
+    );
+    return a(this, n).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-timeline-item' part='container'>
+        <aside class="ea-timeline-item__wrapper" part='left-wrapper'>
+          <slot name="dot">
+            <section class="ea-timeline-item__dot" part='dot'></section>
+          </slot>
+          <section class="ea-timeline-item__tail" part='tail'></section>
+        </aside>
+        <main class="ea-timeline-item__wrapper right-wrapper" part='right-wrapper'>
+          <header class="ea-timeline-item__content" part='content'>
+            <slot></slot>
+          </header>
+          <footer class='ea-timeline-item__timestamp' part='timestamp'>
+            <slot name="timestamp"></slot>
+          </footer>
+        </main>
+      </div>
+        `, o(this, n, this.shadowRoot.querySelector(".ea-timeline-item")), o(this, m, this.shadowRoot.querySelector("slot[name='dot']")), o(this, r, this.shadowRoot.querySelector(".ea-timeline-item__dot")), o(this, c, this.shadowRoot.querySelector(".ea-timeline-item__tail")), o(this, p, this.shadowRoot.querySelector(".ea-timeline-item__content")), o(this, d, this.shadowRoot.querySelector(
+      ".ea-timeline-item__timestamp"
+    )), o(this, l, this.shadowRoot.querySelector(
+      'slot[name="timestamp"]'
+    )), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+n = new WeakMap(), m = new WeakMap(), r = new WeakMap(), c = new WeakMap(), p = new WeakMap(), d = new WeakMap(), l = new WeakMap();
+window.customElements.get("ea-timeline-item") || window.customElements.define("ea-timeline-item", R);
+export {
+  g as EaTimeline,
+  R as EaTimelineItem
+};