@xwadex/fesd 0.0.22 → 0.0.24

package/dist/image-preview-bundle.js

@@ -20,6 +20,7 @@ const Y = {
     videoId: null,
     videoType: null,
     videoAutoplay: "off",
+    videoKeep: "off",
     videoMode: "onBox",
     videoButton: ".playButton",
     videoCover: "on",
@@ -88,7 +89,7 @@ const Y = {
         </div>
         `;
   }
-}, $ = {
+}, x = {
   SETTINGS: {
     direction: "left",
     // 方向 - top || right || bottom || left
@@ -162,7 +163,7 @@ const Y = {
     enter: null,
     leave: null
   }
-}, lt = {
+}, ct = {
   SETTINGS: {
     target: null,
     container: null,
@@ -180,7 +181,7 @@ const Y = {
     beforeScroll: null,
     afterScroll: null
   }
-}, C = {
+}, H = {
   SETTINGS: {
     type: "drag",
     drag: {
@@ -292,14 +293,14 @@ const Y = {
   }
 }, mn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  anchor4: lt,
+  anchor4: ct,
   aost4: Ye,
   article4: ws,
   collapse4: Je,
   dropdown4: qe,
-  marquee4: $,
+  marquee4: x,
   modal4: I,
-  multipurpose4: C,
+  multipurpose4: H,
   ripple4: Ze,
   share4: ys,
   tab4: Ue,
@@ -309,7 +310,7 @@ const Y = {
   after: "afterend",
   append: "beforeend",
   prepend: "afterbegin"
-}, at = (n) => typeof n == "string" && n !== "", ye = (n) => n instanceof HTMLElement, rt = (n) => n instanceof NodeList, w = (n) => A(n) !== null, j = (n) => typeof n == "function", A = (n) => ye(n) ? n : document.querySelector(n), L = (n) => rt(n) ? n : document.querySelectorAll(n), Ts = () => Math.random().toString(36).substr(2, 9), Es = (n) => {
+}, at = (n) => typeof n == "string" && n !== "", we = (n) => n instanceof HTMLElement, rt = (n) => n instanceof NodeList, w = (n) => A(n) !== null, j = (n) => typeof n == "function", A = (n) => we(n) ? n : document.querySelector(n), L = (n) => rt(n) ? n : document.querySelectorAll(n), Ts = () => Math.random().toString(36).substr(2, 9), Es = (n) => {
   const i = document.createElement("div");
   return i.innerHTML = n, i.childNodes;
 }, As = (n) => {
@@ -364,10 +365,10 @@ const Y = {
   easeOutQuart(n, i, t, e) {
     return -t * ((n = n / e - 1) * n * n * n - 1) + i;
   }
-}, we = (n, i) => {
-  const { target: t, container: e, spacer: s, speed: o, gap: a, easing: r, direction: l } = n, c = l === "horizontal", u = c ? "scrollLeft" : "scrollTop", p = c ? "left" : "top", g = c ? "width" : "height", m = w(e) ? A(e) : document.scrollingElement, f = m[u], b = w(t) ? A(t).getBoundingClientRect()[p] : 0 - f, y = w(s) ? A(s).getBoundingClientRect()[g] : 0, H = b - a - y, G = 15;
+}, Te = (n, i) => {
+  const { target: t, container: e, spacer: s, speed: o, gap: a, easing: r, direction: l } = n, c = l === "horizontal", u = c ? "scrollLeft" : "scrollTop", p = c ? "left" : "top", g = c ? "width" : "height", m = w(e) ? A(e) : document.scrollingElement, f = m[u], b = w(t) ? A(t).getBoundingClientRect()[p] : 0 - f, y = w(s) ? A(s).getBoundingClientRect()[g] : 0, _ = b - a - y, G = 15;
   let S = 0;
-  if (H === 0)
+  if (_ === 0)
     return;
   const R = (X) => {
     const Pe = A(t);
@@ -376,17 +377,17 @@ const Y = {
   R("beforeScroll");
   const Ne = () => {
     S += G;
-    const X = Ls[r](S, f, H, o);
+    const X = Ls[r](S, f, _, o);
     m[u] = X, S < o && requestAnimationFrame(Ne), S >= o && R("afterScroll");
   };
   requestAnimationFrame(Ne);
 };
-var J, Ee, pt, Ve, mt, Ke;
+var J, Ee, mt, Ve, gt, Ke;
 class Qe {
   constructor(i, t = {}) {
     h(this, J);
-    h(this, pt);
     h(this, mt);
+    h(this, gt);
     this.__storage__ = {
       el: i,
       options: t
@@ -403,18 +404,18 @@ class Qe {
     return d(i = this.destroy(), J, Ee).call(i), this.emit("afterUpdate"), this;
   }
   static run(i) {
-    const { SETTINGS: t } = lt, e = Object.assign({}, t, i);
+    const { SETTINGS: t } = ct, e = Object.assign({}, t, i);
     setTimeout(() => {
-      we(e);
+      Te(e);
     }, e.delay);
   }
   static url(i) {
-    const { SETTINGS: t } = lt, { hashName: e } = i, s = window.location.search || window.location.hash, { searchParams: o } = new URL(window.location), a = document.querySelector(`[data-anchor-id="${e ? o.get(e) : s.split("?").pop()}"]`);
+    const { SETTINGS: t } = ct, { hashName: e } = i, s = window.location.search || window.location.hash, { searchParams: o } = new URL(window.location), a = document.querySelector(`[data-anchor-id="${e ? o.get(e) : s.split("?").pop()}"]`);
     if (!a)
       return;
     const r = Object.assign({}, t, i, { target: a });
     setTimeout(() => {
-      we(r);
+      Te(r);
     }, r.delay);
   }
 }
@@ -422,17 +423,17 @@ J = new WeakSet(), Ee = function() {
   const { el: i, options: t } = this.__storage__;
   if (!at(i) || !w(i))
     return;
-  const { SETTINGS: e, EVENTS: s } = lt;
+  const { SETTINGS: e, EVENTS: s } = ct;
   if (this.elements = t.state == "not active" ? L(i + `:not([${this.active}])`) : L(i), this.elements = L(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
     for (const [o, a] of Object.entries(this.options.on))
       this.__events__[o] = [a];
-  d(this, pt, Ve).call(this);
-}, pt = new WeakSet(), Ve = function() {
+  d(this, mt, Ve).call(this);
+}, mt = new WeakSet(), Ve = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.anchor = {}, e.anchor.instance = this, e.anchor.eventHandler = d(this, mt, Ke), e.anchor.defaultOptions = t, e.anchor.methods = {}, e.anchor.methods.destroy = this.destroy, e.anchor.methods.update = this.update, e.addEventListener("click", e.anchor.eventHandler), e.setAttribute(this.active, "");
+    e.anchor = {}, e.anchor.instance = this, e.anchor.eventHandler = d(this, gt, Ke), e.anchor.defaultOptions = t, e.anchor.methods = {}, e.anchor.methods.destroy = this.destroy, e.anchor.methods.update = this.update, e.addEventListener("click", e.anchor.eventHandler), e.setAttribute(this.active, "");
   }), this.emit("afterInit");
-}, mt = new WeakSet(), Ke = function() {
+}, gt = new WeakSet(), Ke = function() {
   const { defaultOptions: i, eventHandler: t, instance: e } = this.anchor, s = {
     target: this.getAttribute("data-anchor-target") || i.target,
     container: this.getAttribute("data-anchor-container") || i.container,
@@ -446,7 +447,7 @@ J = new WeakSet(), Ee = function() {
   this.removeEventListener("click", t), setTimeout(() => {
     this.addEventListener("click", t);
   }, s.speed), setTimeout(() => {
-    we(s, e);
+    Te(s, e);
   }, s.delay);
 };
 Object.assign(Qe.prototype, O);
@@ -459,15 +460,15 @@ const { MODALS: M } = window, Ss = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var gt, ei, ft, ii, vt, si, bt, ni, yt, oi;
+var ft, ei, vt, ii, bt, si, yt, ni, wt, oi;
 class ti extends HTMLElement {
   constructor() {
     super();
-    h(this, gt);
     h(this, ft);
     h(this, vt);
     h(this, bt);
     h(this, yt);
+    h(this, wt);
     this.initialize = !1;
   }
   static get observedAttributes() {
@@ -476,12 +477,12 @@ class ti extends HTMLElement {
   attributeChangedCallback(t, e, s) {
     switch (t) {
       case ":state":
-        d(this, yt, oi).call(this, s);
+        d(this, wt, oi).call(this, s);
         break;
     }
   }
   connectedCallback() {
-    this.initialize || (this.initialize = !0, d(this, gt, ei).call(this));
+    this.initialize || (this.initialize = !0, d(this, ft, ei).call(this));
   }
   open() {
     return this.setAttribute(":state", "open"), this;
@@ -493,22 +494,22 @@ class ti extends HTMLElement {
     return this.setAttribute(":state", "destroy"), this;
   }
 }
-gt = new WeakSet(), ei = function() {
+ft = new WeakSet(), ei = function() {
   const { ATTRS: t } = I;
   this.__events__ = {}, this.getAttribute(":state") || this.setAttribute(":state", "close");
   const e = this.getAttribute(t.id) || Ts();
-  this.getAttribute(t.id) || (T(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), M[e] && T(`the ${t.id} "${e}" is already be used.`), M[e] = this, d(this, ft, ii).call(this);
-}, ft = new WeakSet(), ii = function() {
-  this.childDom = this.childNodes, this.template = Ss(this), this.innerHTML = "", this.append(this.template), d(this, vt, si).call(this);
-}, vt = new WeakSet(), si = function() {
+  this.getAttribute(t.id) || (T(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), M[e] && T(`the ${t.id} "${e}" is already be used.`), M[e] = this, d(this, vt, ii).call(this);
+}, vt = new WeakSet(), ii = function() {
+  this.childDom = this.childNodes, this.template = Ss(this), this.innerHTML = "", this.append(this.template), d(this, bt, si).call(this);
+}, bt = new WeakSet(), si = function() {
   const t = this.querySelector(".modal-scroller");
   this.__scroller__ = Me(t, {
     overflowBehavior: {
       x: "hidden"
     },
     autoUpdate: !0
-  }), window.modalScroll = this.__scroller__, d(this, bt, ni).call(this);
-}, bt = new WeakSet(), ni = function() {
+  }), window.modalScroll = this.__scroller__, d(this, yt, ni).call(this);
+}, yt = new WeakSet(), ni = function() {
   var a, r, l;
   const t = this, { ATTRS: e } = I, { close: s, destroy: o } = e;
   (a = t.querySelectorAll(`[${s}]`)) == null || a.forEach((c) => {
@@ -524,7 +525,7 @@ gt = new WeakSet(), ei = function() {
   }), (l = t.querySelector("[stop-propagation]")) == null || l.addEventListener("click", function(c) {
     c.stopPropagation();
   });
-}, yt = new WeakSet(), oi = function(t) {
+}, wt = new WeakSet(), oi = function(t) {
   const { __scroller__: e } = this;
   if (t === "open") {
     if (this.style.display = "block", e) {
@@ -605,12 +606,12 @@ const { MODALS: Ie } = window, ai = (n, i, ...t) => {
     r("error", l);
   });
 };
-var Z, Ae, wt, ci, Tt, di;
+var Z, Ae, Tt, ci, Et, di;
 const N = class N {
   constructor(i, t = {}) {
     h(this, Z);
-    h(this, wt);
     h(this, Tt);
+    h(this, Et);
     this.__storage__ = {
       el: i,
       options: t
@@ -648,13 +649,13 @@ Z = new WeakSet(), Ae = function() {
   if (this.elements = t.state == "not active" ? L(i + `:not([${this.active}])`) : L(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
     for (const [o, a] of Object.entries(this.options.on))
       this.__events__[o] = [a];
-  d(this, wt, ci).call(this);
-}, wt = new WeakSet(), ci = function() {
+  d(this, Tt, ci).call(this);
+}, Tt = new WeakSet(), ci = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.modal = {}, e.modal.instance = this, e.modal.eventHandler = d(this, Tt, di), e.modal.defaultOptions = t, e.modal.methods = {}, e.modal.methods.destroy = this.destroy, e.modal.methods.update = this.update, e.addEventListener("click", e.modal.eventHandler), e.setAttribute(this.active, "");
+    e.modal = {}, e.modal.instance = this, e.modal.eventHandler = d(this, Et, di), e.modal.defaultOptions = t, e.modal.methods = {}, e.modal.methods.destroy = this.destroy, e.modal.methods.update = this.update, e.addEventListener("click", e.modal.eventHandler), e.setAttribute(this.active, "");
   }), this.emit("init");
-}, Tt = new WeakSet(), di = function(i) {
+}, Et = new WeakSet(), di = function(i) {
   const { defaultOptions: t, eventHandler: e, instance: s } = this.modal, o = As(this.getAttribute("data-modal-on"));
   o && typeof o != "object" && T("modal4", "data-modal-on must be a json string.");
   const a = {
@@ -688,11 +689,11 @@ const _s = (n, i) => {
     }
   });
 }, ks = (n, i) => n === "up" || n === "down" ? n : n !== null ? n === "true" ? !0 : n === "false" ? !1 : i.repeat : i.repeat;
-var Q, Le, Et, hi;
+var Q, Le, At, hi;
 class ui {
   constructor(i, t = {}) {
     h(this, Q);
-    h(this, Et);
+    h(this, At);
     this.__storage__ = {
       el: i,
       options: t
@@ -723,8 +724,8 @@ Q = new WeakSet(), Le = function() {
   if (this.elements = t.state == "not active" ? L(i + `:not([${this.active}])`) : L(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
     for (const [o, a] of Object.entries(this.options.on))
       this.__events__[o] = [a];
-  d(this, Et, hi).call(this);
-}, Et = new WeakSet(), hi = function() {
+  d(this, At, hi).call(this);
+}, At = new WeakSet(), hi = function() {
   const { elements: i, options: t } = this, { scroller: e } = t, s = e === window || !w(e) ? window : A(e);
   this.eventHandler = () => {
     _s(s, i);
@@ -743,25 +744,25 @@ const $s = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var At, pi, Lt, mi, St, gi, Dt, fi, _t, vi, kt, bi, $t, yi, xt, wi, Ct, Ti;
+var Lt, pi, St, mi, Dt, gi, _t, fi, kt, vi, $t, bi, xt, yi, Ct, wi, Ht, Ti;
 class xs extends HTMLElement {
   constructor() {
     super();
-    h(this, At);
     h(this, Lt);
     h(this, St);
-    // youtube iframe
     h(this, Dt);
-    // vimeo iframe
+    // youtube iframe
     h(this, _t);
-    // youku iframe
+    // vimeo iframe
     h(this, kt);
+    // youku iframe
     h(this, $t);
-    // 2025.02.11 新增 ig 
     h(this, xt);
-    // 2025.02.11 新增 tiktok 
+    // 2025.02.11 新增 ig 
     h(this, Ct);
-    d(this, At, pi).call(this);
+    // 2025.02.11 新增 tiktok 
+    h(this, Ht);
+    d(this, Lt, pi).call(this);
   }
   play() {
     const { videoType: t } = this;
@@ -798,58 +799,58 @@ class xs extends HTMLElement {
     }
   }
 }
-At = new WeakSet(), pi = function() {
+Lt = new WeakSet(), pi = function() {
   if (!this.getAttribute("video-id")) {
     T("videoPlayer", "video-render needs a ['video-id'] attribute to creat player.");
     return;
   }
-  this.videoId = this.getAttribute("video-id"), this.videoType = this.getAttribute("video-type"), this.autoplay = this.getAttribute("video-autoplay"), this.startTime = this.getAttribute("video-starttime"), d(this, Lt, mi).call(this);
-}, Lt = new WeakSet(), mi = function() {
-  this.childDom = this.childNodes, this.template = $s(this), this.innerHTML = "", this.append(this.template), d(this, St, gi).call(this);
-}, St = new WeakSet(), gi = function() {
+  this.videoId = this.getAttribute("video-id"), this.videoType = this.getAttribute("video-type"), this.autoplay = this.getAttribute("video-autoplay"), this.startTime = this.getAttribute("video-starttime"), d(this, St, mi).call(this);
+}, St = new WeakSet(), mi = function() {
+  this.childDom = this.childNodes, this.template = $s(this), this.innerHTML = "", this.append(this.template), d(this, Dt, gi).call(this);
+}, Dt = new WeakSet(), gi = function() {
   const { videoType: t } = this;
   let e = "";
   switch (t) {
     case "youtubeAPI":
       break;
     case "youtube":
-      e = d(this, Dt, fi).call(this);
+      e = d(this, _t, fi).call(this);
       break;
     case "youkuAPI":
       break;
     case "youku":
-      e = d(this, kt, bi).call(this);
+      e = d(this, $t, bi).call(this);
       break;
     case "vimeo":
-      e = d(this, _t, vi).call(this);
+      e = d(this, kt, vi).call(this);
       break;
     case "bilibili":
-      e = d(this, $t, yi).call(this);
+      e = d(this, xt, yi).call(this);
       break;
     case "instagram":
-      e = d(this, xt, wi).call(this);
+      e = d(this, Ct, wi).call(this);
       break;
     case "tiktok":
-      e = d(this, Ct, Ti).call(this);
+      e = d(this, Ht, Ti).call(this);
       break;
   }
   this.querySelector(".player-wrapper").insertAdjacentHTML(E.prepend, e);
-}, Dt = new WeakSet(), fi = function() {
+}, _t = new WeakSet(), fi = function() {
   const { videoId: t, autoplay: e, startTime: s } = this;
   return `<iframe src="https://www.youtube.com/embed/${t}?rel=0&${e === "on" ? "autoplay=1" : ""}&start=${s}&mute=1&loop=1&enablejsapi=1" frameborder="0" allowfullscreen="0" volumn="0" allow="${e === "on" ? "autoplay;" : ""} encrypted-media; gyroscope; picture-in-picture;"></iframe>`;
-}, _t = new WeakSet(), vi = function() {
+}, kt = new WeakSet(), vi = function() {
   const { videoId: t, autoplay: e, hash: s } = this;
   return `<iframe src="https://player.vimeo.com/video/${t}?h=${s}&${e === "on" ? "autoplay=1" : ""}&loop=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="${e === "on" ? "autoplay;" : ""} fullscreen; picture-in-picture" allowfullscreen></iframe><script src="https://player.vimeo.com/api/player.js"><\/script>`;
-}, kt = new WeakSet(), bi = function() {
+}, $t = new WeakSet(), bi = function() {
   const { videoId: t, autoplay: e } = this;
   return `<iframe src="https://player.youku.com/embed/${t}?rel=0&${e === "on" ? "autoplay=1" : ""}" frameborder=0 "allowfullscreen"></iframe>`;
-}, $t = new WeakSet(), yi = function() {
+}, xt = new WeakSet(), yi = function() {
   const { videoId: t, autoplay: e } = this;
   return `<iframe src="//player.bilibili.com/player.html?bvid=${t}&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>`;
-}, xt = new WeakSet(), wi = function() {
+}, Ct = new WeakSet(), wi = function() {
   const { videoId: t, autoplay: e } = this;
   return `<iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="https://www.instagram.com/p/${t}/embed/"  width="num-w" height=" num-h" scrolling="auto" frameborder="0" data-instgrm-payload-id="instagram-media-payload-0"></iframe>`;
-}, Ct = new WeakSet(), Ti = function() {
+}, Ht = new WeakSet(), Ti = function() {
   const { videoId: t, autoplay: e } = this;
   return `<iframe name="__tt_embed__v79271677875424740" sandbox="allow-popups allow-popups-to-escape-sandbox allow-scripts allow-top-navigation allow-same-origin" src="https://www.tiktok.com/player/v1/${t}?&${e === "on" ? "autoplay=1" : ""}"></iframe>`;
 };
@@ -1081,16 +1082,16 @@ function jn(n) {
   const i = document.createElement("div");
   return i.innerHTML = n, i.childNodes[0];
 }
-const We = (n) => n.videoId !== "" || typeof n.videoId < "u", Ms = (n) => n.$selector.getAttribute("video4-active") === "on", Te = (n) => `<video-player video-id="${n.videoId}" video-type="${n.videoType}" video-startTime="${n.videoStartTime}" video-autoplay="${n.videoAutoplay}"></video-player>`;
-var V, Se, Ht, Li, Mt, Si, K, De, qt, Di;
+const We = (n) => n.videoId !== "" || typeof n.videoId < "u", Ms = (n) => n.$selector.getAttribute("video4-active") === "on", lt = (n) => `<video-player video-id="${n.videoId}" video-type="${n.videoType}" video-startTime="${n.videoStartTime}" video-autoplay="${n.videoAutoplay}"></video-player>`;
+var V, Se, Mt, Li, qt, Si, K, De, It, Di;
 class qs {
   constructor(i, t = {}) {
     h(this, V);
-    h(this, Ht);
     h(this, Mt);
-    h(this, K);
     h(this, qt);
-    if (!at(i) && !ye(i) && !rt(i)) {
+    h(this, K);
+    h(this, It);
+    if (!at(i) && !we(i) && !rt(i)) {
       je("video4", `找不到該物件 -> ${i}`);
       return;
     }
@@ -1108,13 +1109,13 @@ V = new WeakSet(), Se = function() {
   if (this.elements = t.state == "not active" ? L(i + `:not([${this.active}])`) : L(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
     for (const [o, a] of Object.entries(this.options.on))
       this.__events__[o] = [a];
-  d(this, Ht, Li).call(this);
-}, Ht = new WeakSet(), Li = function() {
+  d(this, Mt, Li).call(this);
+}, Mt = new WeakSet(), Li = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, qt, Di).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), We(e.video.params) && !Ms(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, Mt, Si).call(this, e)), We(e.video.params) || je("video4", "無法取得影片 ID");
+    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, It, Di).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), We(e.video.params) && !Ms(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, qt, Si).call(this, e)), We(e.video.params) || je("video4", "無法取得影片 ID");
   }), this.emit("init");
-}, Mt = new WeakSet(), Si = function(i) {
+}, qt = new WeakSet(), Si = function(i) {
   const { LAYOUT: t } = Y, e = i.video.params, { $selector: s, videoLayoutNo: o, videoId: a, videoType: r, videoMode: l, videoButton: c, videoCover: u, videoHighQualityPic: p } = e;
   if (l === "onBox") {
     let g = null;
@@ -1145,51 +1146,57 @@ V = new WeakSet(), Se = function() {
         console.log("error");
       }) : f || T("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片"), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || T("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
     } else {
-      s.innerHTML = Te(e);
+      s.innerHTML = lt(e);
       return;
     }
     g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, K, De), g.addEventListener("click", g.video.eventHandler);
   }
 }, K = new WeakSet(), De = function(i) {
-  const { video: t, emit: e } = this, { $selector: s, videoMode: o, videoTarget: a, videoTargetRoute: r, videoType: l, videoIgHtml: c } = t.params, u = new Fe({ callback_loaded: (p) => {
+  const { video: t, emit: e } = this, { $selector: s, videoMode: o, videoTarget: a, videoKeep: r, videoTargetRoute: l, videoType: c, videoIgHtml: u } = t.params, p = new Fe({ callback_loaded: (g) => {
   } });
   if (o == "onBox") {
-    const p = {
+    const g = {
       target: a,
-      route: r,
+      route: l,
       on: {
-        complete(g) {
-          if (l == "instagram")
-            if (g.setAttribute("video-typeStyle", `${l}`), window.instgrm)
+        complete(m) {
+          if (c == "instagram")
+            if (m.setAttribute("video-typeStyle", `${c}`), window.instgrm)
               window.instgrm.Embeds.process();
             else {
-              const m = document.createElement("script");
-              m.src = "https://www.instagram.com/embed.js", m.async = !0, document.body.appendChild(m);
+              const f = document.createElement("script");
+              f.src = "https://www.instagram.com/embed.js", f.async = !0, document.body.appendChild(f);
             }
           else
-            g.querySelector(".modal-content").insertAdjacentHTML("beforeend", Te(t.params)), g.setAttribute("video-typeStyle", `${l}`);
+            m.querySelector(".modal-content").insertAdjacentHTML("beforeend", lt(t.params)), m.setAttribute("video-typeStyle", `${c}`);
         },
-        open(g) {
-          const m = g.querySelectorAll("[data-overlayscrollbars-viewport]");
-          if (u.update(), Ei([...m]), l == "instagram") {
-            const f = document.querySelector("[video-template] .modal-content");
-            new ResizeObserver((y) => {
-              y[0].contentRect.height > 50 && f.classList.add("active");
-            }).observe(f);
+        open(m) {
+          const f = m.querySelectorAll("[data-overlayscrollbars-viewport]");
+          if (p.update(), Ei([...f]), c == "instagram") {
+            const b = document.querySelector("[video-template] .modal-content");
+            new ResizeObserver((_) => {
+              _[0].contentRect.height > 50 && b.classList.add("active");
+            }).observe(b);
           }
         },
-        close(g) {
-          const m = g.querySelectorAll("[data-overlayscrollbars-viewport]");
-          Ai([...m]);
+        close(m) {
+          const f = m.querySelectorAll("[data-overlayscrollbars-viewport]");
+          Ai([...f]);
         },
-        destroy(g) {
+        destroy(m) {
         }
       }
     };
-    U.open(p);
-  } else
-    o == "onPage" && (t.params.videoAutoplay = "on", s.innerHTML = Te(t.params));
-}, qt = new WeakSet(), Di = function(i) {
+    U.open(g);
+  } else if (o == "onPage")
+    if (t.params.videoAutoplay = "on", r == "off") {
+      s.innerHTML = lt(t.params);
+      return;
+    } else {
+      (s.querySelector(r) ?? s).insertAdjacentHTML("beforeend", lt(t.params));
+      return;
+    }
+}, It = new WeakSet(), Di = function(i) {
   const { SETTINGS: t } = Y;
   return {
     $selector: i,
@@ -1198,6 +1205,7 @@ V = new WeakSet(), Se = function() {
     videoAutoplay: i.getAttribute("video-autoplay") || t.videoAutoplay,
     videoMode: i.getAttribute("video-mode") || t.videoMode,
     videoButton: i.getAttribute("video-button") || t.videoButton,
+    videoKeep: i.getAttribute("video-keep") || t.videoKeep,
     videoCover: i.getAttribute("video-cover") || t.videoCover,
     videoLayoutNo: i.getAttribute("video-layout-no") || t.videoLayoutNo,
     videoTarget: i.getAttribute("video-target") || t.videoTarget,
@@ -2057,9 +2065,9 @@ const Oe = {
   const i = (t = n.getAttribute("control-elements")) == null ? void 0 : t.split(",");
   i && i.forEach((e) => {
     const s = document.querySelector(e);
-    s || T("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && x(s, [...s.s.allLi].indexOf(s.s.activeLi)));
+    s || T("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && C(s, [...s.s.allLi].indexOf(s.s.activeLi)));
   });
-}, x = (n, i) => {
+}, C = (n, i) => {
   const t = n.getAttribute("d4-placeholder"), e = n.querySelectorAll(".dropdown-list li");
   if (i < 0 || i.length === 0) {
     switch (e.forEach((s) => {
@@ -2139,14 +2147,14 @@ js();
 document.addEventListener("click", function() {
   _i();
 });
-var It, $i, Ot, xi, Nt, Ci, Pt, Hi;
+var Ot, $i, Nt, xi, Pt, Ci, jt, Hi;
 class ki extends HTMLElement {
   constructor() {
     super();
-    h(this, It);
     h(this, Ot);
     h(this, Nt);
     h(this, Pt);
+    h(this, jt);
     this.initialize = !1;
   }
   static get observedAttributes() {
@@ -2167,7 +2175,7 @@ class ki extends HTMLElement {
           switch (o.hasAttribute("multiple") ? "multiple" : "single") {
             case "single":
               const r = o.querySelector(`.dropdown-list li[data-option="${s}"]`);
-              w(r) ? x(o, [...o.s.allLi].indexOf(r)) : x(o, -1);
+              w(r) ? C(o, [...o.s.allLi].indexOf(r)) : C(o, -1);
               break;
             case "multiple":
               const l = [];
@@ -2176,23 +2184,23 @@ class ki extends HTMLElement {
                 w(p) && (p.classList.add("active"), l.push(p));
               });
               const c = l.map((u) => [...o.s.allLi].indexOf(u));
-              x(o, c);
+              C(o, c);
               break;
           }
         else
-          x(o, -1);
+          C(o, -1);
         o.emit("change");
         break;
       case "d4-placeholder":
         if (e === null)
           return;
-        e !== s && o.s.value.index < 0 && x(o, o.s.value.index);
+        e !== s && o.s.value.index < 0 && C(o, o.s.value.index);
         break;
     }
   }
   connectedCallback() {
     const t = this;
-    t.initialize || t.classList.contains("d4-initialize") || (t.initialize = !0, d(this, It, $i).call(this));
+    t.initialize || t.classList.contains("d4-initialize") || (t.initialize = !0, d(this, Ot, $i).call(this));
   }
   open() {
     const t = this, e = t.querySelector(".dropdown-scroller").clientHeight, s = t.classList.contains("filter"), o = () => s ? t.querySelector(".dropdown-scroller .filter-bar") ? e : t.querySelector(".filter-bar").clientHeight + e : e;
@@ -2218,11 +2226,11 @@ class ki extends HTMLElement {
     this.__events__.selectOption();
   }
 }
-It = new WeakSet(), $i = function() {
-  this.s = {}, this.__events__ = {}, this.hasAttribute("d4-status") || this.setAttribute("d4-status", "close"), this.hasAttribute("d4-value") || this.setAttribute("d4-value", ""), d(this, Ot, xi).call(this);
-}, Ot = new WeakSet(), xi = function() {
-  this.s.childDom = this.childNodes, this.s.template = Is(this), this.innerHTML = "", this.append(this.s.template), d(this, Nt, Ci).call(this);
-}, Nt = new WeakSet(), Ci = function() {
+Ot = new WeakSet(), $i = function() {
+  this.s = {}, this.__events__ = {}, this.hasAttribute("d4-status") || this.setAttribute("d4-status", "close"), this.hasAttribute("d4-value") || this.setAttribute("d4-value", ""), d(this, Nt, xi).call(this);
+}, Nt = new WeakSet(), xi = function() {
+  this.s.childDom = this.childNodes, this.s.template = Is(this), this.innerHTML = "", this.append(this.s.template), d(this, Pt, Ci).call(this);
+}, Pt = new WeakSet(), Ci = function() {
   var s;
   const t = this;
   t.s.allLi = t.querySelectorAll(".dropdown-list li"), t.s.selectDisplayEl = t.querySelector(".select-display"), t.s.dropdownEl = t.querySelector(".dropdown"), t.s.selectType = t.hasAttribute("multiple") ? "multiple" : "single", t.s.cityLang = t.hasAttribute("city-lang") ? t.getAttribute("city-lang") : "zh-tw", Ns(t), t.s.subDropdownTotalH = 0;
@@ -2267,8 +2275,8 @@ It = new WeakSet(), $i = function() {
       };
       break;
   }
-  x(t, t.s.value.index), d(s = t, Pt, Hi).call(s), t.classList.add("d4-initialize");
-}, Pt = new WeakSet(), Hi = function() {
+  C(t, t.s.value.index), d(s = t, jt, Hi).call(s), t.classList.add("d4-initialize");
+}, jt = new WeakSet(), Hi = function() {
   const t = this;
   t.__events__.dropdownToggle = () => {
     t.addEventListener("click", function(e) {
@@ -2330,10 +2338,10 @@ It = new WeakSet(), $i = function() {
           c.stopPropagation();
           const f = u.querySelector(".sub-dropdown"), b = f.querySelector(".sub-dropdown-list"), y = parseInt(getComputedStyle(b).marginTop) + parseInt(getComputedStyle(b).marginBottom);
           f.style.cssText = `--height: ${b.offsetHeight + y}px`;
-          const H = parseInt(f.style.cssText.replace("--height:", "").trim()), G = parseInt(getComputedStyle(a).maxHeight), S = () => {
+          const _ = parseInt(f.style.cssText.replace("--height:", "").trim()), G = parseInt(getComputedStyle(a).maxHeight), S = () => {
             s = g + e.s.subDropdownTotalH, o = s > G ? G : s, e.style.cssText = `--maxHeight: ${o}px;`, e.s.dropdownEl.style.height = `${o}px`;
           };
-          u.classList.contains("open") ? (u.classList.remove("open"), e.s.subDropdownTotalH -= H, S()) : (u.classList.add("open"), e.s.subDropdownTotalH += H, S());
+          u.classList.contains("open") ? (u.classList.remove("open"), e.s.subDropdownTotalH -= _, S()) : (u.classList.add("open"), e.s.subDropdownTotalH += _, S());
           const R = () => {
             e.__scroller__.update(!0), f.removeEventListener("transitionend", R);
           };
@@ -2343,15 +2351,15 @@ It = new WeakSet(), $i = function() {
             case "single":
               if (e.setAttribute("d4-value", u.getAttribute("data-option")), r) {
                 const f = e.s.cityLang, b = l.textContent.trim(), y = document.getElementById(e.getAttribute("dist-select"));
-                y && (y.querySelector(".dropdown-list").textContent = "", x(y, -1), Oe[f][b].forEach((H, G) => {
+                y && (y.querySelector(".dropdown-list").textContent = "", C(y, -1), Oe[f][b].forEach((_, G) => {
                   const S = document.createElement("li");
-                  S.textContent = H[0], S.setAttribute("data-option", H[0]), y.querySelector(".dropdown-list").append(S);
+                  S.textContent = _[0], S.setAttribute("data-option", _[0]), y.querySelector(".dropdown-list").append(S);
                 }), e.__events__.selectOption(y));
               }
               (m = u.parentNode.closest("li")) != null && m.classList.contains("has-sublayer") && (c.stopPropagation(), e.close());
               break;
             case "multiple":
-              c.stopPropagation(), u.classList.toggle("active"), x(e, p);
+              c.stopPropagation(), u.classList.toggle("active"), C(e, p);
               break;
           }
       });
@@ -2386,7 +2394,7 @@ It = new WeakSet(), $i = function() {
 };
 Object.assign(ki.prototype, O);
 customElements.define("dropdown-el", ki);
-function ct(n) {
+function dt(n) {
   const i = {};
   return [...n.attributes].forEach((t) => {
     if (t.name.includes("duration-")) {
@@ -2396,9 +2404,9 @@ function ct(n) {
   }), Object.keys(i).length === 0 ? null : i;
 }
 function Be(n) {
-  if (ct(n)) {
+  if (dt(n)) {
     let i;
-    const t = Object.keys(ct(n)).map((e) => ({
+    const t = Object.keys(dt(n)).map((e) => ({
       value: e,
       point: e
     }));
@@ -2407,7 +2415,7 @@ function Be(n) {
       const { point: s, value: o } = t[e];
       window.matchMedia(`(max-width: ${o}px)`).matches && (i = s);
     }
-    return i ? Number(ct(n)[i]) : n.s.options.duration;
+    return i ? Number(dt(n)[i]) : n.s.options.duration;
   } else
     return n.s.options.duration;
 }
@@ -2422,7 +2430,7 @@ function zs(n) {
   }
   n.s.animation = null, n.s.animateEl = a, n.textContent = "", o.append(a), n.append(o), a.clientWidth * 2 + e >= n.clientWidth ? i === "normal" && t && o.append(r()) : n.s.options.continual = !1;
 }
-function _(n) {
+function k(n) {
   const { behavior: i, direction: t, continual: e } = n.s.options;
   let s = {};
   switch (i) {
@@ -2484,14 +2492,14 @@ function Ws(n) {
     i && clearTimeout(i), i = setTimeout(n, 200, t);
   };
 }
-var jt, Mi, zt, qi, Wt, Ii, Bt, Oi;
+var zt, Mi, Wt, qi, Bt, Ii, Gt, Oi;
 class Bs extends HTMLElement {
   constructor() {
     super();
-    h(this, jt);
     h(this, zt);
     h(this, Wt);
     h(this, Bt);
+    h(this, Gt);
     this.initialize = !1;
   }
   static get observedAttributes() {
@@ -2500,7 +2508,7 @@ class Bs extends HTMLElement {
   attributeChangedCallback(t, e, s) {
   }
   connectedCallback() {
-    this.initialize || (this.initialize = !0, d(this, jt, Mi).call(this));
+    this.initialize || (this.initialize = !0, d(this, zt, Mi).call(this));
   }
   play() {
     this.s.animation.play(), this.s.animateEl.classList.add("start"), this.s.options.continual && (this.s.cloneAnimation.play(), this.s.cloneAnimateEl.classList.add("start"));
@@ -2509,25 +2517,25 @@ class Bs extends HTMLElement {
     this.s.animation.pause(), this.s.options.continual && this.s.cloneAnimation.pause();
   }
 }
-jt = new WeakSet(), Mi = function() {
+zt = new WeakSet(), Mi = function() {
   const t = {
-    direction: this.getAttribute("direction") || $.SETTINGS.direction,
+    direction: this.getAttribute("direction") || x.SETTINGS.direction,
     // up / down / left / right
-    behavior: this.getAttribute("behavior") || $.SETTINGS.behavior,
+    behavior: this.getAttribute("behavior") || x.SETTINGS.behavior,
     // normal / alternate / endStop
-    duration: Number(this.getAttribute("duration")) || $.SETTINGS.duration,
+    duration: Number(this.getAttribute("duration")) || x.SETTINGS.duration,
     // ms
-    durationBreakpoints: ct(this) || $.SETTINGS.durationBreakpoints,
-    autoplay: this.getAttribute("autoplay") || $.SETTINGS.autoplay,
+    durationBreakpoints: dt(this) || x.SETTINGS.durationBreakpoints,
+    autoplay: this.getAttribute("autoplay") || x.SETTINGS.autoplay,
     // normal / alternate / endStop
-    pauseOnMouseenter: this.getAttribute("pauseOnMouseEnter") ? this.getAttribute("pauseOnMouseEnter") === "true" : $.SETTINGS.pauseOnMouseenter,
+    pauseOnMouseenter: this.getAttribute("pauseOnMouseEnter") ? this.getAttribute("pauseOnMouseEnter") === "true" : x.SETTINGS.pauseOnMouseenter,
     // true / false
-    continual: this.getAttribute("continual") ? this.getAttribute("continual") === "true" : $.SETTINGS.continual,
+    continual: this.getAttribute("continual") ? this.getAttribute("continual") === "true" : x.SETTINGS.continual,
     // true / false
-    gap: Number(this.getAttribute("gap")) || $.SETTINGS.gap
+    gap: Number(this.getAttribute("gap")) || x.SETTINGS.gap
   };
-  this.s = {}, this.s.options = t, this.s.nowDuration = Be(this), zs(this), d(this, zt, qi).call(this);
-}, zt = new WeakSet(), qi = function() {
+  this.s = {}, this.s.options = t, this.s.nowDuration = Be(this), zs(this), d(this, Wt, qi).call(this);
+}, Wt = new WeakSet(), qi = function() {
   const { direction: t, continual: e, gap: s } = this.s.options;
   switch (t) {
     case "left":
@@ -2539,17 +2547,17 @@ jt = new WeakSet(), Mi = function() {
       e ? this.style.cssText = `height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${s}px;` : this.style.cssText = `min-height: ${this.s.animateEl.clientHeight}px;--continual-gap: ${s}px;`;
       break;
   }
-  d(this, Wt, Ii).call(this), d(this, Bt, Oi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
-}, Wt = new WeakSet(), Ii = function() {
+  d(this, Bt, Ii).call(this), d(this, Gt, Oi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
+}, Bt = new WeakSet(), Ii = function() {
   const t = this, { direction: e, behavior: s, duration: o, autoplay: a, pauseOnMouseenter: r, continual: l } = t.s.options;
   let c;
   function u() {
     switch (s) {
       case "normal":
-        t.s.animateEl.style.transform = `${_(t).animate1[0].transform}`, t.s.animation = t.s.animateEl.animate(_(t).animate1, {
+        t.s.animateEl.style.transform = `${k(t).animate1[0].transform}`, t.s.animation = t.s.animateEl.animate(k(t).animate1, {
           duration: t.s.nowDuration,
           iterations: 1 / 0
-        }), l && (t.s.cloneAnimateEl.style.transform = `${_(t).animate2[0].transform}`, t.s.cloneAnimation = t.s.cloneAnimateEl.animate(_(t).animate2, {
+        }), l && (t.s.cloneAnimateEl.style.transform = `${k(t).animate2[0].transform}`, t.s.cloneAnimation = t.s.cloneAnimateEl.animate(k(t).animate2, {
           duration: t.s.nowDuration,
           delay: -t.s.nowDuration / 2,
           iterations: 1 / 0
@@ -2578,7 +2586,7 @@ jt = new WeakSet(), Mi = function() {
           duration: g,
           fill: "forwards"
         }).finished.then(() => {
-          t.s.animation = t.s.animateEl.animate(_(t).animate1, {
+          t.s.animation = t.s.animateEl.animate(k(t).animate1, {
             duration: t.s.nowDuration,
             iterations: 1 / 0
           });
@@ -2587,7 +2595,7 @@ jt = new WeakSet(), Mi = function() {
         });
         break;
       case "endStop":
-        t.s.animateEl.style.transform = `${_(t).animate1[0].transform}`, t.s.animation = t.s.animateEl.animate(_(t).animate1, {
+        t.s.animateEl.style.transform = `${k(t).animate1[0].transform}`, t.s.animation = t.s.animateEl.animate(k(t).animate1, {
           duration: t.s.nowDuration,
           fill: "forwards"
         });
@@ -2605,14 +2613,14 @@ jt = new WeakSet(), Mi = function() {
   }), t.addEventListener("mouseleave", function() {
     t.s.animation && r && t.s.animation.playState === "paused" && t.play();
   });
-}, Bt = new WeakSet(), Oi = function() {
+}, Gt = new WeakSet(), Oi = function() {
   const t = this;
   function e() {
     const s = t.s.animation.startTime, o = t.s.cloneAnimation ? t.s.cloneAnimation.startTime : null;
-    t.s.nowDuration = Be(t), t.s.animation.cancel(), t.s.cloneAnimation && t.s.cloneAnimation.cancel(), t.s.animation = t.s.animateEl.animate(_(t).animate1, {
+    t.s.nowDuration = Be(t), t.s.animation.cancel(), t.s.cloneAnimation && t.s.cloneAnimation.cancel(), t.s.animation = t.s.animateEl.animate(k(t).animate1, {
       duration: t.s.nowDuration,
       iterations: 1 / 0
-    }), t.s.animation.startTime = s, t.s.cloneAnimation && (t.s.cloneAnimation = t.s.cloneAnimateEl.animate(_(t).animate2, {
+    }), t.s.animation.startTime = s, t.s.cloneAnimation && (t.s.cloneAnimation = t.s.cloneAnimateEl.animate(k(t).animate2, {
       duration: t.s.nowDuration,
       delay: -t.s.nowDuration / 2,
       iterations: 1 / 0
@@ -2621,12 +2629,12 @@ jt = new WeakSet(), Mi = function() {
   window.addEventListener("resize", Ws(e));
 };
 customElements.define("marquee-el", Bs);
-const ht = function(n, i) {
+const pt = function(n, i) {
   let t;
   return function(e) {
     t && clearTimeout(t), t = setTimeout(n, 200, e);
   };
-}, k = (n, i) => {
+}, $ = (n, i) => {
   if (rt(n)) {
     n.forEach((t) => {
       t.classList.add(i);
@@ -2643,22 +2651,22 @@ const ht = function(n, i) {
   }
   n.classList.remove(i);
 };
-var Gt, Ni, Rt, Pi, Xt, ji, tt, _e, W, dt, Ft, zi;
+var Rt, Ni, Xt, Pi, Ft, ji, tt, _e, W, ut, Yt, zi;
 class Ge {
   constructor(i) {
     // 初始化
-    h(this, Gt);
-    // 左右箭頭事件綁定
     h(this, Rt);
-    // 左右拖拉事件綁定
+    // 左右箭頭事件綁定
     h(this, Xt);
+    // 左右拖拉事件綁定
+    h(this, Ft);
     // 卷軸位置判斷
     h(this, tt);
     // 隱藏按鈕判斷
     h(this, W);
     // 選項事件綁定
-    h(this, Ft);
-    this.$element = i, this.option = i.s.option.drag, d(this, Gt, Ni).call(this);
+    h(this, Yt);
+    this.$element = i, this.option = i.s.option.drag, d(this, Rt, Ni).call(this);
   }
   // 更新 active 位置
   update(i) {
@@ -2672,7 +2680,7 @@ class Ge {
     }
   }
 }
-Gt = new WeakSet(), Ni = function() {
+Rt = new WeakSet(), Ni = function() {
   var e, s, o, a, r, l;
   const i = this;
   if (!i.$element)
@@ -2680,9 +2688,9 @@ Gt = new WeakSet(), Ni = function() {
   i.$container = i.$element.querySelector(".drag-container"), i.$wrapper = i.$container.querySelector(".wrapper");
   const t = () => {
     var c, u;
-    d(c = i, tt, _e).call(c), d(u = i, W, dt).call(u);
+    d(c = i, tt, _e).call(c), d(u = i, W, ut).call(u);
   };
-  i.$wrapper.removeEventListener("scroll", t), i.$wrapper.addEventListener("scroll", t), window.removeEventListener("resize", ht(t)), window.addEventListener("resize", ht(t)), (i.option.draggable || i.$element.s.type == "collapse") && d(e = i, Xt, ji).call(e), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
+  i.$wrapper.removeEventListener("scroll", t), i.$wrapper.addEventListener("scroll", t), window.removeEventListener("resize", pt(t)), window.addEventListener("resize", pt(t)), (i.option.draggable || i.$element.s.type == "collapse") && d(e = i, Ft, ji).call(e), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
     E.prepend,
     `<div class="navigation">
         <div class="button prev">
@@ -2692,8 +2700,8 @@ Gt = new WeakSet(), Ni = function() {
           <div></div>
         </div>
       </div>`
-  ), i.$button = (s = i.$container) == null ? void 0 : s.querySelectorAll(".button"), d(o = i, Rt, Pi).call(o)), d(a = i, tt, _e).call(a), d(r = i, W, dt).call(r), d(l = i, Ft, zi).call(l), i.update();
-}, Rt = new WeakSet(), Pi = function() {
+  ), i.$button = (s = i.$container) == null ? void 0 : s.querySelectorAll(".button"), d(o = i, Xt, Pi).call(o)), d(a = i, tt, _e).call(a), d(r = i, W, ut).call(r), d(l = i, Yt, zi).call(l), i.update();
+}, Xt = new WeakSet(), Pi = function() {
   const i = this, { $wrapper: t, $button: e } = i, s = function() {
     const o = this.classList.contains("next"), a = parseInt(t.getBoundingClientRect().width * 0.7);
     t.scrollTo({
@@ -2701,13 +2709,13 @@ Gt = new WeakSet(), Ni = function() {
       behavior: "smooth"
     }), setTimeout(() => {
       var r;
-      d(r = i, W, dt).call(r);
+      d(r = i, W, ut).call(r);
     }, 100);
   };
   e.forEach((o) => {
     o.removeEventListener("click", s), o.addEventListener("click", s);
   });
-}, Xt = new WeakSet(), ji = function() {
+}, Ft = new WeakSet(), ji = function() {
   const { $wrapper: i } = this;
   let t = !1, e = !1, s = 0, o = 0;
   const a = function(p) {
@@ -2739,30 +2747,30 @@ Gt = new WeakSet(), Ni = function() {
   });
 }, tt = new WeakSet(), _e = function() {
   const { $container: i, $wrapper: t } = this, e = t.scrollWidth - t.clientWidth, s = Math.round(t.scrollLeft);
-  e <= 0 || (k(i, "scrollable"), s == 0 ? (D(i, "scrollable"), k(t, "start"), D(t, "end")) : s + 1 >= e ? (D(i, "scrollable"), D(t, "start"), k(t, "end")) : (k(t, "center"), D(t, "start"), D(t, "end")));
-}, W = new WeakSet(), dt = function() {
+  e <= 0 || ($(i, "scrollable"), s == 0 ? (D(i, "scrollable"), $(t, "start"), D(t, "end")) : s + 1 >= e ? (D(i, "scrollable"), D(t, "start"), $(t, "end")) : ($(t, "center"), D(t, "start"), D(t, "end")));
+}, W = new WeakSet(), ut = function() {
   const { $wrapper: i, $button: t, $element: e } = this;
   if (!t)
     return;
   const s = i.scrollWidth - i.clientWidth, o = i.scrollLeft;
   if (s <= 0) {
-    k(t, "hide"), D(t, "active"), k(e, "noScrollable");
+    $(t, "hide"), D(t, "active"), $(e, "noScrollable");
     return;
   }
-  s > 0 && (k(t, "active"), D(e, "noScrollable")), o == 0 ? t.forEach((a) => {
+  s > 0 && ($(t, "active"), D(e, "noScrollable")), o == 0 ? t.forEach((a) => {
     if (a.classList.contains("next")) {
       D(a, "hide");
       return;
     }
-    k(a, "hide");
+    $(a, "hide");
   }) : o + 1 >= s ? t.forEach((a) => {
     if (a.classList.contains("next")) {
-      k(a, "hide");
+      $(a, "hide");
       return;
     }
     D(a, "hide");
   }) : D(t, "hide");
-}, Ft = new WeakSet(), zi = function() {
+}, Yt = new WeakSet(), zi = function() {
   const { $element: i } = this, t = (s) => {
     if (this.option.selected) {
       const o = s.getAttribute("data-option").trim();
@@ -2776,31 +2784,31 @@ Gt = new WeakSet(), Ni = function() {
     s.removeEventListener("click", e), s.addEventListener("click", e);
   });
 };
-var Yt, Wi, Ut, Bi, Jt, Gi, Zt, Ri;
+var Ut, Wi, Jt, Bi, Zt, Gi, Qt, Ri;
 class Gs {
   constructor(i) {
     // 初始化
-    h(this, Yt);
-    // 隱藏按鈕判斷
     h(this, Ut);
-    // 展開箭頭事件綁定
+    // 隱藏按鈕判斷
     h(this, Jt);
-    // 選項事件綁定
+    // 展開箭頭事件綁定
     h(this, Zt);
-    this.$element = i, this.option = i.s.option.collapse, d(this, Yt, Wi).call(this);
+    // 選項事件綁定
+    h(this, Qt);
+    this.$element = i, this.option = i.s.option.collapse, d(this, Ut, Wi).call(this);
   }
 }
-Yt = new WeakSet(), Wi = function() {
-  this.$element && (this.$container = this.$element.querySelector(".collapse-container"), this.$wrapper = this.$container.querySelector(".wrapper"), d(this, Ut, Bi).call(this) && d(this, Jt, Gi).call(this), d(this, Zt, Ri).call(this));
-}, Ut = new WeakSet(), Bi = function() {
+Ut = new WeakSet(), Wi = function() {
+  this.$element && (this.$container = this.$element.querySelector(".collapse-container"), this.$wrapper = this.$container.querySelector(".wrapper"), d(this, Jt, Bi).call(this) && d(this, Zt, Gi).call(this), d(this, Qt, Ri).call(this));
+}, Jt = new WeakSet(), Bi = function() {
   const i = this.$element.querySelector(".drag-container"), t = i.querySelector(".wrapper");
   return t.scrollWidth - t.clientWidth > 0 ? (i.insertAdjacentHTML(E.append, '<div class="open-collapse"></div>'), this.$button = i.querySelector(".open-collapse"), !0) : !1;
-}, Jt = new WeakSet(), Gi = function() {
+}, Zt = new WeakSet(), Gi = function() {
   const { $element: i, $button: t } = this, e = function() {
     i.classList.contains("expand") ? i.classList.remove("expand") : i.classList.add("expand");
   };
   t.removeEventListener("click", e), t.addEventListener("click", e);
-}, Zt = new WeakSet(), Ri = function() {
+}, Qt = new WeakSet(), Ri = function() {
   const { $element: i } = this, t = (s, o) => {
     if (i != null && i.classList.contains("expand") ? i == null || i.classList.remove("expand") : i == null || i.classList.add("expand"), this.option.selected) {
       const a = s.getAttribute("data-option").trim();
@@ -2816,14 +2824,14 @@ Yt = new WeakSet(), Wi = function() {
 };
 const Rs = (n) => {
   const { type: i, option: t, originalDomString: e } = n.s, s = document.createElement("div");
-  return i == "drag" && (s.innerHTML = C.TEMPLATE[i]().trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(E.append, e)), i == "collapse" && (s.innerHTML = C.TEMPLATE[i](t == null ? void 0 : t.collapse).trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(E.append, e), s.querySelector(".collapse-container .wrapper").insertAdjacentHTML(E.append, e)), i == "dropdown" && (s.innerHTML = C.TEMPLATE[i](t == null ? void 0 : t.dropdown).trim(), s.querySelector("dropdown-el").insertAdjacentHTML(E.append, e)), s.children;
+  return i == "drag" && (s.innerHTML = H.TEMPLATE[i]().trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(E.append, e)), i == "collapse" && (s.innerHTML = H.TEMPLATE[i](t == null ? void 0 : t.collapse).trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(E.append, e), s.querySelector(".collapse-container .wrapper").insertAdjacentHTML(E.append, e)), i == "dropdown" && (s.innerHTML = H.TEMPLATE[i](t == null ? void 0 : t.dropdown).trim(), s.querySelector("dropdown-el").insertAdjacentHTML(E.append, e)), s.children;
 };
-var Qt, Xi, Vt, Fi, et, ke, B, ut;
+var Vt, Xi, Kt, Fi, et, ke, B, ht;
 class Xs extends HTMLElement {
   constructor() {
     super();
-    h(this, Qt);
     h(this, Vt);
+    h(this, Kt);
     // 斷點設定
     h(this, et);
     // check type
@@ -2839,7 +2847,7 @@ class Xs extends HTMLElement {
       case "m4-type":
         if (e === null || e === s)
           return;
-        this.s.type = s, d(this, B, ut).call(this);
+        this.s.type = s, d(this, B, ht).call(this);
         break;
       case "m4-status":
         if (e === s)
@@ -2856,15 +2864,15 @@ class Xs extends HTMLElement {
     }
   }
   connectedCallback() {
-    this.initialize || this.classList.contains("m4-init") || (this.initialize = !0, d(this, Qt, Xi).call(this));
+    this.initialize || this.classList.contains("m4-init") || (this.initialize = !0, d(this, Vt, Xi).call(this));
   }
   update() {
     d(this, et, ke).call(this);
   }
 }
-Qt = new WeakSet(), Xi = function() {
+Vt = new WeakSet(), Xi = function() {
   let t = {};
-  this.hasAttribute("m4-value") || this.setAttribute("m4-value", ""), this.s.type = this.getAttribute("m4-type") ?? C.SETTINGS.type, this.hasAttribute("m4-option") && (t = this.getAttribute("m4-option") ? JSON.parse(this.getAttribute("m4-option")) : {}, this.removeAttribute("m4-option"));
+  this.hasAttribute("m4-value") || this.setAttribute("m4-value", ""), this.s.type = this.getAttribute("m4-type") ?? H.SETTINGS.type, this.hasAttribute("m4-option") && (t = this.getAttribute("m4-option") ? JSON.parse(this.getAttribute("m4-option")) : {}, this.removeAttribute("m4-option"));
   const e = (s) => {
     if (s.type === "resize") {
       if (window.innerWidth === this.previousWidth)
@@ -2873,20 +2881,20 @@ Qt = new WeakSet(), Xi = function() {
     }
     this.update();
   };
-  window.removeEventListener("resize", ht(e)), window.addEventListener("resize", ht(e)), this.s.option = {}, this.s.option.drag = Object.assign({}, C.SETTINGS.drag, t == null ? void 0 : t.drag), this.s.option.collapse = Object.assign({}, C.SETTINGS.collapse, t == null ? void 0 : t.collapse), this.s.option.dropdown = Object.assign({}, C.SETTINGS.dropdown, t == null ? void 0 : t.dropdown), this.s.option.breakpoint = Object.assign({}, C.SETTINGS.breakpoint, t == null ? void 0 : t.breakpoint), d(this, Vt, Fi).call(this);
-}, Vt = new WeakSet(), Fi = function() {
+  window.removeEventListener("resize", pt(e)), window.addEventListener("resize", pt(e)), this.s.option = {}, this.s.option.drag = Object.assign({}, H.SETTINGS.drag, t == null ? void 0 : t.drag), this.s.option.collapse = Object.assign({}, H.SETTINGS.collapse, t == null ? void 0 : t.collapse), this.s.option.dropdown = Object.assign({}, H.SETTINGS.dropdown, t == null ? void 0 : t.dropdown), this.s.option.breakpoint = Object.assign({}, H.SETTINGS.breakpoint, t == null ? void 0 : t.breakpoint), d(this, Kt, Fi).call(this);
+}, Kt = new WeakSet(), Fi = function() {
   this.classList.add("m4-init"), d(this, et, ke).call(this);
 }, et = new WeakSet(), ke = function() {
   const t = Object.keys(this.s.option.breakpoint);
   if (!t.length) {
-    d(this, B, ut).call(this);
+    d(this, B, ht).call(this);
     return;
   }
   t.map((e) => Number(e)).sort((e, s) => s - e).some((e) => {
     var s, o, a, r;
-    return window.innerWidth >= e && (this.s.type = (s = this.s.option.breakpoint[e]) == null ? void 0 : s.type, this.setAttribute("m4-type", this.s.type), this.s.option.drag = Object.assign({}, this.s.option.drag, (o = this.s.option.breakpoint[e]) == null ? void 0 : o.drag), this.s.option.collapse = Object.assign({}, this.s.option.collapse, (a = this.s.option.breakpoint[e]) == null ? void 0 : a.collapse), this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, (r = this.s.option.breakpoint[e]) == null ? void 0 : r.dropdown)), d(this, B, ut).call(this), window.innerWidth >= e;
+    return window.innerWidth >= e && (this.s.type = (s = this.s.option.breakpoint[e]) == null ? void 0 : s.type, this.setAttribute("m4-type", this.s.type), this.s.option.drag = Object.assign({}, this.s.option.drag, (o = this.s.option.breakpoint[e]) == null ? void 0 : o.drag), this.s.option.collapse = Object.assign({}, this.s.option.collapse, (a = this.s.option.breakpoint[e]) == null ? void 0 : a.collapse), this.s.option.dropdown = Object.assign({}, this.s.option.dropdown, (r = this.s.option.breakpoint[e]) == null ? void 0 : r.dropdown)), d(this, B, ht).call(this), window.innerWidth >= e;
   });
-}, B = new WeakSet(), ut = function() {
+}, B = new WeakSet(), ht = function() {
   var o;
   const { type: t } = this.s;
   this.innerHTML = "", [...Rs(this)].forEach((a) => {
@@ -2908,53 +2916,53 @@ Qt = new WeakSet(), Xi = function() {
   (o = this.constructor.drag) == null || o.update(this);
 };
 customElements.define("multipurpose-nav", Xs);
-var Kt, Ui, te, Ji, it, $e, P, F, ee, Zi, ie, Qi, se, Vi, ne, Ki, oe, ts, ae, es, re, is, le, ss, ce, ns, q, z, de, os, ue, as, he, rs, pe, ls;
+var te, Ui, ee, Ji, it, $e, P, F, ie, Zi, se, Qi, ne, Vi, oe, Ki, ae, ts, re, es, le, is, ce, ss, de, ns, q, z, ue, os, he, as, pe, rs, me, ls;
 class Yi extends HTMLElement {
   // 定義組件的初始狀態
   constructor(t, e) {
     super();
-    h(this, Kt);
     h(this, te);
+    h(this, ee);
     // 第一關 判斷數量以及id設定
     h(this, it);
     // 第二關 id命名提醒
     h(this, P);
-    h(this, ee);
     h(this, ie);
     h(this, se);
+    h(this, ne);
     // 執行函式
     // 移動至指定位置
-    h(this, ne);
-    // 移動
     h(this, oe);
-    // 步驟狀態
+    // 移動
     h(this, ae);
-    // next 按鈕狀態
+    // 步驟狀態
     h(this, re);
-    // prev 按鈕狀態
+    // next 按鈕狀態
     h(this, le);
-    // 頁籤狀態
+    // prev 按鈕狀態
     h(this, ce);
+    // 頁籤狀態
+    h(this, de);
     // 第三關各種元件判斷 及 執行
     h(this, q);
     // 消失動畫
-    h(this, de);
-    // 出現動畫
     h(this, ue);
-    // 狀態
+    // 出現動畫
     h(this, he);
-    // resize
+    // 狀態
     h(this, pe);
+    // resize
+    h(this, me);
   }
   // 當組件的屬性被更改時會被呼叫
   static get observedAttributes() {
     return ["t4-active"];
   }
   attributeChangedCallback(t, e, s) {
-    t === "t4-active" && e !== s && d(this, he, rs).call(this, s);
+    t === "t4-active" && e !== s && d(this, pe, rs).call(this, s);
   }
   connectedCallback() {
-    this.classList.contains("t4-initialize") || d(this, Kt, Ui).call(this);
+    this.classList.contains("t4-initialize") || d(this, te, Ui).call(this);
   }
   //  ------------- 我是分隔線呦 -------------
   // 頁籤切換
@@ -2970,7 +2978,7 @@ class Yi extends HTMLElement {
     e.activeTab = s, this.setAttribute("t4-active", s);
     const o = d(this, P, F).call(this, s);
     e.tabPanels.forEach((a, r) => {
-      r === o ? d(this, ue, as).call(this, r) : d(this, de, os).call(this, r);
+      r === o ? d(this, he, as).call(this, r) : d(this, ue, os).call(this, r);
     });
   }
   // 外部呼叫方法 $0.goNext()
@@ -2988,7 +2996,7 @@ class Yi extends HTMLElement {
     this.t.tabs = d(this, it, $e).call(this), cs(), console.log("tab update!!!!");
   }
 }
-Kt = new WeakSet(), Ui = function() {
+te = new WeakSet(), Ui = function() {
   const t = this.getAttribute("t4-name"), { SETTINGS: e } = Ue;
   document.querySelectorAll(`tab-el[t4-name=${t}]`).length > 1 && console.warn(t, "名字有重複喔！！！"), this.t = {
     tabs: [],
@@ -3008,13 +3016,13 @@ Kt = new WeakSet(), Ui = function() {
       delay: this.getAttribute("t4-delay") || e.transition.delay
     },
     tabGroup: this.getAttribute("t4-group") || e.tabGroup
-  }, this.__events__ = {}, this.t.tabs = d(this, it, $e).call(this), this.t.step = document.querySelector(`[t4-control="${this.t.name}"]${this.t.stepOutput}`), d(this, te, Ji).call(this);
-}, te = new WeakSet(), Ji = function() {
-  if (this.t.activeTab = this.t.defaultPage, this.t.display === "swiper" && d(this, ee, Zi).call(this), this.t.recordUrl) {
+  }, this.__events__ = {}, this.t.tabs = d(this, it, $e).call(this), this.t.step = document.querySelector(`[t4-control="${this.t.name}"]${this.t.stepOutput}`), d(this, ee, Ji).call(this);
+}, ee = new WeakSet(), Ji = function() {
+  if (this.t.activeTab = this.t.defaultPage, this.t.display === "swiper" && d(this, ie, Zi).call(this), this.t.recordUrl) {
     const e = new URLSearchParams(document.location.search).get(this.t.name), s = document.querySelectorAll(`[t4-name="${this.t.name}"] .tab-panel[t4-id="${e}"]`);
     e && s.length === 1 ? this.t.activeTab = e : console.warn(`沒有${e}這頁喔！！`);
   }
-  this.setActiveTab(this.t.activeTab), this.classList.add("t4-initialize"), d(this, pe, ls).call(this);
+  this.setActiveTab(this.t.activeTab), this.classList.add("t4-initialize"), d(this, me, ls).call(this);
 }, it = new WeakSet(), $e = function() {
   const { t } = this, e = Array.from(document.querySelectorAll(`[t4-control="${t.name}"][t4-role="tab"]`));
   return t.type === "normal" && t.tabGroup === "true" && t.tabPanels.length !== e.length && console.warn("按鈕與內容數量不同喔", t.tabPanels.length, e.length), t.tabGroup === "true" ? t.tabPanels.forEach((s, o) => s.setAttribute("t4-id", o)) : t.tabPanels.forEach((s) => {
@@ -3025,19 +3033,19 @@ Kt = new WeakSet(), Ui = function() {
   s.length > 1 && console.warn("有兩個相同id設定", s);
   const o = s[0];
   return o ? e.tabPanels.indexOf(o) : (console.warn(`找不到t4-id為${t}的頁籤`), 0);
-}, ee = new WeakSet(), Zi = function() {
+}, ie = new WeakSet(), Zi = function() {
   const t = document.createElement("div");
   t.classList.add("swiper-container");
   const e = document.createElement("div");
   e.classList.add("swiper-wrapper"), this.t.tabPanels.forEach((s) => {
     e.appendChild(s.cloneNode(!0));
-  }), this.t.tabPanels = [...e.children], t.appendChild(e), this.innerHTML = "", this.appendChild(t), d(this, ie, Qi).call(this);
-}, ie = new WeakSet(), Qi = function() {
+  }), this.t.tabPanels = [...e.children], t.appendChild(e), this.innerHTML = "", this.appendChild(t), d(this, se, Qi).call(this);
+}, se = new WeakSet(), Qi = function() {
   const t = this.querySelector(".swiper-container"), e = this.querySelector(".swiper-wrapper"), s = this.t.tabPanels;
   t.style.overflow = "hidden", e.style.display = "flex";
   const o = s.length * 100 + "%";
   e.style.width = o;
-}, se = new WeakSet(), Vi = function(t) {
+}, ne = new WeakSet(), Vi = function(t) {
   const { t: e } = this;
   if (e.recordUrl === "true") {
     const s = new URLSearchParams(document.location.search);
@@ -3045,28 +3053,28 @@ Kt = new WeakSet(), Ui = function() {
     const o = `${window.location.pathname}?${s.toString()}`;
     history.replaceState({ t4Id: t }, "", o);
   }
-}, ne = new WeakSet(), Ki = function() {
+}, oe = new WeakSet(), Ki = function() {
   const t = parseInt(this.t.gap, 10), e = window.pageYOffset, o = this.getBoundingClientRect().top + e - t;
-  d(this, oe, ts).call(this, o);
-}, oe = new WeakSet(), ts = function(t) {
+  d(this, ae, ts).call(this, o);
+}, ae = new WeakSet(), ts = function(t) {
   window.scrollTo({
     top: t,
     behavior: "smooth"
   });
-}, ae = new WeakSet(), es = function(t) {
+}, re = new WeakSet(), es = function(t) {
   let e = parseInt(t, 10) + 1;
   this.t.step.textContent = `${e}`, this.t.step.setAttribute("now-page", e);
-}, re = new WeakSet(), is = function(t) {
+}, le = new WeakSet(), is = function(t) {
   const e = document.querySelectorAll(`[t4-role="next"][t4-control="${this.t.name}"]`), s = this.t.tabPanels.length === 1, o = t === this.t.tabPanels.length - 1;
   e.forEach((a) => {
     s || o ? a.setAttribute("disabled", "") : a.removeAttribute("disabled");
   });
-}, le = new WeakSet(), ss = function(t) {
+}, ce = new WeakSet(), ss = function(t) {
   const e = document.querySelectorAll(`[t4-role="prev"][t4-control="${this.t.name}"]`), s = this.t.tabPanels.length === 1, o = t === 0;
   e.forEach((a) => {
     s || o ? a.setAttribute("disabled", "") : a.removeAttribute("disabled");
   });
-}, ce = new WeakSet(), ns = function(t, e) {
+}, de = new WeakSet(), ns = function(t, e) {
   this.t.tabGroup === "true" ? this.t.tabs.forEach((s, o) => {
     o == t ? s.setAttribute("aria-selected", !0) : s.setAttribute("aria-selected", !1);
   }) : this.t.tabs.forEach((s, o) => {
@@ -3075,25 +3083,25 @@ Kt = new WeakSet(), Ui = function() {
 }, q = new WeakSet(), z = function(t, e, s) {
   switch (t) {
     case "step":
-      ye(this.t.step) && d(this, ae, es).call(this, e);
+      we(this.t.step) && d(this, re, es).call(this, e);
       break;
     case "eventAnchor":
-      this.t.anchor && d(this, ne, Ki).call(this);
+      this.t.anchor && d(this, oe, Ki).call(this);
       break;
     case "tabState":
-      this.t.type == "normal" && d(this, ce, ns).call(this, e, s);
+      this.t.type == "normal" && d(this, de, ns).call(this, e, s);
       break;
     case "btnState":
-      d(this, re, is).call(this, e), d(this, le, ss).call(this, e);
+      d(this, le, is).call(this, e), d(this, ce, ss).call(this, e);
       break;
     case "tabUrl":
-      this.t.recordUrl === "true" && d(this, se, Vi).call(this, e);
+      this.t.recordUrl === "true" && d(this, ne, Vi).call(this, e);
       break;
     default:
       console.warn("請增加判斷，謝謝");
       break;
   }
-}, de = new WeakSet(), os = function(t) {
+}, ue = new WeakSet(), os = function(t) {
   const { t: e } = this;
   this.t.transition;
   const s = e.tabPanels[t];
@@ -3110,7 +3118,7 @@ Kt = new WeakSet(), Ui = function() {
       s.style.display = "none";
       break;
   }
-}, ue = new WeakSet(), as = function(t) {
+}, he = new WeakSet(), as = function(t) {
   const { duration: e, timing: s, delay: o } = this.t.transition, a = this.t.tabPanels[t];
   let r;
   switch (a.classList.add("show"), a.classList.remove("hide"), a.style.transition = `opacity ${e}ms ${s} ${o}ms`, a.style.display = "block", this.t.display) {
@@ -3135,10 +3143,10 @@ Kt = new WeakSet(), Ui = function() {
       console.warn(this.t.display, "沒有這個效果請自己想辦法!!!!");
       break;
   }
-}, he = new WeakSet(), rs = function(t) {
+}, pe = new WeakSet(), rs = function(t) {
   const e = d(this, P, F).call(this, t);
   d(this, q, z).call(this, "step", e), d(this, q, z).call(this, "btnState", e), d(this, q, z).call(this, "tabState", e, t), d(this, q, z).call(this, "tabUrl", t), this.emit("change");
-}, pe = new WeakSet(), ls = function() {
+}, me = new WeakSet(), ls = function() {
   const t = this;
   window.addEventListener(
     "resize",
@@ -3193,14 +3201,14 @@ const Re = (n) => {
   const { defaultOptions: i } = n.collapse, { collapseClass: t, target: e, transition: s } = i, o = n.querySelector(e), a = o.children[0].offsetHeight;
   n.collapse.height = a, n.classList.remove(t), o.style.display = "block", o.style.height = `${a}px`, o.style["transition-property"] = s.property, o.style["transition-duration"] = s.duration, o.style["transition-timing-function"] = s.function, o.style["transition-delay"] = s.delay, o.style.overflow = "hidden";
 };
-var st, xe, me, ds, ge, us, nt, Ce;
+var st, xe, ge, ds, fe, us, nt, Ce;
 class Us {
   constructor(i, t = {}) {
     h(this, st);
-    h(this, me);
     h(this, ge);
+    h(this, fe);
     h(this, nt);
-    !at(i) && !ye(i) && !rt(i) && !w(i) || (this.__storage__ = {
+    !at(i) && !we(i) && !rt(i) && !w(i) || (this.__storage__ = {
       el: i,
       options: t
     }, this.active = "data-collapse-active", d(this, st, xe).call(this));
@@ -3214,13 +3222,13 @@ st = new WeakSet(), xe = function() {
   if (this.elements = t.state == "not active" ? L(i + `:not([${this.active}])`) : L(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
     for (const [o, a] of Object.entries(this.options.on))
       this.__events__[o] = [a];
-  d(this, me, ds).call(this);
-}, me = new WeakSet(), ds = function() {
+  d(this, ge, ds).call(this);
+}, ge = new WeakSet(), ds = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.collapse = {}, e.collapse.instance = this, e.collapse.defaultOptions = t, e.collapse.methods = {}, e.collapse.methods.update = this.update, e.setAttribute(this.active, ""), d(this, ge, us).call(this, e);
+    e.collapse = {}, e.collapse.instance = this, e.collapse.defaultOptions = t, e.collapse.methods = {}, e.collapse.methods.update = this.update, e.setAttribute(this.active, ""), d(this, fe, us).call(this, e);
   }), this.emit("init");
-}, ge = new WeakSet(), us = function(i) {
+}, fe = new WeakSet(), us = function(i) {
   const { options: t } = this, { collapseClass: e, block: s, target: o, defaultOpen: a, targetStopPropagation: r, defaultActiveMark: l } = t, c = i, u = c.querySelector(o);
   if (c.collapse.height = u.children[0].offsetHeight, a ? (u.style.height = `${u.children[0].offsetHeight}px`, c.classList.remove(e)) : !c.classList.contains(l) && !c.hasAttribute(l) ? (c.classList.add(e), u.style.height = "0px", u.style.overflow = "hidden") : (u.style.height = `${u.children[0].offsetHeight}px`, c.classList.remove(e)), c.removeEventListener("click", d(this, nt, Ce)), c.addEventListener("click", d(this, nt, Ce)), r) {
     const p = (g) => {
@@ -3248,14 +3256,14 @@ function hs() {
   });
 }
 document.addEventListener("click", hs);
-var ot, He, fe, ps, ve, ms, be, gs;
+var ot, He, ve, ps, be, ms, ye, gs;
 class Zs extends HTMLElement {
   constructor() {
     super();
     h(this, ot);
-    h(this, fe);
     h(this, ve);
     h(this, be);
+    h(this, ye);
     this.initialize = !1;
   }
   connectedCallback() {
@@ -3281,13 +3289,13 @@ ot = new WeakSet(), He = function() {
     hover: this.getAttribute("r4-hover") ? e(this.getAttribute("r4-hover")) : t.hover,
     click: this.getAttribute("r4-hover-click") ? e(this.getAttribute("r4-hover-click")) : t.click
   };
-  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, fe, ps).call(this);
-}, fe = new WeakSet(), ps = function() {
-  d(this, ve, ms).call(this), d(this, be, gs).call(this), this.classList.add("r4-initialize");
-}, ve = new WeakSet(), ms = function() {
+  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, ve, ps).call(this);
+}, ve = new WeakSet(), ps = function() {
+  d(this, be, ms).call(this), d(this, ye, gs).call(this), this.classList.add("r4-initialize");
+}, be = new WeakSet(), ms = function() {
   const t = this, e = document.createElement("i");
   e.classList.add("hover-ball"), e.style.transitionDuration = `${t.s.options.speed}ms`, t.appendChild(e);
-}, be = new WeakSet(), gs = function() {
+}, ye = new WeakSet(), gs = function() {
   const t = this.querySelector("i.hover-ball"), e = this;
   e.addEventListener("click", function(a) {
     a.stopPropagation(), e.s.options.click && Js(a, e);