@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

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

@@ -1,94 +1,94 @@
 import './NmorphImagePreview.css';
-import p from "./NmorphImagePreview.vue2.js";
-import { openBlock as n, createElementBlock as a, Fragment as m, normalizeStyle as v, normalizeClass as k, createElementVNode as g, renderList as f, withModifiers as w, createVNode as l, createSlots as d, withCtx as o, renderSlot as t, toDisplayString as y, createCommentVNode as c, createBlock as s, resolveDynamicComponent as _ } from "vue";
+import _ from "./NmorphImagePreview.vue2.js";
+import { openBlock as n, createElementBlock as a, Fragment as g, normalizeStyle as v, normalizeClass as w, createElementVNode as m, renderList as f, withModifiers as k, createVNode as l, createSlots as d, withCtx as o, renderSlot as t, toDisplayString as y, createCommentVNode as c, createBlock as s, resolveDynamicComponent as p } from "vue";
 /* empty css                        */
 import b from "../../../_virtual/_plugin-vue_export-helper.js";
 const N = ["aria-label", "onClick"], C = {
   key: 0,
   class: "nmorph-image-preview__trigger-more"
 }, S = { class: "nmorph-image-preview__action-element" };
-function I(e, B, T, r, L, P) {
+function I(r, B, T, e, L, P) {
   return n(), a(
-    m,
+    g,
     null,
     [
-      r.props.showTrigger ? (n(), a(
+      e.props.showTrigger ? (n(), a(
         "div",
         {
           key: 0,
-          class: k(r.modifiers),
-          style: v(r.triggerStyle)
+          class: w(e.modifiers),
+          style: v(e.triggerStyle)
         },
         [
-          g("div", {
+          m("div", {
             class: "nmorph-image-preview__trigger",
-            onClick: r.clickHandler
+            onClick: e.clickHandler
           }, [
-            r.showGalleryTrigger ? (n(!0), a(
-              m,
+            e.showGalleryTrigger ? (n(!0), a(
+              g,
               { key: 0 },
-              f(r.triggerSources, (i) => (n(), a("button", {
+              f(e.triggerSources, (i) => (n(), a("button", {
                 key: `${i.src}-${i.index}`,
                 type: "button",
                 class: "nmorph-image-preview__trigger-item",
-                "aria-label": r.getTriggerLabel(i.index),
-                onClick: w((h) => r.openPreviewAt(i.index), ["stop"])
+                "aria-label": e.getTriggerLabel(i.index),
+                onClick: k((h) => e.openPreviewAt(i.index), ["stop"])
               }, [
-                l(r.NmorphImage, {
+                l(e.NmorphImage, {
                   src: i.src,
-                  alt: r.getTriggerLabel(i.index),
-                  fit: r.props.fit,
+                  alt: e.getTriggerLabel(i.index),
+                  fit: e.props.fit,
                   "frame-border": 0
                 }, d({
                   _: 2
                   /* DYNAMIC */
                 }, [
-                  e.$slots.loading ? {
+                  r.$slots.loading ? {
                     name: "loading",
                     fn: o(() => [
-                      t(e.$slots, "loading")
+                      t(r.$slots, "loading")
                     ]),
                     key: "0"
                   } : void 0,
-                  e.$slots.error ? {
+                  r.$slots.error ? {
                     name: "error",
                     fn: o(() => [
-                      t(e.$slots, "error")
+                      t(r.$slots, "error")
                     ]),
                     key: "1"
                   } : void 0
                 ]), 1032, ["src", "alt", "fit"]),
-                i.index === r.lastVisibleTriggerIndex && r.hiddenTriggerCount > 0 ? (n(), a(
+                i.index === e.lastVisibleTriggerIndex && e.hiddenTriggerCount > 0 ? (n(), a(
                   "span",
                   C,
-                  " +" + y(r.hiddenTriggerCount),
+                  " +" + y(e.hiddenTriggerCount),
                   1
                   /* TEXT */
                 )) : c("v-if", !0)
               ], 8, N))),
               128
               /* KEYED_FRAGMENT */
-            )) : (n(), s(r.NmorphImage, {
+            )) : (n(), s(e.NmorphImage, {
               key: 1,
-              src: r.triggerSource,
-              alt: r.props.alt,
-              fit: r.props.fit,
+              src: e.triggerSource,
+              alt: e.props.alt,
+              fit: e.props.fit,
               "frame-border": 0
             }, d({
               _: 2
               /* DYNAMIC */
             }, [
-              e.$slots.loading ? {
+              r.$slots.loading ? {
                 name: "loading",
                 fn: o(() => [
-                  t(e.$slots, "loading")
+                  t(r.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
-              e.$slots.error ? {
+              r.$slots.error ? {
                 name: "error",
                 fn: o(() => [
-                  t(e.$slots, "error")
+                  t(r.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
@@ -98,41 +98,44 @@ function I(e, B, T, r, L, P) {
         6
         /* CLASS, STYLE */
       )) : c("v-if", !0),
-      r.open ? (n(), s(r.NmorphPreviewPortal, {
+      e.open ? (n(), s(e.NmorphPreviewPortal, {
         key: 1,
-        show: r.open,
-        "z-index": r.props.zIndex,
+        show: e.open,
+        "z-index": e.props.zIndex,
         "root-class": "nmorph-image-preview__portal",
-        "state-class": r.modifiers,
+        "state-class": e.modifiers,
         "content-class": "nmorph-image-preview__content",
         "left-class": "nmorph-image-preview__left",
         "right-class": "nmorph-image-preview__right",
         "actions-class": "nmorph-image-preview__actions",
-        "navigation-button-margin": r.props.navigationButtonMargin,
-        "show-navigation": r.showNavigation,
-        "show-action-bar": r.props.showActionBar,
-        onClose: r.closeHandler,
-        onPrevious: r.previousHandler,
-        onNext: r.nextHandler
+        "navigation-button-margin": e.props.navigationButtonMargin,
+        "content-width": e.props.previewWidth,
+        "content-height": e.props.previewHeight,
+        "show-navigation": e.showNavigation,
+        "show-action-bar": e.props.showActionBar,
+        onClose: e.closeHandler,
+        onPrevious: e.previousHandler,
+        onNext: e.nextHandler
       }, {
         actions: o(() => [
           (n(), a(
-            m,
+            g,
             null,
-            f(r.actions, (i, h) => g("div", {
+            f(e.actions, (i, h) => m("div", {
               key: h,
               class: "nmorph-image-preview__action-element"
             }, [
-              l(r.NmorphButton, {
+              l(e.NmorphButton, {
+                design: "plain",
                 onClick: i.handler
               }, {
                 default: o(() => [
                   l(
-                    r.NmorphIcon,
+                    e.NmorphIcon,
                     null,
                     {
                       default: o(() => [
-                        (n(), s(_(i.icon)))
+                        (n(), s(p(i.icon)))
                       ]),
                       _: 2
                       /* DYNAMIC */
@@ -148,15 +151,16 @@ function I(e, B, T, r, L, P) {
             64
             /* STABLE_FRAGMENT */
           )),
-          g("div", S, [
-            l(r.NmorphButton, {
-              disabled: r.scaleLevel === 1,
-              onClick: r.enlargeShrinkActionData.handler
+          m("div", S, [
+            l(e.NmorphButton, {
+              design: "plain",
+              disabled: e.scaleLevel === 1,
+              onClick: e.enlargeShrinkActionData.handler
             }, {
               default: o(() => [
-                l(r.NmorphIcon, null, {
+                l(e.NmorphIcon, null, {
                   default: o(() => [
-                    (n(), s(_(r.enlargeShrinkActionData.icon)))
+                    (n(), s(p(e.enlargeShrinkActionData.icon)))
                   ]),
                   _: 1
                   /* STABLE */
@@ -168,27 +172,27 @@ function I(e, B, T, r, L, P) {
           ])
         ]),
         default: o(() => [
-          l(r.NmorphImage, {
-            src: r.triggerSource,
-            alt: r.props.alt,
+          l(e.NmorphImage, {
+            src: e.triggerSource,
+            alt: e.props.alt,
             fit: "contain",
             "frame-border": 0,
-            style: v({ transform: `rotate(${r.rotateLevel}deg) scale(${r.scaleLevel})` })
+            style: v({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
           }, d({
             _: 2
             /* DYNAMIC */
           }, [
-            e.$slots.loading ? {
+            r.$slots.loading ? {
               name: "loading",
               fn: o(() => [
-                t(e.$slots, "loading")
+                t(r.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
-            e.$slots.error ? {
+            r.$slots.error ? {
               name: "error",
               fn: o(() => [
-                t(e.$slots, "error")
+                t(r.$slots, "error")
               ]),
               key: "1"
             } : void 0
@@ -196,13 +200,13 @@ function I(e, B, T, r, L, P) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "show-navigation", "show-action-bar"])) : c("v-if", !0)
+      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "content-width", "content-height", "show-navigation", "show-action-bar"])) : c("v-if", !0)
     ],
     64
     /* STABLE_FRAGMENT */
   );
 }
-const V = /* @__PURE__ */ b(p, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
+const V = /* @__PURE__ */ b(_, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-image-preview/NmorphImagePreview.vue"]]);
 export {
   V as default
 };

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

@@ -2,16 +2,16 @@ 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 W from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import J from "../../../assets/icons/shrink.svg.js";
+import Q 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";
+import ie from "../nmorph-image/NmorphImage.vue.js";
 const Ne = /* @__PURE__ */ $({
   __name: "NmorphImagePreview",
   props: {
@@ -28,6 +28,8 @@ const Ne = /* @__PURE__ */ $({
     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 },
+    previewWidth: { type: [Number, String], required: !1, default: void 0 },
+    previewHeight: { 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 },
@@ -36,26 +38,26 @@ const Ne = /* @__PURE__ */ $({
     triggerGap: { type: [Number, String], required: !1, default: 8 }
   },
   emits: ["update:model-value"],
-  setup(V, { expose: C, emit: K }) {
+  setup(V, { expose: C, emit: H }) {
     C();
-    const r = V, i = g(r.modelValue);
+    const r = V, l = g(r.modelValue);
     h(
       () => r.modelValue,
-      (e) => i.value = e
+      (e) => l.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,
+      const o = a.value.length - 1;
+      return o < 0 || e < 0 ? 0 : e > o ? o : e;
+    }, u = g(s(r.initialIndex)), d = t(() => s(u.value)), K = t(() => a.value[d.value] || ""), v = 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, o) => ({
+        index: o,
         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"]
+        "nmorph-image-preview": [l.value && "opened", v.value && "gallery-trigger"]
       })
-    ), o = g(1);
+    ), i = g(1);
     h(
       () => [r.initialIndex, a.value.length],
       () => {
@@ -63,87 +65,87 @@ const Ne = /* @__PURE__ */ $({
       }
     );
     const N = (e) => {
-      u.value = s(e), i.value = !0, p("update:model-value", i.value);
+      u.value = s(e), l.value = !0, f("update:model-value", l.value);
     }, z = () => {
-      c.value || N(d.value);
+      v.value || N(d.value);
     }, F = () => {
-      i.value = !1, p("update:model-value", i.value);
+      l.value = !1, f("update:model-value", l.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;
+      n.value = n.value - 90, n.value <= -360 && (n.value = 0);
+    }, I = () => {
+      i.value < r.maxScaleLevel && (i.value += r.scaleStep), i.value = parseFloat(i.value.toFixed(3));
+    }, b = () => {
+      i.value > r.minScaleLevel && (i.value -= r.scaleStep), i.value = parseFloat(i.value.toFixed(3));
+    }, L = t(() => i.value < 1), q = () => {
+      i.value = 1;
     }, x = () => {
-      o.value = 1;
+      i.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 o = d.value - 1;
+      u.value = o < 0 ? e - 1 : o;
     }, _ = () => {
       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(), _()));
+      const o = d.value + 1;
+      u.value = o > e - 1 ? 0 : o;
+    }, p = (e) => {
+      !l.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);
+      typeof document > "u" || document.addEventListener("keydown", p);
+    }, c = () => {
+      typeof document > "u" || document.removeEventListener("keydown", p);
     };
     h(
-      i,
+      l,
       (e) => {
-        e ? k() : v();
+        e ? k() : c();
       },
       { immediate: !0 }
-    ), Z(v);
+    ), Z(c);
     const D = t(() => {
       let e = {
-        icon: Q,
+        icon: J,
         handler: x
       };
-      return b.value && (e = {
+      return L.value && (e = {
         icon: re,
         handler: q
       }), e;
     }), E = [
       {
-        icon: W,
+        icon: Q,
         handler: S
       },
       {
         icon: X,
-        handler: I
+        handler: w
       },
       {
         icon: Y,
-        handler: w
+        handler: I
       },
       {
         icon: ee,
-        handler: L
+        handler: b
       }
-    ], p = K, T = t(() => a.value.length > 1), G = t(() => r.showNavigationButtons && T.value), O = t(
+    ], f = H, 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
+        "--nmorph-private-image-preview-trigger-width": r.width,
+        "--nmorph-private-image-preview-trigger-height": r.height,
+        "--nmorph-private-image-preview-radius": r.radius,
+        "--nmorph-private-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;
+    ), A = { props: r, open: l, sourceList: a, getClampedIndex: s, currentIndex: u, resolvedCurrentIndex: d, triggerSource: K, showGalleryTrigger: v, triggerSourceLimit: y, triggerSources: m, hiddenTriggerCount: M, lastVisibleTriggerIndex: P, modifiers: R, scaleLevel: i, openPreviewAt: N, clickHandler: z, closeHandler: F, rotateRight: S, rotateLeft: w, zoomIn: I, zoomOut: b, isLevelChangedToMin: L, enlargeToNormal: q, shrinkToNormal: x, rotateLevel: n, previousHandler: B, nextHandler: _, keyboardNavigationHandler: p, addKeyboardNavigationListener: k, removeKeyboardNavigationListener: c, enlargeShrinkActionData: D, actions: E, emit: f, multipleSources: T, showNavigation: G, triggerStyle: O, getTriggerLabel: (e) => r.alt ? `${r.alt} ${e + 1}` : `Image ${e + 1}`, get NmorphImage() {
+      return ie;
     }, get NmorphButton() {
       return ae;
     }, get NmorphIcon() {
       return te;
-    }, NmorphPreviewPortal: J };
+    }, NmorphPreviewPortal: W };
     return Object.defineProperty(A, "__isScriptSetup", { enumerable: !1, value: !0 }), A;
   }
 });

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

@@ -1 +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--fixed-height{grid-auto-rows:var(--nmorph-media-gallery-trigger-height)}.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--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.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__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}
+.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--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.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--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.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(--nmorph-typography-caption-font-size)}.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-private-icon-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-private-icon-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__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:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.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(--nmorph-typography-caption-font-size)}.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-private-icon-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

@@ -1,6 +1,6 @@
 import './NmorphMediaGallery.css';
 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";
+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 _, withModifiers as h } from "vue";
 /* empty css                        */
 import I from "../../../_virtual/_plugin-vue_export-helper.js";
 const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
@@ -15,7 +15,7 @@ const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
 }, z = {
   key: 0,
   class: "nmorph-media-gallery__trigger-actions"
-}, 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 = {
+}, C = ["aria-label", "onClick"], H = ["aria-label", "onClick"], P = ["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"
 }, L = {
@@ -25,7 +25,7 @@ const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
   key: 4,
   class: "nmorph-media-gallery__file-size"
 }, 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) {
+function O(G, U, Z, o, j, W) {
   return l(), a(
     s,
     null,
@@ -88,14 +88,14 @@ function O(G, U, Z, o, j, q) {
                   o.props.showTriggerName && o.getItemName(r) ? (l(), a(
                     "span",
                     b,
-                    h(o.getItemName(r)),
+                    _(o.getItemName(r)),
                     1
                     /* TEXT */
                   )) : i("v-if", !0),
                   o.props.showTriggerSize && o.getItemSize(r) ? (l(), a(
                     "span",
                     p,
-                    h(o.getItemSize(r)),
+                    _(o.getItemSize(r)),
                     1
                     /* TEXT */
                   )) : i("v-if", !0)
@@ -106,7 +106,7 @@ function O(G, U, Z, o, j, q) {
                     type: "button",
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Preview ${o.getItemLabel(r, t)}`,
-                    onClick: _((d) => o.openPreviewAt(t), ["stop"])
+                    onClick: h((d) => o.openPreviewAt(t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
@@ -124,7 +124,7 @@ function O(G, U, Z, o, j, q) {
                     type: "button",
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Fullscreen ${o.getItemLabel(r, t)}`,
-                    onClick: _((d) => o.triggerFullscreenHandler(r, t), ["stop"])
+                    onClick: h((d) => o.triggerFullscreenHandler(r, t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
@@ -136,14 +136,14 @@ function O(G, U, Z, o, j, q) {
                       _: 1
                       /* STABLE */
                     })
-                  ], 8, P)) : i("v-if", !0),
+                  ], 8, H)) : 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"])
+                    onClick: h((d) => o.downloadItemHandler(r, t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
@@ -155,7 +155,7 @@ function O(G, U, Z, o, j, q) {
                       _: 1
                       /* STABLE */
                     })
-                  ], 8, H)) : i("v-if", !0)
+                  ], 8, P)) : i("v-if", !0)
                 ])) : i("v-if", !0)
               ],
               2
@@ -177,6 +177,8 @@ function O(G, U, Z, o, j, q) {
         "left-class": "nmorph-media-gallery__left",
         "right-class": "nmorph-media-gallery__right",
         "actions-class": "nmorph-media-gallery__actions",
+        "content-width": o.props.previewWidth,
+        "content-height": o.props.previewHeight,
         "show-navigation": o.showNavigation,
         "show-action-bar": o.props.showActionBar && o.currentItem?.kind === "image",
         onClose: o.closeHandler,
@@ -296,7 +298,7 @@ function O(G, U, Z, o, j, q) {
             o.currentName ? (l(), a(
               "span",
               D,
-              h(o.currentName),
+              _(o.currentName),
               1
               /* TEXT */
             )) : i("v-if", !0),
@@ -306,7 +308,7 @@ function O(G, U, Z, o, j, q) {
                 type: "button",
                 class: "nmorph-media-gallery__file-action",
                 "aria-label": `Fullscreen ${o.currentVideoName}`,
-                onClick: _(o.fullscreenHandler, ["stop"])
+                onClick: h(o.fullscreenHandler, ["stop"])
               }, [
                 e(o.NmorphIcon, {
                   size: "small",
@@ -325,7 +327,7 @@ function O(G, U, Z, o, j, q) {
                 download: o.currentItemName || void 0,
                 class: "nmorph-media-gallery__file-action",
                 "aria-label": `Download ${o.currentItemName || "media"}`,
-                onClick: _(o.downloadHandler, ["stop"])
+                onClick: h(o.downloadHandler, ["stop"])
               }, [
                 e(o.NmorphIcon, {
                   size: "small",
@@ -342,7 +344,7 @@ function O(G, U, Z, o, j, q) {
             o.currentSize ? (l(), a(
               "span",
               A,
-              h(o.currentSize),
+              _(o.currentSize),
               1
               /* TEXT */
             )) : i("v-if", !0)
@@ -350,7 +352,7 @@ function O(G, U, Z, o, j, q) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : i("v-if", !0)
+      }, 8, ["show", "z-index", "state-class", "content-width", "content-height", "show-navigation", "show-action-bar"])) : i("v-if", !0)
     ],
     64
     /* STABLE_FRAGMENT */