@nmorph/nmorph-ui-kit 2.2.56 → 2.2.58

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

@@ -1,498 +1,362 @@
 import './NmorphMediaGallery.css';
-import { defineComponent as Xe, ref as k, computed as s, watch as z, onBeforeUnmount as Ye, openBlock as i, createElementBlock as u, Fragment as ve, normalizeStyle as me, normalizeClass as fe, renderList as Ge, createElementVNode as b, createBlock as A, unref as n, createVNode as r, withCtx as c, createCommentVNode as v, toDisplayString as M, withModifiers as P } from "vue";
-import { useModifiers as ge } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Ue } from "../../../utils/common.js";
-import Ze from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
-/* empty css                                                */
-import pe from "../nmorph-image/NmorphImage.vue.js";
-/* empty css                               */
-import f from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-/* empty css                                      */
-import We from "../../../assets/icons/eye.svg.js";
-import he from "../../../assets/icons/full-screen.svg.js";
-import H from "../../basic/nmorph-button/NmorphButton.vue.js";
-/* empty css                                          */
-import je from "../../../assets/icons/play.svg.js";
-import _e from "../../../assets/icons/download.svg.js";
-import Je from "../../../assets/icons/rotate-right.svg.js";
-import Qe from "../../../assets/icons/rotate-left.svg.js";
-import eo from "../../../assets/icons/zoom-in.svg.js";
-import oo from "../../../assets/icons/zoom-out.svg.js";
-import to from "../../../assets/icons/enlarge.svg.js";
-import ao from "../../../assets/icons/shrink.svg.js";
-const lo = ["aria-label", "onClick"], no = ["src", "poster", "title"], ro = {
+import y from "./NmorphMediaGallery.vue2.js";
+import { openBlock as l, createElementBlock as a, Fragment as s, normalizeStyle as g, normalizeClass as f, renderList as v, createElementVNode as c, createBlock as m, createVNode as e, withCtx as n, createCommentVNode as i, toDisplayString as h, withModifiers as _ } from "vue";
+/* empty css                        */
+import I from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
   key: 2,
   class: "nmorph-media-gallery__trigger-play"
-}, io = {
+}, b = {
   key: 3,
   class: "nmorph-media-gallery__trigger-name"
-}, so = {
+}, p = {
   key: 4,
   class: "nmorph-media-gallery__trigger-size"
-}, uo = {
+}, z = {
   key: 0,
   class: "nmorph-media-gallery__trigger-actions"
-}, co = ["aria-label", "onClick"], vo = ["aria-label", "onClick"], mo = ["href", "download", "aria-label", "onClick"], fo = { class: "nmorph-media-gallery__stage" }, go = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], po = {
+}, C = ["aria-label", "onClick"], P = ["aria-label", "onClick"], H = ["href", "download", "aria-label", "onClick"], F = { class: "nmorph-media-gallery__stage" }, S = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], D = {
   key: 2,
   class: "nmorph-media-gallery__file-name"
-}, ho = {
+}, L = {
   key: 3,
   class: "nmorph-media-gallery__file-actions"
-}, _o = ["aria-label"], yo = ["href", "download", "aria-label"], wo = {
+}, B = ["aria-label"], T = ["href", "download", "aria-label"], A = {
   key: 4,
   class: "nmorph-media-gallery__file-size"
-}, ko = { class: "nmorph-media-gallery__action-element" }, Io = { class: "nmorph-media-gallery__action-element" }, bo = { class: "nmorph-media-gallery__action-element" }, Fo = { class: "nmorph-media-gallery__action-element" }, No = { class: "nmorph-media-gallery__action-element" }, Bo = 45, Uo = /* @__PURE__ */ Xe({
-  __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 },
-    showTriggerPreviewAction: { type: Boolean, default: !0 },
-    showTriggerFullscreenAction: { type: Boolean, default: !0 },
-    showTriggerDownloadAction: { 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(ye, { emit: we }) {
-    const l = ye, g = we, _ = k(l.modelValue), F = k(0), N = k(null), K = k({}), C = k(null), p = k(!1), y = k(1), h = k(0), B = k(null), m = s(() => l.items || []), q = s(() => m.value.length > 1), O = s(() => l.showNavigationButtons && q.value), x = (e) => {
-      const t = m.value.length - 1;
-      return t < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > t ? t : e;
-    }, w = s(() => x(F.value)), a = s(() => m.value[w.value]), X = s(() => a.value?.kind === "image"), V = s(() => a.value?.kind === "video"), Y = s(
-      () => a.value?.kind === "video" ? a.value.controls !== !1 : !1
-    ), ke = s(() => a.value?.kind === "video" ? a.value.muted === !0 : !1), Ie = s(
-      () => a.value?.kind === "video" ? a.value.playsinline !== !1 : !0
-    ), be = s(
-      () => a.value?.kind === "video" && a.value.preload || "metadata"
-    ), Fe = s(
-      () => a.value?.kind === "video" && a.value.name || "video"
-    ), D = s(() => a.value?.name || ""), G = s(() => l.showFileName ? D.value : ""), L = s(() => a.value?.downloadHref || ""), U = s(() => l.showFileActions && V.value && !Y.value), Ne = s(
-      () => l.showFileActions && (U.value || !!L.value)
-    ), Be = s(
-      () => ge({
-        "nmorph-media-gallery": [
-          _.value && "opened",
-          X.value && "image",
-          V.value && "video",
-          p.value && V.value && "video-playing",
-          l.imageFit === "cover" && X.value && "image-cover",
-          l.videoFit === "cover" && V.value && "video-cover"
-        ]
-      })
-    ), xe = s(() => `rotate(${h.value}deg) scale(${y.value})`), Ce = s(
-      () => Ue({
-        "--nmorph-media-gallery-trigger-height": l.height
-      })
-    ), Te = s(
-      () => ge({
-        "nmorph-media-gallery__trigger": [l.height !== void 0 && "fixed-height"]
-      })
-    ), Z = (e) => {
-      if (e === void 0 || Number.isNaN(e) || e < 0) return "";
-      if (e === 0) return "0 B";
-      const t = ["B", "KB", "MB", "GB", "TB"], o = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), d = e / 1024 ** o, I = d >= 10 || o === 0 || Number.isInteger(d) ? 0 : 1;
-      return `${d.toFixed(I)} ${t[o]}`;
-    }, W = s(() => l.showFileSize ? Z(a.value?.size) : ""), T = (e) => e.name || "", $ = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, j = (e) => Z(e.size), J = (e) => e.downloadHref || "", Q = (e) => l.showTriggerPreviewAction && e.kind === "video", ee = (e) => l.showTriggerFullscreenAction && e.kind === "video", oe = (e) => l.showTriggerDownloadAction && !!J(e), $e = (e) => l.showTriggerActions && (Q(e) || ee(e) || oe(e)), ze = (e, t) => {
-      K.value[e] = t instanceof HTMLVideoElement ? t : null;
-    };
-    z(
-      () => l.modelValue,
-      (e) => {
-        _.value = e;
-      }
-    ), z(
-      () => l.activeIndex,
-      (e) => {
-        typeof e == "number" && (F.value = x(e));
-      },
-      { immediate: !0 }
-    ), z(
-      () => [l.initialIndex, m.value.length],
-      () => {
-        typeof l.activeIndex != "number" && (F.value = x(l.initialIndex));
-      },
-      { immediate: !0 }
-    ), z(
-      () => [a.value?.kind, a.value?.src, w.value],
-      () => {
-        p.value = !1, C.value = null;
-      }
-    );
-    const S = () => {
-      !N.value || N.value === C.value || (N.value.pause(), p.value = !1, C.value = N.value);
-    }, te = () => {
-      y.value = 1, h.value = 0;
-    }, ae = (e) => {
-      if (!m.value.length) return;
-      const t = x(e);
-      if (t === w.value) return;
-      S(), p.value = !1, F.value = t, te(), g("update:active-index", t);
-      const o = m.value[t];
-      o && g("change", o, t);
-    }, E = () => {
-      const e = m.value.length;
-      e && ae(w.value === 0 ? e - 1 : w.value - 1);
-    }, R = () => {
-      const e = m.value.length;
-      e && ae(w.value === e - 1 ? 0 : w.value + 1);
-    }, le = (e) => {
-      if (!m.value.length) return;
-      const t = x(e);
-      S(), p.value = !1, F.value = t, te(), _.value = !0, g("update:model-value", !0), g("update:active-index", t);
-      const o = m.value[t];
-      o && g("change", o, t);
-    }, ne = () => {
-      _.value && (S(), _.value = !1, g("update:model-value", !1), g("close"));
-    }, Ae = () => {
-      h.value = h.value + 90, h.value >= 360 && (h.value = 0);
-    }, Pe = () => {
-      h.value = h.value - 90, h.value <= -360 && (h.value = 0);
-    }, He = () => {
-      y.value = parseFloat(Math.min(y.value + 0.2, 4).toFixed(3));
-    }, Ve = () => {
-      y.value = parseFloat(Math.max(y.value - 0.2, 0.2).toFixed(3));
-    }, Se = () => {
-      y.value = 1;
-    }, re = async (e) => {
-      if (e)
-        try {
-          const t = e.requestFullscreen?.() || e.webkitRequestFullscreen?.();
-          if (t) {
-            await t;
-            return;
-          }
-          e.webkitEnterFullscreen?.();
-        } catch {
-        }
-    }, Me = async () => {
-      !a.value || a.value.kind !== "video" || (g("fullscreen", a.value, w.value), await re(N.value));
-    }, De = async (e, t) => {
-      e.kind === "video" && (g("fullscreen", e, t), await re(K.value[t]));
-    }, ie = (e, t) => {
-      g("download", e, t);
-    }, Le = () => {
-      a.value && ie(a.value, w.value);
-    }, Ee = () => {
-      p.value = !0, C.value = null;
-    }, Re = () => {
-      p.value = !1;
-    }, Ke = () => {
-      p.value = !1;
-    }, qe = () => {
-      p.value = !1;
-    }, se = (e) => {
-      if (_.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
-        if (e.key === "Escape") {
-          e.preventDefault(), ne();
-          return;
-        }
-        q.value && (e.key === "ArrowLeft" && (e.preventDefault(), E()), e.key === "ArrowRight" && (e.preventDefault(), R()));
-      }
-    }, Oe = () => {
-      typeof document > "u" || document.addEventListener("keydown", se);
-    }, ue = () => {
-      typeof document > "u" || document.removeEventListener("keydown", se);
-    };
-    z(
-      _,
-      (e) => {
-        e ? (Oe(), C.value = null, F.value = x(
-          typeof l.activeIndex == "number" ? l.activeIndex : l.initialIndex
-        )) : (S(), p.value = !1, ue());
-      },
-      { immediate: !0 }
-    ), Ye(ue);
-    const ce = (e) => {
-      B.value = { x: e.clientX, y: e.clientY };
-    }, de = (e) => {
-      if (!B.value || !O.value) {
-        B.value = null;
-        return;
-      }
-      const t = e.clientX - B.value.x, o = e.clientY - B.value.y;
-      B.value = null, !(Math.abs(t) < Bo || Math.abs(t) < Math.abs(o) * 1.2) && (t > 0 ? E() : R());
-    };
-    return (e, t) => (i(), u(ve, null, [
-      l.showTrigger ? (i(), u("div", {
-        key: 0,
-        class: fe(Te.value),
-        style: me(Ce.value)
-      }, [
-        (i(!0), u(ve, null, Ge(m.value, (o, d) => (i(), u("div", {
-          key: `${o.kind}-${o.src}-${d}`,
-          class: fe(["nmorph-media-gallery__trigger-item", `nmorph-media-gallery__trigger-item--${o.kind}`])
-        }, [
-          b("button", {
-            type: "button",
-            class: "nmorph-media-gallery__trigger-open",
-            "aria-label": `Open ${$(o, d)}`,
-            onClick: (I) => le(d)
-          }, [
-            o.kind === "image" ? (i(), A(n(pe), {
-              key: 0,
-              src: o.src,
-              alt: o.alt || $(o, d),
-              title: T(o),
-              fit: "cover",
-              "frame-border": 0
-            }, null, 8, ["src", "alt", "title"])) : (i(), u("video", {
-              key: 1,
-              ref_for: !0,
-              ref: (I) => ze(d, I),
-              class: "nmorph-media-gallery__trigger-video",
-              src: o.src,
-              poster: o.poster || void 0,
-              muted: "",
-              playsinline: "",
-              preload: "metadata",
-              title: T(o)
-            }, null, 8, no)),
-            l.showTriggerPlayButton && o.kind === "video" ? (i(), u("span", ro, [
-              r(n(f), {
-                size: "medium",
-                color: "var(--nmorph-contrast-text-color)"
-              }, {
-                default: c(() => [
-                  r(n(je))
-                ]),
-                _: 1
-              })
-            ])) : v("", !0),
-            l.showTriggerName && T(o) ? (i(), u("span", io, M(T(o)), 1)) : v("", !0),
-            l.showTriggerSize && j(o) ? (i(), u("span", so, M(j(o)), 1)) : v("", !0)
-          ], 8, lo),
-          $e(o) ? (i(), u("div", uo, [
-            Q(o) ? (i(), u("button", {
-              key: 0,
-              type: "button",
-              class: "nmorph-media-gallery__trigger-action",
-              "aria-label": `Preview ${$(o, d)}`,
-              onClick: P((I) => le(d), ["stop"])
-            }, [
-              r(n(f), {
-                size: "small",
-                color: "var(--nmorph-contrast-text-color)"
-              }, {
-                default: c(() => [
-                  r(n(We))
-                ]),
-                _: 1
-              })
-            ], 8, co)) : v("", !0),
-            ee(o) ? (i(), u("button", {
-              key: 1,
-              type: "button",
-              class: "nmorph-media-gallery__trigger-action",
-              "aria-label": `Fullscreen ${$(o, d)}`,
-              onClick: P((I) => De(o, d), ["stop"])
-            }, [
-              r(n(f), {
-                size: "small",
-                color: "var(--nmorph-contrast-text-color)"
-              }, {
-                default: c(() => [
-                  r(n(he))
-                ]),
-                _: 1
-              })
-            ], 8, vo)) : v("", !0),
-            oe(o) ? (i(), u("a", {
-              key: 2,
-              href: J(o),
-              download: T(o) || void 0,
-              class: "nmorph-media-gallery__trigger-action",
-              "aria-label": `Download ${$(o, d)}`,
-              onClick: P((I) => ie(o, d), ["stop"])
-            }, [
-              r(n(f), {
-                size: "small",
-                color: "var(--nmorph-contrast-text-color)"
-              }, {
-                default: c(() => [
-                  r(n(_e))
-                ]),
-                _: 1
-              })
-            ], 8, mo)) : v("", !0)
-          ])) : v("", !0)
-        ], 2))), 128))
-      ], 6)) : v("", !0),
-      _.value ? (i(), A(Ze, {
+}, E = { class: "nmorph-media-gallery__action-element" }, V = { class: "nmorph-media-gallery__action-element" }, R = { class: "nmorph-media-gallery__action-element" }, x = { class: "nmorph-media-gallery__action-element" }, M = { class: "nmorph-media-gallery__action-element" };
+function O(G, U, Z, o, j, q) {
+  return l(), a(
+    s,
+    null,
+    [
+      o.props.showTrigger ? (l(), a(
+        "div",
+        {
+          key: 0,
+          class: f(o.triggerModifiers),
+          style: g(o.triggerStyle)
+        },
+        [
+          (l(!0), a(
+            s,
+            null,
+            v(o.sourceList, (r, t) => (l(), a(
+              "div",
+              {
+                key: `${r.kind}-${r.src}-${t}`,
+                class: f(["nmorph-media-gallery__trigger-item", `nmorph-media-gallery__trigger-item--${r.kind}`])
+              },
+              [
+                c("button", {
+                  type: "button",
+                  class: "nmorph-media-gallery__trigger-open",
+                  "aria-label": `Open ${o.getItemLabel(r, t)}`,
+                  onClick: (d) => o.openPreviewAt(t)
+                }, [
+                  r.kind === "image" ? (l(), m(o.NmorphImage, {
+                    key: 0,
+                    src: r.src,
+                    alt: r.alt || o.getItemLabel(r, t),
+                    title: o.getItemName(r),
+                    fit: "cover",
+                    "frame-border": 0
+                  }, null, 8, ["src", "alt", "title"])) : (l(), a("video", {
+                    key: 1,
+                    ref_for: !0,
+                    ref: (d) => o.setTriggerVideoRef(t, d),
+                    class: "nmorph-media-gallery__trigger-video",
+                    src: r.src,
+                    poster: r.poster || void 0,
+                    muted: "",
+                    playsinline: "",
+                    preload: "metadata",
+                    title: o.getItemName(r)
+                  }, null, 8, k)),
+                  o.props.showTriggerPlayButton && r.kind === "video" ? (l(), a("span", w, [
+                    e(o.NmorphIcon, {
+                      size: "medium",
+                      color: "var(--nmorph-contrast-text-color)"
+                    }, {
+                      default: n(() => [
+                        e(o.NmorphIconPlay)
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ])) : i("v-if", !0),
+                  o.props.showTriggerName && o.getItemName(r) ? (l(), a(
+                    "span",
+                    b,
+                    h(o.getItemName(r)),
+                    1
+                    /* TEXT */
+                  )) : i("v-if", !0),
+                  o.props.showTriggerSize && o.getItemSize(r) ? (l(), a(
+                    "span",
+                    p,
+                    h(o.getItemSize(r)),
+                    1
+                    /* TEXT */
+                  )) : i("v-if", !0)
+                ], 8, N),
+                o.showTriggerActionsForItem(r) ? (l(), a("div", z, [
+                  o.showTriggerPreviewActionForItem(r) ? (l(), a("button", {
+                    key: 0,
+                    type: "button",
+                    class: "nmorph-media-gallery__trigger-action",
+                    "aria-label": `Preview ${o.getItemLabel(r, t)}`,
+                    onClick: _((d) => o.openPreviewAt(t), ["stop"])
+                  }, [
+                    e(o.NmorphIcon, {
+                      size: "small",
+                      color: "var(--nmorph-contrast-text-color)"
+                    }, {
+                      default: n(() => [
+                        e(o.NmorphIconEye)
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ], 8, C)) : i("v-if", !0),
+                  o.showTriggerFullscreenActionForItem(r) ? (l(), a("button", {
+                    key: 1,
+                    type: "button",
+                    class: "nmorph-media-gallery__trigger-action",
+                    "aria-label": `Fullscreen ${o.getItemLabel(r, t)}`,
+                    onClick: _((d) => o.triggerFullscreenHandler(r, t), ["stop"])
+                  }, [
+                    e(o.NmorphIcon, {
+                      size: "small",
+                      color: "var(--nmorph-contrast-text-color)"
+                    }, {
+                      default: n(() => [
+                        e(o.NmorphIconFullScreen)
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ], 8, P)) : i("v-if", !0),
+                  o.showTriggerDownloadActionForItem(r) ? (l(), a("a", {
+                    key: 2,
+                    href: o.getItemDownloadHref(r),
+                    download: o.getItemName(r) || void 0,
+                    class: "nmorph-media-gallery__trigger-action",
+                    "aria-label": `Download ${o.getItemLabel(r, t)}`,
+                    onClick: _((d) => o.downloadItemHandler(r, t), ["stop"])
+                  }, [
+                    e(o.NmorphIcon, {
+                      size: "small",
+                      color: "var(--nmorph-contrast-text-color)"
+                    }, {
+                      default: n(() => [
+                        e(o.NmorphIconDownload)
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ], 8, H)) : i("v-if", !0)
+                ])) : i("v-if", !0)
+              ],
+              2
+              /* CLASS */
+            ))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ],
+        6
+        /* CLASS, STYLE */
+      )) : i("v-if", !0),
+      o.open ? (l(), m(o.NmorphPreviewPortal, {
         key: 1,
-        show: _.value,
-        "z-index": l.zIndex,
-        "state-class": Be.value,
+        show: o.open,
+        "z-index": o.props.zIndex,
+        "state-class": o.modifiers,
         "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.value,
-        "show-action-bar": l.showActionBar && a.value?.kind === "image",
-        onClose: ne,
-        onPrevious: E,
-        onNext: R
+        "show-navigation": o.showNavigation,
+        "show-action-bar": o.props.showActionBar && o.currentItem?.kind === "image",
+        onClose: o.closeHandler,
+        onPrevious: o.previousHandler,
+        onNext: o.nextHandler
       }, {
-        actions: c(() => [
-          b("div", ko, [
-            r(n(H), { onClick: Ae }, {
-              default: c(() => [
-                r(n(f), null, {
-                  default: c(() => [
-                    r(n(Je))
+        actions: n(() => [
+          c("div", E, [
+            e(o.NmorphButton, { onClick: o.rotateRight }, {
+              default: n(() => [
+                e(o.NmorphIcon, null, {
+                  default: n(() => [
+                    e(o.NmorphIconRotateRight)
                   ]),
                   _: 1
+                  /* STABLE */
                 })
               ]),
               _: 1
+              /* STABLE */
             })
           ]),
-          b("div", Io, [
-            r(n(H), { onClick: Pe }, {
-              default: c(() => [
-                r(n(f), null, {
-                  default: c(() => [
-                    r(n(Qe))
+          c("div", V, [
+            e(o.NmorphButton, { onClick: o.rotateLeft }, {
+              default: n(() => [
+                e(o.NmorphIcon, null, {
+                  default: n(() => [
+                    e(o.NmorphIconRotateLeft)
                   ]),
                   _: 1
+                  /* STABLE */
                 })
               ]),
               _: 1
+              /* STABLE */
             })
           ]),
-          b("div", bo, [
-            r(n(H), { onClick: He }, {
-              default: c(() => [
-                r(n(f), null, {
-                  default: c(() => [
-                    r(n(eo))
+          c("div", R, [
+            e(o.NmorphButton, { onClick: o.zoomIn }, {
+              default: n(() => [
+                e(o.NmorphIcon, null, {
+                  default: n(() => [
+                    e(o.NmorphIconZoomIn)
                   ]),
                   _: 1
+                  /* STABLE */
                 })
               ]),
               _: 1
+              /* STABLE */
             })
           ]),
-          b("div", Fo, [
-            r(n(H), { onClick: Ve }, {
-              default: c(() => [
-                r(n(f), null, {
-                  default: c(() => [
-                    r(n(oo))
+          c("div", x, [
+            e(o.NmorphButton, { onClick: o.zoomOut }, {
+              default: n(() => [
+                e(o.NmorphIcon, null, {
+                  default: n(() => [
+                    e(o.NmorphIconZoomOut)
                   ]),
                   _: 1
+                  /* STABLE */
                 })
               ]),
               _: 1
+              /* STABLE */
             })
           ]),
-          b("div", No, [
-            r(n(H), {
-              disabled: y.value === 1,
-              onClick: Se
+          c("div", M, [
+            e(o.NmorphButton, {
+              disabled: o.scaleLevel === 1,
+              onClick: o.toggleNormalSize
             }, {
-              default: c(() => [
-                r(n(f), null, {
-                  default: c(() => [
-                    y.value < 1 ? (i(), A(n(to), { key: 0 })) : (i(), A(n(ao), { key: 1 }))
+              default: n(() => [
+                e(o.NmorphIcon, null, {
+                  default: n(() => [
+                    o.scaleLevel < 1 ? (l(), m(o.NmorphIconEnlarge, { key: 0 })) : (l(), m(o.NmorphIconShrink, { key: 1 }))
                   ]),
                   _: 1
+                  /* STABLE */
                 })
               ]),
               _: 1
+              /* STABLE */
             }, 8, ["disabled"])
           ])
         ]),
-        default: c(() => [
-          b("div", fo, [
-            a.value?.kind === "image" ? (i(), A(n(pe), {
+        default: n(() => [
+          c("div", F, [
+            o.currentItem?.kind === "image" ? (l(), m(o.NmorphImage, {
               key: 0,
-              src: a.value.src,
-              alt: a.value.alt || a.value.name || "",
-              title: a.value.name,
-              fit: l.imageFit,
+              src: o.currentItem.src,
+              alt: o.currentItem.alt || o.currentItem.name || "",
+              title: o.currentItem.name,
+              fit: o.props.imageFit,
               "frame-border": 0,
-              style: me({ transform: xe.value }),
-              onPointerdown: ce,
-              onPointerup: de
-            }, null, 8, ["src", "alt", "title", "fit", "style"])) : a.value?.kind === "video" ? (i(), u("video", {
+              style: g({ transform: o.imageTransform }),
+              onPointerdown: o.pointerDownHandler,
+              onPointerup: o.pointerUpHandler
+            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), a("video", {
               key: 1,
-              ref_key: "currentVideoRef",
-              ref: N,
+              ref: "currentVideoRef",
               class: "nmorph-media-gallery__video",
-              src: a.value.src,
-              poster: a.value.poster || void 0,
-              controls: Y.value,
-              muted: ke.value,
-              playsinline: Ie.value,
-              preload: be.value,
-              title: a.value.name,
-              onPointerdown: ce,
-              onPointerup: de,
-              onPlay: Ee,
-              onPause: Re,
-              onEnded: Ke,
-              onError: qe
-            }, null, 40, go)) : v("", !0),
-            G.value ? (i(), u("span", po, M(G.value), 1)) : v("", !0),
-            Ne.value ? (i(), u("div", ho, [
-              U.value ? (i(), u("button", {
+              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.currentName ? (l(), a(
+              "span",
+              D,
+              h(o.currentName),
+              1
+              /* TEXT */
+            )) : i("v-if", !0),
+            o.showFileActions ? (l(), a("div", L, [
+              o.showVideoFullscreenAction ? (l(), a("button", {
                 key: 0,
                 type: "button",
                 class: "nmorph-media-gallery__file-action",
-                "aria-label": `Fullscreen ${Fe.value}`,
-                onClick: P(Me, ["stop"])
+                "aria-label": `Fullscreen ${o.currentVideoName}`,
+                onClick: _(o.fullscreenHandler, ["stop"])
               }, [
-                r(n(f), {
+                e(o.NmorphIcon, {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: c(() => [
-                    r(n(he))
+                  default: n(() => [
+                    e(o.NmorphIconFullScreen)
                   ]),
                   _: 1
+                  /* STABLE */
                 })
-              ], 8, _o)) : v("", !0),
-              L.value ? (i(), u("a", {
+              ], 8, B)) : i("v-if", !0),
+              o.currentDownloadHref ? (l(), a("a", {
                 key: 1,
-                href: L.value,
-                download: D.value || void 0,
+                href: o.currentDownloadHref,
+                download: o.currentItemName || void 0,
                 class: "nmorph-media-gallery__file-action",
-                "aria-label": `Download ${D.value || "media"}`,
-                onClick: P(Le, ["stop"])
+                "aria-label": `Download ${o.currentItemName || "media"}`,
+                onClick: _(o.downloadHandler, ["stop"])
               }, [
-                r(n(f), {
+                e(o.NmorphIcon, {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: c(() => [
-                    r(n(_e))
+                  default: n(() => [
+                    e(o.NmorphIconDownload)
                   ]),
                   _: 1
+                  /* STABLE */
                 })
-              ], 8, yo)) : v("", !0)
-            ])) : v("", !0),
-            W.value ? (i(), u("span", wo, M(W.value), 1)) : v("", !0)
+              ], 8, T)) : i("v-if", !0)
+            ])) : i("v-if", !0),
+            o.currentSize ? (l(), a(
+              "span",
+              A,
+              h(o.currentSize),
+              1
+              /* TEXT */
+            )) : i("v-if", !0)
           ])
         ]),
         _: 1
-      }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : v("", !0)
-    ], 64));
-  }
-});
+        /* STABLE */
+      }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : i("v-if", !0)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const X = /* @__PURE__ */ I(y, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
 export {
-  Uo as default
+  X as default
 };