easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-image-preview.js

@@ -1,57 +1,74 @@
-var J = Object.defineProperty;
-var Z = (l) => {
-  throw TypeError(l);
+var Z = Object.defineProperty;
+var H = (r) => {
+  throw TypeError(r);
 };
-var K = (l, c, t) => c in l ? J(l, c, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[c] = t;
-var L = (l, c, t) => K(l, typeof c != "symbol" ? c + "" : c, t), j = (l, c, t) => c.has(l) || Z("Cannot " + t);
-var e = (l, c, t) => (j(l, c, "read from private field"), t ? t.call(l) : c.get(l)), i = (l, c, t) => c.has(l) ? Z("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(l) : c.set(l, t), h = (l, c, t, a) => (j(l, c, "write to private field"), a ? a.call(l, t) : c.set(l, t), t);
-import { EaOverlay as Q } from "./ea-overlay.js";
-import { E as W } from "../utils/Utils.js";
+var G = (r, n, t) => n in r ? Z(r, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[n] = t;
+var L = (r, n, t) => G(r, typeof n != "symbol" ? n + "" : n, t), j = (r, n, t) => n.has(r) || H("Cannot " + t);
+var e = (r, n, t) => (j(r, n, "read from private field"), t ? t.call(r) : n.get(r)), o = (r, n, t) => n.has(r) ? H("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(r) : n.set(r, t), g = (r, n, t, s) => (j(r, n, "write to private field"), s ? s.call(r, t) : n.set(r, t), t);
+import { EaOverlay as J } from "./ea-overlay.js";
+import { E as K } from "../utils/Utils.js";
 import "./ea-image.js";
-import { s as V } from "../css/ea-image-preview.style.js";
-var m, M, k, S, C, d, T, q, R, z, A, I, N, P, U, v, p, b, f, n, X, x, _, E, $, B, D, H;
-class ee extends Q {
+import { s as Q } from "../css/ea-image-preview.style.js";
+var v, U, k, S, q, d, Y, C, I, z, R, A, M, N, P, i, c, O, E, _, x, X, $, B, D, T;
+class W extends J {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    i(this, m);
+    o(this, v);
     /** @type {HTMLElement} */
-    i(this, M);
+    o(this, U);
     /** @type {HTMLElement} */
-    i(this, k);
+    o(this, k);
     /** @type {HTMLElement} */
-    i(this, S);
+    o(this, S);
     /** @type {HTMLElement} */
-    i(this, C);
+    o(this, q);
     /** @type {HTMLElement} */
-    i(this, d);
+    o(this, d);
     /** @type {HTMLElement} */
-    i(this, T);
+    o(this, Y);
     /** @type {HTMLElement} */
-    i(this, q);
+    o(this, C);
     /** @type {HTMLElement} */
-    i(this, R);
+    o(this, I);
     /** @type {HTMLElement} */
-    i(this, z);
+    o(this, z);
     /** @type {HTMLElement} */
-    i(this, A);
+    o(this, R);
     /** @type {HTMLElement} */
-    i(this, I);
+    o(this, A);
     /** @type {HTMLElement} */
-    i(this, N);
+    o(this, M);
     /** @type {HTMLElement} */
-    i(this, P);
+    o(this, N);
     /** @type {HTMLElement} */
-    i(this, U);
+    o(this, P);
     /** @type {AbortController} */
-    i(this, v);
-    /** @type {AbortController} */
-    i(this, p);
-    /** @type {AbortController} */
-    i(this, b);
-    /** @type {AbortController} */
-    i(this, f);
-    i(this, n, {
+    o(this, i, {
+      /** @type {AbortController | null} */
+      main: null,
+      /** @type {AbortController | null} */
+      img: null,
+      /** @type {AbortController | null} */
+      clickModal: null,
+      /** @type {AbortController | null} */
+      imgMove: null,
+      /** @type {AbortController | null} */
+      toolbar: null,
+      /** @type {AbortController | null} */
+      switchPrev: null,
+      /** @type {AbortController | null} */
+      switchNext: null,
+      /** @type {AbortController | null} */
+      zoomOut: null,
+      /** @type {AbortController | null} */
+      zoomIn: null,
+      /** @type {AbortController | null} */
+      rotateLeft: null,
+      /** @type {AbortController | null} */
+      rotateRight: null
+    });
+    o(this, c, {
       urlList: [],
       /** @type {"loading" | "success" | "error"} */
       status: "loading",
@@ -67,7 +84,9 @@ class ee extends Q {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          this.status = t;
+          this.status = t, t && this.urlList.length > 0 && (e(this, d).querySelector(
+            ".ea-image-preview__img"
+          ) || e(this, T).call(this, this.index));
         }
       },
       "initial-index": {
@@ -80,54 +99,16 @@ class ee extends Q {
       index: {
         type: Number,
         default: () => this["initial-index"],
-        observer: (t, a) => {
-          var s;
-          if (e(this, n).dirtyUpdate) return e(this, n).dirtyUpdate = !1;
+        observer: (t, s) => {
+          if (e(this, c).dirtyUpdate) return e(this, c).dirtyUpdate = !1;
           if (this.infinite) {
             if (!this.urlList.length) return;
-            const r = e(this, n).urlList.length - 1;
-            if (t > r) return this.index = 0;
-            if (t < 0) return this.index = r;
-          } else if (t < 0 || t > e(this, n).urlList.length - 1)
-            return e(this, n).dirtyUpdate = !0, this.index = a;
-          const o = e(this, n).urlList[t];
-          if (e(this, d).innerHTML = "", o) {
-            (s = e(this, v)) == null || s.abort(), h(this, v, new AbortController()), e(this, d).innerHTML = W.EaElement.h(
-              "ea-image",
-              "ea-image-preview__img",
-              {
-                src: o,
-                fit: "contain"
-              },
-              `
-              <slot name="viewer-error" slot="error"></slot>
-            `
-            );
-            const r = e(this, d).querySelector(".ea-image-preview__img"), g = () => {
-              e(this, n).status = "error", this.classList.remove(
-                "ea-image-preview--success",
-                "ea-image-preview--loading"
-              ), e(this, m).classList.add("ea-image-preview--error"), this.emit("error"), e(this, v).abort();
-            }, u = () => {
-              e(this, n).status = "success", e(this, m).classList.remove(
-                "ea-image-preview--error",
-                "ea-image-preview--loading"
-              ), e(this, m).classList.add("ea-image-preview--success"), e(this, v).abort();
-            };
-            e(this, $).call(this, t + 1, e(this, n).urlList.length), r.addEventListener("error", g, {
-              once: !0,
-              signal: e(this, v).signal
-            }), r.addEventListener("load", u, {
-              once: !0,
-              signal: e(this, v).signal
-            }), this.visible && e(this, n).isUrlListInit && this.emit("switch", {
-              detail: {
-                index: t,
-                url: o,
-                imgTarget: r
-              }
-            });
-          }
+            const a = this.urlList.length - 1;
+            if (t > a) return this.index = 0;
+            if (t < 0) return this.index = a;
+          } else if (t < 0 || t > this.urlList.length - 1)
+            return e(this, c).dirtyUpdate = !0, this.index = s;
+          e(this, T).call(this, t);
         }
       },
       infinite: {
@@ -157,9 +138,9 @@ class ee extends Q {
       scale: {
         type: Number,
         default: 1,
-        observer: (t, a) => {
+        observer: (t, s) => {
           if (t < this["min-scale"] || t > this["max-scale"])
-            return this.scale = a;
+            return this.scale = s;
           e(this, d).style.setProperty("--ea-image-preview-scale", t);
         }
       },
@@ -192,12 +173,12 @@ class ee extends Q {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          var o;
-          const a = (s) => {
-            !e(this, d).querySelector(".ea-image-preview__img").contains(s.target) && !e(this, k).contains(s.target) && !e(this, S).contains(s.target) && !e(this, C).contains(s.target) && (this.hide(), this.visible = !1);
+          var a;
+          const s = (l) => {
+            !e(this, d).querySelector(".ea-image-preview__img").contains(l.target) && !e(this, k).contains(l.target) && !e(this, S).contains(l.target) && !e(this, q).contains(l.target) && (this.hide(), this.visible = !1);
           };
-          (o = e(this, b)) == null || o.abort(), t && (h(this, b, new AbortController()), e(this, m).addEventListener("click", a, {
-            signal: e(this, b).signal
+          (a = e(this, i).clickModal) == null || a.abort(), t && (e(this, i).clickModal = new AbortController(), e(this, v).addEventListener("click", s, {
+            signal: e(this, i).clickModal.signal
           }));
         }
       }
@@ -209,46 +190,46 @@ class ee extends Q {
         default: [],
         /** @param {String[]} newVal */
         observer: (t) => {
-          e(this, n).isUrlListInit = !1, e(this, n).urlList = t, this.index = this["initial-index"], e(this, n).isUrlListInit = !0;
+          e(this, c).isUrlListInit = !1, e(this, c).urlList = t, this.index = this["initial-index"], e(this, c).isUrlListInit = !0;
         }
       }
     }));
     /**
      * 处理挂载到目标
      */
-    i(this, X, () => {
+    o(this, O, () => {
       this["append-to-body"] && document.body.appendChild(this);
     });
     /**
      * 处理切换
      * @param {'prev' | 'next'} action
      */
-    i(this, x, (t) => {
+    o(this, E, (t) => {
       t === "prev" ? this.index-- : t === "next" && this.index++;
     });
     /**
      * 处理缩放
      * @param {'in' | 'out'} action
      */
-    i(this, _, (t) => {
+    o(this, _, (t) => {
       t === "in" ? this.scale = (this.scale * this["zoom-rate"]).toFixed(3) : t === "out" && (this.scale = (this.scale / this["zoom-rate"]).toFixed(3));
     });
     /**
      * 处理旋转
      * @param {'left' | 'right' | 'reset'} action
      */
-    i(this, E, (t) => {
-      const a = Number(
+    o(this, x, (t) => {
+      const s = Number(
         e(this, d).style.getPropertyValue("--ea-image-preview-rotate").split("deg")[0] || 0
       );
-      let o = 0;
-      t === "left" ? o = a - 90 : t === "right" && (o = a + 90), e(this, d).style.setProperty(
+      let a = 0;
+      t === "left" ? a = s - 90 : t === "right" && (a = s + 90), e(this, d).style.setProperty(
         "--ea-image-preview-rotate",
-        o + "deg"
+        a + "deg"
       ), this.emit("rotate", {
         detail: {
-          oldVal: a,
-          rotate: o
+          oldVal: s,
+          rotate: a
         }
       });
     });
@@ -258,118 +239,135 @@ class ee extends Q {
      * @param {Number} total
      * @returns
      */
-    i(this, $, (t, a) => {
-      const o = this.querySelector("[slot='progress']"), s = (r, g) => {
-        r.forEach((u) => u.textContent = t), g.forEach((u) => u.textContent = a);
+    o(this, X, (t, s) => {
+      const a = this.querySelector("[slot='progress']"), l = (h, p) => {
+        h.forEach((u) => u.textContent = t), p.forEach((u) => u.textContent = s);
       };
-      if (o)
+      if (a)
         try {
-          o.assignedNodes().forEach((g) => {
-            const u = g.querySelectorAll("[data-active]"), y = g.querySelectorAll("[data-total]");
-            s(u, y);
+          a.assignedNodes().forEach((p) => {
+            const u = p.querySelectorAll("[data-active]"), w = p.querySelectorAll("[data-total]");
+            l(u, w);
           });
         } catch {
-          const r = o.querySelectorAll("[data-active]"), g = o.querySelectorAll("[data-total]");
-          s(r, g);
+          const h = a.querySelectorAll("[data-active]"), p = a.querySelectorAll("[data-total]");
+          l(h, p);
         }
       else
-        e(this, A).textContent = `${t} / ${a}`;
+        e(this, R).textContent = `${t} / ${s}`;
     });
     /**
      * 处理图片移动事件
      * @param {MouseEvent} startE
      */
-    i(this, B, (t) => {
-      var y;
-      t.preventDefault(), (y = e(this, f)) == null || y.abort(), h(this, f, new AbortController());
-      const a = t.clientX, o = t.clientY, s = e(this, n).position.x, r = e(this, n).position.y, g = (w) => {
-        w.preventDefault();
-        const O = w.clientX - a, F = w.clientY - o, Y = s + O, G = r + F;
+    o(this, $, (t) => {
+      var w;
+      t.preventDefault(), (w = e(this, i).imgMove) == null || w.abort(), e(this, i).imgMove = new AbortController();
+      const s = t.clientX, a = t.clientY, l = e(this, c).position.x, h = e(this, c).position.y, p = (m) => {
+        m.preventDefault();
+        const f = m.clientX - s, y = m.clientY - a, b = l + f, F = h + y;
         e(this, d).style.setProperty(
           "--ea-image-preview-img-move-x",
-          `${Y}px`
+          `${b}px`
         ), e(this, d).style.setProperty(
           "--ea-image-preview-img-move-y",
-          `${G}px`
+          `${F}px`
         );
-      }, u = (w) => {
-        var Y;
-        w.preventDefault();
-        const O = w.clientX - a, F = w.clientY - o;
-        e(this, n).position.x = s + O, e(this, n).position.y = r + F, (Y = e(this, f)) == null || Y.abort();
+      }, u = (m) => {
+        var b;
+        m.preventDefault();
+        const f = m.clientX - s, y = m.clientY - a;
+        e(this, c).position.x = l + f, e(this, c).position.y = h + y, (b = e(this, i).imgMove) == null || b.abort();
       };
-      window.addEventListener("mousemove", g, {
-        signal: e(this, f).signal
+      window.addEventListener("mousemove", p, {
+        signal: e(this, i).imgMove.signal
       }), window.addEventListener("mouseup", u, {
-        signal: e(this, f).signal
+        signal: e(this, i).imgMove.signal
       });
     });
     /**
      * 初始化工具栏的事件。
      * 若用户传入了自定义工具，则优先使用用户元素，否则使用内置元素
      */
-    i(this, D, () => {
-      const t = this.querySelector("[slot='toolbar']"), a = {
+    o(this, B, () => {
+      var p;
+      let t = this.shadowRoot.querySelector("slot[name='toolbar']");
+      const s = this.closest(".ea-image-preview");
+      s && (t = s.querySelector("slot[name='toolbar']"));
+      for (const u in e(this, i))
+        (p = e(this, i)[u]) == null || p.abort(), e(this, i)[u] = new AbortController();
+      const a = {
+        "switch-prev": e(this, i).switchPrev,
+        "switch-next": e(this, i).switchNext,
+        "zoom-out": e(this, i).zoomOut,
+        "zoom-in": e(this, i).zoomIn,
+        "rotate-anticlockwise": e(this, i).rotateLeft,
+        "rotate-clockwise": e(this, i).rotateRight
+      }, l = {
         "switch-prev": {
           el: null,
           callback: () => {
-            e(this, x).call(this, "prev");
+            e(this, E).call(this, "prev");
           }
         },
         "switch-next": {
           el: null,
           callback: () => {
-            e(this, x).call(this, "next");
+            e(this, E).call(this, "next");
           }
         },
         "zoom-out": {
-          el: e(this, I),
+          el: e(this, M),
           callback: () => {
             e(this, _).call(this, "out");
           }
         },
         "zoom-in": {
-          el: e(this, N),
+          el: e(this, A),
           callback: () => {
             e(this, _).call(this, "in");
           }
         },
         "rotate-anticlockwise": {
-          el: e(this, P),
+          el: e(this, N),
           callback: () => {
-            e(this, E).call(this, "left");
+            e(this, x).call(this, "left");
           }
         },
         "rotate-clockwise": {
-          el: e(this, U),
+          el: e(this, P),
           callback: () => {
-            e(this, E).call(this, "right");
+            e(this, x).call(this, "right");
           }
         }
-      };
-      for (const [o, s] of Object.entries(a)) {
-        let r = !1;
-        try {
-          t.assignedNodes().forEach((u) => {
-            const y = u.querySelector(`[data-action="${o}"]`);
-            y && (r = !0, s.el.style.display = "none", y.addEventListener("click", s.callback, {
-              signal: e(this, p).signal
-            }));
+      }, h = () => {
+        Object.values(l).forEach((m) => {
+          m.el && (m.el.style.display = "");
+        });
+        const u = t.assignedElements(), w = /* @__PURE__ */ new Map();
+        u.forEach((m) => {
+          m.nodeType === Node.ELEMENT_NODE && m.querySelectorAll("[data-action]").forEach((y) => {
+            const b = y.getAttribute("data-action");
+            b && !w.has(b) && w.set(b, y);
           });
-        } catch {
-          s.el && (r = !0, s.el.addEventListener("click", s.callback, {
-            signal: e(this, p).signal
-          }));
-        }
-        !r && s.el && s.el.addEventListener("click", s.callback, {
-          signal: e(this, p).signal
         });
-      }
+        for (const [m, f] of Object.entries(l)) {
+          const y = w.get(m);
+          y ? (f.el && (f.el.style.display = "none"), y.addEventListener("click", f.callback, {
+            signal: a[m].signal
+          })) : f.el && f.el.addEventListener("click", f.callback, {
+            signal: a[m].signal
+          });
+        }
+      };
+      t.addEventListener("slotchange", h, {
+        signal: e(this, i).toolbar.signal
+      }), setTimeout(() => h(), 0);
     });
     /**
      * 关闭 Preview
      */
-    i(this, H, () => {
+    o(this, D, () => {
       this.hide(), this.visible = !1;
     });
     /**
@@ -379,38 +377,84 @@ class ee extends Q {
     L(this, "setActiveItem", (t) => {
       this.index = t;
     });
+    /**
+     * 渲染指定索引的图片
+     * @param {number} index - 图片索引
+     */
+    o(this, T, (t) => {
+      var a;
+      const s = this.urlList[t];
+      if (e(this, d).innerHTML = "", s) {
+        (a = e(this, i).img) == null || a.abort(), e(this, i).img = new AbortController(), e(this, d).innerHTML = K.EaElement.h(
+          "ea-image",
+          "ea-image-preview__img",
+          {
+            src: s,
+            fit: "contain"
+          },
+          `
+          <slot name="viewer-error" slot="error"></slot>
+        `
+        );
+        const l = e(this, d).querySelector(".ea-image-preview__img"), h = () => {
+          e(this, c).status = "error", this.classList.remove(
+            "ea-image-preview--success",
+            "ea-image-preview--loading"
+          ), e(this, v).classList.add("ea-image-preview--error"), this.emit("error"), e(this, i).img.abort();
+        }, p = () => {
+          e(this, c).status = "success", e(this, v).classList.remove(
+            "ea-image-preview--error",
+            "ea-image-preview--loading"
+          ), e(this, v).classList.add("ea-image-preview--success"), e(this, i).img.abort();
+        };
+        e(this, X).call(this, t + 1, this.urlList.length), l.addEventListener("error", h, {
+          once: !0,
+          signal: e(this, i).img.signal
+        }), l.addEventListener("load", p, {
+          once: !0,
+          signal: e(this, i).img.signal
+        }), this.visible && e(this, c).isUrlListInit && this.emit("switch", {
+          detail: {
+            index: t,
+            url: s,
+            imgTarget: l
+          }
+        });
+      }
+    });
     /**
      * 重置状态
      */
     L(this, "reset", () => {
-      this.index = this["initial-index"], this.scale = 1, e(this, E).call(this, "reset"), e(this, n).position = {
+      this.index = this["initial-index"], this.scale = 1, e(this, x).call(this, "reset"), e(this, c).position = {
         x: 0,
         y: 0
       }, e(this, d).style.setProperty("--ea-image-preview-img-move-x", "0"), e(this, d).style.setProperty("--ea-image-preview-img-move-y", "0");
     });
-    h(this, m, this.shadowRoot.querySelector(".ea-overlay")), e(this, m).innerHTML = e(this, m).innerHTML + `
+    g(this, v, this.shadowRoot.querySelector(".ea-overlay")), e(this, v).innerHTML = e(this, v).innerHTML + `
       <header class="ea-image-preview__header" part="header">
-        <ea-icon class="ea-image-preview__icon close-icon" icon="icon-cancel" part="icon close-icon"></ea-icon>
+        <ea-icon class="ea-image-preview__icon close-icon" name="xmark" part="icon close-icon"></ea-icon>
       </header>
       <main class="ea-image-preview__main" part="main">
-        <ea-icon class="ea-image-preview__icon prev-icon" icon="icon-angle-left" part="icon prev-icon"></ea-icon>
-        <ea-icon class="ea-image-preview__icon next-icon" icon="icon-angle-right" part="icon next-icon"></ea-icon>
+        <ea-icon class="ea-image-preview__icon prev-icon" name="angle-left" part="icon prev-icon"></ea-icon>
+        <ea-icon class="ea-image-preview__icon next-icon" name="angle-right" part="icon next-icon"></ea-icon>
       </main>
       <footer class="ea-image-preview__footer" part="footer">
         <section class="ea-image-preview__progress" part="progress">
           <slot name="progress"></slot>
         </section>
         <section class="ea-image-preview__toolbar" part="toolbar">
-          <ea-icon class="ea-image-preview__icon zoom-out-icon" icon="icon-zoom-out" part="icon zoom-out-icon"></ea-icon>
-          <ea-icon class="ea-image-preview__icon zoom-in-icon" icon="icon-zoom-in" part="icon zoom-in-icon"></ea-icon>
-          <ea-icon class="ea-image-preview__icon rotate-left-icon" icon="icon-ccw" part="icon rotate-left-icon"></ea-icon>
-          <ea-icon class="ea-image-preview__icon rotate-right-icon" icon="icon-cw" part="icon rotate-right-icon"></ea-icon>
-          <slot name="toolbar"></slot>
+          <slot name="toolbar">
+            <ea-icon class="ea-image-preview__icon zoom-out-icon" name="magnifying-glass-minus" part="icon zoom-out-icon"></ea-icon>
+            <ea-icon class="ea-image-preview__icon zoom-in-icon" name="magnifying-glass-plus" part="icon zoom-in-icon"></ea-icon>
+            <ea-icon class="ea-image-preview__icon rotate-left-icon" name="rotate-left" part="icon rotate-left-icon"></ea-icon>
+            <ea-icon class="ea-image-preview__icon rotate-right-icon" name="rotate-right" part="icon rotate-right-icon"></ea-icon>
+          </slot>
         </section>
       </footer>
-    `, h(this, M, this.shadowRoot.querySelector(".ea-overlay__content")), h(this, T, this.shadowRoot.querySelector(".ea-overlay__mask")), h(this, d, this.shadowRoot.querySelector(".ea-overlay__content")), h(this, q, this.shadowRoot.querySelector(".close-icon")), h(this, R, this.shadowRoot.querySelector(".prev-icon")), h(this, z, this.shadowRoot.querySelector(".next-icon")), h(this, I, this.shadowRoot.querySelector(".zoom-in-icon")), h(this, N, this.shadowRoot.querySelector(".zoom-out-icon")), h(this, P, this.shadowRoot.querySelector(".rotate-left-icon")), h(this, U, this.shadowRoot.querySelector(".rotate-right-icon")), h(this, A, this.shadowRoot.querySelector(
+    `, g(this, U, this.shadowRoot.querySelector(".ea-overlay__content")), g(this, Y, this.shadowRoot.querySelector(".ea-overlay__mask")), g(this, d, this.shadowRoot.querySelector(".ea-overlay__content")), g(this, C, this.shadowRoot.querySelector(".close-icon")), g(this, I, this.shadowRoot.querySelector(".prev-icon")), g(this, z, this.shadowRoot.querySelector(".next-icon")), g(this, A, this.shadowRoot.querySelector(".zoom-in-icon")), g(this, M, this.shadowRoot.querySelector(".zoom-out-icon")), g(this, N, this.shadowRoot.querySelector(".rotate-left-icon")), g(this, P, this.shadowRoot.querySelector(".rotate-right-icon")), g(this, R, this.shadowRoot.querySelector(
       ".ea-image-preview__progress slot[name='progress']"
-    )), h(this, k, this.shadowRoot.querySelector(".ea-image-preview__header")), h(this, S, this.shadowRoot.querySelector(".ea-image-preview__main")), h(this, C, this.shadowRoot.querySelector(".ea-image-preview__footer")), e(this, X).call(this);
+    )), g(this, k, this.shadowRoot.querySelector(".ea-image-preview__header")), g(this, S, this.shadowRoot.querySelector(".ea-image-preview__main")), g(this, q, this.shadowRoot.querySelector(".ea-image-preview__footer")), e(this, O).call(this);
   }
   static get observedAttributes() {
     return [
@@ -437,52 +481,52 @@ class ee extends Q {
     const t = `${super.updateContainerClasslist()} ${this.computedClasslist(
       "ea-image-preview",
       {
-        ["--" + e(this, n).status]: e(this, n).status
+        ["--" + e(this, c).status]: e(this, c).status
       },
       {
         "show-progress": this["show-progress"]
       }
     )}`;
-    return e(this, m).className = t, t;
+    return e(this, v).className = t, t;
   }
   connectedCallback() {
-    var s;
-    super.connectedCallback(), this.assignedStyle(V), (s = e(this, p)) == null || s.abort(), h(this, p, new AbortController());
+    var l;
+    super.connectedCallback(), this.assignedStyle(Q), (l = e(this, i).main) == null || l.abort(), e(this, i).main = new AbortController();
     const t = () => {
-      e(this, x).call(this, "prev");
-    }, a = () => {
-      e(this, x).call(this, "next");
-    }, o = (r) => {
-      r.preventDefault(), r.deltaY > 0 ? e(this, _).call(this, "out") : e(this, _).call(this, "in");
+      e(this, E).call(this, "prev");
+    }, s = () => {
+      e(this, E).call(this, "next");
+    }, a = (h) => {
+      h.preventDefault(), h.deltaY > 0 ? e(this, _).call(this, "out") : e(this, _).call(this, "in");
     };
-    e(this, D).call(this), e(this, q).addEventListener("click", e(this, H), {
-      signal: e(this, p).signal
-    }), e(this, R).addEventListener("click", t, {
-      signal: e(this, p).signal
-    }), e(this, z).addEventListener("click", a, {
-      signal: e(this, p).signal
-    }), e(this, m).addEventListener("wheel", o, {
-      signal: e(this, p).signal,
+    e(this, B).call(this), e(this, C).addEventListener("click", e(this, D), {
+      signal: e(this, i).main.signal
+    }), e(this, I).addEventListener("click", t, {
+      signal: e(this, i).main.signal
+    }), e(this, z).addEventListener("click", s, {
+      signal: e(this, i).main.signal
+    }), e(this, v).addEventListener("wheel", a, {
+      signal: e(this, i).main.signal,
       passive: !1
     }), this.addEventListener("closed", this.reset, {
-      signal: e(this, p).signal
-    }), e(this, d).addEventListener("mousedown", e(this, B), {
-      signal: e(this, p).signal
+      signal: e(this, i).main.signal
+    }), e(this, d).addEventListener("mousedown", e(this, $), {
+      signal: e(this, i).main.signal
     }), this["close-on-press-escape"] && window.addEventListener(
       "keydown",
-      (r) => {
-        r.key === "Escape" && this.hide();
+      (h) => {
+        h.key === "Escape" && this.hide();
       },
-      { signal: e(this, p).signal }
+      { signal: e(this, i).main.signal }
     );
   }
   $beforeUnmounted() {
-    var t, a, o, s;
-    (t = e(this, p)) == null || t.abort(), (a = e(this, v)) == null || a.abort(), (o = e(this, f)) == null || o.abort(), (s = e(this, b)) == null || s.abort();
+    for (const t of Object.values(e(this, i)))
+      t == null || t.abort();
   }
 }
-m = new WeakMap(), M = new WeakMap(), k = new WeakMap(), S = new WeakMap(), C = new WeakMap(), d = new WeakMap(), T = new WeakMap(), q = new WeakMap(), R = new WeakMap(), z = new WeakMap(), A = new WeakMap(), I = new WeakMap(), N = new WeakMap(), P = new WeakMap(), U = new WeakMap(), v = new WeakMap(), p = new WeakMap(), b = new WeakMap(), f = new WeakMap(), n = new WeakMap(), X = new WeakMap(), x = new WeakMap(), _ = new WeakMap(), E = new WeakMap(), $ = new WeakMap(), B = new WeakMap(), D = new WeakMap(), H = new WeakMap();
-window.customElements.get("ea-image-preview") || window.customElements.define("ea-image-preview", ee);
+v = new WeakMap(), U = new WeakMap(), k = new WeakMap(), S = new WeakMap(), q = new WeakMap(), d = new WeakMap(), Y = new WeakMap(), C = new WeakMap(), I = new WeakMap(), z = new WeakMap(), R = new WeakMap(), A = new WeakMap(), M = new WeakMap(), N = new WeakMap(), P = new WeakMap(), i = new WeakMap(), c = new WeakMap(), O = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), x = new WeakMap(), X = new WeakMap(), $ = new WeakMap(), B = new WeakMap(), D = new WeakMap(), T = new WeakMap();
+window.customElements.get("ea-image-preview") || window.customElements.define("ea-image-preview", W);
 export {
-  ee as EaImagePreview
+  W as EaImagePreview
 };