@xwadex/fesd 0.0.58 → 0.0.59

package/dist/image-preview-bundle.js

@@ -1,6 +1,6 @@
-var Cs = Object.defineProperty;
-var Hs = (n, i, t) => i in n ? Cs(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
-var Je = (n, i, t) => (Hs(n, typeof i != "symbol" ? i + "" : i, t), t), Ms = (n, i, t) => {
+var Ms = Object.defineProperty;
+var Is = (n, i, t) => i in n ? Ms(n, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[i] = t;
+var Ke = (n, i, t) => (Is(n, typeof i != "symbol" ? i + "" : i, t), t), qs = (n, i, t) => {
   if (!i.has(n))
     throw TypeError("Cannot " + t);
 };
@@ -9,15 +9,15 @@ var h = (n, i, t) => {
     throw TypeError("Cannot add the same private member more than once");
   i instanceof WeakSet ? i.add(n) : i.set(n, t);
 };
-var d = (n, i, t) => (Ms(n, i, "access private method"), t);
+var d = (n, i, t) => (qs(n, i, "access private method"), t);
 import f from "jquery";
-import { OverlayScrollbars as Xe } from "overlayscrollbars";
+import { OverlayScrollbars as Fe } from "overlayscrollbars";
 import "./vendor-bundle.js";
 import "validator";
 import "flatpickr";
-import oi from "vanilla-lazyload";
-import { lock as Is, unlock as qs } from "tua-body-scroll-lock";
-const _e = {
+import li from "vanilla-lazyload";
+import { lock as Os, unlock as Ps } from "tua-body-scroll-lock";
+const xe = {
   SETTINGS: {
     videoId: null,
     videoType: null,
@@ -78,7 +78,7 @@ const _e = {
   TEMPLATE() {
     return '<div class="player-container"><div class="player-wrapper"></div></div>';
   }
-}, Os = {
+}, Ns = {
   SETTINGS: {
     success: null,
     text: null,
@@ -135,7 +135,7 @@ const _e = {
     gap: 30
     // 跑馬燈內容之間的距離 - Number
   }
-}, Ye = {
+}, Je = {
   SETTINGS: {
     scrollbar: {
       "scrollbar-track-color": "transparent",
@@ -163,7 +163,7 @@ const _e = {
       </div>`;
     return t || r;
   }
-}, Ps = {
+}, js = {
   SETTINGS: {
     basic_rwd: 900,
     markdownLink: !1,
@@ -172,7 +172,7 @@ const _e = {
     navigation: !1,
     scrollStep: !1
   }
-}, ai = {
+}, ci = {
   SETTINGS: {
     scroller: window,
     class: "aost-show",
@@ -195,7 +195,7 @@ const _e = {
     enter: null,
     leave: null
   }
-}, vt = {
+}, bt = {
   SETTINGS: {
     target: null,
     container: null,
@@ -255,7 +255,7 @@ const _e = {
       return `<dropdown-el${n.placeholder ? ` d4-placeholder="${n.placeholder}"` : ""}${n.value ? ` d4-value="${n.value}"` : ""}></dropdown-el>`;
     }
   }
-}, ri = {
+}, di = {
   SETTINGS: {
     // 樣式 normal / process
     type: "normal",
@@ -275,7 +275,7 @@ const _e = {
     // 步驟狀態綁定
     stepOutput: ".step-show"
   }
-}, li = {
+}, ui = {
   SETTINGS: {
     collapseClass: "collapse",
     block: "[collapse-block]",
@@ -308,7 +308,7 @@ const _e = {
     update: null,
     afterUpdate: null
   }
-}, ci = {
+}, hi = {
   SETTINGS: {
     // 是否要加 hover 效果?
     hover: !0,
@@ -323,29 +323,29 @@ const _e = {
     // hover 毫秒 ?
     speed: 600
   }
-}, Cn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Mn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  anchor4: vt,
-  aost4: ai,
-  article4: Ps,
-  collapse4: li,
-  dropdown4: Ye,
+  anchor4: bt,
+  aost4: ci,
+  article4: js,
+  collapse4: ui,
+  dropdown4: Je,
   marquee4: M,
   modal4: j,
   multipurpose4: q,
-  ripple4: ci,
-  share4: Os,
-  tab4: ri,
-  video4: _e
+  ripple4: hi,
+  share4: Ns,
+  tab4: di,
+  video4: xe
 }, Symbol.toStringTag, { value: "Module" })), L = {
   before: "beforebegin",
   after: "afterend",
   append: "beforeend",
   prepend: "afterbegin"
-}, pt = (n) => typeof n == "string" && n !== "", xe = (n) => n instanceof HTMLElement, mt = (n) => n instanceof NodeList, A = (n) => D(n) !== null, G = (n) => typeof n == "function", D = (n) => xe(n) ? n : document.querySelector(n), k = (n) => mt(n) ? n : document.querySelectorAll(n), Ns = () => Math.random().toString(36).substr(2, 9), js = (n) => {
+}, mt = (n) => typeof n == "string" && n !== "", $e = (n) => n instanceof HTMLElement, gt = (n) => n instanceof NodeList, A = (n) => _(n) !== null, G = (n) => typeof n == "function", _ = (n) => $e(n) ? n : document.querySelector(n), D = (n) => gt(n) ? n : document.querySelectorAll(n), zs = () => Math.random().toString(36).substr(2, 9), Bs = (n) => {
   const i = document.createElement("div");
   return i.innerHTML = n, i.childNodes;
-}, zs = (n) => {
+}, Ws = (n) => {
   try {
     JSON.parse(n);
   } catch {
@@ -354,7 +354,7 @@ const _e = {
   return JSON.parse(n);
 }, E = (n, i) => {
   console.warn(`[${n} warn]: ${i}`);
-}, Ze = (n, i) => {
+}, Ve = (n, i) => {
   console.error(`[${n} error]: ${i}`);
 }, z = {
   on(n, i) {
@@ -387,7 +387,7 @@ const _e = {
       G(s) && s.apply(this, e);
     }), this) : this;
   }
-}, Bs = {
+}, Gs = {
   easeInOutCirc(n, i, t, e) {
     return (n /= e / 2) < 1 ? -t / 2 * (Math.sqrt(1 - n * n) - 1) + i : t / 2 * (Math.sqrt(1 - (n -= 2) * n) + 1) + i;
   },
@@ -397,33 +397,33 @@ const _e = {
   easeOutQuart(n, i, t, e) {
     return -t * ((n = n / e - 1) * n * n * n - 1) + i;
   }
-}, $e = (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 = A(e) ? D(e) : document.scrollingElement, v = m[u], w = A(t) ? D(t).getBoundingClientRect()[p] : 0 - v, b = A(s) ? D(s).getBoundingClientRect()[g] : 0, T = w - a - b, C = 15;
+}, Ce = (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 = A(e) ? _(e) : document.scrollingElement, v = m[u], w = A(t) ? _(t).getBoundingClientRect()[p] : 0 - v, b = A(s) ? _(s).getBoundingClientRect()[g] : 0, T = w - a - b, C = 15;
   let y = 0;
   if (T === 0)
     return;
-  const S = (_) => {
-    const U = D(t);
-    i && i.emit(_, U), !i && n.on && G(n.on[_]) && n.on[_](U);
+  const S = (k) => {
+    const F = _(t);
+    i && i.emit(k, F), !i && n.on && G(n.on[k]) && n.on[k](F);
   };
   S("beforeScroll");
   const O = () => {
     y += C;
-    const _ = Bs[r](y, v, T, o);
-    m[u] = _, y < o && requestAnimationFrame(O), y >= o && S("afterScroll");
+    const k = Gs[r](y, v, T, o);
+    m[u] = k, y < o && requestAnimationFrame(O), y >= o && S("afterScroll");
   };
   requestAnimationFrame(O);
 };
-var tt, Ce, Tt, ui, Et, hi;
-class di {
+var tt, He, Et, mi, At, gi;
+class pi {
   constructor(i, t = {}) {
     h(this, tt);
-    h(this, Tt);
     h(this, Et);
+    h(this, At);
     this.__storage__ = {
       el: i,
       options: t
-    }, this.active = "data-anchor-active", d(this, tt, Ce).call(this);
+    }, this.active = "data-anchor-active", d(this, tt, He).call(this);
   }
   destroy() {
     const { elements: i } = this;
@@ -433,39 +433,39 @@ class di {
   }
   update() {
     var i;
-    return d(i = this.destroy(), tt, Ce).call(i), this.emit("afterUpdate"), this;
+    return d(i = this.destroy(), tt, He).call(i), this.emit("afterUpdate"), this;
   }
   static run(i) {
-    const { SETTINGS: t } = vt, e = Object.assign({}, t, i);
+    const { SETTINGS: t } = bt, e = Object.assign({}, t, i);
     setTimeout(() => {
-      $e(e);
+      Ce(e);
     }, e.delay);
   }
   static url(i) {
-    const { SETTINGS: t } = vt, { 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 } = bt, { 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(() => {
-      $e(r);
+      Ce(r);
     }, r.delay);
   }
 }
-tt = new WeakSet(), Ce = function() {
+tt = new WeakSet(), He = function() {
   const { el: i, options: t } = this.__storage__;
-  if (!pt(i) || !A(i))
+  if (!mt(i) || !A(i))
     return;
-  const { SETTINGS: e, EVENTS: s } = vt;
-  if (this.elements = t.state == "not active" ? k(i + `:not([${this.active}])`) : k(i), this.elements = k(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
+  const { SETTINGS: e, EVENTS: s } = bt;
+  if (this.elements = t.state == "not active" ? D(i + `:not([${this.active}])`) : D(i), this.elements = D(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, Tt, ui).call(this);
-}, Tt = new WeakSet(), ui = function() {
+  d(this, Et, mi).call(this);
+}, Et = new WeakSet(), mi = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.anchor = {}, e.anchor.instance = this, e.anchor.eventHandler = d(this, Et, hi), 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, At, gi), 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");
-}, Et = new WeakSet(), hi = function() {
+}, At = new WeakSet(), gi = 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,
@@ -479,12 +479,12 @@ tt = new WeakSet(), Ce = function() {
   this.removeEventListener("click", t), setTimeout(() => {
     this.addEventListener("click", t);
   }, s.speed), setTimeout(() => {
-    $e(s, e);
+    Ce(s, e);
   }, s.delay);
 };
-Object.assign(di.prototype, z);
+Object.assign(pi.prototype, z);
 window.MODALS || (window.MODALS = {});
-const { MODALS: P } = window, Ws = (n) => {
+const { MODALS: P } = window, Rs = (n) => {
   const { TEMPLATE: i } = j, { childDom: t } = n, e = document.createElement("div");
   e.innerHTML = i(n.getAttribute("data-modal-template-setting"));
   const s = e.querySelector(".modal-content");
@@ -492,13 +492,13 @@ const { MODALS: P } = window, Ws = (n) => {
     s.append(o);
   }), e.children[0];
 };
-var At, mi, Lt, gi, St, fi, Dt, vi, kt, bi;
-class pi extends HTMLElement {
+var Lt, vi, St, bi, _t, yi, Dt, wi, kt, Ti;
+class fi extends HTMLElement {
   constructor() {
     super();
-    h(this, At);
     h(this, Lt);
     h(this, St);
+    h(this, _t);
     h(this, Dt);
     h(this, kt);
     this.initialize = !1;
@@ -509,12 +509,12 @@ class pi extends HTMLElement {
   attributeChangedCallback(t, e, s) {
     switch (t) {
       case ":state":
-        d(this, kt, bi).call(this, s);
+        d(this, kt, Ti).call(this, s);
         break;
     }
   }
   connectedCallback() {
-    this.initialize || (this.initialize = !0, d(this, At, mi).call(this));
+    this.initialize || (this.initialize = !0, d(this, Lt, vi).call(this));
   }
   open() {
     return this.setAttribute(":state", "open"), this;
@@ -526,22 +526,22 @@ class pi extends HTMLElement {
     return this.setAttribute(":state", "destroy"), this;
   }
 }
-At = new WeakSet(), mi = function() {
+Lt = new WeakSet(), vi = function() {
   const { ATTRS: t } = j;
   this.__events__ = {}, this.getAttribute(":state") || this.setAttribute(":state", "close");
-  const e = this.getAttribute(t.id) || Ns();
-  this.getAttribute(t.id) || (E(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), P[e] && E(`the ${t.id} "${e}" is already be used.`), P[e] = this, d(this, Lt, gi).call(this);
-}, Lt = new WeakSet(), gi = function() {
-  this.childDom = this.childNodes, this.template = Ws(this), this.innerHTML = "", this.append(this.template), d(this, St, fi).call(this);
-}, St = new WeakSet(), fi = function() {
+  const e = this.getAttribute(t.id) || zs();
+  this.getAttribute(t.id) || (E(`modern-modal needs a ${t.id} attribute with a unique id.`), this.setAttribute(t.id, e)), P[e] && E(`the ${t.id} "${e}" is already be used.`), P[e] = this, d(this, St, bi).call(this);
+}, St = new WeakSet(), bi = function() {
+  this.childDom = this.childNodes, this.template = Rs(this), this.innerHTML = "", this.append(this.template), d(this, _t, yi).call(this);
+}, _t = new WeakSet(), yi = function() {
   const t = this.querySelector(".modal-scroller");
-  this.__scroller__ = Xe(t, {
+  this.__scroller__ = Fe(t, {
     overflowBehavior: {
       x: "hidden"
     },
     autoUpdate: !0
-  }), window.modalScroll = this.__scroller__, d(this, Dt, vi).call(this);
-}, Dt = new WeakSet(), vi = function() {
+  }), window.modalScroll = this.__scroller__, d(this, Dt, wi).call(this);
+}, Dt = new WeakSet(), wi = function() {
   var a, r, l;
   const t = this, { ATTRS: e } = j, { close: s, destroy: o } = e;
   (a = t.querySelectorAll(`[${s}]`)) == null || a.forEach((c) => {
@@ -557,7 +557,7 @@ At = new WeakSet(), mi = function() {
   }), (l = t.querySelector("[stop-propagation]")) == null || l.addEventListener("click", function(c) {
     c.stopPropagation();
   });
-}, kt = new WeakSet(), bi = function(t) {
+}, kt = new WeakSet(), Ti = function(t) {
   const { __scroller__: e } = this;
   if (t === "open") {
     if (this.style.display = "block", e) {
@@ -588,22 +588,22 @@ At = new WeakSet(), mi = function() {
     this.addEventListener("transitionend", s);
   }
 };
-Object.assign(pi.prototype, z);
-const { MODALS: Fe } = window, gt = {}, yi = (n, i, ...t) => {
+Object.assign(fi.prototype, z);
+const { MODALS: Ze } = window, ft = {}, Ei = (n, i, ...t) => {
   if (!i)
     return;
   const e = n[i];
   e && G(e) && e.apply(n, t);
-}, wi = (n, ...i) => {
+}, Ai = (n, ...i) => {
   n && G(n) && n.apply(V, i);
-}, Qe = (n, i) => {
-  const { target: t } = n, e = Fe[t] || D(n.target);
-  e && Ti(n, i), e || Gs(n, i);
-}, Ti = (n, i) => {
-  const { target: t, action: e, on: s, e: o } = n, a = Fe[t] || D(n.target);
+}, ti = (n, i) => {
+  const { target: t } = n, e = Ze[t] || _(n.target);
+  e && Li(n, i), e || Xs(n, i);
+}, Li = (n, i) => {
+  const { target: t, action: e, on: s, e: o } = n, a = Ze[t] || _(n.target);
   switch (["open", "close", "destroy"].forEach((l) => {
     a.once(l, () => {
-      i && (i.emit(l, a, o), yi(i, s[l], a, o)), i || wi(s[l], a);
+      i && (i.emit(l, a, o), Ei(i, s[l], a, o)), i || Ai(s[l], a);
     });
   }), e) {
     case "open":
@@ -620,34 +620,34 @@ const { MODALS: Fe } = window, gt = {}, yi = (n, i, ...t) => {
       l === "close" && a.open(), l === "open" && a.close();
       break;
   }
-}, Gs = async (n, i) => {
+}, Xs = async (n, i) => {
   const { target: t, route: e, container: s, on: o, e: a } = n;
   if (!e)
     return E("modal4", "cannot find target or data-modal-route is not defined");
   const r = (l, ...c) => {
-    i && (i.emit(l, ...c), yi(i, o[l], ...c)), i || wi(o[l], ...c);
+    i && (i.emit(l, ...c), Ei(i, o[l], ...c)), i || Ai(o[l], ...c);
   };
-  gt[t] || (gt[t] = !0, fetch(e).then((l) => (r("success", a), l.text())).then((l) => {
-    const c = js(l), u = D(s) || D(j.SETTINGS.container);
+  ft[t] || (ft[t] = !0, fetch(e).then((l) => (r("success", a), l.text())).then((l) => {
+    const c = Bs(l), u = _(s) || _(j.SETTINGS.container);
     [...c].forEach((g) => {
       u.append(g);
     });
-    const p = Fe[t] || D(n.target);
-    r("complete", p), Ti(n, i), delete gt[t];
+    const p = Ze[t] || _(n.target);
+    r("complete", p), Li(n, i), delete ft[t];
   }).catch((l) => {
-    r("error", l), delete gt[t];
+    r("error", l), delete ft[t];
   }));
 };
-var et, He, _t, Ei, xt, Ai;
+var et, Me, xt, Si, $t, _i;
 const B = class B {
   constructor(i, t = {}) {
     h(this, et);
-    h(this, _t);
     h(this, xt);
+    h(this, $t);
     this.__storage__ = {
       el: i,
       options: t
-    }, this.active = "data-modal-active", d(this, et, He).call(this);
+    }, this.active = "data-modal-active", d(this, et, Me).call(this);
   }
   destroy() {
     const { elements: i } = this;
@@ -657,12 +657,12 @@ const B = class B {
   }
   update() {
     var i;
-    return d(i = this.destroy(), et, He).call(i), this.emit("update"), this;
+    return d(i = this.destroy(), et, Me).call(i), this.emit("update"), this;
   }
   /** static method 'open' */
   static open(i) {
     const { SETTINGS: t } = j, e = Object.assign({}, t, { on: {} }, i);
-    Qe(e);
+    ti(e);
   }
   /** static method 'defineMethods' */
   static defineMethods(i) {
@@ -673,22 +673,22 @@ const B = class B {
     Object.assign(B.prototype, B.prototype.__methods__);
   }
 };
-et = new WeakSet(), He = function() {
+et = new WeakSet(), Me = function() {
   const { el: i, options: t } = this.__storage__;
-  if (!pt(i) || !A(i))
+  if (!mt(i) || !A(i))
     return;
   const { SETTINGS: e, EVENTS: s } = j;
-  if (this.elements = t.state == "not active" ? k(i + `:not([${this.active}])`) : k(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
+  if (this.elements = t.state == "not active" ? D(i + `:not([${this.active}])`) : D(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, _t, Ei).call(this);
-}, _t = new WeakSet(), Ei = function() {
+  d(this, xt, Si).call(this);
+}, xt = new WeakSet(), Si = function() {
   const { elements: i, options: t } = this;
   i.forEach((e) => {
-    e.modal = {}, e.modal.instance = this, e.modal.eventHandler = d(this, xt, Ai), 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, $t, _i), 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");
-}, xt = new WeakSet(), Ai = function(i) {
-  const { defaultOptions: t, eventHandler: e, instance: s } = this.modal, o = zs(this.getAttribute("data-modal-on"));
+}, $t = new WeakSet(), _i = function(i) {
+  const { defaultOptions: t, eventHandler: e, instance: s } = this.modal, o = Ws(this.getAttribute("data-modal-on"));
   o && typeof o != "object" && E("modal4", "data-modal-on must be a json string.");
   const a = {
     target: this.getAttribute("data-modal-target") || t.target,
@@ -700,12 +700,12 @@ et = new WeakSet(), He = function() {
   };
   this.removeEventListener("click", e), setTimeout(() => {
     this.addEventListener("click", e);
-  }, 200), Qe(a, s);
+  }, 200), ti(a, s);
 };
 let V = B;
 Object.assign(V.prototype, z);
-customElements.define("modern-modal", pi);
-const Rs = (n, i) => {
+customElements.define("modern-modal", fi);
+const Us = (n, i) => {
   const t = n === window ? n.innerHeight : n.getBoundingClientRect().height, e = n === window ? 0 : n.getBoundingClientRect().top;
   i.forEach((s) => {
     const { class: o, delay: a, start: r, end: l, repeat: c, instance: u } = s.aost, { top: p, bottom: g } = s.getBoundingClientRect(), m = t * (r / 100), v = t * (l / 100);
@@ -720,22 +720,22 @@ const Rs = (n, i) => {
       }, a);
     }
   });
-}, Xs = (n, i) => n === "up" || n === "down" ? n : n !== null ? n === "true" ? !0 : n === "false" ? !1 : i.repeat : i.repeat;
-var it, Me, $t, Si;
-class Li {
+}, Ys = (n, i) => n === "up" || n === "down" ? n : n !== null ? n === "true" ? !0 : n === "false" ? !1 : i.repeat : i.repeat;
+var it, Ie, Ct, ki;
+class Di {
   constructor(i, t = {}) {
     h(this, it);
-    h(this, $t);
+    h(this, Ct);
     this.__storage__ = {
       el: i,
       options: t
-    }, this.active = "data-aost-active", d(this, it, Me).call(this);
+    }, this.active = "data-aost-active", d(this, it, Ie).call(this);
   }
   destroy(i) {
     const { elements: t, options: e } = this;
     if (!t)
       return this;
-    const { scroller: s } = e, o = s === window || !A(s) ? window : D(s);
+    const { scroller: s } = e, o = s === window || !A(s) ? window : _(s);
     return o.aost && (o.removeEventListener("scroll", o.aost.eventHandler), delete o.aost), t.forEach((a) => {
       if (!a.aost)
         return;
@@ -745,58 +745,58 @@ class Li {
   }
   update(i) {
     var t;
-    d(t = this.destroy(i), it, Me).call(t);
+    d(t = this.destroy(i), it, Ie).call(t);
   }
 }
-it = new WeakSet(), Me = function() {
+it = new WeakSet(), Ie = function() {
   const { el: i, options: t } = this.__storage__;
-  if (!pt(i) || !A(i))
+  if (!mt(i) || !A(i))
     return;
-  const { SETTINGS: e, EVENTS: s } = ai;
-  if (this.elements = t.state == "not active" ? k(i + `:not([${this.active}])`) : k(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
+  const { SETTINGS: e, EVENTS: s } = ci;
+  if (this.elements = t.state == "not active" ? D(i + `:not([${this.active}])`) : D(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, $t, Si).call(this);
-}, $t = new WeakSet(), Si = function() {
-  const { elements: i, options: t } = this, { scroller: e } = t, s = e === window || !A(e) ? window : D(e);
+  d(this, Ct, ki).call(this);
+}, Ct = new WeakSet(), ki = function() {
+  const { elements: i, options: t } = this, { scroller: e } = t, s = e === window || !A(e) ? window : _(e);
   this.eventHandler = () => {
-    Rs(s, i);
+    Us(s, i);
   }, i.forEach((a) => {
-    a.aost = {}, a.aost.class = a.getAttribute("data-aost-class") || t.class, a.aost.delay = parseInt(a.getAttribute("data-aost-delay")) || t.delay, a.aost.start = parseInt(a.getAttribute("data-aost-start")) || t.start, a.aost.end = parseInt(a.getAttribute("data-aost-end")) || t.end, a.aost.repeat = Xs(a.getAttribute("data-aost-repeat"), t), a.aost.methods = {}, a.aost.methods.destroy = this.destroy, a.aost.methods.update = this.update, a.aost.instance = this, a.setAttribute(this.active, "");
+    a.aost = {}, a.aost.class = a.getAttribute("data-aost-class") || t.class, a.aost.delay = parseInt(a.getAttribute("data-aost-delay")) || t.delay, a.aost.start = parseInt(a.getAttribute("data-aost-start")) || t.start, a.aost.end = parseInt(a.getAttribute("data-aost-end")) || t.end, a.aost.repeat = Ys(a.getAttribute("data-aost-repeat"), t), a.aost.methods = {}, a.aost.methods.destroy = this.destroy, a.aost.methods.update = this.update, a.aost.instance = this, a.setAttribute(this.active, "");
   });
   const { eventHandler: o } = this;
   o(), s.aost = {}, s.aost.eventHandler = o, s.addEventListener("scroll", s.aost.eventHandler, !1);
 };
-Object.assign(Li.prototype, z);
-const Ys = (n) => {
-  const { TEMPLATE: i } = _e, { childDom: t } = n, e = document.createElement("div");
+Object.assign(Di.prototype, z);
+const Fs = (n) => {
+  const { TEMPLATE: i } = xe, { childDom: t } = n, e = document.createElement("div");
   e.innerHTML = i();
   const s = e.querySelector(".player-wrapper");
   return [...t].forEach((o) => {
     s.append(o);
   }), e.children[0];
 };
-var Ct, Di, Ht, ki, Mt, _i, It, xi, qt, $i, Ot, Ci, Pt, Hi, Nt, Mi, jt, Ii, zt, qi;
-class Fs extends HTMLElement {
+var Ht, xi, Mt, $i, It, Ci, qt, Hi, Ot, Mi, Pt, Ii, Nt, qi, jt, Oi, zt, Pi, Bt, Ni;
+class Js extends HTMLElement {
   constructor() {
     super();
-    h(this, Ct);
     h(this, Ht);
     h(this, Mt);
-    // youtube iframe
     h(this, It);
-    // vimeo iframe
+    // youtube iframe
     h(this, qt);
-    // youku iframe
+    // vimeo iframe
     h(this, Ot);
+    // youku iframe
     h(this, Pt);
-    // 2025.02.11 新增 ig 
     h(this, Nt);
-    // 2025.02.11 新增 tiktok 
+    // 2025.02.11 新增 ig 
     h(this, jt);
-    // 2026.01.15 新增 video 
+    // 2025.02.11 新增 tiktok 
     h(this, zt);
-    d(this, Ct, Di).call(this);
+    // 2026.01.15 新增 video 
+    h(this, Bt);
+    d(this, Ht, xi).call(this);
   }
   play() {
     const { videoType: t } = this;
@@ -833,16 +833,16 @@ class Fs extends HTMLElement {
     }
   }
 }
-Ct = new WeakSet(), Di = function() {
+Ht = new WeakSet(), xi = function() {
   if (!this.getAttribute("video-id")) {
     E("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.videoMode = this.getAttribute("video-mode"), this.autoplay = this.getAttribute("video-autoplay"), this.startTime = this.getAttribute("video-starttime"), this.videoInboxImg = this.getAttribute("video-inbox-img"), d(this, Ht, ki).call(this);
-}, Ht = new WeakSet(), ki = function() {
-  this.childDom = this.childNodes, this.template = Ys(this), this.innerHTML = "", this.append(this.template), d(this, Mt, _i).call(this);
-}, Mt = new WeakSet(), _i = function() {
-  const { videoType: t, videoMode: e } = this, { COOKIEDISAGREELAYOUT: s } = _e;
+  this.videoId = this.getAttribute("video-id"), this.videoType = this.getAttribute("video-type"), this.videoMode = this.getAttribute("video-mode"), this.autoplay = this.getAttribute("video-autoplay"), this.startTime = this.getAttribute("video-starttime"), this.videoInboxImg = this.getAttribute("video-inbox-img"), d(this, Mt, $i).call(this);
+}, Mt = new WeakSet(), $i = function() {
+  this.childDom = this.childNodes, this.template = Fs(this), this.innerHTML = "", this.append(this.template), d(this, It, Ci).call(this);
+}, It = new WeakSet(), Ci = function() {
+  const { videoType: t, videoMode: e } = this, { COOKIEDISAGREELAYOUT: s } = xe;
   let o = "";
   function a(r) {
     f(r).addClass("cookie-disagree"), f(".cookie-disagree").append(s);
@@ -851,72 +851,72 @@ Ct = new WeakSet(), Di = function() {
     case "youtubeAPI":
       break;
     case "youtube":
-      document.body.wd_youtube == !1 ? a("video-player") : o = d(this, It, xi).call(this);
+      document.body.wd_youtube == !1 ? a("video-player") : o = d(this, qt, Hi).call(this);
       break;
     case "youkuAPI":
       break;
     case "youku":
-      document.body.wd_youku == !1 ? a("video-player") : o = d(this, Ot, Ci).call(this);
+      document.body.wd_youku == !1 ? a("video-player") : o = d(this, Pt, Ii).call(this);
       break;
     case "vimeo":
-      document.body.wd_vimeo == !1 ? a("video-player") : o = d(this, qt, $i).call(this);
+      document.body.wd_vimeo == !1 ? a("video-player") : o = d(this, Ot, Mi).call(this);
       break;
     case "bilibili":
-      document.body.wd_bilibili == !1 ? a("video-player") : o = d(this, Pt, Hi).call(this);
+      document.body.wd_bilibili == !1 ? a("video-player") : o = d(this, Nt, qi).call(this);
       break;
     case "instagram":
-      document.body.wd_instagram == !1 ? a(".instagram-media") : o = d(this, Nt, Mi).call(this);
+      document.body.wd_instagram == !1 ? a(".instagram-media") : o = d(this, jt, Oi).call(this);
       break;
     case "tiktok":
-      document.body.wd_tiktok == !1 ? a("video-player") : o = d(this, jt, Ii).call(this);
+      document.body.wd_tiktok == !1 ? a("video-player") : o = d(this, zt, Pi).call(this);
       break;
     case "videojs":
       break;
     case "video":
-      o = d(this, zt, qi).call(this);
+      o = d(this, Bt, Ni).call(this);
       break;
   }
   this.querySelector(".player-wrapper").insertAdjacentHTML(L.prepend, o);
-}, It = new WeakSet(), xi = function() {
+}, qt = new WeakSet(), Hi = 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>`;
-}, qt = new WeakSet(), $i = function() {
+}, Ot = new WeakSet(), Mi = 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>`;
-}, Ot = new WeakSet(), Ci = function() {
+}, Pt = new WeakSet(), Ii = 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>`;
-}, Pt = new WeakSet(), Hi = function() {
+}, Nt = new WeakSet(), qi = 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>`;
-}, Nt = new WeakSet(), Mi = function() {
+}, jt = new WeakSet(), Oi = 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>`;
-}, jt = new WeakSet(), Ii = function() {
+}, zt = new WeakSet(), Pi = 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>`;
-}, zt = new WeakSet(), qi = function() {
+}, Bt = new WeakSet(), Ni = function() {
   const { videoId: t, autoplay: e } = this;
   return `<video src="${t}" ${e == "on" ? "autoplay" : ""} muted playsinline controls></video>`;
 };
 let Q = 0;
-function Oi(n) {
+function ji(n) {
   const i = [];
   return (n || []).forEach((t) => {
     t instanceof HTMLElement ? i.push(t) : typeof t == "string" && i.push(...document.querySelectorAll(t));
   }), i;
 }
-function Pi(n) {
-  const i = Oi(n);
-  Q += 1, Q === 1 && (document.documentElement.classList.add("scrollLock"), Is(i));
+function zi(n) {
+  const i = ji(n);
+  Q += 1, Q === 1 && (document.documentElement.classList.add("scrollLock"), Os(i));
 }
-function Ni(n) {
+function Bi(n) {
   if (Q = Math.max(0, Q - 1), Q === 0) {
-    const i = Oi(n);
-    qs(i), document.documentElement.classList.remove("scrollLock");
+    const i = ji(n);
+    Ps(i), document.documentElement.classList.remove("scrollLock");
   }
 }
-async function Hn(n = 0) {
+async function In(n = 0) {
   if (f(".loading-wrapper").length)
     return;
   f("body").append(`
@@ -930,30 +930,30 @@ async function Hn(n = 0) {
     </div>
   </div>
   `), f(".loading-wrapper").delay(n).fadeIn(300).promise().done(function() {
-    Pi();
+    zi();
   });
 }
-function Mn() {
+function qn() {
   f(".loading-wrapper").fadeOut(300).promise().done(function() {
-    f(".loading-wrapper").remove(), Ni();
+    f(".loading-wrapper").remove(), Bi();
   });
 }
-function In(n, i) {
-  new En(n, i);
+function On(n, i) {
+  new Ln(n, i);
 }
-function Us() {
-  const n = document.querySelector("[data-aost]") && new Li("[data-aost]"), i = document.querySelector("[data-anchor-target]") && new di("[data-anchor-target]"), t = new oi({ callback_loaded: () => {
-  } }), e = new gn();
+function Zs() {
+  const n = document.querySelector("[data-aost]") && new Di("[data-aost]"), i = document.querySelector("[data-anchor-target]") && new pi("[data-anchor-target]"), t = new li({ callback_loaded: () => {
+  } }), e = new vn();
   n == null || n.update(), t.update(), e.reValidate(), i == null || i.update();
 }
-function qn(n, i = () => {
+function Pn(n, i = () => {
 }) {
   f(`[data-tab-content=${n}]`).fadeIn(function() {
     typeof i == "function" && i();
-  }).siblings("[data-tab-content]").hide(), Us();
+  }).siblings("[data-tab-content]").hide(), Zs();
 }
-function On() {
-  Xe(
+function Nn() {
+  Fe(
     {
       target: document.body,
       cancel: {
@@ -977,31 +977,31 @@ function On() {
     }
   );
 }
-function Pn() {
+function jn() {
   window.onpageshow = function(n) {
     n.persisted && window.location.reload();
   };
 }
-function Nn() {
+function zn() {
   const n = navigator.userAgent;
   return {
     BigSurUP: /Mac OS X 10.15/.test(n) || /Mac OS X 10_15_7/.test(n) || /Mac OS X 10_15_8/.test(n) || /Mac OS X 10_15_9/.test(n) || /Mac OS X 11_/.test(n) || /Mac OS X 12_/.test(n)
   };
 }
-function jn(n, i) {
+function Bn(n, i) {
   f(n).on("click", function() {
     f(this).toggleClass(i);
   });
 }
-function zn(n, i) {
+function Wn(n, i) {
   f(n).on("click", function() {
     f(n).not(this).removeClass(i), f(this).addClass(i);
   });
 }
-const Bn = (n) => new Promise((i) => {
+const Gn = (n) => new Promise((i) => {
   let t = setTimeout(() => (clearTimeout(t), i()), n);
 });
-function Js(n, i = 250) {
+function Qs(n, i = 250) {
   let t = null;
   return function(...e) {
     let s = this;
@@ -1010,7 +1010,7 @@ function Js(n, i = 250) {
     }, i);
   };
 }
-function Wn(n, i = 250) {
+function Rn(n, i = 250) {
   let t, e;
   return function() {
     const s = this, o = arguments, a = +/* @__PURE__ */ new Date();
@@ -1019,7 +1019,7 @@ function Wn(n, i = 250) {
     }, i)) : (t = a, n.apply(s, o));
   };
 }
-function Gn() {
+function Xn() {
   window._g.interval = [], f(".countdown").each((i, t) => {
     const e = Number(f(t).attr("data-seconds")) + 1;
     let s = Math.floor(e / 60) + ":" + e % 60;
@@ -1029,21 +1029,21 @@ function Gn() {
     }, 1e3);
   });
 }
-function Rn(n = 500) {
+function Un(n = 500) {
   return new Promise((i, t) => {
     let e = setTimeout(() => {
       clearTimeout(e), i();
     }, n);
   });
 }
-function Xn() {
+function Yn() {
   const n = function() {
     let i = window.innerHeight * 0.01;
     document.documentElement.style.setProperty("--vh", i + "px");
   };
-  n(), window.addEventListener("resize", Js(n));
+  n(), window.addEventListener("resize", Qs(n));
 }
-function Yn(n, i, t, e, s) {
+function Fn(n, i, t, e, s) {
   const o = this, r = f(n).html().split("<br>");
   let l = "", c = 0;
   r.forEach((u, p) => {
@@ -1052,11 +1052,11 @@ function Yn(n, i, t, e, s) {
     });
   }), f(n).html(l);
 }
-function Fn(n, i) {
+function Jn(n, i) {
   const t = Math.pow(10, i);
   return Math.round(n * t) / t;
 }
-function Un(n) {
+function Zn(n) {
   let i = n.activeIndex, t = n.slides.length;
   if (n.params.loop)
     switch (n.activeIndex) {
@@ -1071,18 +1071,18 @@ function Un(n) {
     }
   return i;
 }
-function Jn(n, i) {
+function Qn(n, i) {
   const t = n.$el, e = n.params.grid.rows, s = i || n.params.slidesPerView * e;
   (n.loopedSlides ? n.slides.length - n.loopedSlides * 2 : n.slides.length) <= s ? (t.addClass("swiper-no-swiping"), f(n.params.navigation.nextEl).hide(), f(n.params.navigation.prevEl).hide(), f(n.params.pagination.el).hide(), n.params.autoplay.enabled = !1, n.autoplay.stop()) : (t.removeClass("swiper-no-swiping"), f(n.params.navigation.nextEl).show(), f(n.params.navigation.prevEl).show(), f(n.params.pagination.el).show(), n.params.autoplay.enabled && n.autoplay.start());
 }
-function Zn(n) {
+function Kn(n) {
   n.el.querySelectorAll("img.detect-shade").forEach((i) => {
     i.addEventListener("load", function() {
       detectShade(i);
     });
   });
 }
-function Qn(n) {
+function Vn(n) {
   const i = n.el, t = f(i).find(".swiper-slide-active"), e = f(t).find("video").get(0), s = f(i).find(".swiper-slide video");
   n.autoplay.stop(), f(e).off("ended"), e ? (s.each((o, a) => {
     a.currentTime = 0;
@@ -1090,7 +1090,7 @@ function Qn(n) {
     n.slideNext();
   }), e.play()) : n.params.autoplay.enabled && n.autoplay.start();
 }
-function Kn() {
+function to() {
   f(".number-grow").each(function(n, i) {
     const t = f(i), o = t.attr("data-num").replace(/(\d)(?=(?:\d{3})+$)/g, "$1,").split(""), a = () => {
       let r = "";
@@ -1104,7 +1104,7 @@ function Kn() {
     });
   });
 }
-function Vn() {
+function eo() {
   f(".letter-grow").each(function(n, i) {
     const t = f(i), s = t.attr("data-letter").split(""), o = () => {
       let a = "";
@@ -1118,48 +1118,48 @@ function Vn() {
     });
   });
 }
-function to(n) {
+function io(n) {
   const i = getComputedStyle(n).transform;
   let t = i.match(/^matrix3d\((.+)\)$/);
   return t ? parseFloat(t[1].split(", ")[12]) : (t = i.match(/^matrix\((.+)\)$/), t ? parseFloat(t[1].split(", ")[4]) : 0);
 }
-function eo(n) {
+function so(n) {
   const i = getComputedStyle(n).transform;
   let t = i.match(/^matrix3d\((.+)\)$/);
   return t ? parseFloat(t[1].split(", ")[13]) : (t = i.match(/^matrix\((.+)\)$/), t ? parseFloat(t[1].split(", ")[5]) : 0);
 }
-function io(n) {
+function no(n) {
   const i = document.createElement("div");
   return i.innerHTML = n, i.childNodes[0];
 }
-const Ke = (n) => n.videoId !== "" || typeof n.videoId < "u", Zs = (n) => n.$selector.getAttribute("video4-active") === "on", ft = (n) => `<video-player video-id="${n.videoId}" video-type="${n.videoType}" video-startTime="${n.videoStartTime}" video-autoplay="${n.videoAutoplay}"></video-player>`, Ve = (n) => (console.log(n.videoId, "params.videoId"), `<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="${n.videoId}"></blockquote>`);
-var st, qe, Bt, ji, nt, Oe, ot, Pe, Wt, zi, at, Ne, Gt, Bi;
+const ei = (n) => n.videoId !== "" || typeof n.videoId < "u", Ks = (n) => n.$selector.getAttribute("video4-active") === "on", vt = (n) => `<video-player video-id="${n.videoId}" video-type="${n.videoType}" video-startTime="${n.videoStartTime}" video-autoplay="${n.videoAutoplay}"></video-player>`, ii = (n) => (console.log(n.videoId, "params.videoId"), `<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="${n.videoId}"></blockquote>`);
+var st, Oe, Wt, Wi, nt, Pe, ot, Ne, Gt, Gi, at, je, Rt, Ri;
 const X = class X {
   //*-* 給Article4用的 **//
   constructor(i, t = {}) {
     h(this, st);
-    h(this, Bt);
+    h(this, Wt);
     h(this, nt);
     h(this, ot);
-    h(this, Wt);
-    h(this, at);
     h(this, Gt);
-    if (!pt(i) && !xe(i) && !mt(i)) {
-      Ze("video4", `找不到該物件 -> ${i}`);
+    h(this, at);
+    h(this, Rt);
+    if (!mt(i) && !$e(i) && !gt(i)) {
+      Ve("video4", `找不到該物件 -> ${i}`);
       return;
     }
     this.__storage__ = {
       el: i,
       options: t
-    }, this.active = "data-video-active", d(this, st, qe).call(this);
+    }, this.active = "data-video-active", d(this, st, Oe).call(this);
   }
   update() {
-    d(this, st, qe).call(this);
+    d(this, st, Oe).call(this);
   }
 };
-st = new WeakSet(), qe = function() {
-  const { el: i, options: t } = this.__storage__, { SETTINGS: e, EVENTS: s, LAYOUT: o } = _e;
-  if (t.isGlobal && (X.globalOptions = t), this.elements = t.state == "not active" ? k(i + `:not([${this.active}])`) : k(i), this.options = Object.assign(
+st = new WeakSet(), Oe = function() {
+  const { el: i, options: t } = this.__storage__, { SETTINGS: e, EVENTS: s, LAYOUT: o } = xe;
+  if (t.isGlobal && (X.globalOptions = t), this.elements = t.state == "not active" ? D(i + `:not([${this.active}])`) : D(i), this.options = Object.assign(
     {},
     { LAYOUT: o },
     // 原始 configs 的 LAYOUT
@@ -1172,18 +1172,18 @@ st = new WeakSet(), qe = function() {
   ), this.__events__ = Object.assign({}, s), this.options.on)
     for (const [a, r] of Object.entries(this.options.on))
       this.__events__[a] = [r];
-  d(this, Bt, ji).call(this);
-}, Bt = new WeakSet(), ji = function() {
+  d(this, Wt, Wi).call(this);
+}, Wt = new WeakSet(), Wi = 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, Gt, Bi).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), Ke(e.video.params) && !Zs(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, Wt, zi).call(this, e)), Ke(e.video.params) || Ze("video4", "無法取得影片 ID");
+    e.video = {}, e.video.instance = this, e.video.defaultOptions = t, e.video.params = d(this, Rt, Ri).call(this, e), e.video.methods = {}, e.video.methods.update = this.update, e.setAttribute(this.active, ""), ei(e.video.params) && !Ks(e.video.params) && (e.setAttribute("video4-active", "on"), d(this, Gt, Gi).call(this, e)), ei(e.video.params) || Ve("video4", "無法取得影片 ID");
   }), this.emit("init");
-}, nt = new WeakSet(), Oe = function(i) {
+}, nt = new WeakSet(), Pe = function(i) {
   const { $selector: t, videoId: e, videoType: s, videoInboxImg: o, videoHighQualityPic: a } = i, r = t == null ? void 0 : t.querySelector("img"), l = (r == null ? void 0 : r.getAttribute("src")) || (r == null ? void 0 : r.getAttribute("data-src"));
   return o ? Promise.resolve(o) : l ? Promise.resolve(l) : s == "youtube" ? a == "on" ? Promise.resolve(`https://img.youtube.com/vi/${e}/maxresdefault.jpg`) : Promise.resolve(`https://img.youtube.com/vi/${e}/0.jpg`) : s == "vimeo" ? Promise.resolve(`https://vumbnail.com/${e}_large.jpg`) : s == "tiktok" ? fetch(`https://www.tiktok.com/oembed?url=https://www.tiktok.com/@/video/${e}`, { method: "GET", redirect: "follow" }).then((c) => c.json()).then((c) => c.thumbnail_url).catch(function() {
     return "";
   }) : Promise.resolve("");
-}, ot = new WeakSet(), Pe = function(i, t) {
+}, ot = new WeakSet(), Ne = function(i, t) {
   const { videoType: e, videoId: s } = t;
   if (!(i != null && i.getAttribute("src") || i != null && i.getAttribute("data-src"))) {
     if (e === "video") {
@@ -1196,11 +1196,11 @@ st = new WeakSet(), qe = function() {
       };
       return;
     }
-    d(this, nt, Oe).call(this, t).then((a) => {
+    d(this, nt, Pe).call(this, t).then((a) => {
       a ? i.setAttribute("src", `${a}`) : E("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片");
     });
   }
-}, Wt = new WeakSet(), zi = function(i) {
+}, Gt = new WeakSet(), Gi = function(i) {
   const { LAYOUT: t } = this.options, e = i.video.params, { $selector: s, videoLayoutNo: o, videoId: a, videoType: r, videoMode: l, videoButton: c, videoCover: u, videoHighQualityPic: p } = e;
   if (l === "onBox" || l === "inBox") {
     let g = null;
@@ -1208,7 +1208,7 @@ st = new WeakSet(), qe = function() {
       i.classList.add("video4-cover"), s.querySelector("img") || (s.insertAdjacentHTML(L.prepend, '<picture><source srcset="" type="image/webp"><source srcset="" type="image/jpeg"><img src="" alt></picture>'), E("video4", "若啟用 [videoCover] 且選擇 onBox 模式必須於 video-target 內放置 img 結構，若無結構則自動加入圖片結構"));
       const m = s.querySelector("img"), v = (m == null ? void 0 : m.getAttribute("src")) || (m == null ? void 0 : m.getAttribute("data-src")), w = t[o] ? t[o] : t[0] || "";
       if (w ? m.insertAdjacentHTML(L.after, w) : E("video4", `找不到對應的 LAYOUT 設定 (No: ${o})，且無預設樣式。`), !v)
-        d(this, ot, Pe).call(this, m, e);
+        d(this, ot, Ne).call(this, m, e);
       else if (!v && r == "youtube")
         p == "on" ? m.setAttribute("src", `https://img.youtube.com/vi/${a}/maxresdefault.jpg `) : m.setAttribute("src", `https://img.youtube.com/vi/${a}/0.jpg`);
       else if (!v && r == "vimeo")
@@ -1229,7 +1229,7 @@ st = new WeakSet(), qe = function() {
           console.log("error");
         }) : E("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片");
     }
-    c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || E("video4", `找不到 videoButton 設定的 element -> '${c}' , 點擊物件轉移至 '${this.__storage__.el}'`)), g.video || (g.video = {}, g.video.params = e, g.video.instance = this), g.video.eventHandler = d(this, at, Ne), g.addEventListener("click", g.video.eventHandler);
+    c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || E("video4", `找不到 videoButton 設定的 element -> '${c}' , 點擊物件轉移至 '${this.__storage__.el}'`)), g.video || (g.video = {}, g.video.params = e, g.video.instance = this), g.video.eventHandler = d(this, at, je), g.addEventListener("click", g.video.eventHandler);
   } else if (l === "onPage") {
     let g = null;
     if (u == "on") {
@@ -1242,14 +1242,14 @@ st = new WeakSet(), qe = function() {
         m.setAttribute("src", `${b}`);
       }).catch(function(w) {
         console.log("error");
-      }) : v || E("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片") : d(this, ot, Pe).call(this, m, e), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || E("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
+      }) : v || E("video4", "僅 youtube & vimeo 提供，無圖片時放置預設封面畫面，其他影片平台請自行上傳封面照片") : d(this, ot, Ne).call(this, m, e), c == "off" ? g = s : (g = s.querySelector(c) ?? s, s.querySelector(c) || E("video4", `找不到 videoButton 設定的 element -> '${c}', 點擊物件轉移至 '${this.__storage__.el}'`));
     } else {
-      s.innerHTML = ft(e);
+      s.innerHTML = vt(e);
       return;
     }
-    g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, at, Ne), g.addEventListener("click", g.video.eventHandler);
+    g.video || (g.video = {}, g.video.params = e), g.video.eventHandler = d(this, at, je), g.addEventListener("click", g.video.eventHandler);
   }
-}, at = new WeakSet(), Ne = function(i) {
+}, at = new WeakSet(), je = function(i) {
   const { video: t } = this, e = t.instance, {
     $selector: s,
     videoMode: o,
@@ -1263,7 +1263,7 @@ st = new WeakSet(), qe = function() {
     videoButton: m,
     videoLayoutNo: v,
     videoStartTime: w
-  } = t.params, b = new oi({ callback_loaded: (C) => {
+  } = t.params, b = new li({ callback_loaded: (C) => {
   } }), T = new URLSearchParams({
     video_mode: o,
     video_type: u,
@@ -1276,25 +1276,25 @@ st = new WeakSet(), qe = function() {
       on: {
         complete(y) {
           var S, O;
-          o == "onBox" && (u == "instagram" ? (y.setAttribute("video-typeStyle", `${u}`), (S = window.instgrm) != null && S.Embeds ? (y.querySelector(".modal-content").insertAdjacentHTML("beforeend", Ve(t.params)), window.instgrm.Embeds.process()) : console.log("window.instgrm is undefined")) : (y.querySelector(".modal-content").insertAdjacentHTML("beforeend", ft(t.params)), y.setAttribute("video-typeStyle", `${u}`))), o == "inBox" && (y.setAttribute("video-typeStyle", `${u}`), u == "instagram" && ((O = window.instgrm) != null && O.Embeds ? (y.querySelector(".modal-content").insertAdjacentHTML("beforeend", Ve(t.params)), window.instgrm.Embeds.process()) : console.log("window.instgrm is undefined")));
+          o == "onBox" && (u == "instagram" ? (y.setAttribute("video-typeStyle", `${u}`), (S = window.instgrm) != null && S.Embeds ? (y.querySelector(".modal-content").insertAdjacentHTML("beforeend", ii(t.params)), window.instgrm.Embeds.process()) : console.log("window.instgrm is undefined")) : (y.querySelector(".modal-content").insertAdjacentHTML("beforeend", vt(t.params)), y.setAttribute("video-typeStyle", `${u}`))), o == "inBox" && (y.setAttribute("video-typeStyle", `${u}`), u == "instagram" && ((O = window.instgrm) != null && O.Embeds ? (y.querySelector(".modal-content").insertAdjacentHTML("beforeend", ii(t.params)), window.instgrm.Embeds.process()) : console.log("window.instgrm is undefined")));
         },
         open(y) {
           var O;
           const S = y.querySelectorAll("[data-overlayscrollbars-viewport]");
-          if (b.update(), Pi([...S]), u == "instagram") {
-            const _ = document.querySelector("[video-template] .modal-content");
+          if (b.update(), zi([...S]), u == "instagram") {
+            const k = document.querySelector("[video-template] .modal-content");
             new ResizeObserver((J) => {
-              J[0].contentRect.height > 50 && _.classList.add("active");
-            }).observe(_);
+              J[0].contentRect.height > 50 && k.classList.add("active");
+            }).observe(k);
           }
           if (o == "inBox")
             if (u == "instagram")
               f(".video-content").remove();
             else {
-              let _;
-              const U = y.querySelector(".video-content");
-              d(O = e, nt, Oe).call(O, t.params).then((J) => {
-                _ = `
+              let k;
+              const F = y.querySelector(".video-content");
+              d(O = e, nt, Pe).call(O, t.params).then((J) => {
+                k = `
                     <div
                       class="photo-box"
                       video-target
@@ -1316,9 +1316,9 @@ st = new WeakSet(), qe = function() {
                       />
                       <img src="${J || ""}" alt="" />
                     </picture>
-                  </div>`, U.insertAdjacentHTML(L.prepend, _);
-                const Ue = y.querySelectorAll("[video-target]");
-                Ue.length > 0 && new X(Ue, {
+                  </div>`, F.insertAdjacentHTML(L.prepend, k);
+                const Qe = y.querySelectorAll("[video-target]");
+                Qe.length > 0 && new X(Qe, {
                   LAYOUT: t.params.LAYOUT,
                   videoLayoutNo: t.params.videoLayoutNo
                 });
@@ -1328,7 +1328,7 @@ st = new WeakSet(), qe = function() {
         },
         close(y) {
           const S = y.querySelectorAll("[data-overlayscrollbars-viewport]");
-          Ni([...S]), e == null || e.emit("closeModal");
+          Bi([...S]), e == null || e.emit("closeModal");
         },
         destroy(y) {
         }
@@ -1339,13 +1339,13 @@ st = new WeakSet(), qe = function() {
     if (t.params.videoAutoplay = "on", r == "off") {
       if (s.querySelector("video-player"))
         return;
-      s.innerHTML = ft(t.params);
+      s.innerHTML = vt(t.params);
       return;
     } else {
-      (s.querySelector(r) ?? s).insertAdjacentHTML("beforeend", ft(t.params));
+      (s.querySelector(r) ?? s).insertAdjacentHTML("beforeend", vt(t.params));
       return;
     }
-}, Gt = new WeakSet(), Bi = function(i) {
+}, Rt = new WeakSet(), Ri = function(i) {
   const t = this.options;
   return {
     $selector: i,
@@ -1365,11 +1365,11 @@ st = new WeakSet(), qe = function() {
     videoInboxImg: i.getAttribute("video-inbox-img") || t.videoInboxImgHtml,
     LAYOUT: t.LAYOUT || []
   };
-}, Je(X, "globalOptions", {});
-let Ie = X;
-Object.assign(Ie.prototype, z);
-customElements.define("video-player", Fs);
-const Qs = {
+}, Ke(X, "globalOptions", {});
+let qe = X;
+Object.assign(qe.prototype, z);
+customElements.define("video-player", Js);
+const Vs = {
   "zh-tw": {
     臺北市: [
       ["中正區", "100"],
@@ -2200,8 +2200,8 @@ const Qs = {
   }
 };
 let K;
-const Ks = (n) => {
-  const { TEMPLATE: i } = Ye, { childDom: t } = n.s, e = document.createElement("div"), s = n.classList.contains("filter"), o = n.getAttribute("filter-placeholder"), a = n.getAttribute("d4-icon"), r = n.getAttribute("custom-template");
+const tn = (n) => {
+  const { TEMPLATE: i } = Je, { childDom: t } = n.s, e = document.createElement("div"), s = n.classList.contains("filter"), o = n.getAttribute("filter-placeholder"), a = n.getAttribute("d4-icon"), r = n.getAttribute("custom-template");
   e.innerHTML = i(
     s,
     o,
@@ -2214,7 +2214,7 @@ const Ks = (n) => {
       (!p.hasAttribute("data-option") || p.getAttribute("data-option").trim() === "") && p.setAttribute("data-option", p.textContent.trim());
     }) : (!c.hasAttribute("data-option") || c.getAttribute("data-option").trim() === "") && c.setAttribute("data-option", c.textContent.trim())), l.append(c);
   }), e.children[0];
-}, Vs = (n) => {
+}, en = (n) => {
   var t;
   const i = (t = n.getAttribute("control-elements")) == null ? void 0 : t.split(",");
   i && i.forEach((e) => {
@@ -2222,7 +2222,7 @@ const Ks = (n) => {
     s || E("dropdown", `Can't not find control element(${e})`), s && s.classList.contains("disabled") && (s.classList.remove("disabled"), s.tagName === "DROPDOWN-EL" && s.s.activeLi && I(s, [...s.s.allLi].indexOf(s.s.activeLi)));
   });
 }, I = (n, i) => {
-  const t = n.getAttribute("d4-placeholder"), e = n.querySelectorAll(".dropdown-list li");
+  const t = n.getAttribute("d4-placeholder"), e = n.s.dropdownEl.querySelectorAll(".dropdown-list li");
   if (i < 0 || i.length === 0) {
     switch (e.forEach((s) => {
       s.classList.remove("active");
@@ -2259,7 +2259,7 @@ const Ks = (n) => {
         Array.isArray(i) && n.s.allLi.forEach((r) => {
           i.indexOf([...n.s.allLi].indexOf(r)) >= 0 ? r.classList.add("active") : r.classList.remove("active");
         });
-        const o = n.querySelectorAll(".dropdown-list li.active");
+        const o = n.s.dropdownEl.querySelectorAll(".dropdown-list li.active");
         o.length <= 0 ? n.s.selectDisplayEl.textContent = t.trim() : (n.s.selectDisplayEl.textContent = "", o.forEach((r) => {
           const l = r.getAttribute("data-option"), c = r.textContent.trim(), u = `<div class="option-btn" data-option="${l}"><div class="text">${c}</div><div class="remove-icon"></div></div>`;
           n.s.selectDisplayEl.insertAdjacentHTML(L.append, u);
@@ -2273,40 +2273,42 @@ const Ks = (n) => {
         break;
     }
   }
-}, tn = (n) => {
+}, sn = (n) => {
   const i = n.s.cityLang;
-  f("#newCityData").length > 0 ? f("#newCityData").val() !== "" && (K = JSON.parse(f("#newCityData").val())[0], console.log([0])) : K = Qs, n.classList.contains("city") && (n.s.dropdownEl.querySelector(".dropdown-list").innerHTML = "", Object.keys(K[i]).forEach((t) => {
+  f("#newCityData").length > 0 ? f("#newCityData").val() !== "" && (K = JSON.parse(f("#newCityData").val())[0], console.log([0])) : K = Vs, n.classList.contains("city") && (n.s.dropdownEl.querySelector(".dropdown-list").innerHTML = "", Object.keys(K[i]).forEach((t) => {
     const e = document.createElement("li");
     e.textContent = t, e.setAttribute("data-option", t), n.s.dropdownEl.querySelector(".dropdown-list").append(e);
-  }), n.s.allLi = n.querySelectorAll(".dropdown-list li"));
-}, en = (n, i) => {
+  }), n.s.allLi = n.s.dropdownEl.querySelectorAll(".dropdown-list li"));
+}, nn = (n, i) => {
   const t = n.s.cityLang;
   K[t][i].forEach((e, s) => {
     const o = document.createElement("li");
-    o.textContent = e[0], o.setAttribute("data-option", e[0]), n.querySelector(".dropdown-list").append(o);
+    o.textContent = e[0], o.setAttribute("data-option", e[0]), n.s.dropdownEl.querySelector(".dropdown-list").append(o);
   });
-}, Wi = () => {
-  k('dropdown-el[d4-status="open"]').forEach((i) => {
+}, ze = () => {
+  D('dropdown-el[d4-status="open"]').forEach((i) => {
     i.close();
   });
-}, sn = () => {
-  const { SETTINGS: n } = Ye;
+}, on = () => {
+  const { SETTINGS: n } = Je;
   ((t, e) => {
     Object.keys(e).forEach((s) => {
       t.style.setProperty(`--${s}`, e[s]);
     });
   })(document.documentElement, n.scrollbar);
 };
-sn();
+on();
 document.addEventListener("click", function() {
-  Wi();
+  ze();
 });
-var Rt, Ri, Xt, Xi, Yt, Yi, Ft, Fi;
-class Gi extends HTMLElement {
+var Xt, Ui, Ut, Yi, rt, Be, Yt, Fi, Ft, Ji;
+class Xi extends HTMLElement {
   constructor() {
     super();
-    h(this, Rt);
     h(this, Xt);
+    h(this, Ut);
+    // -** 獨立 dropdown 出 body 更新
+    h(this, rt);
     h(this, Yt);
     h(this, Ft);
     this.initialize = !1;
@@ -2328,13 +2330,13 @@ class Gi extends HTMLElement {
         if (s !== "")
           switch (o.hasAttribute("multiple") ? "multiple" : "single") {
             case "single":
-              const r = o.querySelector(`.dropdown-list li[data-option="${s}"]`);
+              const r = o.s.dropdownEl.querySelector(`.dropdown-list li[data-option="${s}"]`);
               A(r) ? I(o, [...o.s.allLi].indexOf(r)) : I(o, -1);
               break;
             case "multiple":
               const l = [];
-              o.querySelector(".dropdown-list li").classList.remove("active"), s.split(",").forEach((u) => {
-                const p = o.querySelector(`.dropdown-list li[data-option="${u}"]`);
+              o.s.dropdownEl.querySelector(".dropdown-list li").classList.remove("active"), s.split(",").forEach((u) => {
+                const p = o.s.dropdownEl.querySelector(`.dropdown-list li[data-option="${u}"]`);
                 A(p) && (p.classList.add("active"), l.push(p));
               });
               const c = l.map((u) => [...o.s.allLi].indexOf(u));
@@ -2354,20 +2356,37 @@ class Gi extends HTMLElement {
   }
   connectedCallback() {
     const t = this;
-    t.initialize || t.classList.contains("d4-initialize") || (t.initialize = !0, d(this, Rt, Ri).call(this));
+    t.initialize || t.classList.contains("d4-initialize") || (t.initialize = !0, d(this, Xt, Ui).call(this));
+  }
+  disconnectedCallback() {
+    this.s && this.s.dropdownEl && this.s.dropdownEl.parentNode === document.body && document.body.removeChild(this.s.dropdownEl);
   }
   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;
-    return Wi(), t.setAttribute("d4-status", "open"), t.setAttribute("d4-default-height", o()), t.style.cssText = `--maxHeight: ${o()}px;`, t.s.dropdownEl.style.cssText = `
-      height: ${o()}px;
-      z-index: 2;
-    `, this;
+    const t = this;
+    let e;
+    t.getAttribute("d4-portal") == "true" ? (ze(), t.s.dropdownEl.parentNode !== document.body && document.body.appendChild(t.s.dropdownEl), t.__scroller__ || t.__events__.bindScrollbar(), e = t.s.dropdownEl.querySelector(".dropdown-scroller").clientHeight) : e = t.querySelector(".dropdown-scroller").clientHeight;
+    const s = t.classList.contains("filter"), o = () => {
+      if (t.getAttribute("d4-portal") == "true") {
+        if (s)
+          return t.s.dropdownEl.querySelector(".dropdown-scroller .filter-bar") ? e : t.s.dropdownEl.querySelector(".filter-bar").clientHeight + e;
+      } else if (s)
+        return t.querySelector(".dropdown-scroller .filter-bar") ? e : t.querySelector(".filter-bar").clientHeight + e;
+      return e;
+    };
+    return !t.getAttribute("d4-portal") == "true" && ze(), t.setAttribute("d4-status", "open"), t.setAttribute("d4-default-height", o()), t.getAttribute("d4-portal") == "true" ? (t.s.dropdownEl.style.setProperty("--maxHeight", `${o()}px`), t.s.dropdownEl.style.zIndex = "9999", d(this, rt, Be).call(this), t.s.dropdownEl.offsetHeight, t.s.dropdownEl.style.height = `${o()}px`, t.__events__._scrollUpdate = () => {
+      var r;
+      const a = t.getBoundingClientRect();
+      a.bottom < 0 || a.top > window.innerHeight ? t.close() : d(r = t, rt, Be).call(r);
+    }, window.addEventListener("scroll", t.__events__._scrollUpdate, { passive: !0, capture: !0 }), window.addEventListener("resize", t.__events__._scrollUpdate, { passive: !0 })) : (t.style.cssText = `--maxHeight: ${o()}px;`, t.s.dropdownEl.style.cssText = `
+        height: ${o()}px;
+        z-index: 2;
+      `), this;
   }
   close() {
     const t = this, e = t.s.dropdownEl.querySelectorAll(".has-sublayer"), s = parseInt(t.getAttribute("d4-default-height"));
-    return t.setAttribute("d4-status", "close"), t.s.dropdownEl.style.height = "0px", e.forEach((o) => {
+    return t.setAttribute("d4-status", "close"), t.s.dropdownEl.style.height = "0px", t.getAttribute("d4-portal") == "true" && t.__events__._scrollUpdate && (window.removeEventListener("scroll", t.__events__._scrollUpdate, { capture: !0 }), window.removeEventListener("resize", t.__events__._scrollUpdate)), e.forEach((o) => {
       o.classList.remove("open");
-    }), t.style.cssText = `--maxHeight: ${s}px;`, t.s.subDropdownTotalH = 0, t.classList.contains("filter") && t.querySelector(".filter-input") && (t.querySelector(".filter-input").value = "", t.s.allLi.forEach((o) => o.removeAttribute("style"))), this;
+    }), t.getAttribute("d4-portal") == "true" ? t.s.dropdownEl.style.setProperty("--maxHeight", `${s}px`) : t.style.cssText = `--maxHeight: ${s}px;`, t.s.subDropdownTotalH = 0, t.classList.contains("filter") && t.s.dropdownEl.querySelector(".filter-input") && (t.s.dropdownEl.querySelector(".filter-input").value = "", t.s.allLi.forEach((o) => o.removeAttribute("style"))), this;
   }
   scrollTo(t) {
     const e = this, { viewport: s } = e.__scroller__.elements();
@@ -2380,14 +2399,19 @@ class Gi extends HTMLElement {
     this.__events__.selectOption();
   }
 }
-Rt = new WeakSet(), Ri = function() {
-  this.s = {}, this.__events__ = {}, this.hasAttribute("d4-status") || this.setAttribute("d4-status", "close"), this.hasAttribute("d4-value") || this.setAttribute("d4-value", ""), d(this, Xt, Xi).call(this);
-}, Xt = new WeakSet(), Xi = function() {
-  this.s.childDom = this.childNodes, this.s.template = Ks(this), this.innerHTML = "", this.append(this.s.template), d(this, Yt, Yi).call(this);
-}, Yt = new WeakSet(), Yi = function() {
+Xt = new WeakSet(), Ui = function() {
+  this.s = {}, this.__events__ = {}, this.hasAttribute("d4-status") || this.setAttribute("d4-status", "close"), this.hasAttribute("d4-value") || this.setAttribute("d4-value", ""), d(this, Ut, Yi).call(this);
+}, Ut = new WeakSet(), Yi = function() {
+  this.s.childDom = this.childNodes, this.s.template = tn(this), this.innerHTML = "", this.append(this.s.template), this.s.dropdownEl = this.querySelector(".dropdown"), this.getAttribute("d4-portal") === "true" && (this.s.dropdownEl.setAttribute("data-d4-portal", ""), document.body.appendChild(this.s.dropdownEl)), d(this, Yt, Fi).call(this);
+}, rt = new WeakSet(), Be = function() {
+  const t = this, e = t.getBoundingClientRect(), s = t.s.dropdownEl;
+  s.style.position = "fixed", s.style.overflow = "hidden", s.style.left = `${e.left}px`, s.style.width = `${e.width}px`;
+  const o = parseInt(s.style.height) || s.scrollHeight;
+  window.innerHeight - e.bottom < o && e.top > o ? s.style.top = `${e.top - o}px` : s.style.top = `${e.bottom}px`;
+}, Yt = new WeakSet(), Fi = 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", tn(t), t.s.subDropdownTotalH = 0;
+  t.s.allLi = t.s.dropdownEl.querySelectorAll(".dropdown-list li"), t.s.selectDisplayEl = t.querySelector(".select-display"), t.s.selectType = t.hasAttribute("multiple") ? "multiple" : "single", t.s.cityLang = t.hasAttribute("city-lang") ? t.getAttribute("city-lang") : "zh-tw", sn(t), t.s.subDropdownTotalH = 0;
   const e = t.getAttribute("d4-value");
   switch (t.s.selectType) {
     case "single":
@@ -2396,9 +2420,9 @@ Rt = new WeakSet(), Ri = function() {
         const r = document.querySelector(`dropdown-el[dist-select="${t.id}"]`), l = r ? r.getAttribute("d4-value") !== "" : !1;
         if (r && l) {
           const c = r.getAttribute("d4-value");
-          if (en(t, c), t.s.allLi = t.querySelectorAll(".dropdown-list li"), t.classList.remove("disabled"), t.getAttribute("d4-value") !== "") {
+          if (nn(t, c), t.s.allLi = t.s.dropdownEl.querySelectorAll(".dropdown-list li"), t.classList.remove("disabled"), t.getAttribute("d4-value") !== "") {
             const u = e.split(",")[1];
-            o = t.querySelector(`.dropdown-list li[data-option="${u}"]`), t.setAttribute("d4-value", u);
+            o = t.s.dropdownEl.querySelector(`.dropdown-list li[data-option="${u}"]`), t.setAttribute("d4-value", u);
           }
         }
       } else
@@ -2416,7 +2440,7 @@ Rt = new WeakSet(), Ri = function() {
     case "multiple":
       const a = [];
       e.split(",").forEach((r) => {
-        const l = t.querySelector(`.dropdown-list li[data-option="${r}"]`);
+        const l = t.s.dropdownEl.querySelector(`.dropdown-list li[data-option="${r}"]`);
         A(l) && a.push(l);
       }), a.length > 0 ? t.s.value = {
         index: a.map((r) => [...t.s.allLi].indexOf(r)),
@@ -2429,8 +2453,8 @@ Rt = new WeakSet(), Ri = function() {
       };
       break;
   }
-  I(t, t.s.value.index), d(s = t, Ft, Fi).call(s), t.classList.add("d4-initialize");
-}, Ft = new WeakSet(), Fi = function() {
+  I(t, t.s.value.index), d(s = t, Ft, Ji).call(s), t.classList.add("d4-initialize");
+}, Ft = new WeakSet(), Ji = function() {
   const t = this;
   t.__events__.dropdownToggle = () => {
     t.addEventListener("click", function(e) {
@@ -2449,7 +2473,7 @@ Rt = new WeakSet(), Ri = function() {
         const o = t.getAttribute("d4-status"), a = t.classList.contains("filter");
         switch (o) {
           case "open":
-            const r = t.querySelector(".dropdown-scroller"), l = () => {
+            const r = t.s.dropdownEl.querySelector(".dropdown-scroller"), l = () => {
               if (t.__scroller__) {
                 const { viewport: c } = t.__scroller__.elements();
                 if (A(t.s.activeLi)) {
@@ -2465,26 +2489,26 @@ Rt = new WeakSet(), Ri = function() {
                   });
               }
             };
-            a && (t.querySelector(".filter-bar input").disabled = !1, t.querySelector(".filter-bar input").focus()), t.s.selectType === "single" && l();
+            a && (t.s.dropdownEl.querySelector(".filter-bar input").disabled = !1, t.s.dropdownEl.querySelector(".filter-bar input").focus()), t.s.selectType === "single" && l();
             break;
           case "close":
-            t.__scroller__.update(!0), t.s.dropdownEl.removeAttribute("style"), a && (t.querySelector(".filter-bar input").disabled = !0);
+            t.getAttribute("d4-portal") == "true" ? (t.__scroller__ && t.__scroller__.update(!0), t.s.dropdownEl.style.height = "", t.s.dropdownEl.style.zIndex = "", a && (t.s.dropdownEl.querySelector(".filter-bar input").disabled = !0), t.s.dropdownEl.parentNode === document.body && document.body.removeChild(t.s.dropdownEl)) : (t.__scroller__.update(!0), t.s.dropdownEl.removeAttribute("style"), a && (t.querySelector(".filter-bar input").disabled = !0));
             break;
         }
       }
     }
     t.s.dropdownEl.addEventListener("transitionend", e);
   }, t.__events__.bindScrollbar = (e = this) => {
-    const s = e.querySelector(".dropdown-scroller");
-    e.__scroller__ = Xe(s, {
+    const s = e.s.dropdownEl.querySelector(".dropdown-scroller");
+    e.__scroller__ = Fe(s, {
       overflowBehavior: {
         x: "hidden"
       }
     });
   }, t.__events__.selectOption = (e = this) => {
     let s, o;
-    const a = e.querySelector(".dropdown-scroller"), r = e.classList.contains("city");
-    e.s.allLi = e.querySelectorAll(".dropdown-list li"), e.s.allLi.forEach((l) => {
+    const a = e.s.dropdownEl.querySelector(".dropdown-scroller"), r = e.classList.contains("city");
+    e.s.allLi = e.s.dropdownEl.querySelectorAll(".dropdown-list li"), e.s.allLi.forEach((l) => {
       l.addEventListener("click", function(c) {
         var m;
         const u = this, p = [...e.s.allLi].indexOf(u), g = parseInt(e.getAttribute("d4-default-height"));
@@ -2493,7 +2517,7 @@ Rt = new WeakSet(), Ri = function() {
           const v = u.querySelector(".sub-dropdown"), w = v.querySelector(".sub-dropdown-list"), b = parseInt(getComputedStyle(w).marginTop) + parseInt(getComputedStyle(w).marginBottom);
           v.style.cssText = `--height: ${w.offsetHeight + b}px`;
           const T = parseInt(v.style.cssText.replace("--height:", "").trim()), C = parseInt(getComputedStyle(a).maxHeight), y = () => {
-            s = g + e.s.subDropdownTotalH, o = s > C ? C : s, e.style.cssText = `--maxHeight: ${o}px;`, e.s.dropdownEl.style.height = `${o}px`;
+            s = g + e.s.subDropdownTotalH, o = s > C ? C : s, e.getAttribute("d4-portal") == "true" ? e.s.dropdownEl.style.setProperty("--maxHeight", `${o}px`) : e.style.cssText = `--maxHeight: ${o}px;`, e.s.dropdownEl.style.height = `${o}px`;
           };
           u.classList.contains("open") ? (u.classList.remove("open"), e.s.subDropdownTotalH -= T, y()) : (u.classList.add("open"), e.s.subDropdownTotalH += T, y());
           const S = () => {
@@ -2501,16 +2525,16 @@ Rt = new WeakSet(), Ri = function() {
           };
           v.addEventListener("transitionend", S);
         } else
-          switch (Vs(e), e.s.selectType) {
+          switch (en(e), e.s.selectType) {
             case "single":
               if (e.setAttribute("d4-value", u.getAttribute("data-option")), r) {
                 const v = e.s.cityLang, w = l.textContent.trim(), b = document.getElementById(e.getAttribute("dist-select"));
-                b && (b.querySelector(".dropdown-list").textContent = "", I(b, -1), K[v][w].forEach((T, C) => {
+                b && (b.s.dropdownEl.querySelector(".dropdown-list").textContent = "", I(b, -1), K[v][w].forEach((T, C) => {
                   const y = document.createElement("li");
-                  y.textContent = T[0], y.setAttribute("data-option", T[0]), b.querySelector(".dropdown-list").append(y);
+                  y.textContent = T[0], y.setAttribute("data-option", T[0]), e.getAttribute("d4-portal") == "true" ? b.s.dropdownEl.querySelector(".dropdown-list").append(y) : b.querySelector(".dropdown-list").append(y);
                 }), e.__events__.selectOption(b));
               }
-              (m = u.parentNode.closest("li")) != null && m.classList.contains("has-sublayer") && (c.stopPropagation(), e.close());
+              (e.getAttribute("d4-portal") == "true" || (m = u.parentNode.closest("li")) != null && m.classList.contains("has-sublayer")) && (c.stopPropagation(), e.close());
               break;
             case "multiple":
               c.stopPropagation(), u.classList.toggle("active"), I(e, p);
@@ -2519,9 +2543,9 @@ Rt = new WeakSet(), Ri = function() {
       });
     });
   }, t.__events__.filterHandler = () => {
-    t.classList.contains("filter") && (t.querySelector(".filter-bar").addEventListener("click", function(e) {
+    t.classList.contains("filter") && (t.s.dropdownEl.querySelector(".filter-bar").addEventListener("click", function(e) {
       e.stopPropagation();
-    }), t.querySelector(".filter-input").addEventListener("input", function() {
+    }), t.s.dropdownEl.querySelector(".filter-input").addEventListener("input", function() {
       const e = this.value.toUpperCase();
       t.s.allLi.forEach((s) => {
         s.textContent.toUpperCase().includes(e) ? s.removeAttribute("style") : s.style.display = "none";
@@ -2533,7 +2557,7 @@ Rt = new WeakSet(), Ri = function() {
         return;
       if ((e.target.classList.contains("option-btn") ? e.target : e.target.parentElement).contains(e.target) && (e.stopPropagation(), e.target.classList.contains("remove-icon"))) {
         const a = e.target.parentElement.getAttribute("data-option");
-        t.s.dropdownEl.querySelector(`.dropdown-list li[data-option="${a}"]`).classList.remove("active"), t.s.activeLi = t.querySelectorAll(".dropdown-list li.active"), e.target.parentElement.remove();
+        t.s.dropdownEl.querySelector(`.dropdown-list li[data-option="${a}"]`).classList.remove("active"), t.s.activeLi = t.s.dropdownEl.querySelectorAll(".dropdown-list li.active"), e.target.parentElement.remove();
         const r = [...t.s.activeLi];
         t.s.value = r.map((c) => ({
           index: [...t.s.allLi].indexOf(c),
@@ -2544,11 +2568,11 @@ Rt = new WeakSet(), Ri = function() {
         t.setAttribute("d4-value", l.join()), r.length <= 0 && (t.s.selectDisplayEl.textContent = t.getAttribute("d4-placeholder").trim());
       }
     });
-  }, t.__events__.dropdownToggle(), t.__events__.bindScrollbar(), t.__events__.selectOption(), t.__events__.filterHandler(), t.__events__.removeTag(), t.__events__.transitionend();
+  }, t.__events__.dropdownToggle(), t.getAttribute("d4-portal") != "true" && t.__events__.bindScrollbar(), t.__events__.selectOption(), t.__events__.filterHandler(), t.__events__.removeTag(), t.__events__.transitionend();
 };
-Object.assign(Gi.prototype, z);
-customElements.define("dropdown-el", Gi);
-function bt(n) {
+Object.assign(Xi.prototype, z);
+customElements.define("dropdown-el", Xi);
+function yt(n) {
   const i = {};
   return [...n.attributes].forEach((t) => {
     if (t.name.includes("duration-")) {
@@ -2557,10 +2581,10 @@ function bt(n) {
     }
   }), Object.keys(i).length === 0 ? null : i;
 }
-function ti(n) {
-  if (bt(n)) {
+function si(n) {
+  if (yt(n)) {
     let i;
-    const t = Object.keys(bt(n)).map((e) => ({
+    const t = Object.keys(yt(n)).map((e) => ({
       value: e,
       point: e
     }));
@@ -2569,11 +2593,11 @@ function ti(n) {
       const { point: s, value: o } = t[e];
       window.matchMedia(`(max-width: ${o}px)`).matches && (i = s);
     }
-    return i ? Number(bt(n)[i]) : n.s.options.duration;
+    return i ? Number(yt(n)[i]) : n.s.options.duration;
   } else
     return n.s.options.duration;
 }
-function nn(n) {
+function an(n) {
   const { behavior: i, continual: t, gap: e } = n.s.options, s = n.childNodes, o = document.createElement("div"), a = document.createElement("div");
   o.className = "animate-container", a.className = "animate-item", [...s].forEach((l) => {
     a.append(l);
@@ -2640,20 +2664,20 @@ function H(n) {
   }
   return s;
 }
-function on(n) {
+function rn(n) {
   let i;
   return function(t) {
     i && clearTimeout(i), i = setTimeout(n, 200, t);
   };
 }
-var Ut, Ui, Jt, Ji, Zt, Zi, Qt, Qi;
-class an extends HTMLElement {
+var Jt, Zi, Zt, Qi, Qt, Ki, Kt, Vi;
+class ln extends HTMLElement {
   constructor() {
     super();
-    h(this, Ut);
     h(this, Jt);
     h(this, Zt);
     h(this, Qt);
+    h(this, Kt);
     this.initialize = !1;
   }
   static get observedAttributes() {
@@ -2662,7 +2686,7 @@ class an extends HTMLElement {
   attributeChangedCallback(t, e, s) {
   }
   connectedCallback() {
-    this.initialize || (this.initialize = !0, d(this, Ut, Ui).call(this));
+    this.initialize || (this.initialize = !0, d(this, Jt, Zi).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"));
@@ -2671,7 +2695,7 @@ class an extends HTMLElement {
     this.s.animation.pause(), this.s.options.continual && this.s.cloneAnimation.pause();
   }
 }
-Ut = new WeakSet(), Ui = function() {
+Jt = new WeakSet(), Zi = function() {
   const t = {
     direction: this.getAttribute("direction") || M.SETTINGS.direction,
     // up / down / left / right
@@ -2679,7 +2703,7 @@ Ut = new WeakSet(), Ui = function() {
     // normal / alternate / endStop
     duration: Number(this.getAttribute("duration")) || M.SETTINGS.duration,
     // ms
-    durationBreakpoints: bt(this) || M.SETTINGS.durationBreakpoints,
+    durationBreakpoints: yt(this) || M.SETTINGS.durationBreakpoints,
     autoplay: this.getAttribute("autoplay") || M.SETTINGS.autoplay,
     // normal / alternate / endStop
     pauseOnMouseenter: this.getAttribute("pauseOnMouseEnter") ? this.getAttribute("pauseOnMouseEnter") === "true" : M.SETTINGS.pauseOnMouseenter,
@@ -2688,8 +2712,8 @@ Ut = new WeakSet(), Ui = function() {
     // true / false
     gap: Number(this.getAttribute("gap")) || M.SETTINGS.gap
   };
-  this.s = {}, this.s.options = t, this.s.nowDuration = ti(this), nn(this), d(this, Jt, Ji).call(this);
-}, Jt = new WeakSet(), Ji = function() {
+  this.s = {}, this.s.options = t, this.s.nowDuration = si(this), an(this), d(this, Zt, Qi).call(this);
+}, Zt = new WeakSet(), Qi = function() {
   const { direction: t, continual: e, gap: s } = this.s.options;
   switch (t) {
     case "left":
@@ -2701,8 +2725,8 @@ Ut = new WeakSet(), Ui = 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, Zt, Zi).call(this), d(this, Qt, Qi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
-}, Zt = new WeakSet(), Zi = function() {
+  d(this, Qt, Ki).call(this), d(this, Kt, Vi).call(this), e && this.classList.add("continual"), this.classList.add("m4-initialize");
+}, Qt = new WeakSet(), Ki = function() {
   const t = this, { direction: e, behavior: s, duration: o, autoplay: a, pauseOnMouseenter: r, continual: l } = t.s.options;
   let c;
   function u() {
@@ -2767,11 +2791,11 @@ Ut = new WeakSet(), Ui = function() {
   }), t.addEventListener("mouseleave", function() {
     t.s.animation && r && t.s.animation.playState === "paused" && t.play();
   });
-}, Qt = new WeakSet(), Qi = function() {
+}, Kt = new WeakSet(), Vi = function() {
   const t = this;
   function e() {
     const s = t.s.animation.startTime, o = t.s.cloneAnimation ? t.s.cloneAnimation.startTime : null;
-    t.s.nowDuration = ti(t), t.s.animation.cancel(), t.s.cloneAnimation && t.s.cloneAnimation.cancel(), t.s.animation = t.s.animateEl.animate(H(t).animate1, {
+    t.s.nowDuration = si(t), t.s.animation.cancel(), t.s.cloneAnimation && t.s.cloneAnimation.cancel(), t.s.animation = t.s.animateEl.animate(H(t).animate1, {
       duration: t.s.nowDuration,
       iterations: 1 / 0
     }), t.s.animation.startTime = s, t.s.cloneAnimation && (t.s.cloneAnimation = t.s.cloneAnimateEl.animate(H(t).animate2, {
@@ -2780,16 +2804,16 @@ Ut = new WeakSet(), Ui = function() {
       iterations: 1 / 0
     }), t.s.cloneAnimation.startTime = o);
   }
-  window.addEventListener("resize", on(e));
+  window.addEventListener("resize", rn(e));
 };
-customElements.define("marquee-el", an);
-const ei = function(n, i) {
+customElements.define("marquee-el", ln);
+const ni = function(n, i) {
   let t;
   return function(e) {
     t && clearTimeout(t), t = setTimeout(n, 200, e);
   };
 }, x = (n, i) => {
-  if (mt(n)) {
+  if (gt(n)) {
     n.forEach((t) => {
       t.classList.add(i);
     });
@@ -2797,7 +2821,7 @@ const ei = function(n, i) {
   }
   n.classList.add(i);
 }, $ = (n, i) => {
-  if (mt(n)) {
+  if (gt(n)) {
     n.forEach((t) => {
       t.classList.remove(i);
     });
@@ -2805,22 +2829,22 @@ const ei = function(n, i) {
   }
   n.classList.remove(i);
 };
-var Kt, Ki, Vt, Vi, te, ts, rt, je, Y, yt, ee, es;
-class ii {
+var Vt, ts, te, es, ee, is, lt, We, U, wt, ie, ss;
+class oi {
   constructor(i) {
     // 初始化
-    h(this, Kt);
-    // 左右箭頭事件綁定
     h(this, Vt);
-    // 左右拖拉事件綁定
+    // 左右箭頭事件綁定
     h(this, te);
+    // 左右拖拉事件綁定
+    h(this, ee);
     // 卷軸位置判斷
-    h(this, rt);
+    h(this, lt);
     // 隱藏按鈕判斷
-    h(this, Y);
+    h(this, U);
     // 選項事件綁定
-    h(this, ee);
-    this.$element = i, this.option = i.s.option.drag, this._didInitialScroll = !1, d(this, Kt, Ki).call(this);
+    h(this, ie);
+    this.$element = i, this.option = i.s.option.drag, this._didInitialScroll = !1, d(this, Vt, ts).call(this);
   }
   // 更新 active 位置
   update(i = !1) {
@@ -2841,7 +2865,7 @@ class ii {
     s();
   }
 }
-Kt = new WeakSet(), Ki = function() {
+Vt = new WeakSet(), ts = function() {
   var s, o, a, r;
   const i = this;
   if (!i.$element)
@@ -2850,10 +2874,10 @@ Kt = new WeakSet(), Ki = function() {
   let t = !1;
   const e = () => {
     t || (requestAnimationFrame(() => {
-      d(this, rt, je).call(this), d(this, Y, yt).call(this), t = !1;
+      d(this, lt, We).call(this), d(this, U, wt).call(this), t = !1;
     }), t = !0);
   };
-  i.$wrapper.removeEventListener("scroll", e), i.$wrapper.addEventListener("scroll", e), window.removeEventListener("resize", e), window.addEventListener("resize", e), (i.option.draggable || i.$element.s.type == "collapse") && d(s = i, te, ts).call(s), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
+  i.$wrapper.removeEventListener("scroll", e), i.$wrapper.addEventListener("scroll", e), window.removeEventListener("resize", e), window.addEventListener("resize", e), (i.option.draggable || i.$element.s.type == "collapse") && d(s = i, ee, is).call(s), i.option.navigation && i.$element.s.type !== "collapse" && (i.$container.insertAdjacentHTML(
     L.prepend,
     `<div class="navigation">
         <div class="button prev">
@@ -2863,10 +2887,10 @@ Kt = new WeakSet(), Ki = function() {
           <div></div>
         </div>
       </div>`
-  ), i.$button = (o = i.$container) == null ? void 0 : o.querySelectorAll(".button"), d(a = i, Vt, Vi).call(a)), d(r = i, ee, es).call(r), i.update(!0), requestAnimationFrame(() => {
-    d(this, rt, je).call(this), d(this, Y, yt).call(this);
+  ), i.$button = (o = i.$container) == null ? void 0 : o.querySelectorAll(".button"), d(a = i, te, es).call(a)), d(r = i, ie, ss).call(r), i.update(!0), requestAnimationFrame(() => {
+    d(this, lt, We).call(this), d(this, U, wt).call(this);
   });
-}, Vt = new WeakSet(), Vi = function() {
+}, te = new WeakSet(), es = 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({
@@ -2874,13 +2898,13 @@ Kt = new WeakSet(), Ki = function() {
       behavior: "smooth"
     }), setTimeout(() => {
       var r;
-      d(r = i, Y, yt).call(r);
+      d(r = i, U, wt).call(r);
     }, 100);
   };
   e.forEach((o) => {
     o.removeEventListener("click", s), o.addEventListener("click", s);
   });
-}, te = new WeakSet(), ts = function() {
+}, ee = new WeakSet(), is = function() {
   const { $wrapper: i } = this;
   let t = !1, e = !1, s = 0, o = 0;
   const a = function(p) {
@@ -2910,10 +2934,10 @@ Kt = new WeakSet(), Ki = function() {
   i.querySelectorAll("a").forEach((p) => {
     p.removeEventListener("click", u), p.addEventListener("click", u);
   });
-}, rt = new WeakSet(), je = function() {
+}, lt = new WeakSet(), We = function() {
   const { $container: i, $wrapper: t } = this, e = t.scrollWidth - t.clientWidth, s = Math.round(t.scrollLeft);
   e <= 0 || (x(i, "scrollable"), s == 0 ? (x(t, "start"), $(t, "end")) : s + 1 >= e ? ($(t, "start"), x(t, "end")) : (x(t, "center"), $(t, "start"), $(t, "end")));
-}, Y = new WeakSet(), yt = function() {
+}, U = new WeakSet(), wt = function() {
   const { $wrapper: i, $button: t, $element: e } = this;
   if (!t)
     return;
@@ -2935,7 +2959,7 @@ Kt = new WeakSet(), Ki = function() {
     }
     $(a, "hide");
   }) : $(t, "hide");
-}, ee = new WeakSet(), es = function() {
+}, ie = new WeakSet(), ss = function() {
   const { $element: i } = this, t = (s) => {
     if (this.option.selected) {
       const o = s.getAttribute("data-option").trim();
@@ -2949,31 +2973,31 @@ Kt = new WeakSet(), Ki = function() {
     s.removeEventListener("click", e), s.addEventListener("click", e);
   });
 };
-var ie, is, se, ss, ne, ns, oe, os;
-class rn {
+var se, ns, ne, os, oe, as, ae, rs;
+class cn {
   constructor(i) {
     // 初始化
-    h(this, ie);
-    // 隱藏按鈕判斷
     h(this, se);
-    // 展開箭頭事件綁定
+    // 隱藏按鈕判斷
     h(this, ne);
-    // 選項事件綁定
+    // 展開箭頭事件綁定
     h(this, oe);
-    this.$element = i, this.option = i.s.option.collapse, d(this, ie, is).call(this);
+    // 選項事件綁定
+    h(this, ae);
+    this.$element = i, this.option = i.s.option.collapse, d(this, se, ns).call(this);
   }
 }
-ie = new WeakSet(), is = function() {
-  this.$element && (this.$container = this.$element.querySelector(".collapse-container"), this.$wrapper = this.$container.querySelector(".wrapper"), d(this, se, ss).call(this) && d(this, ne, ns).call(this), d(this, oe, os).call(this));
-}, se = new WeakSet(), ss = function() {
+se = new WeakSet(), ns = function() {
+  this.$element && (this.$container = this.$element.querySelector(".collapse-container"), this.$wrapper = this.$container.querySelector(".wrapper"), d(this, ne, os).call(this) && d(this, oe, as).call(this), d(this, ae, rs).call(this));
+}, ne = new WeakSet(), os = function() {
   const i = this.$element.querySelector(".drag-container"), t = i.querySelector(".wrapper");
   return t.scrollWidth - t.clientWidth > 0 ? (i.insertAdjacentHTML(L.append, '<div class="open-collapse"></div>'), this.$button = i.querySelector(".open-collapse"), $(this.$element, "noScrollable"), !0) : (x(this.$element, "noScrollable"), !1);
-}, ne = new WeakSet(), ns = function() {
+}, oe = new WeakSet(), as = 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);
-}, oe = new WeakSet(), os = function() {
+}, ae = new WeakSet(), rs = 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();
@@ -2987,20 +3011,20 @@ ie = new WeakSet(), is = function() {
     s.removeEventListener("click", e), s.addEventListener("click", e);
   });
 };
-const ln = (n) => {
+const dn = (n) => {
   const { type: i, option: t, originalDomString: e } = n.s, s = document.createElement("div");
   return i == "drag" && (s.innerHTML = q.TEMPLATE[i]().trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(L.append, e)), i == "collapse" && (s.innerHTML = q.TEMPLATE[i](t == null ? void 0 : t.collapse).trim(), s.querySelector(".drag-container .wrapper").insertAdjacentHTML(L.append, e), s.querySelector(".collapse-container .wrapper").insertAdjacentHTML(L.append, e)), i == "dropdown" && (s.innerHTML = q.TEMPLATE[i](t == null ? void 0 : t.dropdown).trim(), s.querySelector("dropdown-el").insertAdjacentHTML(L.append, e)), s.children;
 };
-var ae, as, re, rs, lt, ze, F, wt;
-class cn extends HTMLElement {
+var re, ls, le, cs, ct, Ge, Y, Tt;
+class un extends HTMLElement {
   constructor() {
     super();
-    h(this, ae);
     h(this, re);
+    h(this, le);
     // 斷點設定
-    h(this, lt);
+    h(this, ct);
     // check type
-    h(this, F);
+    h(this, Y);
     this.initialize = !1, this.__events__ = {}, this.s = {}, this.s.originalDomString = this.innerHTML.trim().replace(/\n/g, ""), this.previousWidth = window.innerWidth;
   }
   static get observedAttributes() {
@@ -3012,7 +3036,7 @@ class cn extends HTMLElement {
       case "m4-type":
         if (e === null || e === s)
           return;
-        this.s.type = s, d(this, F, wt).call(this);
+        this.s.type = s, d(this, Y, Tt).call(this);
         break;
       case "m4-status":
         if (e === s)
@@ -3029,13 +3053,13 @@ class cn extends HTMLElement {
     }
   }
   connectedCallback() {
-    this.initialize || this.classList.contains("m4-init") || (this.initialize = !0, d(this, ae, as).call(this));
+    this.initialize || this.classList.contains("m4-init") || (this.initialize = !0, d(this, re, ls).call(this));
   }
   update() {
-    d(this, lt, ze).call(this);
+    d(this, ct, Ge).call(this);
   }
 }
-ae = new WeakSet(), as = function() {
+re = new WeakSet(), ls = function() {
   let t = {};
   this.hasAttribute("m4-value") || this.setAttribute("m4-value", ""), this.s.type = this.getAttribute("m4-type") ?? q.SETTINGS.type, this.hasAttribute("m4-option") && (t = this.getAttribute("m4-option") ? JSON.parse(this.getAttribute("m4-option")) : {}, this.removeAttribute("m4-option"));
   const e = (s) => {
@@ -3046,84 +3070,84 @@ ae = new WeakSet(), as = function() {
     }
     this.update();
   };
-  window.removeEventListener("resize", ei(e)), window.addEventListener("resize", ei(e)), this.s.option = {}, this.s.option.drag = Object.assign({}, q.SETTINGS.drag, t == null ? void 0 : t.drag), this.s.option.collapse = Object.assign({}, q.SETTINGS.collapse, t == null ? void 0 : t.collapse), this.s.option.dropdown = Object.assign({}, q.SETTINGS.dropdown, t == null ? void 0 : t.dropdown), this.s.option.breakpoint = Object.assign({}, q.SETTINGS.breakpoint, t == null ? void 0 : t.breakpoint), d(this, re, rs).call(this);
-}, re = new WeakSet(), rs = function() {
-  this.classList.add("m4-init"), d(this, lt, ze).call(this);
-}, lt = new WeakSet(), ze = function() {
+  window.removeEventListener("resize", ni(e)), window.addEventListener("resize", ni(e)), this.s.option = {}, this.s.option.drag = Object.assign({}, q.SETTINGS.drag, t == null ? void 0 : t.drag), this.s.option.collapse = Object.assign({}, q.SETTINGS.collapse, t == null ? void 0 : t.collapse), this.s.option.dropdown = Object.assign({}, q.SETTINGS.dropdown, t == null ? void 0 : t.dropdown), this.s.option.breakpoint = Object.assign({}, q.SETTINGS.breakpoint, t == null ? void 0 : t.breakpoint), d(this, le, cs).call(this);
+}, le = new WeakSet(), cs = function() {
+  this.classList.add("m4-init"), d(this, ct, Ge).call(this);
+}, ct = new WeakSet(), Ge = function() {
   const t = Object.keys(this.s.option.breakpoint);
   if (!t.length) {
-    d(this, F, wt).call(this);
+    d(this, Y, Tt).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, F, wt).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, Y, Tt).call(this), window.innerWidth >= e;
   });
-}, F = new WeakSet(), wt = function() {
+}, Y = new WeakSet(), Tt = function() {
   var o;
   const { type: t } = this.s;
-  this.innerHTML = "", [...ln(this)].forEach((a) => {
+  this.innerHTML = "", [...dn(this)].forEach((a) => {
     this.append(a);
   });
   const e = this.querySelector(`.drag-container .item[data-option="${this.getAttribute("m4-status")}"]`), s = this.querySelector(`.collapse-container .item[data-option="${this.getAttribute("m4-status")}"]`);
   switch (e == null || e.classList.add("active"), s == null || s.classList.add("active"), t) {
     case "drag":
-      this.drag = new ii(this);
+      this.drag = new oi(this);
       break;
     case "collapse":
-      this.drag = new ii(this), this.collapse = new rn(this);
+      this.drag = new oi(this), this.collapse = new cn(this);
       break;
   }
   (o = this.drag) == null || o.update();
 };
-customElements.define("multipurpose-nav", cn);
-var le, cs, ce, ds, ct, Be, W, Z, de, us, ue, hs, he, ps, pe, ms, me, gs, ge, fs, fe, vs, ve, bs, be, ys, N, R, ye, ws, we, Ts, Te, Es, Ee, As;
-class ls extends HTMLElement {
+customElements.define("multipurpose-nav", un);
+var ce, us, de, hs, dt, Re, W, Z, ue, ps, he, ms, pe, gs, me, fs, ge, vs, fe, bs, ve, ys, be, ws, ye, Ts, N, R, we, Es, Te, As, Ee, Ls, Ae, Ss;
+class ds extends HTMLElement {
   // 定義組件的初始狀態
   constructor(t, e) {
     super();
-    h(this, le);
     h(this, ce);
+    h(this, de);
     // 第一關 判斷數量以及id設定
-    h(this, ct);
+    h(this, dt);
     // 第二關 id命名提醒
     h(this, W);
-    h(this, de);
     h(this, ue);
     h(this, he);
+    h(this, pe);
     // 執行函式
     // 移動至指定位置
-    h(this, pe);
-    // 移動
     h(this, me);
-    // 步驟狀態
+    // 移動
     h(this, ge);
-    // next 按鈕狀態
+    // 步驟狀態
     h(this, fe);
-    // prev 按鈕狀態
+    // next 按鈕狀態
     h(this, ve);
-    // 頁籤狀態
+    // prev 按鈕狀態
     h(this, be);
+    // 頁籤狀態
+    h(this, ye);
     // 第三關各種元件判斷 及 執行
     h(this, N);
     // 消失動畫
-    h(this, ye);
-    // 出現動畫
     h(this, we);
-    // 狀態
+    // 出現動畫
     h(this, Te);
-    // resize
+    // 狀態
     h(this, Ee);
+    // resize
+    h(this, Ae);
   }
   // 當組件的屬性被更改時會被呼叫
   static get observedAttributes() {
     return ["t4-active"];
   }
   attributeChangedCallback(t, e, s) {
-    t === "t4-active" && e !== s && d(this, Te, Es).call(this, s);
+    t === "t4-active" && e !== s && d(this, Ee, Ls).call(this, s);
   }
   connectedCallback() {
-    this.classList.contains("t4-initialize") || d(this, le, cs).call(this);
+    this.classList.contains("t4-initialize") || d(this, ce, us).call(this);
   }
   //  ------------- 我是分隔線呦 -------------
   // 頁籤切換
@@ -3139,7 +3163,7 @@ class ls extends HTMLElement {
     e.activeTab = s, this.setAttribute("t4-active", s);
     const o = d(this, W, Z).call(this, s);
     e.tabPanels.forEach((a, r) => {
-      r === o ? d(this, we, Ts).call(this, r) : d(this, ye, ws).call(this, r);
+      r === o ? d(this, Te, As).call(this, r) : d(this, we, Es).call(this, r);
     });
   }
   // 外部呼叫方法 $0.goNext()
@@ -3154,11 +3178,11 @@ class ls extends HTMLElement {
   }
   // 外部呼叫方法 $0.update()
   update() {
-    this.t.tabs = d(this, ct, Be).call(this), Ls(), console.log("tab update!!!!");
+    this.t.tabs = d(this, dt, Re).call(this), _s(), console.log("tab update!!!!");
   }
 }
-le = new WeakSet(), cs = function() {
-  const t = this.getAttribute("t4-name"), { SETTINGS: e } = ri;
+ce = new WeakSet(), us = function() {
+  const t = this.getAttribute("t4-name"), { SETTINGS: e } = di;
   document.querySelectorAll(`tab-el[t4-name=${t}]`).length > 1 && console.warn(t, "名字有重複喔！！！"), this.t = {
     tabs: [],
     name: t,
@@ -3177,14 +3201,14 @@ le = new WeakSet(), cs = function() {
       delay: this.getAttribute("t4-delay") || e.transition.delay
     },
     tabGroup: this.getAttribute("t4-group") || e.tabGroup
-  }, this.__events__ = {}, this.t.tabs = d(this, ct, Be).call(this), this.t.step = document.querySelector(`[t4-control="${this.t.name}"]${this.t.stepOutput}`), d(this, ce, ds).call(this);
-}, ce = new WeakSet(), ds = function() {
-  if (this.t.activeTab = this.t.defaultPage, this.t.display === "swiper" && d(this, de, us).call(this), this.t.recordUrl) {
+  }, this.__events__ = {}, this.t.tabs = d(this, dt, Re).call(this), this.t.step = document.querySelector(`[t4-control="${this.t.name}"]${this.t.stepOutput}`), d(this, de, hs).call(this);
+}, de = new WeakSet(), hs = function() {
+  if (this.t.activeTab = this.t.defaultPage, this.t.display === "swiper" && d(this, ue, ps).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, Ee, As).call(this);
-}, ct = new WeakSet(), Be = function() {
+  this.setActiveTab(this.t.activeTab), this.classList.add("t4-initialize"), d(this, Ae, Ss).call(this);
+}, dt = new WeakSet(), Re = 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) => {
     s.getAttribute("t4-id") || console.warn(s, "請幫我設定id！！");
@@ -3194,19 +3218,19 @@ le = new WeakSet(), cs = function() {
   s.length > 1 && console.warn("有兩個相同id設定", s);
   const o = s[0];
   return o ? e.tabPanels.indexOf(o) : (console.warn(`找不到t4-id為${t}的頁籤`), 0);
-}, de = new WeakSet(), us = function() {
+}, ue = new WeakSet(), ps = 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, ue, hs).call(this);
-}, ue = new WeakSet(), hs = function() {
+  }), this.t.tabPanels = [...e.children], t.appendChild(e), this.innerHTML = "", this.appendChild(t), d(this, he, ms).call(this);
+}, he = new WeakSet(), ms = 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;
-}, he = new WeakSet(), ps = function(t) {
+}, pe = new WeakSet(), gs = function(t) {
   const { t: e } = this;
   if (e.recordUrl === "true") {
     const s = new URLSearchParams(document.location.search);
@@ -3214,28 +3238,28 @@ le = new WeakSet(), cs = function() {
     const o = `${window.location.pathname}?${s.toString()}`;
     history.replaceState({ t4Id: t }, "", o);
   }
-}, pe = new WeakSet(), ms = function() {
+}, me = new WeakSet(), fs = function() {
   const t = parseInt(this.t.gap, 10), e = window.pageYOffset, o = this.getBoundingClientRect().top + e - t;
-  d(this, me, gs).call(this, o);
-}, me = new WeakSet(), gs = function(t) {
+  d(this, ge, vs).call(this, o);
+}, ge = new WeakSet(), vs = function(t) {
   window.scrollTo({
     top: t,
     behavior: "smooth"
   });
-}, ge = new WeakSet(), fs = function(t) {
+}, fe = new WeakSet(), bs = function(t) {
   let e = parseInt(t, 10) + 1;
   this.t.step.textContent = `${e}`, this.t.step.setAttribute("now-page", e);
-}, fe = new WeakSet(), vs = function(t) {
+}, ve = new WeakSet(), ys = 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");
   });
-}, ve = new WeakSet(), bs = function(t) {
+}, be = new WeakSet(), ws = 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");
   });
-}, be = new WeakSet(), ys = function(t, e) {
+}, ye = new WeakSet(), Ts = 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) => {
@@ -3244,25 +3268,25 @@ le = new WeakSet(), cs = function() {
 }, N = new WeakSet(), R = function(t, e, s) {
   switch (t) {
     case "step":
-      xe(this.t.step) && d(this, ge, fs).call(this, e);
+      $e(this.t.step) && d(this, fe, bs).call(this, e);
       break;
     case "eventAnchor":
-      this.t.anchor && d(this, pe, ms).call(this);
+      this.t.anchor && d(this, me, fs).call(this);
       break;
     case "tabState":
-      this.t.type == "normal" && d(this, be, ys).call(this, e, s);
+      this.t.type == "normal" && d(this, ye, Ts).call(this, e, s);
       break;
     case "btnState":
-      d(this, fe, vs).call(this, e), d(this, ve, bs).call(this, e);
+      d(this, ve, ys).call(this, e), d(this, be, ws).call(this, e);
       break;
     case "tabUrl":
-      this.t.recordUrl === "true" && d(this, he, ps).call(this, e);
+      this.t.recordUrl === "true" && d(this, pe, gs).call(this, e);
       break;
     default:
       console.warn("請增加判斷，謝謝");
       break;
   }
-}, ye = new WeakSet(), ws = function(t) {
+}, we = new WeakSet(), Es = function(t) {
   const { t: e } = this;
   this.t.transition;
   const s = e.tabPanels[t];
@@ -3279,7 +3303,7 @@ le = new WeakSet(), cs = function() {
       s.style.display = "none";
       break;
   }
-}, we = new WeakSet(), Ts = function(t) {
+}, Te = 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) {
@@ -3304,25 +3328,25 @@ le = new WeakSet(), cs = function() {
       console.warn(this.t.display, "沒有這個效果請自己想辦法!!!!");
       break;
   }
-}, Te = new WeakSet(), Es = function(t) {
+}, Ee = new WeakSet(), Ls = function(t) {
   const e = d(this, W, Z).call(this, t);
   d(this, N, R).call(this, "step", e), d(this, N, R).call(this, "btnState", e), d(this, N, R).call(this, "tabState", e, t), d(this, N, R).call(this, "tabUrl", t), this.emit("change");
-}, Ee = new WeakSet(), As = function() {
+}, Ae = new WeakSet(), Ss = function() {
   const t = this;
   window.addEventListener(
     "resize",
-    dn(() => {
+    hn(() => {
       t.update();
     }, 1e3)
   );
 };
-function dn(n, i = 1e3) {
+function hn(n, i = 1e3) {
   let t;
   return function(e) {
     t && clearTimeout(t), t = setTimeout(n, i, e);
   };
 }
-function Ls() {
+function _s() {
   const n = document.querySelectorAll("[t4-control]");
   document.addEventListener("click", function(i) {
     let t = !1;
@@ -3352,91 +3376,91 @@ function Ls() {
     }
   });
 }
-Ls();
-Object.assign(ls.prototype, z);
-customElements.define("tab-el", ls);
-const si = (n) => {
+_s();
+Object.assign(ds.prototype, z);
+customElements.define("tab-el", ds);
+const ai = (n) => {
   const { defaultOptions: i } = n.collapse, { collapseClass: t, target: e, transition: s } = i, o = n.querySelector(e);
   n.classList.add(t), o.style.height = 0, 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";
-}, un = (n) => {
+}, pn = (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 dt, We, Ae, Ss, Le, Ds, ut, Ge;
-class hn {
+var ut, Xe, Le, Ds, Se, ks, ht, Ue;
+class mn {
   constructor(i, t = {}) {
-    h(this, dt);
-    h(this, Ae);
-    h(this, Le);
     h(this, ut);
-    !pt(i) && !xe(i) && !mt(i) && !A(i) || (this.__storage__ = {
+    h(this, Le);
+    h(this, Se);
+    h(this, ht);
+    !mt(i) && !$e(i) && !gt(i) && !A(i) || (this.__storage__ = {
       el: i,
       options: t
-    }, this.active = "data-collapse-active", d(this, dt, We).call(this));
+    }, this.active = "data-collapse-active", d(this, ut, Xe).call(this));
   }
   update() {
-    d(this, dt, We).call(this);
+    d(this, ut, Xe).call(this);
   }
 }
-dt = new WeakSet(), We = function() {
-  const { el: i, options: t } = this.__storage__, { SETTINGS: e, EVENTS: s } = li;
-  if (this.elements = t.state == "not active" ? k(i + `:not([${this.active}])`) : k(i), this.options = Object.assign({}, e, t), this.__events__ = Object.assign({}, s), this.options.on)
+ut = new WeakSet(), Xe = function() {
+  const { el: i, options: t } = this.__storage__, { SETTINGS: e, EVENTS: s } = ui;
+  if (this.elements = t.state == "not active" ? D(i + `:not([${this.active}])`) : D(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, Ae, Ss).call(this);
-}, Ae = new WeakSet(), Ss = function() {
+  d(this, Le, Ds).call(this);
+}, Le = 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, Le, Ds).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, Se, ks).call(this, e);
   }), this.emit("init");
-}, Le = new WeakSet(), Ds = function(i) {
+}, Se = new WeakSet(), ks = 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, ut, Ge)), c.addEventListener("click", d(this, ut, Ge)), r) {
+  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, ht, Ue)), c.addEventListener("click", d(this, ht, Ue)), r) {
     const p = (g) => {
       g.stopPropagation();
     };
     u.removeEventListener("click", p), u.addEventListener("click", p);
   }
-}, ut = new WeakSet(), Ge = function() {
+}, ht = new WeakSet(), Ue = function() {
   const { instance: i, defaultOptions: t } = this.collapse, { collapseClass: e, block: s, target: o, single: a } = t, r = this;
   r.classList.contains(e) ? (a && r.parentNode.querySelectorAll(`.${r.classList[0]}`).forEach((l) => {
-    si(l);
-  }), un(r)) : si(r), i.emit("afterCollapse");
+    ai(l);
+  }), pn(r)) : ai(r), i.emit("afterCollapse");
 };
-Object.assign(hn.prototype, z);
-function pn(n, i) {
+Object.assign(mn.prototype, z);
+function gn(n, i) {
   const t = i, { color: e, opacity: s, duration: o } = i.s.options;
   let a = document.createElement("span"), r = n.clientX - t.getBoundingClientRect().left, l = n.clientY - t.getBoundingClientRect().top;
   a.style.cssText = `background: ${e};left: ${r}px;top: ${l}px;opacity: ${s};animation-duration: ${o}ms`, a.classList.add("circle"), t.appendChild(a), setTimeout(function() {
     a.remove();
   }, `${o}`);
 }
-function ks() {
+function xs() {
   document.querySelectorAll("ripple-btn").forEach((n) => {
     n.querySelector(".hover-ball"), n.style.setProperty("--r", ""), n.classList.remove("entered");
   });
 }
-document.addEventListener("click", ks);
-var ht, Re, Se, _s, De, xs, ke, $s;
-class mn extends HTMLElement {
+document.addEventListener("click", xs);
+var pt, Ye, _e, $s, De, Cs, ke, Hs;
+class fn extends HTMLElement {
   constructor() {
     super();
-    h(this, ht);
-    h(this, Se);
+    h(this, pt);
+    h(this, _e);
     h(this, De);
     h(this, ke);
     this.initialize = !1;
   }
   connectedCallback() {
     const t = this;
-    t.initialize || t.classList.contains("r4-initialize") || (t.initialize = !0, d(this, ht, Re).call(this));
+    t.initialize || t.classList.contains("r4-initialize") || (t.initialize = !0, d(this, pt, Ye).call(this));
   }
   update() {
-    this.classList.remove("r4-initialize"), this.querySelector("i.hover-ball").remove(), d(this, ht, Re).call(this);
+    this.classList.remove("r4-initialize"), this.querySelector("i.hover-ball").remove(), d(this, pt, Ye).call(this);
   }
 }
-ht = new WeakSet(), Re = function() {
-  const { SETTINGS: t } = ci;
+pt = new WeakSet(), Ye = function() {
+  const { SETTINGS: t } = hi;
   this.s = {};
   function e(o) {
     let a = !!o;
@@ -3450,20 +3474,20 @@ ht = new WeakSet(), Re = 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, Se, _s).call(this);
-}, Se = new WeakSet(), _s = function() {
-  d(this, De, xs).call(this), d(this, ke, $s).call(this), this.classList.add("r4-initialize");
-}, De = new WeakSet(), xs = function() {
+  this.s.options = s, this.s.options.hover && this.classList.add("hover-btn"), d(this, _e, $s).call(this);
+}, _e = new WeakSet(), $s = function() {
+  d(this, De, Cs).call(this), d(this, ke, Hs).call(this), this.classList.add("r4-initialize");
+}, De = new WeakSet(), Cs = function() {
   const t = this, e = document.createElement("i");
   e.classList.add("hover-ball"), e.style.transitionDuration = `${t.s.options.speed}ms`, t.appendChild(e);
-}, ke = new WeakSet(), $s = function() {
+}, ke = new WeakSet(), Hs = function() {
   const t = this.querySelector("i.hover-ball"), e = this;
   e.addEventListener("click", function(a) {
-    a.stopPropagation(), e.s.options.click && pn(a, e);
+    a.stopPropagation(), e.s.options.click && gn(a, e);
   });
   let s = "ontouchstart" in document.documentElement ? "touchstart" : "mouseenter", o = "ontouchend" in document.documentElement ? "touchend" : "mouseleave";
   e.addEventListener(s, function(a) {
-    if (s === "touchstart" && ks(), e.s.options.hover) {
+    if (s === "touchstart" && xs(), e.s.options.hover) {
       const r = Math.round(s === "mouseenter" ? a.clientX - e.getBoundingClientRect().left : a.changedTouches[0].clientX - e.getBoundingClientRect().x), l = Math.round(s === "mouseenter" ? a.clientY - e.getBoundingClientRect().top : a.changedTouches[0].clientY - e.getBoundingClientRect().y), { offsetWidth: c, offsetHeight: u } = e, p = Math.max(c, u);
       t.style.width = p * 2 + "px", t.style.height = p * 2 + "px", t.style.left = r + "px", t.style.top = l + "px", e.classList.add("entered");
     }
@@ -3474,8 +3498,8 @@ ht = new WeakSet(), Re = function() {
     }
   });
 };
-customElements.define("ripple-btn", mn);
-class gn {
+customElements.define("ripple-btn", fn);
+class vn {
   constructor() {
     this.init();
   }
@@ -3527,12 +3551,12 @@ class gn {
     this.init();
   }
 }
-function ni(n, i) {
+function ri(n, i) {
   return n ? function(t, e) {
     Function(n)(t, e);
   } : i;
 }
-function fn(n, i, t, e) {
+function bn(n, i, t, e) {
   const s = i.params, o = n.closest("[data-upload-item]").querySelector("[data-preview]");
   o.querySelector("img") && o.querySelector("img").remove(), o.appendChild(e.imgElement);
   const a = n.dataset.group, r = document.querySelector(i.el).dataset.index;
@@ -3555,7 +3579,7 @@ function fn(n, i, t, e) {
       info: e
     }, s.on.changeAfter && typeof s.on.changeAfter == "function" && s.on.changeAfter(n, e);
 }
-function vn(n, i, t, e) {
+function yn(n, i, t, e) {
   const s = document.createElement("canvas"), o = s.getContext("2d"), a = i.width, l = i.height / a * 100, c = e / t * 100;
   let u = 0, p = 0;
   switch (s.width = t, s.height = e, n.previewSize) {
@@ -3569,14 +3593,14 @@ function vn(n, i, t, e) {
   const g = (s.width - u) * 0.5, m = (s.height - p) * 0.5;
   return o.drawImage(i, g, m, u, p), s;
 }
-function bn(n, i) {
+function wn(n, i) {
   return new Promise((t, e) => {
     if (i) {
       const s = new Image();
       s.src = i, s.classList.add(n.previewSize), s.onload = () => {
         let o = {
           imgElement: s,
-          originalCanvas: vn(n, s, s.width, s.height),
+          originalCanvas: yn(n, s, s.width, s.height),
           info: {
             originalWidth: s.width,
             originalHeight: s.height,
@@ -3589,31 +3613,31 @@ function bn(n, i) {
       t();
   });
 }
-function yn(n, i) {
+function Tn(n, i) {
   const t = Math.pow(10, i);
   return Math.round(n * t) / t;
 }
-function wn(n, i) {
+function En(n, i) {
   let t = n.size / 1024 / 1024;
-  return `${yn(t, 2)}` <= i;
+  return `${Tn(t, 2)}` <= i;
 }
-function Tn(n, i, t) {
+function An(n, i, t) {
   if (n.target.files.length <= 0)
     return;
   const e = n.target.files[0], s = i.closest("[data-upload-item]");
   let o = new FileReader();
   o.onload = (a) => {
     const r = e.type.split("/")[0] === "image" ? a.target.result : null;
-    if (t.params.sizeLimit && !wn(e, t.params.sizeLimit)) {
+    if (t.params.sizeLimit && !En(e, t.params.sizeLimit)) {
       i.value = "", s.classList.add("over-limit"), t.params.on.overLimit && typeof t.params.on.overLimit == "function" && t.params.on.overLimit(i, t.params.sizeLimit);
       return;
     } else
-      s.classList.remove("over-limit"), s.classList.add("uploaded"), bn(t.params, r).then((l) => {
-        fn(i, t, e, l);
+      s.classList.remove("over-limit"), s.classList.add("uploaded"), wn(t.params, r).then((l) => {
+        bn(i, t, e, l);
       });
   }, o.readAsDataURL(e);
 }
-class En {
+class Ln {
   constructor(i, t) {
     const e = this;
     e.el = i, e.params = {
@@ -3641,67 +3665,67 @@ class En {
         previewSize: e.dataset.previewSize || i.params.previewSize,
         compress: e.dataset.compress || i.params.compress,
         on: {
-          changeAfter: ni(e.dataset.changeAfter, i.params.on.changeAfter),
-          overLimit: ni(e.dataset.overLimit, i.params.on.overLimit)
+          changeAfter: ri(e.dataset.changeAfter, i.params.on.changeAfter),
+          overLimit: ri(e.dataset.overLimit, i.params.on.overLimit)
         }
       };
       i.params = o, typeof uploadImage[`${o.group}`] > "u" && (uploadImage[`${o.group}`] = []), e.dataset.group || (e.dataset.group = o.group), e.dataset.index = document.querySelectorAll(`[data-group="${o.group}"]`).length - 1, e.addEventListener("change", function(a) {
-        Tn(a, e, i);
+        An(a, e, i);
       });
     }));
   }
 }
 export {
-  di as A,
-  Nn as B,
-  hn as C,
-  Gi as D,
-  jn as E,
-  zn as F,
-  Bn as G,
-  Wn as H,
-  gn as I,
-  Gn as J,
-  Rn as K,
-  Xn as L,
+  pi as A,
+  zn as B,
+  mn as C,
+  Xi as D,
+  Bn as E,
+  Wn as F,
+  Gn as G,
+  Rn as H,
+  vn as I,
+  Xn as J,
+  Un as K,
+  Yn as L,
   V as M,
-  Yn as N,
-  Fn as O,
-  Un as P,
-  Jn as Q,
-  mn as R,
-  Zn as S,
-  ls as T,
-  Qn as U,
-  Kn as V,
-  Vn as W,
-  to as X,
-  eo as Y,
+  Fn as N,
+  Jn as O,
+  Zn as P,
+  Qn as Q,
+  fn as R,
+  Kn as S,
+  ds as T,
+  Vn as U,
+  to as V,
+  eo as W,
+  io as X,
+  so as Y,
   A as a,
-  mt as b,
-  Ns as c,
-  Ps as d,
-  _e as e,
+  gt as b,
+  zs as c,
+  js as d,
+  xe as e,
   L as f,
-  k as g,
-  Cn as h,
-  pt as i,
-  Li as j,
-  an as k,
-  cn as l,
-  En as m,
-  Js as n,
-  io as o,
-  Pi as p,
-  Ni as q,
-  Hn as r,
-  Os as s,
-  Mn as t,
-  In as u,
-  Ie as v,
-  Us as w,
-  qn as x,
-  On as y,
-  Pn as z
+  D as g,
+  Mn as h,
+  mt as i,
+  Di as j,
+  ln as k,
+  un as l,
+  Ln as m,
+  Qs as n,
+  no as o,
+  zi as p,
+  Bi as q,
+  In as r,
+  Ns as s,
+  qn as t,
+  On as u,
+  qe as v,
+  Zs as w,
+  Pn as x,
+  Nn as y,
+  jn as z
 };
 //# sourceMappingURL=image-preview-bundle.js.map