@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js

@@ -1,373 +1,545 @@
 import './NmorphMediaGallery.css';
-import g from "./NmorphMediaGallery.vue2.js";
-import { openBlock as a, createElementBlock as l, Fragment as s, renderList as y, normalizeClass as f, createElementVNode as c, createBlock as d, createVNode as r, withCtx as n, createCommentVNode as i, toDisplayString as h, withModifiers as m, normalizeStyle as v } from "vue";
-/* empty css                        */
-import I from "../../../_virtual/_plugin-vue_export-helper.js";
-const k = {
-  key: 0,
-  class: "nmorph-media-gallery__trigger"
-}, N = ["aria-label", "onClick"], b = ["src", "poster", "title"], w = {
+import { defineComponent as Ze, ref as k, computed as s, watch as E, onBeforeUnmount as We, openBlock as i, createElementBlock as u, Fragment as me, normalizeStyle as fe, normalizeClass as pe, renderList as je, createElementVNode as x, createBlock as B, unref as l, createVNode as r, withCtx as d, createCommentVNode as v, toDisplayString as D, withModifiers as $ } from "vue";
+import { useModifiers as he } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Je } from "../../../utils/common.js";
+import Qe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+/* empty css                                                */
+import ge from "../nmorph-image/NmorphImage.vue.js";
+/* empty css                               */
+import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import ea from "../../../assets/icons/eye.svg.js";
+import _e from "../../../assets/icons/full-screen.svg.js";
+import M from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import ye from "../../../assets/icons/play.svg.js";
+import ke from "../../../assets/icons/download.svg.js";
+import aa from "../../../assets/icons/pause.svg.js";
+import ta from "../../../assets/icons/rotate-right.svg.js";
+import la from "../../../assets/icons/rotate-left.svg.js";
+import oa from "../../../assets/icons/zoom-in.svg.js";
+import na from "../../../assets/icons/zoom-out.svg.js";
+import ra from "../../../assets/icons/enlarge.svg.js";
+import ia from "../../../assets/icons/shrink.svg.js";
+const sa = ["aria-label", "onClick"], ua = ["src", "poster", "title"], da = {
   key: 2,
   class: "nmorph-media-gallery__trigger-play"
-}, p = {
+}, ca = {
   key: 3,
   class: "nmorph-media-gallery__trigger-name"
-}, P = {
+}, va = {
   key: 4,
   class: "nmorph-media-gallery__trigger-size"
-}, z = {
+}, ma = {
   key: 0,
   class: "nmorph-media-gallery__trigger-actions"
-}, C = ["aria-label", "onClick"], H = ["aria-label", "onClick"], D = ["href", "download", "aria-label", "onClick"], L = { class: "nmorph-media-gallery__stage" }, S = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], B = ["aria-label"], V = {
+}, fa = ["aria-label", "onClick"], pa = ["aria-label", "onClick"], ha = ["href", "download", "aria-label", "onClick"], ga = { class: "nmorph-media-gallery__stage" }, _a = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], ya = ["aria-label"], ka = {
   key: 3,
   class: "nmorph-media-gallery__file-name"
-}, E = {
+}, wa = {
   key: 4,
   class: "nmorph-media-gallery__file-actions"
-}, F = ["aria-label"], x = ["href", "download", "aria-label"], R = {
+}, ba = ["aria-label"], Ia = ["href", "download", "aria-label"], Na = {
   key: 5,
   class: "nmorph-media-gallery__file-size"
-}, M = { class: "nmorph-media-gallery__action-element" }, A = { class: "nmorph-media-gallery__action-element" }, O = { class: "nmorph-media-gallery__action-element" }, T = { class: "nmorph-media-gallery__action-element" }, u = { class: "nmorph-media-gallery__action-element" };
-function G(U, Z, j, o, q, J) {
-  return a(), l(
-    s,
-    null,
-    [
-      o.props.showTrigger ? (a(), l("div", k, [
-        (a(!0), l(
-          s,
-          null,
-          y(o.sourceList, (e, t) => (a(), l(
-            "div",
-            {
-              key: `${e.kind}-${e.src}-${t}`,
-              class: f(["nmorph-media-gallery__trigger-item", `nmorph-media-gallery__trigger-item--${e.kind}`])
-            },
-            [
-              c("button", {
-                type: "button",
-                class: "nmorph-media-gallery__trigger-open",
-                "aria-label": `Open ${o.getItemLabel(e, t)}`,
-                onClick: (_) => o.openPreviewAt(t)
-              }, [
-                e.kind === "image" ? (a(), d(o.NmorphImage, {
-                  key: 0,
-                  src: e.src,
-                  alt: e.alt || o.getItemLabel(e, t),
-                  title: o.getItemName(e),
-                  fit: "cover",
-                  "frame-border": 0
-                }, null, 8, ["src", "alt", "title"])) : (a(), l("video", {
-                  key: 1,
-                  ref_for: !0,
-                  ref: (_) => o.setTriggerVideoRef(t, _),
-                  class: "nmorph-media-gallery__trigger-video",
-                  src: e.src,
-                  poster: e.poster || void 0,
-                  muted: "",
-                  playsinline: "",
-                  preload: "metadata",
-                  title: o.getItemName(e)
-                }, null, 8, b)),
-                e.kind === "video" ? (a(), l("span", w, [
-                  r(o.NmorphIcon, {
-                    size: "medium",
-                    color: "var(--nmorph-contrast-text-color)"
-                  }, {
-                    default: n(() => [
-                      r(o.NmorphIconPlay)
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ])) : i("v-if", !0),
-                o.getItemName(e) ? (a(), l(
-                  "span",
-                  p,
-                  h(o.getItemName(e)),
-                  1
-                  /* TEXT */
-                )) : i("v-if", !0),
-                o.getItemSize(e) ? (a(), l(
-                  "span",
-                  P,
-                  h(o.getItemSize(e)),
-                  1
-                  /* TEXT */
-                )) : i("v-if", !0)
-              ], 8, N),
-              o.getItemDownloadHref(e) || e.kind === "video" ? (a(), l("div", z, [
-                e.kind === "video" ? (a(), l("button", {
-                  key: 0,
-                  type: "button",
-                  class: "nmorph-media-gallery__trigger-action",
-                  "aria-label": `Preview ${o.getItemLabel(e, t)}`,
-                  onClick: m((_) => o.openPreviewAt(t), ["stop"])
-                }, [
-                  r(o.NmorphIcon, {
-                    size: "small",
-                    color: "var(--nmorph-contrast-text-color)"
-                  }, {
-                    default: n(() => [
-                      r(o.NmorphIconEye)
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ], 8, C)) : i("v-if", !0),
-                e.kind === "video" ? (a(), l("button", {
-                  key: 1,
-                  type: "button",
-                  class: "nmorph-media-gallery__trigger-action",
-                  "aria-label": `Fullscreen ${o.getItemLabel(e, t)}`,
-                  onClick: m((_) => o.triggerFullscreenHandler(e, t), ["stop"])
-                }, [
-                  r(o.NmorphIcon, {
-                    size: "small",
-                    color: "var(--nmorph-contrast-text-color)"
-                  }, {
-                    default: n(() => [
-                      r(o.NmorphIconFullScreen)
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ], 8, H)) : i("v-if", !0),
-                o.getItemDownloadHref(e) ? (a(), l("a", {
-                  key: 2,
-                  href: o.getItemDownloadHref(e),
-                  download: o.getItemName(e) || void 0,
-                  class: "nmorph-media-gallery__trigger-action",
-                  "aria-label": `Download ${o.getItemLabel(e, t)}`,
-                  onClick: m((_) => o.downloadItemHandler(e, t), ["stop"])
-                }, [
-                  r(o.NmorphIcon, {
-                    size: "small",
-                    color: "var(--nmorph-contrast-text-color)"
-                  }, {
-                    default: n(() => [
-                      r(o.NmorphIconDownload)
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  })
-                ], 8, D)) : i("v-if", !0)
-              ])) : i("v-if", !0)
-            ],
-            2
-            /* CLASS */
-          ))),
-          128
-          /* KEYED_FRAGMENT */
-        ))
-      ])) : i("v-if", !0),
-      o.open ? (a(), d(o.NmorphPreviewPortal, {
+}, xa = { class: "nmorph-media-gallery__action-element" }, Ba = { class: "nmorph-media-gallery__action-element" }, Fa = { class: "nmorph-media-gallery__action-element" }, Ca = { class: "nmorph-media-gallery__action-element" }, Pa = { class: "nmorph-media-gallery__action-element" }, $a = 45, we = 0.25, Qa = /* @__PURE__ */ Ze({
+  __name: "NmorphMediaGallery",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    items: {},
+    initialIndex: { default: 0 },
+    activeIndex: { default: void 0 },
+    zIndex: { default: void 0 },
+    height: { default: void 0 },
+    showTrigger: { type: Boolean, default: !1 },
+    showTriggerName: { type: Boolean, default: !0 },
+    showTriggerSize: { type: Boolean, default: !0 },
+    showTriggerActions: { type: Boolean, default: !0 },
+    showTriggerPlayButton: { type: Boolean, default: !0 },
+    showNavigationButtons: { type: Boolean, default: !0 },
+    showActionBar: { type: Boolean, default: !0 },
+    showFileName: { type: Boolean, default: !0 },
+    showFileSize: { type: Boolean, default: !0 },
+    showFileActions: { type: Boolean, default: !0 },
+    showPlaybackButton: { type: Boolean, default: !0 },
+    imageFit: { default: "contain" },
+    videoFit: { default: "contain" }
+  },
+  emits: ["update:model-value", "update:active-index", "close", "change", "download", "fullscreen"],
+  setup(be, { emit: Ie }) {
+    const n = be, _ = Ie, w = k(n.modelValue), F = k(0), h = k(null), X = k({}), V = k(null), m = k(!1), b = k(!1), I = k(1), y = k(0), C = k(null), g = s(() => n.items || []), Y = s(() => g.value.length > 1), G = s(() => n.showNavigationButtons && Y.value), P = (e) => {
+      const t = g.value.length - 1;
+      return t < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > t ? t : e;
+    }, N = s(() => P(F.value)), o = s(() => g.value[N.value]), Z = s(() => o.value?.kind === "image"), z = s(() => o.value?.kind === "video"), W = s(
+      () => o.value?.kind === "video" ? o.value.controls !== !1 : !1
+    ), Ne = s(() => o.value?.kind === "video" ? o.value.muted === !0 : !1), xe = s(
+      () => o.value?.kind === "video" ? o.value.playsinline !== !1 : !0
+    ), j = s(
+      () => o.value?.kind === "video" && o.value.preload || "metadata"
+    ), Be = s(
+      () => n.showPlaybackButton && j.value === "metadata" ? "auto" : j.value
+    ), R = s(
+      () => o.value?.kind === "video" && o.value.name || "video"
+    ), A = s(() => o.value?.name || ""), J = s(() => n.showFileName ? A.value : ""), K = s(() => o.value?.downloadHref || ""), Fe = s(() => n.showPlaybackButton && z.value && b.value), Q = s(() => n.showFileActions && z.value && !W.value), Ce = s(
+      () => n.showFileActions && (Q.value || !!K.value)
+    ), Pe = s(
+      () => he({
+        "nmorph-media-gallery": [
+          w.value && "opened",
+          Z.value && "image",
+          z.value && "video",
+          m.value && z.value && "video-playing",
+          n.imageFit === "cover" && Z.value && "image-cover",
+          n.videoFit === "cover" && z.value && "video-cover"
+        ]
+      })
+    ), $e = s(() => `rotate(${y.value}deg) scale(${I.value})`), Ve = s(
+      () => Je({
+        "--nmorph-media-gallery-trigger-height": n.height
+      })
+    ), ze = s(
+      () => he({
+        "nmorph-media-gallery__trigger": [n.height !== void 0 && "fixed-height"]
+      })
+    ), ee = (e) => {
+      if (e === void 0 || Number.isNaN(e) || e < 0) return "";
+      if (e === 0) return "0 B";
+      const t = ["B", "KB", "MB", "GB", "TB"], a = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), c = e / 1024 ** a, f = c >= 10 || a === 0 || Number.isInteger(c) ? 0 : 1;
+      return `${c.toFixed(f)} ${t[a]}`;
+    }, ae = s(() => n.showFileSize ? ee(o.value?.size) : ""), H = (e) => e.name || "", S = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, te = (e) => ee(e.size), O = (e) => e.downloadHref || "", He = (e, t) => {
+      X.value[e] = t instanceof HTMLVideoElement ? t : null;
+    };
+    E(
+      () => n.modelValue,
+      (e) => {
+        w.value = e;
+      }
+    ), E(
+      () => n.activeIndex,
+      (e) => {
+        typeof e == "number" && (F.value = P(e));
+      },
+      { immediate: !0 }
+    ), E(
+      () => [n.initialIndex, g.value.length],
+      () => {
+        typeof n.activeIndex != "number" && (F.value = P(n.initialIndex));
+      },
+      { immediate: !0 }
+    ), E(
+      () => [o.value?.kind, o.value?.src, N.value],
+      () => {
+        m.value = !1, b.value = !1, V.value = null;
+      }
+    );
+    const T = () => {
+      !h.value || h.value === V.value || (h.value.pause(), m.value = !1, V.value = h.value);
+    }, le = () => {
+      I.value = 1, y.value = 0;
+    }, oe = (e) => {
+      if (!g.value.length) return;
+      const t = P(e);
+      if (t === N.value) return;
+      T(), m.value = !1, b.value = !1, F.value = t, le(), _("update:active-index", t);
+      const a = g.value[t];
+      a && _("change", a, t);
+    }, q = () => {
+      const e = g.value.length;
+      e && oe(N.value === 0 ? e - 1 : N.value - 1);
+    }, U = () => {
+      const e = g.value.length;
+      e && oe(N.value === e - 1 ? 0 : N.value + 1);
+    }, ne = (e) => {
+      if (!g.value.length) return;
+      const t = P(e);
+      T(), m.value = !1, b.value = !1, F.value = t, le(), w.value = !0, _("update:model-value", !0), _("update:active-index", t);
+      const a = g.value[t];
+      a && _("change", a, t);
+    }, re = () => {
+      w.value && (T(), w.value = !1, _("update:model-value", !1), _("close"));
+    }, Se = () => {
+      y.value = y.value + 90, y.value >= 360 && (y.value = 0);
+    }, Le = () => {
+      y.value = y.value - 90, y.value <= -360 && (y.value = 0);
+    }, Ee = () => {
+      I.value = parseFloat(Math.min(I.value + 0.2, 4).toFixed(3));
+    }, Me = () => {
+      I.value = parseFloat(Math.max(I.value - 0.2, 0.2).toFixed(3));
+    }, Te = () => {
+      I.value = 1;
+    }, De = async () => {
+      if (!(!h.value || !b.value)) {
+        if (m.value) {
+          h.value.pause();
+          return;
+        }
+        try {
+          await h.value.play();
+        } catch {
+          m.value = !1;
+        }
+      }
+    }, ie = async (e) => {
+      if (e)
+        try {
+          const t = e.requestFullscreen?.() || e.webkitRequestFullscreen?.();
+          if (t) {
+            await t;
+            return;
+          }
+          e.webkitEnterFullscreen?.();
+        } catch {
+        }
+    }, Re = async () => {
+      !o.value || o.value.kind !== "video" || (_("fullscreen", o.value, N.value), await ie(h.value));
+    }, Ae = async (e, t) => {
+      e.kind === "video" && (_("fullscreen", e, t), await ie(X.value[t]));
+    }, se = (e, t) => {
+      _("download", e, t);
+    }, Ke = () => {
+      o.value && se(o.value, N.value);
+    }, Oe = () => {
+      m.value = !0, V.value = null;
+    }, qe = (e) => {
+      const t = e.duration;
+      if (!Number.isFinite(t) || t <= 0) return !1;
+      const a = e.buffered, c = Math.max(0, t - we);
+      for (let f = 0; f < a.length; f += 1)
+        try {
+          if (a.start(f) <= we && a.end(f) >= c) return !0;
+        } catch {
+          return !1;
+        }
+      return !1;
+    }, L = () => {
+      b.value = h.value ? qe(h.value) : !1;
+    }, Ue = () => {
+      m.value = !1;
+    }, Xe = () => {
+      m.value = !1;
+    }, Ye = () => {
+      m.value = !1, b.value = !1;
+    }, ue = (e) => {
+      if (w.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+        if (e.key === "Escape") {
+          e.preventDefault(), re();
+          return;
+        }
+        Y.value && (e.key === "ArrowLeft" && (e.preventDefault(), q()), e.key === "ArrowRight" && (e.preventDefault(), U()));
+      }
+    }, Ge = () => {
+      typeof document > "u" || document.addEventListener("keydown", ue);
+    }, de = () => {
+      typeof document > "u" || document.removeEventListener("keydown", ue);
+    };
+    E(
+      w,
+      (e) => {
+        e ? (Ge(), V.value = null, b.value = !1, F.value = P(
+          typeof n.activeIndex == "number" ? n.activeIndex : n.initialIndex
+        )) : (T(), m.value = !1, b.value = !1, de());
+      },
+      { immediate: !0 }
+    ), We(de);
+    const ce = (e) => {
+      C.value = { x: e.clientX, y: e.clientY };
+    }, ve = (e) => {
+      if (!C.value || !G.value) {
+        C.value = null;
+        return;
+      }
+      const t = e.clientX - C.value.x, a = e.clientY - C.value.y;
+      C.value = null, !(Math.abs(t) < $a || Math.abs(t) < Math.abs(a) * 1.2) && (t > 0 ? q() : U());
+    };
+    return (e, t) => (i(), u(me, null, [
+      n.showTrigger ? (i(), u("div", {
+        key: 0,
+        class: pe(ze.value),
+        style: fe(Ve.value)
+      }, [
+        (i(!0), u(me, null, je(g.value, (a, c) => (i(), u("div", {
+          key: `${a.kind}-${a.src}-${c}`,
+          class: pe(["nmorph-media-gallery__trigger-item", `nmorph-media-gallery__trigger-item--${a.kind}`])
+        }, [
+          x("button", {
+            type: "button",
+            class: "nmorph-media-gallery__trigger-open",
+            "aria-label": `Open ${S(a, c)}`,
+            onClick: (f) => ne(c)
+          }, [
+            a.kind === "image" ? (i(), B(l(ge), {
+              key: 0,
+              src: a.src,
+              alt: a.alt || S(a, c),
+              title: H(a),
+              fit: "cover",
+              "frame-border": 0
+            }, null, 8, ["src", "alt", "title"])) : (i(), u("video", {
+              key: 1,
+              ref_for: !0,
+              ref: (f) => He(c, f),
+              class: "nmorph-media-gallery__trigger-video",
+              src: a.src,
+              poster: a.poster || void 0,
+              muted: "",
+              playsinline: "",
+              preload: "metadata",
+              title: H(a)
+            }, null, 8, ua)),
+            n.showTriggerPlayButton && a.kind === "video" ? (i(), u("span", da, [
+              r(l(p), {
+                size: "medium",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: d(() => [
+                  r(l(ye))
+                ]),
+                _: 1
+              })
+            ])) : v("", !0),
+            n.showTriggerName && H(a) ? (i(), u("span", ca, D(H(a)), 1)) : v("", !0),
+            n.showTriggerSize && te(a) ? (i(), u("span", va, D(te(a)), 1)) : v("", !0)
+          ], 8, sa),
+          n.showTriggerActions && (O(a) || a.kind === "video") ? (i(), u("div", ma, [
+            a.kind === "video" ? (i(), u("button", {
+              key: 0,
+              type: "button",
+              class: "nmorph-media-gallery__trigger-action",
+              "aria-label": `Preview ${S(a, c)}`,
+              onClick: $((f) => ne(c), ["stop"])
+            }, [
+              r(l(p), {
+                size: "small",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: d(() => [
+                  r(l(ea))
+                ]),
+                _: 1
+              })
+            ], 8, fa)) : v("", !0),
+            a.kind === "video" ? (i(), u("button", {
+              key: 1,
+              type: "button",
+              class: "nmorph-media-gallery__trigger-action",
+              "aria-label": `Fullscreen ${S(a, c)}`,
+              onClick: $((f) => Ae(a, c), ["stop"])
+            }, [
+              r(l(p), {
+                size: "small",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: d(() => [
+                  r(l(_e))
+                ]),
+                _: 1
+              })
+            ], 8, pa)) : v("", !0),
+            O(a) ? (i(), u("a", {
+              key: 2,
+              href: O(a),
+              download: H(a) || void 0,
+              class: "nmorph-media-gallery__trigger-action",
+              "aria-label": `Download ${S(a, c)}`,
+              onClick: $((f) => se(a, c), ["stop"])
+            }, [
+              r(l(p), {
+                size: "small",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: d(() => [
+                  r(l(ke))
+                ]),
+                _: 1
+              })
+            ], 8, ha)) : v("", !0)
+          ])) : v("", !0)
+        ], 2))), 128))
+      ], 6)) : v("", !0),
+      w.value ? (i(), B(Qe, {
         key: 1,
-        show: o.open,
-        "z-index": o.props.zIndex,
-        "state-class": o.modifiers,
+        show: w.value,
+        "z-index": n.zIndex,
+        "state-class": Pe.value,
         "content-class": "nmorph-media-gallery__content",
         "left-class": "nmorph-media-gallery__left",
         "right-class": "nmorph-media-gallery__right",
         "actions-class": "nmorph-media-gallery__actions",
-        "show-navigation": o.showNavigation,
-        "show-action-bar": o.props.showActionBar && o.currentItem?.kind === "image",
-        onClose: o.closeHandler,
-        onPrevious: o.previousHandler,
-        onNext: o.nextHandler
+        "show-navigation": G.value,
+        "show-action-bar": n.showActionBar && o.value?.kind === "image",
+        onClose: re,
+        onPrevious: q,
+        onNext: U
       }, {
-        actions: n(() => [
-          c("div", M, [
-            r(o.NmorphButton, { onClick: o.rotateRight }, {
-              default: n(() => [
-                r(o.NmorphIcon, null, {
-                  default: n(() => [
-                    r(o.NmorphIconRotateRight)
+        actions: d(() => [
+          x("div", xa, [
+            r(l(M), { onClick: Se }, {
+              default: d(() => [
+                r(l(p), null, {
+                  default: d(() => [
+                    r(l(ta))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
               ]),
               _: 1
-              /* STABLE */
             })
           ]),
-          c("div", A, [
-            r(o.NmorphButton, { onClick: o.rotateLeft }, {
-              default: n(() => [
-                r(o.NmorphIcon, null, {
-                  default: n(() => [
-                    r(o.NmorphIconRotateLeft)
+          x("div", Ba, [
+            r(l(M), { onClick: Le }, {
+              default: d(() => [
+                r(l(p), null, {
+                  default: d(() => [
+                    r(l(la))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
               ]),
               _: 1
-              /* STABLE */
             })
           ]),
-          c("div", O, [
-            r(o.NmorphButton, { onClick: o.zoomIn }, {
-              default: n(() => [
-                r(o.NmorphIcon, null, {
-                  default: n(() => [
-                    r(o.NmorphIconZoomIn)
+          x("div", Fa, [
+            r(l(M), { onClick: Ee }, {
+              default: d(() => [
+                r(l(p), null, {
+                  default: d(() => [
+                    r(l(oa))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
               ]),
               _: 1
-              /* STABLE */
             })
           ]),
-          c("div", T, [
-            r(o.NmorphButton, { onClick: o.zoomOut }, {
-              default: n(() => [
-                r(o.NmorphIcon, null, {
-                  default: n(() => [
-                    r(o.NmorphIconZoomOut)
+          x("div", Ca, [
+            r(l(M), { onClick: Me }, {
+              default: d(() => [
+                r(l(p), null, {
+                  default: d(() => [
+                    r(l(na))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
               ]),
               _: 1
-              /* STABLE */
             })
           ]),
-          c("div", u, [
-            r(o.NmorphButton, {
-              disabled: o.scaleLevel === 1,
-              onClick: o.toggleNormalSize
+          x("div", Pa, [
+            r(l(M), {
+              disabled: I.value === 1,
+              onClick: Te
             }, {
-              default: n(() => [
-                r(o.NmorphIcon, null, {
-                  default: n(() => [
-                    o.scaleLevel < 1 ? (a(), d(o.NmorphIconEnlarge, { key: 0 })) : (a(), d(o.NmorphIconShrink, { key: 1 }))
+              default: d(() => [
+                r(l(p), null, {
+                  default: d(() => [
+                    I.value < 1 ? (i(), B(l(ra), { key: 0 })) : (i(), B(l(ia), { key: 1 }))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
               ]),
               _: 1
-              /* STABLE */
             }, 8, ["disabled"])
           ])
         ]),
-        default: n(() => [
-          c("div", L, [
-            o.currentItem?.kind === "image" ? (a(), d(o.NmorphImage, {
+        default: d(() => [
+          x("div", ga, [
+            o.value?.kind === "image" ? (i(), B(l(ge), {
               key: 0,
-              src: o.currentItem.src,
-              alt: o.currentItem.alt || o.currentItem.name || "",
-              title: o.currentItem.name,
-              fit: o.props.imageFit,
+              src: o.value.src,
+              alt: o.value.alt || o.value.name || "",
+              title: o.value.name,
+              fit: n.imageFit,
               "frame-border": 0,
-              style: v({ transform: o.imageTransform }),
-              onPointerdown: o.pointerDownHandler,
-              onPointerup: o.pointerUpHandler
-            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (a(), l("video", {
+              style: fe({ transform: $e.value }),
+              onPointerdown: ce,
+              onPointerup: ve
+            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.value?.kind === "video" ? (i(), u("video", {
               key: 1,
-              ref: "currentVideoRef",
+              ref_key: "currentVideoRef",
+              ref: h,
               class: "nmorph-media-gallery__video",
-              src: o.currentItem.src,
-              poster: o.currentItem.poster || void 0,
-              controls: o.videoControls,
-              muted: o.videoMuted,
-              playsinline: o.videoPlaysinline,
-              preload: o.videoPreload,
-              title: o.currentItem.name,
-              onPointerdown: o.pointerDownHandler,
-              onPointerup: o.pointerUpHandler,
-              onPlay: o.videoPlayHandler,
-              onPause: o.videoPauseHandler,
-              onEnded: o.videoEndedHandler,
-              onError: o.videoErrorHandler
-            }, null, 40, S)) : i("v-if", !0),
-            o.currentItem?.kind === "video" ? (a(), l("button", {
+              src: o.value.src,
+              poster: o.value.poster || void 0,
+              controls: W.value,
+              muted: Ne.value,
+              playsinline: xe.value,
+              preload: Be.value,
+              title: o.value.name,
+              onPointerdown: ce,
+              onPointerup: ve,
+              onLoadedmetadata: L,
+              onDurationchange: L,
+              onProgress: L,
+              onCanplaythrough: L,
+              onSuspend: L,
+              onPlay: Oe,
+              onPause: Ue,
+              onEnded: Xe,
+              onError: Ye
+            }, null, 40, _a)) : v("", !0),
+            Fe.value ? (i(), u("button", {
               key: 2,
               class: "nmorph-media-gallery__play",
               type: "button",
-              "aria-label": o.videoPlaying ? `Pause ${o.currentVideoName}` : `Play ${o.currentVideoName}`,
-              onClick: m(o.toggleVideoPlayback, ["stop"])
+              "aria-label": m.value ? `Pause ${R.value}` : `Play ${R.value}`,
+              onClick: $(De, ["stop"])
             }, [
-              r(o.NmorphIcon, {
+              r(l(p), {
                 size: "medium",
                 color: "var(--nmorph-contrast-text-color)"
               }, {
-                default: n(() => [
-                  o.videoPlaying ? (a(), d(o.NmorphIconPause, { key: 0 })) : (a(), d(o.NmorphIconPlay, { key: 1 }))
+                default: d(() => [
+                  m.value ? (i(), B(l(aa), { key: 0 })) : (i(), B(l(ye), { key: 1 }))
                 ]),
                 _: 1
-                /* STABLE */
               })
-            ], 8, B)) : i("v-if", !0),
-            o.currentName ? (a(), l(
-              "span",
-              V,
-              h(o.currentName),
-              1
-              /* TEXT */
-            )) : i("v-if", !0),
-            o.currentDownloadHref || o.currentItem?.kind === "video" ? (a(), l("div", E, [
-              o.currentItem?.kind === "video" ? (a(), l("button", {
+            ], 8, ya)) : v("", !0),
+            J.value ? (i(), u("span", ka, D(J.value), 1)) : v("", !0),
+            Ce.value ? (i(), u("div", wa, [
+              Q.value ? (i(), u("button", {
                 key: 0,
                 type: "button",
                 class: "nmorph-media-gallery__file-action",
-                "aria-label": `Fullscreen ${o.currentVideoName}`,
-                onClick: m(o.fullscreenHandler, ["stop"])
+                "aria-label": `Fullscreen ${R.value}`,
+                onClick: $(Re, ["stop"])
               }, [
-                r(o.NmorphIcon, {
+                r(l(p), {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: n(() => [
-                    r(o.NmorphIconFullScreen)
+                  default: d(() => [
+                    r(l(_e))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
-              ], 8, F)) : i("v-if", !0),
-              o.currentDownloadHref ? (a(), l("a", {
+              ], 8, ba)) : v("", !0),
+              K.value ? (i(), u("a", {
                 key: 1,
-                href: o.currentDownloadHref,
-                download: o.currentName || void 0,
+                href: K.value,
+                download: A.value || void 0,
                 class: "nmorph-media-gallery__file-action",
-                "aria-label": `Download ${o.currentName || "media"}`,
-                onClick: m(o.downloadHandler, ["stop"])
+                "aria-label": `Download ${A.value || "media"}`,
+                onClick: $(Ke, ["stop"])
               }, [
-                r(o.NmorphIcon, {
+                r(l(p), {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: n(() => [
-                    r(o.NmorphIconDownload)
+                  default: d(() => [
+                    r(l(ke))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
-              ], 8, x)) : i("v-if", !0)
-            ])) : i("v-if", !0),
-            o.currentSize ? (a(), l(
-              "span",
-              R,
-              h(o.currentSize),
-              1
-              /* TEXT */
-            )) : i("v-if", !0)
+              ], 8, Ia)) : v("", !0)
+            ])) : v("", !0),
+            ae.value ? (i(), u("span", Na, D(ae.value), 1)) : v("", !0)
           ])
         ]),
         _: 1
-        /* STABLE */
-      }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : i("v-if", !0)
-    ],
-    64
-    /* STABLE_FRAGMENT */
-  );
-}
-const Y = /* @__PURE__ */ I(g, [["render", G], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
+      }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : v("", !0)
+    ], 64));
+  }
+});
 export {
-  Y as default
+  Qa as default
 };