easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-carousel.js

@@ -1,57 +1,40 @@
-var j = Object.defineProperty;
-var B = (r) => {
-  throw TypeError(r);
+import { E as m } from "../core/EaBase.ts.js";
+import { C as v, q as d, b as w, a as u, l, c as y } from "../core/decorator.js";
+import { s as I } from "../css/ea-carousel-item.style.js";
+import { c as g } from "../utils/bem.ts.js";
+import { h as _ } from "../utils/html.ts.js";
+import { E as p } from "../utils/Enum.ts.js";
+import { t as A } from "../utils/timeout.ts.js";
+import "./ea-icon.js";
+import { s as E } from "../css/ea-carousel.style.js";
+var P = Object.getOwnPropertyDescriptor, T = (t, i, s, e) => {
+  for (var a = e > 1 ? void 0 : e ? P(i, s) : i, h = t.length - 1, c; h >= 0; h--)
+    (c = t[h]) && (a = c(a) || a);
+  return a;
 };
-var D = (r, n, e) => n in r ? j(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e;
-var T = (r, n, e) => D(r, typeof n != "symbol" ? n + "" : n, e), $ = (r, n, e) => n.has(r) || B("Cannot " + e);
-var t = (r, n, e) => ($(r, n, "read from private field"), e ? e.call(r) : n.get(r)), a = (r, n, e) => n.has(r) ? B("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, e), g = (r, n, e, s) => ($(r, n, "write to private field"), s ? s.call(r, e) : n.set(r, e), e), h = (r, n, e) => ($(r, n, "access private method"), e);
-import { B as N } from "./Base.js";
-import { s as W } from "../css/ea-carousel-item.style.js";
-import { s as X } from "../css/ea-carousel.style.js";
-class Y extends N {
-  static get observedAttributes() {
-    return [...super.observedAttributes];
-  }
-  constructor() {
-    super(), this.stylesheet = W, this.$render();
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-carousel-item' part='container'>
+const b = "ea-carousel-item", O = g(b);
+let f = class extends m {
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${O()}' part='container' role="group" aria-roledescription="slide">
         <slot></slot>
       </div>
     `;
   }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-}
-window.customElements.get("ea-carousel-item") || window.customElements.define("ea-carousel-item", Y);
-var b, w, _, S, f, p, u, d, v, i, q, E, o, z, O, U, A, I, m, C, x, L, M, H, P, k, R;
-class F extends N {
+};
+f = T([
+  v(b, { styles: [I] })
+], f);
+var x = Object.defineProperty, M = Object.getOwnPropertyDescriptor, o = (t, i, s, e) => {
+  for (var a = e > 1 ? void 0 : e ? M(i, s) : i, h = t.length - 1, c; h >= 0; h--)
+    (c = t[h]) && (a = (e ? c(i, s, a) : c(a)) || a);
+  return e && a && x(i, s, a), a;
+};
+const C = "ea-carousel", n = g(C);
+let r = class extends m {
   constructor() {
-    super();
-    a(this, o);
-    /** @type {HTMLElement} */
-    a(this, b);
-    /** @type {HTMLElement} */
-    a(this, w);
-    /** @type {HTMLElement} */
-    a(this, _);
-    /** @type {HTMLElement} */
-    a(this, S);
-    /** @type {HTMLElement} */
-    a(this, f);
-    /** @type {HTMLElement[]} */
-    a(this, p, []);
-    /** @type {AbortController} */
-    a(this, u);
-    a(this, d, {
-      triggerAbortControllers: new AbortController()
-    });
-    /** @type {MutationObserver | null} */
-    a(this, v, null);
-    a(this, i, {
+    super(...arguments), this._itemObserver = null, this._isMounted = !1, this._resizeTimeout = null, this._states = {
       prevIndex: 0,
       originLength: 0,
       timer: null,
@@ -59,357 +42,409 @@ class F extends N {
       isMouseEnter: !1,
       isEnd: !1,
       isProcessingSlotChange: !1
-    });
-    T(this, "state", this.properties({
-      height: {
-        type: String,
-        default: "100%",
-        observer: (e) => {
-          this.style.setProperty("--ea-carousel-height", e);
-        }
-      },
-      direction: {
-        type: ["horizontal", "vertical"],
-        default: "horizontal",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      index: {
-        type: Number,
-        default: 0,
-        observer: (e, s) => {
-          if (t(this, A).call(this, e), t(this, i).isEnd) return t(this, i).isEnd = !1;
-          e < 0 ? (e = t(this, p).length - 1, s = 0, t(this, i).isEnd = !0) : e > t(this, p).length - 1 && (s = t(this, p).length - 1, e = 0, t(this, i).isEnd = !0), t(this, i).prevIndex = s, this.emit("change", {
-            detail: {
-              current: e,
-              prev: s
-            }
-          });
-        }
-      },
-      trigger: {
-        type: ["click", "hover"],
-        default: "hover",
-        /** @param {'click' | 'hover'} newVal */
-        observer: (e) => {
-          var s;
-          (s = t(this, d).triggerAbortControllers) == null || s.abort(), t(this, d).triggerAbortControllers = new AbortController(), t(this, f).addEventListener(
-            e === "hover" ? "mouseover" : "click",
-            t(this, M),
-            {
-              signal: t(this, d).triggerAbortControllers.signal
-            }
-          );
-        }
-      },
-      interval: {
-        type: Number,
-        default: 3e3,
-        observer: () => {
-          h(this, o, m).call(this), this.autoplay && h(this, o, C).call(this);
-        }
-      },
-      arrow: {
-        type: ["never", "always", "hover"],
-        default: "hover",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      autoplay: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          h(this, o, m).call(this), e && h(this, o, C).call(this);
-        }
-      },
-      loop: {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      "pause-on-hover": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-        }
-      },
-      "indicator-position": {
-        type: ["", "none", "outside"],
-        default: "",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 处理 index 溢出的情况
-     * @return {number}
-     */
-    a(this, q, () => this.index === t(this, p).length ? 0 : this.index === -1 ? t(this, p).length - 1 : this.index);
-    /**
-     * 渲染 轮播图指示器，为了避免vue组件缓存，所以在初始化和组件挂载时都进行渲染
-     */
-    a(this, E, () => {
-      const e = Array.from(
-        this.querySelectorAll("ea-carousel-item:not([slot])"),
-        (s, l) => `<button class='ea-carousel__indicator' part='indicator' tabindex="1" data-index="${l}"></button>`
+    }, this.height = "100%", this.direction = "horizontal", this.index = 0, this.trigger = "hover", this.interval = 3e3, this.arrow = "hover", this.autoplay = !0, this.loop = !0, this.pauseOnHover = !0, this.indicatorPosition = "", this._handleIndexOverflow = () => this.index === this._indicatorNodes.length ? 0 : this.index === -1 ? this._indicatorNodes.length - 1 : this.index, this._renderIndicatorItems = () => {
+      const t = this._carouselItems.length, i = Array.from(
+        { length: t },
+        (s, e) => `<button class='${n.e("indicator")}' part='indicator' role="tab" tabindex="${e === 0 ? 0 : -1}" data-index="${e}" aria-label="Slide ${e + 1}" aria-selected="${e === 0 ? "true" : "false"}" aria-controls="carousel-slide-${e}"></button>`
       ).join("");
-      t(this, f).innerHTML = e, g(this, p, [
-        ...t(this, f).querySelectorAll(".ea-carousel__indicator")
-      ]);
-    });
-    /**
-     * 更新轮播图位置
-     * @param {number} index
-     */
-    a(this, A, (e = 0) => {
-      const { width: s, height: l } = t(this, b).getBoundingClientRect(), c = this.direction === "horizontal" ? "X" : "Y", y = this.direction === "horizontal" ? s : l;
+      this._indicatorWrap.innerHTML = _(i);
+    }, this._updateCarouselPosition = (t = 0) => {
+      const { width: i, height: s } = this._container.getBoundingClientRect(), e = this.direction === "horizontal" ? "X" : "Y", a = this.direction === "horizontal" ? i : s;
       this.style.setProperty(
         "--ea-carousel-transform",
-        `translate${c}(-${(e + 1) * y}px)`
-      ), t(this, I).call(this);
-    });
-    /**
-     * 更新指示器位置
-     */
-    a(this, I, () => {
-      t(this, p).forEach((e, s) => {
-        e.classList.toggle("is-active", s === t(this, q).call(this));
-      });
-    });
-    /**
-     * 开启轮播图过渡属性
-     */
-    a(this, x, () => {
+        `translate${e}(-${(t + 1) * a}px)`
+      ), this._updateIndicatorPosition();
+    }, this._updateIndicatorPosition = () => {
+      const t = this._handleIndexOverflow();
+      this._indicatorNodes.forEach((i, s) => {
+        const e = s === t;
+        i.classList.toggle("is-active", e), i.setAttribute("aria-selected", String(e)), i.setAttribute("tabindex", e ? "0" : "-1");
+      }), this._updateSlideInert(t);
+    }, this._turnOnTransition = () => {
       this.clientHeight, this.style.removeProperty("--ea-carousel-transition");
-    });
-    /**
-     * 关闭轮播图过渡属性
-     */
-    a(this, L, () => {
+    }, this._turnOffTransition = () => {
       this.style.setProperty("--ea-carousel-transition", "none"), this.clientHeight;
-    });
-    /**
-     * 指示器 处理事件，需要按照 `this.trigger` 来确定事件名
-     * @param {MouseEvent} e
-     */
-    a(this, M, (e) => {
-      const s = t(this, f).querySelectorAll(
-        ".ea-carousel__indicator"
-      ), l = e.target.closest(".ea-carousel__indicator");
-      l && s.forEach((c, y) => {
-        c.classList.toggle("is-active", c === l), c === l && (this.index = y);
-      });
-    });
-    /**
-     * 轮播图切换结束事件，即能确保轮播图在视觉上连续
-     */
-    a(this, H, () => {
-      t(this, L).call(this), h(this, o, m).call(this), this.index = t(this, q).call(this), this.autoplay && !t(this, i).isMouseEnter && h(this, o, C).call(this), t(this, x).call(this), t(this, i).pause = !1;
-    });
-    /**
-     * 箭头显示事件
-     */
-    a(this, P, () => {
-      const e = () => {
-        t(this, i).isMouseEnter = !1, this["pause-on-hover"] && h(this, o, C).call(this), this.updateContainerClasslist();
-      };
-      t(this, i).isMouseEnter = !0, this["pause-on-hover"] && h(this, o, m).call(this), this.updateContainerClasslist(), t(this, b).addEventListener("mouseleave", e, {
-        signal: t(this, u).signal,
-        once: !0
+    }, this._onIndicatorHandleEvent = (t) => {
+      const i = t.target.closest(
+        n.ce("indicator")
+      );
+      i && this._indicatorNodes.forEach((s, e) => {
+        s.classList.toggle("is-active", s === i), s === i && (this.index = e);
       });
-    });
-    /**
-     * 当窗口大小变化时，更新轮播图位置
-     */
-    a(this, k, () => {
-      let e = null;
-      return {
-        listener: () => {
-          clearTimeout(e), e = null, e = setTimeout(() => {
-            t(this, A).call(this, this.index);
-          }, 100);
-        },
-        unsetHandler: () => {
-          clearTimeout(e), e = null;
-        }
-      };
-    });
-    /**
-     * 处理 slotchange 事件，当 slot 内容变化时重新渲染
-     */
-    a(this, R, () => {
-      t(this, i).isProcessingSlotChange || (t(this, i).isProcessingSlotChange = !0, t(this, L).call(this), h(this, o, m).call(this), t(this, i).prevIndex = 0, t(this, i).originLength = 0, t(this, i).pause = !1, t(this, i).isEnd = !1, this.index = 0, t(this, E).call(this), h(this, o, z).call(this), t(this, I).call(this), this.autoplay && h(this, o, C).call(this), queueMicrotask(() => {
-        t(this, x).call(this), t(this, i).isProcessingSlotChange = !1;
-      }));
-    });
-    /**
-     * 上一张轮播图
-     */
-    T(this, "prev", () => {
-      t(this, i).pause || (this.index--, t(this, i).pause = !0);
-    });
-    /**
-     * 下一张轮播图
-     */
-    T(this, "next", () => {
-      t(this, i).pause || (this.index++, t(this, i).pause = !0);
-    });
-    this.stylesheet = X, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "height",
-      "index",
-      "trigger",
-      "autoplay",
-      "interval",
-      "indicator-position",
-      "arrow",
-      // "type",
-      // "card-scale",
-      "loop",
-      "direction",
-      "pause-on-hover"
-      // "motion-blur",
-    ];
+    }, this._onCarouselChangeEndEvent = () => {
+      this._turnOffTransition(), this._handleTimerClear(), this.index = this._handleIndexOverflow(), this.autoplay && !this._states.isMouseEnter && this._handleAutoPlay(), A(() => {
+        this._turnOnTransition(), this._states.pause = !1;
+      }, 0);
+    }, this._onArrowShowEvent = () => {
+      this._states.isMouseEnter = !0, this.pauseOnHover && this._handleTimerClear(), this.updateContainerClasslist(), this._updateAriaLive(), this._updateRotationBtn(), this._updateArrowInert();
+    }, this._onSlotChangeEvent = () => {
+      this._isMounted && (this._states.isProcessingSlotChange || (this._states.isProcessingSlotChange = !0, this._turnOffTransition(), this._handleTimerClear(), this._states.prevIndex = 0, this._states.originLength = 0, this._states.pause = !1, this._states.isEnd = !1, this.index = 0, this._renderIndicatorItems(), this._initCarouselItem(), this._updateSlideLabels(), this._updateIndicatorPosition(), this.autoplay && this._handleAutoPlay(), queueMicrotask(() => {
+        this._turnOnTransition(), this._states.isProcessingSlotChange = !1;
+      })));
+    }, this.prev = () => {
+      this._states.pause || (this.index--, this._states.pause = !0);
+    }, this.next = () => {
+      this._states.pause || (this.index++, this._states.pause = !0);
+    };
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-carousel",
+    const t = n(
+      { [this.direction]: !0 },
       {
-        ["--" + this.direction]: this.direction
-      },
-      {
-        ["arrow-" + this.arrow]: this.arrow === "always" || this.arrow === "never" || t(this, i).isMouseEnter,
-        [this["indicator-position"] + "-indicator"]: this["indicator-position"]
+        [`arrow-${this.arrow}`]: this.arrow === "always" || this.arrow === "never" || this._states.isMouseEnter,
+        [`${this.indicatorPosition}-indicator`]: !!this.indicatorPosition
       }
     );
-    return t(this, b).className = e, e;
+    return this._container.className = t, t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-carousel' part='container'>
-        <button class="ea-carousel__arrow arrow-left" part="arrow-left">
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${n()}' part='container' role="region" aria-roledescription="carousel" aria-label="Carousel">
+        <button class="${n.e("rotation")}" part="rotation" aria-label="Stop automatic slide show">
+          <ea-icon name="pause" part="rotation-icon"></ea-icon>
+        </button>
+        <button class="${n.e("arrow")} arrow-left" part="arrow-left" aria-label="Previous Slide" aria-controls="carousel-content">
           <ea-icon name="angle-left" part="arrow-left-icon"></ea-icon>
         </button>
-        <button class="ea-carousel__arrow arrow-right" part="arrow-right">
+        <button class="${n.e("arrow")} arrow-right" part="arrow-right" aria-label="Next Slide" aria-controls="carousel-content">
           <ea-icon name="angle-right" part="arrow-right-icon"></ea-icon>
         </button>
-        <ul class="ea-carousel__content" part="content">
+        <ul class="${n.e("content")}" part="content" id="carousel-content" aria-live="off">
             <slot name="clone-last"></slot>
             <slot></slot>
             <slot name="clone-first"></slot>
         </ul>
-        <footer class="ea-carousel__indicator-wrap" part="indicator-wrap">
-          
+        <footer class="${n.e("indicator-wrap")}" part="indicator-wrap" role="tablist" aria-label="Choose slide to display">
         </footer>
       </div>
-    `, g(this, b, this.shadowRoot.querySelector(".ea-carousel")), g(this, w, this.shadowRoot.querySelector(".ea-carousel__content")), g(this, f, this.shadowRoot.querySelector(
-      ".ea-carousel__indicator-wrap"
-    )), g(this, _, this.shadowRoot.querySelector(
-      ".ea-carousel__arrow.arrow-left"
-    )), g(this, S, this.shadowRoot.querySelector(
-      ".ea-carousel__arrow.arrow-right"
-    )), t(this, E).call(this), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    var e, s;
-    super.connectedCallback(), (e = t(this, u)) == null || e.abort(), g(this, u, new AbortController());
-    for (const l in t(this, d))
-      (s = t(this, d)[l]) == null || s.abort(), t(this, d)[l] = new AbortController();
-    t(this, L).call(this), h(this, o, m).call(this), t(this, E).call(this), h(this, o, z).call(this), this.autoplay && h(this, o, C).call(this), t(this, f).addEventListener(
-      this.trigger === "hover" ? "mouseover" : "click",
-      t(this, M),
-      {
-        signal: t(this, d).triggerAbortControllers.signal
-      }
-    ), t(this, w).addEventListener(
-      "transitionend",
-      t(this, H),
-      { signal: t(this, u).signal }
-    ), this.arrow !== "never" && this.direction !== "vertical" && (t(this, _).addEventListener("click", this.prev, {
-      signal: t(this, u).signal
-    }), t(this, S).addEventListener("click", this.next, {
-      signal: t(this, u).signal
-    })), t(this, b).addEventListener("mouseenter", t(this, P), {
-      signal: t(this, u).signal
-    }), window.addEventListener("resize", t(this, k).call(this).listener, {
-      signal: t(this, u).signal
-    }), t(this, w).querySelector("slot:not([name])").addEventListener("slotchange", t(this, R), {
-      signal: t(this, u).signal
-    }), queueMicrotask(() => {
-      t(this, x).call(this);
+  /** 更新轮播项的 aria-label（"N of M" 格式） */
+  _updateSlideLabels() {
+    const t = this._carouselItems, i = t.length;
+    t.forEach((s, e) => {
+      s.setAttribute("aria-label", `${e + 1} of ${i}`), s.setAttribute("id", `carousel-slide-${e}`);
     });
   }
-  $beforeUnmounted() {
-    var e, s, l, c;
-    (e = t(this, u)) == null || e.abort();
-    for (const y in t(this, d))
-      (s = t(this, d)[y]) == null || s.abort();
-    (l = t(this, k).call(this)) == null || l.unsetHandler(), (c = t(this, v)) == null || c.disconnect(), g(this, v, null);
+  /** 初始化轮播项，创建首尾克隆 */
+  _initCarouselItem() {
+    try {
+      const t = this._carouselItems;
+      if (t.length === 0) return;
+      this._states.originLength = t.length, this._cloneItems.forEach((e) => e.remove());
+      const i = t[0].cloneNode(!0), s = t[t.length - 1].cloneNode(!0);
+      i.setAttribute("slot", "clone-first"), s.setAttribute("slot", "clone-last"), this.appendChild(i), this.appendChild(s), this._setupItemObserver(), queueMicrotask(() => {
+        this._updateCarouselPosition(this.index);
+      });
+    } catch {
+    }
   }
-}
-b = new WeakMap(), w = new WeakMap(), _ = new WeakMap(), S = new WeakMap(), f = new WeakMap(), p = new WeakMap(), u = new WeakMap(), d = new WeakMap(), v = new WeakMap(), i = new WeakMap(), q = new WeakMap(), E = new WeakMap(), o = new WeakSet(), /**
- * 初始化 `轮播图元素` 结构
- */
-z = function() {
-  try {
-    const e = this.querySelectorAll("ea-carousel-item:not([slot])");
-    if (e.length === 0) return;
-    t(this, i).originLength = e.length, this.querySelectorAll(
-      'ea-carousel-item[slot^="clone-"]'
-    ).forEach((y) => y.remove());
-    const l = e[0].cloneNode(!0), c = e[e.length - 1].cloneNode(!0);
-    l.setAttribute("slot", "clone-first"), c.setAttribute("slot", "clone-last"), this.appendChild(l), this.appendChild(c), h(this, o, O).call(this), queueMicrotask(() => {
-      t(this, A).call(this);
+  /** 设置子元素变更观察器 */
+  _setupItemObserver() {
+    this._itemObserver && this._itemObserver.disconnect(), this._itemObserver = new MutationObserver((i) => {
+      i.some((e) => e.type === "childList" && !!e.target.closest("ea-carousel-item:not([slot])")) && this._syncClonedItems();
+    }), this._carouselItems.forEach((i) => {
+      this._itemObserver.observe(i, {
+        childList: !0,
+        subtree: !0,
+        characterData: !0
+      });
     });
-  } catch {
   }
-}, /**
- * 设置 MutationObserver 监听 item 内容变化
- */
-O = function() {
-  t(this, v) && t(this, v).disconnect(), g(this, v, new MutationObserver((s) => {
-    s.some((c) => c.type === "childList" && c.target.closest("ea-carousel-item:not([slot])")) && h(this, o, U).call(this);
-  })), this.querySelectorAll("ea-carousel-item:not([slot])").forEach((s) => {
-    t(this, v).observe(s, {
-      childList: !0,
-      subtree: !0,
-      characterData: !0
+  /** 同步克隆项内容 */
+  _syncClonedItems() {
+    const t = this._carouselItems;
+    if (t.length === 0) return;
+    const i = this.querySelector(
+      'ea-carousel-item[slot="clone-first"]'
+    ), s = this.querySelector('ea-carousel-item[slot="clone-last"]');
+    i && t[0] && (i.innerHTML = _(t[0].innerHTML)), s && t[t.length - 1] && (s.innerHTML = _(t[t.length - 1].innerHTML));
+  }
+  /** 设置非当前轮播项为 inert，防止 Tab 聚焦到不可见内容 */
+  _updateSlideInert(t) {
+    var s;
+    this._carouselItems.forEach((e, a) => {
+      a === t ? e.removeAttribute("inert") : e.setAttribute("inert", "");
+    }), (s = this._cloneItems) == null || s.forEach((e) => {
+      e.setAttribute("inert", "");
+    });
+  }
+  /** 根据方向和 arrow 属性更新箭头按钮的可交互性 */
+  _updateArrowInert() {
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(
+      n.ce("arrow")
+    );
+    if (!t) return;
+    const i = this.direction === "vertical" || this.arrow === "never" || this.arrow === "hover" && !this._states.isMouseEnter;
+    t.forEach((e) => {
+      i ? e.setAttribute("inert", "") : e.removeAttribute("inert");
     });
-  });
-}, /**
- * 同步克隆节点的内容
- */
-U = function() {
-  const e = this.querySelectorAll("ea-carousel-item:not([slot])");
-  if (e.length === 0) return;
-  const s = this.querySelector(
-    'ea-carousel-item[slot="clone-first"]'
-  ), l = this.querySelector('ea-carousel-item[slot="clone-last"]');
-  s && e[0] && (s.innerHTML = e[0].innerHTML), l && e[e.length - 1] && (l.innerHTML = e[e.length - 1].innerHTML);
-}, A = new WeakMap(), I = new WeakMap(), /**
- * 清除轮播图自动播放
- */
-m = function() {
-  t(this, i).timer && (clearInterval(t(this, i).timer), t(this, i).timer = null);
-}, /**
- * 处理轮播图自动播放
- */
-C = function() {
-  this.autoplay && (h(this, o, m).call(this), t(this, i).timer = setInterval(this.next, this.interval));
-}, x = new WeakMap(), L = new WeakMap(), M = new WeakMap(), H = new WeakMap(), P = new WeakMap(), k = new WeakMap(), R = new WeakMap();
-window.customElements.get("ea-carousel") || window.customElements.define("ea-carousel", F);
+  }
+  /** none-indicator 模式下指示器容器设置 inert */
+  _updateIndicatorInert() {
+    this._indicatorWrap && (this.indicatorPosition === "none" ? this._indicatorWrap.setAttribute("inert", "") : this._indicatorWrap.removeAttribute("inert"));
+  }
+  /** 清除自动播放定时器 */
+  _handleTimerClear() {
+    this._states.timer && (clearInterval(this._states.timer), this._states.timer = null);
+  }
+  /** 启动自动播放 */
+  _handleAutoPlay() {
+    this.autoplay && (this._handleTimerClear(), this._states.timer = setInterval(this.next, this.interval), this._updateAriaLive());
+  }
+  /** 更新 aria-live 状态：自动播放时为 off，暂停时为 polite */
+  _updateAriaLive() {
+    this._content && this._content.setAttribute(
+      "aria-live",
+      this._states.timer !== null ? "off" : "polite"
+    );
+  }
+  /** 更新旋转控制按钮的标签、图标和可见性 */
+  _updateRotationBtn() {
+    if (!this._rotationBtn || (this._rotationBtn.hidden = !this.autoplay, !this.autoplay)) return;
+    const t = this._states.timer !== null;
+    this._rotationBtn.setAttribute(
+      "aria-label",
+      t ? "Stop automatic slide show" : "Start automatic slide show"
+    );
+    const i = this._rotationBtn.querySelector("ea-icon");
+    i && i.setAttribute("name", t ? "pause" : "play");
+  }
+  _onArrowLeftClick() {
+    this.arrow === "never" || this.direction === "vertical" || this.prev();
+  }
+  _onArrowRightClick() {
+    this.arrow === "never" || this.direction === "vertical" || this.next();
+  }
+  _onRotationClick() {
+    this._states.timer ? this._handleTimerClear() : this._handleAutoPlay(), this._updateRotationBtn(), this._updateAriaLive();
+  }
+  _onFocusIn() {
+    this.autoplay && (this._handleTimerClear(), this._updateAriaLive(), this._updateRotationBtn());
+  }
+  _onFocusOut() {
+    this.autoplay && !this._states.isMouseEnter && (this._handleAutoPlay(), this._updateRotationBtn());
+  }
+  _onTransitionEnd() {
+    this._onCarouselChangeEndEvent();
+  }
+  _onMouseEnter() {
+    this._onArrowShowEvent();
+  }
+  _onMouseLeave() {
+    this._states.isMouseEnter && (this._states.isMouseEnter = !1, this.pauseOnHover && this._handleAutoPlay(), this.updateContainerClasslist(), this._updateAriaLive(), this._updateRotationBtn(), this._updateArrowInert());
+  }
+  _handleIndicatorHover(t) {
+    this.trigger === "hover" && t.target.closest(n.ce("indicator")) && this._onIndicatorHandleEvent(t);
+  }
+  _handleIndicatorClick(t) {
+    this.trigger === "click" && t.target.closest(n.ce("indicator")) && this._onIndicatorHandleEvent(t);
+  }
+  _handleIndicatorKeydown(t) {
+    const i = t.target;
+    if (!i.closest(n.ce("indicator"))) return;
+    const s = Array.from(this._indicatorNodes), e = s.indexOf(i);
+    if (e === -1) return;
+    let a = -1;
+    const h = this.direction === "horizontal";
+    switch (t.key) {
+      case (h ? "ArrowRight" : "ArrowDown"):
+        t.preventDefault(), a = e + 1, a >= s.length && (a = 0);
+        break;
+      case (h ? "ArrowLeft" : "ArrowUp"):
+        t.preventDefault(), a = e - 1, a < 0 && (a = s.length - 1);
+        break;
+      case "Home":
+        t.preventDefault(), a = 0;
+        break;
+      case "End":
+        t.preventDefault(), a = s.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.index = e;
+        return;
+      default:
+        return;
+    }
+    a >= 0 && a < s.length && (this.index = a, s[a].focus());
+  }
+  _handleResize() {
+    this._resizeTimeout && clearTimeout(this._resizeTimeout), this._resizeTimeout = setTimeout(() => {
+      this._updateCarouselPosition(this.index);
+    }, 100);
+  }
+  _handleSlotChange() {
+    this._onSlotChangeEvent();
+  }
+  $mount() {
+    this.style.setProperty("--ea-carousel-height", this.height), this.updateContainerClasslist(), this._turnOffTransition(), this._handleTimerClear(), this._renderIndicatorItems(), this._initCarouselItem(), this._updateSlideLabels(), this.autoplay && this._handleAutoPlay(), queueMicrotask(() => {
+      this._turnOnTransition();
+    }), this._isMounted = !0, this._updateRotationBtn(), this._updateArrowInert(), this._updateIndicatorInert();
+  }
+  $beforeUnmount() {
+    var t;
+    this._handleTimerClear(), this._resizeTimeout && clearTimeout(this._resizeTimeout), (t = this._itemObserver) == null || t.disconnect(), this._itemObserver = null, this._isMounted = !1;
+  }
+};
+o([
+  d(n.cb())
+], r.prototype, "_container", 2);
+o([
+  d(n.ce("content"))
+], r.prototype, "_content", 2);
+o([
+  d(n.ce("indicator-wrap"))
+], r.prototype, "_indicatorWrap", 2);
+o([
+  d(n.ce("rotation"))
+], r.prototype, "_rotationBtn", 2);
+o([
+  w(n.ce("indicator"))
+], r.prototype, "_indicatorNodes", 2);
+o([
+  y("ea-carousel-item:not([slot])")
+], r.prototype, "_carouselItems", 2);
+o([
+  y('ea-carousel-item[slot^="clone-"]')
+], r.prototype, "_cloneItems", 2);
+o([
+  u({
+    type: String,
+    default: "100%",
+    observer(t) {
+      this.style.setProperty("--ea-carousel-height", t);
+    }
+  })
+], r.prototype, "height", 2);
+o([
+  u({
+    type: p(["horizontal", "vertical"]),
+    default: "horizontal",
+    observer() {
+      this.updateContainerClasslist(), this._updateArrowInert();
+    }
+  })
+], r.prototype, "direction", 2);
+o([
+  u({
+    type: Number,
+    default: 0,
+    observer(t, i) {
+      if (this._updateCarouselPosition(t), this._states.isEnd) {
+        this._states.isEnd = !1;
+        return;
+      }
+      let s = t, e = i;
+      t < 0 ? (s = this._indicatorNodes.length - 1, e = 0, this._states.isEnd = !0) : t > this._indicatorNodes.length - 1 && (e = this._indicatorNodes.length - 1, s = 0, this._states.isEnd = !0), this._states.prevIndex = e, this.emit("ea-change", {
+        detail: {
+          current: s,
+          prev: e
+        }
+      });
+    }
+  })
+], r.prototype, "index", 2);
+o([
+  u({
+    type: p(["click", "hover"]),
+    default: "hover"
+  })
+], r.prototype, "trigger", 2);
+o([
+  u({
+    type: Number,
+    default: 3e3,
+    observer() {
+      this._handleTimerClear(), this.autoplay && this._handleAutoPlay();
+    }
+  })
+], r.prototype, "interval", 2);
+o([
+  u({
+    type: p(["never", "always", "hover"]),
+    default: "hover",
+    observer() {
+      this.updateContainerClasslist(), this._updateArrowInert();
+    }
+  })
+], r.prototype, "arrow", 2);
+o([
+  u({
+    type: Boolean,
+    default: !0,
+    observer(t) {
+      this._handleTimerClear(), t && this._handleAutoPlay(), this._updateRotationBtn(), this._updateAriaLive();
+    }
+  })
+], r.prototype, "autoplay", 2);
+o([
+  u({
+    type: Boolean,
+    default: !0
+  })
+], r.prototype, "loop", 2);
+o([
+  u({
+    type: Boolean,
+    default: !0
+  })
+], r.prototype, "pauseOnHover", 2);
+o([
+  u({
+    type: p(["", "none", "outside"]),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateIndicatorInert();
+    }
+  })
+], r.prototype, "indicatorPosition", 2);
+o([
+  l("click", ".arrow-left")
+], r.prototype, "_onArrowLeftClick", 1);
+o([
+  l("click", ".arrow-right")
+], r.prototype, "_onArrowRightClick", 1);
+o([
+  l("click", n.ce("rotation"))
+], r.prototype, "_onRotationClick", 1);
+o([
+  l("focusin", n.cb())
+], r.prototype, "_onFocusIn", 1);
+o([
+  l("focusout", n.cb())
+], r.prototype, "_onFocusOut", 1);
+o([
+  l("transitionend", n.ce("content"))
+], r.prototype, "_onTransitionEnd", 1);
+o([
+  l("mouseenter", n.cb())
+], r.prototype, "_onMouseEnter", 1);
+o([
+  l("mouseleave", n.cb())
+], r.prototype, "_onMouseLeave", 1);
+o([
+  l("mouseover", "shadowRoot")
+], r.prototype, "_handleIndicatorHover", 1);
+o([
+  l("click", "shadowRoot")
+], r.prototype, "_handleIndicatorClick", 1);
+o([
+  l("keydown", n.ce("indicator-wrap"))
+], r.prototype, "_handleIndicatorKeydown", 1);
+o([
+  l("resize", "window")
+], r.prototype, "_handleResize", 1);
+o([
+  l("slotchange", "slot:not([name])")
+], r.prototype, "_handleSlotChange", 1);
+r = o([
+  v(C, { styles: [E] })
+], r);
 export {
-  F as EaCarousel,
-  Y as EaCarouselItem
+  r as EaCarousel,
+  f as EaCarouselItem
 };