@nmorph/nmorph-ui-kit 2.2.51 → 2.2.53

package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue2.js

@@ -0,0 +1,152 @@
+import './NmorphImagePreview.css';
+import { defineComponent as $, ref as g, watch as h, computed as t, onBeforeUnmount as Z } from "vue";
+import { useModifiers as j } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as U } from "../../../utils/common.js";
+import J from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import Q from "../../../assets/icons/shrink.svg.js";
+import W from "../../../assets/icons/rotate-right.svg.js";
+import X from "../../../assets/icons/rotate-left.svg.js";
+import Y from "../../../assets/icons/zoom-in.svg.js";
+import ee from "../../../assets/icons/zoom-out.svg.js";
+import re from "../../../assets/icons/enlarge.svg.js";
+import te from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ae from "../../basic/nmorph-button/NmorphButton.vue.js";
+import oe from "../nmorph-image/NmorphImage.vue.js";
+const Ne = /* @__PURE__ */ $({
+  __name: "NmorphImagePreview",
+  props: {
+    modelValue: { type: Boolean, required: !1, default: !1 },
+    alt: { type: String, required: !1, default: "" },
+    initialIndex: { type: Number, required: !1, default: 0 },
+    src: { type: [String, Array], required: !0 },
+    scaleStep: { type: Number, required: !1, default: 0.2 },
+    minScaleLevel: { type: Number, required: !1, default: 0.2 },
+    maxScaleLevel: { type: Number, required: !1, default: 4 },
+    zIndex: { type: Number, required: !1, default: void 0 },
+    showTrigger: { type: Boolean, required: !1, default: !0 },
+    showNavigationButtons: { type: Boolean, required: !1, default: !0 },
+    showActionBar: { type: Boolean, required: !1, default: !0 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    radius: { type: [Number, String], required: !1, default: void 0 },
+    fit: { type: String, required: !1, default: "cover" },
+    navigationButtonMargin: { type: [Number, String], required: !1, default: void 0 },
+    triggerView: { type: String, required: !1, default: "single" },
+    triggerLimit: { type: Number, required: !1, default: void 0 },
+    triggerGap: { type: [Number, String], required: !1, default: 8 }
+  },
+  emits: ["update:model-value"],
+  setup(V, { expose: C, emit: K }) {
+    C();
+    const r = V, i = g(r.modelValue);
+    h(
+      () => r.modelValue,
+      (e) => i.value = e
+    );
+    const a = t(() => Array.isArray(r.src) ? r.src : [r.src]), s = (e) => {
+      const l = a.value.length - 1;
+      return l < 0 || e < 0 ? 0 : e > l ? l : e;
+    }, u = g(s(r.initialIndex)), d = t(() => s(u.value)), H = t(() => a.value[d.value] || ""), c = t(() => r.triggerView === "gallery" && a.value.length > 1), y = t(() => !r.triggerLimit || r.triggerLimit < 1 ? a.value.length : Math.min(Math.floor(r.triggerLimit), a.value.length)), m = t(
+      () => a.value.slice(0, y.value).map((e, l) => ({
+        index: l,
+        src: e
+      }))
+    ), M = t(() => a.value.length - m.value.length), P = t(() => m.value[m.value.length - 1]?.index ?? -1), R = t(
+      () => j({
+        "nmorph-image-preview": [i.value && "opened", c.value && "gallery-trigger"]
+      })
+    ), o = g(1);
+    h(
+      () => [r.initialIndex, a.value.length],
+      () => {
+        u.value = s(r.initialIndex);
+      }
+    );
+    const N = (e) => {
+      u.value = s(e), i.value = !0, p("update:model-value", i.value);
+    }, z = () => {
+      c.value || N(d.value);
+    }, F = () => {
+      i.value = !1, p("update:model-value", i.value);
+    }, S = () => {
+      n.value = n.value + 90, n.value >= 360 && (n.value = 0);
+    }, I = () => {
+      n.value = n.value - 90, n.value <= -360 && (n.value = 0);
+    }, w = () => {
+      o.value < r.maxScaleLevel && (o.value += r.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, L = () => {
+      o.value > r.minScaleLevel && (o.value -= r.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, b = t(() => o.value < 1), q = () => {
+      o.value = 1;
+    }, x = () => {
+      o.value = 1;
+    }, n = g(0), B = () => {
+      const e = a.value.length;
+      if (!e) return;
+      const l = d.value - 1;
+      u.value = l < 0 ? e - 1 : l;
+    }, _ = () => {
+      const e = a.value.length;
+      if (!e) return;
+      const l = d.value + 1;
+      u.value = l > e - 1 ? 0 : l;
+    }, f = (e) => {
+      !i.value || a.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), B()), e.key === "ArrowRight" && (e.preventDefault(), _()));
+    }, k = () => {
+      typeof document > "u" || document.addEventListener("keydown", f);
+    }, v = () => {
+      typeof document > "u" || document.removeEventListener("keydown", f);
+    };
+    h(
+      i,
+      (e) => {
+        e ? k() : v();
+      },
+      { immediate: !0 }
+    ), Z(v);
+    const D = t(() => {
+      let e = {
+        icon: Q,
+        handler: x
+      };
+      return b.value && (e = {
+        icon: re,
+        handler: q
+      }), e;
+    }), E = [
+      {
+        icon: W,
+        handler: S
+      },
+      {
+        icon: X,
+        handler: I
+      },
+      {
+        icon: Y,
+        handler: w
+      },
+      {
+        icon: ee,
+        handler: L
+      }
+    ], p = K, T = t(() => a.value.length > 1), G = t(() => r.showNavigationButtons && T.value), O = t(
+      () => U({
+        "--width": r.width,
+        "--height": r.height,
+        "--nmorph-image-preview-radius": r.radius,
+        "--nmorph-image-preview-trigger-gap": r.triggerGap
+      })
+    ), A = { props: r, open: i, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: d, triggerSource: H, showGalleryTrigger: c, triggerSourceLimit: y, triggerSources: m, hiddenTriggerCount: M, lastVisibleTriggerIndex: P, modifiers: R, scaleLevel: o, openPreviewAt: N, clickHandler: z, closeHandler: F, rotateRight: S, rotateLeft: I, zoomIn: w, zoomOut: L, isLevelChangedToMin: b, enlargeToNormal: q, shrinkToNormal: x, rotateLevel: n, previousHandler: B, nextHandler: _, keyboardNavigationHandler: f, addKeyboardNavigationListener: k, removeKeyboardNavigationListener: v, enlargeShrinkActionData: D, actions: E, emit: p, multipleSources: T, showNavigation: G, triggerStyle: O, getTriggerLabel: (e) => r.alt ? `${r.alt} ${e + 1}` : `Image ${e + 1}`, get NmorphImage() {
+      return oe;
+    }, get NmorphButton() {
+      return ae;
+    }, get NmorphIcon() {
+      return te;
+    }, NmorphPreviewPortal: J };
+    return Object.defineProperty(A, "__isScriptSetup", { enumerable: !1, value: !0 }), A;
+  }
+});
+export {
+  Ne as default
+};

package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css

@@ -0,0 +1 @@
+.nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;object-fit:cover}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);cursor:pointer;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery.nmorph-media-gallery--video-playing .nmorph-media-gallery__play{opacity:.72}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:600;font-size:var(--font-size-small)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--font-size-extra-small)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}

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

@@ -0,0 +1,373 @@
+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 = {
+  key: 2,
+  class: "nmorph-media-gallery__trigger-play"
+}, p = {
+  key: 3,
+  class: "nmorph-media-gallery__trigger-name"
+}, P = {
+  key: 4,
+  class: "nmorph-media-gallery__trigger-size"
+}, z = {
+  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 = {
+  key: 3,
+  class: "nmorph-media-gallery__file-name"
+}, E = {
+  key: 4,
+  class: "nmorph-media-gallery__file-actions"
+}, F = ["aria-label"], x = ["href", "download", "aria-label"], R = {
+  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, {
+        key: 1,
+        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.showNavigation,
+        "show-action-bar": o.props.showActionBar && o.currentItem?.kind === "image",
+        onClose: o.closeHandler,
+        onPrevious: o.previousHandler,
+        onNext: o.nextHandler
+      }, {
+        actions: n(() => [
+          c("div", M, [
+            r(o.NmorphButton, { onClick: o.rotateRight }, {
+              default: n(() => [
+                r(o.NmorphIcon, null, {
+                  default: n(() => [
+                    r(o.NmorphIconRotateRight)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          c("div", A, [
+            r(o.NmorphButton, { onClick: o.rotateLeft }, {
+              default: n(() => [
+                r(o.NmorphIcon, null, {
+                  default: n(() => [
+                    r(o.NmorphIconRotateLeft)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          c("div", O, [
+            r(o.NmorphButton, { onClick: o.zoomIn }, {
+              default: n(() => [
+                r(o.NmorphIcon, null, {
+                  default: n(() => [
+                    r(o.NmorphIconZoomIn)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          c("div", T, [
+            r(o.NmorphButton, { onClick: o.zoomOut }, {
+              default: n(() => [
+                r(o.NmorphIcon, null, {
+                  default: n(() => [
+                    r(o.NmorphIconZoomOut)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          c("div", u, [
+            r(o.NmorphButton, {
+              disabled: o.scaleLevel === 1,
+              onClick: o.toggleNormalSize
+            }, {
+              default: n(() => [
+                r(o.NmorphIcon, null, {
+                  default: n(() => [
+                    o.scaleLevel < 1 ? (a(), d(o.NmorphIconEnlarge, { key: 0 })) : (a(), d(o.NmorphIconShrink, { key: 1 }))
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["disabled"])
+          ])
+        ]),
+        default: n(() => [
+          c("div", L, [
+            o.currentItem?.kind === "image" ? (a(), d(o.NmorphImage, {
+              key: 0,
+              src: o.currentItem.src,
+              alt: o.currentItem.alt || o.currentItem.name || "",
+              title: o.currentItem.name,
+              fit: o.props.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", {
+              key: 1,
+              ref: "currentVideoRef",
+              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", {
+              key: 2,
+              class: "nmorph-media-gallery__play",
+              type: "button",
+              "aria-label": o.videoPlaying ? `Pause ${o.currentVideoName}` : `Play ${o.currentVideoName}`,
+              onClick: m(o.toggleVideoPlayback, ["stop"])
+            }, [
+              r(o.NmorphIcon, {
+                size: "medium",
+                color: "var(--nmorph-contrast-text-color)"
+              }, {
+                default: n(() => [
+                  o.videoPlaying ? (a(), d(o.NmorphIconPause, { key: 0 })) : (a(), d(o.NmorphIconPlay, { 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", {
+                key: 0,
+                type: "button",
+                class: "nmorph-media-gallery__file-action",
+                "aria-label": `Fullscreen ${o.currentVideoName}`,
+                onClick: m(o.fullscreenHandler, ["stop"])
+              }, [
+                r(o.NmorphIcon, {
+                  size: "small",
+                  color: "var(--nmorph-contrast-text-color)"
+                }, {
+                  default: n(() => [
+                    r(o.NmorphIconFullScreen)
+                  ]),
+                  _: 1
+                  /* STABLE */
+                })
+              ], 8, F)) : i("v-if", !0),
+              o.currentDownloadHref ? (a(), l("a", {
+                key: 1,
+                href: o.currentDownloadHref,
+                download: o.currentName || void 0,
+                class: "nmorph-media-gallery__file-action",
+                "aria-label": `Download ${o.currentName || "media"}`,
+                onClick: m(o.downloadHandler, ["stop"])
+              }, [
+                r(o.NmorphIcon, {
+                  size: "small",
+                  color: "var(--nmorph-contrast-text-color)"
+                }, {
+                  default: n(() => [
+                    r(o.NmorphIconDownload)
+                  ]),
+                  _: 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)
+          ])
+        ]),
+        _: 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"]]);
+export {
+  Y as default
+};