@nmorph/nmorph-ui-kit 2.2.53 → 2.2.54

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

@@ -1,208 +1,294 @@
 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";
-/* empty css                        */
-import b from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = ["aria-label", "onClick"], C = {
+import { defineComponent as ue, ref as w, watch as $, computed as a, onBeforeUnmount as de, openBlock as u, createElementBlock as c, Fragment as L, normalizeStyle as H, normalizeClass as me, createElementVNode as I, renderList as R, withModifiers as ce, createVNode as v, unref as m, createSlots as b, withCtx as n, renderSlot as g, toDisplayString as ve, createCommentVNode as N, createBlock as _, resolveDynamicComponent as G } from "vue";
+import { useModifiers as ge } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as fe } from "../../../utils/common.js";
+import pe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+/* empty css                                                */
+import he from "../../../assets/icons/shrink.svg.js";
+import S from "../nmorph-image/NmorphImage.vue.js";
+/* empty css                               */
+import ye from "../../../assets/icons/rotate-right.svg.js";
+import we from "../../../assets/icons/rotate-left.svg.js";
+import _e from "../../../assets/icons/zoom-in.svg.js";
+import ke from "../../../assets/icons/zoom-out.svg.js";
+import P from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import O from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import $e from "../../../assets/icons/enlarge.svg.js";
+const Le = ["aria-label", "onClick"], Ie = {
   key: 0,
   class: "nmorph-image-preview__trigger-more"
-}, S = { class: "nmorph-image-preview__action-element" };
-function I(e, B, T, r, L, P) {
-  return n(), a(
-    m,
-    null,
-    [
-      r.props.showTrigger ? (n(), a(
-        "div",
-        {
-          key: 0,
-          class: k(r.modifiers),
-          style: v(r.triggerStyle)
-        },
-        [
-          g("div", {
-            class: "nmorph-image-preview__trigger",
-            onClick: r.clickHandler
+}, be = { class: "nmorph-image-preview__action-element" }, Pe = /* @__PURE__ */ ue({
+  __name: "NmorphImagePreview",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    alt: { default: "" },
+    initialIndex: { default: 0 },
+    src: {},
+    scaleStep: { default: 0.2 },
+    minScaleLevel: { default: 0.2 },
+    maxScaleLevel: { default: 4 },
+    zIndex: { default: void 0 },
+    showTrigger: { type: Boolean, default: !0 },
+    showNavigationButtons: { type: Boolean, default: !0 },
+    showActionBar: { type: Boolean, default: !0 },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    radius: { default: void 0 },
+    fit: { default: "cover" },
+    navigationButtonMargin: { default: void 0 },
+    triggerView: { default: "single" },
+    triggerLimit: { default: void 0 },
+    triggerGap: { default: 8 }
+  },
+  emits: ["update:model-value"],
+  setup(Z, { emit: U }) {
+    const t = Z, i = w(t.modelValue);
+    $(
+      () => t.modelValue,
+      (e) => i.value = e
+    );
+    const r = a(() => Array.isArray(t.src) ? t.src : [t.src]), p = (e) => {
+      const l = r.value.length - 1;
+      return l < 0 || e < 0 ? 0 : e > l ? l : e;
+    }, f = w(p(t.initialIndex)), h = a(() => p(f.value)), C = a(() => r.value[h.value] || ""), k = a(() => t.triggerView === "gallery" && r.value.length > 1), j = a(() => !t.triggerLimit || t.triggerLimit < 1 ? r.value.length : Math.min(Math.floor(t.triggerLimit), r.value.length)), y = a(
+      () => r.value.slice(0, j.value).map((e, l) => ({
+        index: l,
+        src: e
+      }))
+    ), B = a(() => r.value.length - y.value.length), q = a(() => y.value[y.value.length - 1]?.index ?? -1), x = a(
+      () => ge({
+        "nmorph-image-preview": [i.value && "opened", k.value && "gallery-trigger"]
+      })
+    ), o = w(1);
+    $(
+      () => [t.initialIndex, r.value.length],
+      () => {
+        f.value = p(t.initialIndex);
+      }
+    );
+    const V = (e) => {
+      f.value = p(e), i.value = !0, D("update:model-value", i.value);
+    }, J = () => {
+      k.value || V(h.value);
+    }, Q = () => {
+      i.value = !1, D("update:model-value", i.value);
+    }, W = () => {
+      d.value = d.value + 90, d.value >= 360 && (d.value = 0);
+    }, X = () => {
+      d.value = d.value - 90, d.value <= -360 && (d.value = 0);
+    }, Y = () => {
+      o.value < t.maxScaleLevel && (o.value += t.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, ee = () => {
+      o.value > t.minScaleLevel && (o.value -= t.scaleStep), o.value = parseFloat(o.value.toFixed(3));
+    }, te = a(() => o.value < 1), ae = () => {
+      o.value = 1;
+    }, oe = () => {
+      o.value = 1;
+    }, d = w(0), z = () => {
+      const e = r.value.length;
+      if (!e) return;
+      const l = h.value - 1;
+      f.value = l < 0 ? e - 1 : l;
+    }, T = () => {
+      const e = r.value.length;
+      if (!e) return;
+      const l = h.value + 1;
+      f.value = l > e - 1 ? 0 : l;
+    }, A = (e) => {
+      !i.value || r.value.length < 2 || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || (e.key === "ArrowLeft" && (e.preventDefault(), z()), e.key === "ArrowRight" && (e.preventDefault(), T()));
+    }, re = () => {
+      typeof document > "u" || document.addEventListener("keydown", A);
+    }, M = () => {
+      typeof document > "u" || document.removeEventListener("keydown", A);
+    };
+    $(
+      i,
+      (e) => {
+        e ? re() : M();
+      },
+      { immediate: !0 }
+    ), de(M);
+    const K = a(() => {
+      let e = {
+        icon: he,
+        handler: oe
+      };
+      return te.value && (e = {
+        icon: $e,
+        handler: ae
+      }), e;
+    }), le = [
+      {
+        icon: ye,
+        handler: W
+      },
+      {
+        icon: we,
+        handler: X
+      },
+      {
+        icon: _e,
+        handler: Y
+      },
+      {
+        icon: ke,
+        handler: ee
+      }
+    ], D = U, ne = a(() => r.value.length > 1), ie = a(() => t.showNavigationButtons && ne.value), se = a(
+      () => fe({
+        "--width": t.width,
+        "--height": t.height,
+        "--nmorph-image-preview-radius": t.radius,
+        "--nmorph-image-preview-trigger-gap": t.triggerGap
+      })
+    ), E = (e) => t.alt ? `${t.alt} ${e + 1}` : `Image ${e + 1}`;
+    return (e, l) => (u(), c(L, null, [
+      t.showTrigger ? (u(), c("div", {
+        key: 0,
+        class: me(x.value),
+        style: H(se.value)
+      }, [
+        I("div", {
+          class: "nmorph-image-preview__trigger",
+          onClick: J
+        }, [
+          k.value ? (u(!0), c(L, { key: 0 }, R(y.value, (s) => (u(), c("button", {
+            key: `${s.src}-${s.index}`,
+            type: "button",
+            class: "nmorph-image-preview__trigger-item",
+            "aria-label": E(s.index),
+            onClick: ce((F) => V(s.index), ["stop"])
           }, [
-            r.showGalleryTrigger ? (n(!0), a(
-              m,
-              { key: 0 },
-              f(r.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"])
-              }, [
-                l(r.NmorphImage, {
-                  src: i.src,
-                  alt: r.getTriggerLabel(i.index),
-                  fit: r.props.fit,
-                  "frame-border": 0
-                }, d({
-                  _: 2
-                  /* DYNAMIC */
-                }, [
-                  e.$slots.loading ? {
-                    name: "loading",
-                    fn: o(() => [
-                      t(e.$slots, "loading")
-                    ]),
-                    key: "0"
-                  } : void 0,
-                  e.$slots.error ? {
-                    name: "error",
-                    fn: o(() => [
-                      t(e.$slots, "error")
-                    ]),
-                    key: "1"
-                  } : void 0
-                ]), 1032, ["src", "alt", "fit"]),
-                i.index === r.lastVisibleTriggerIndex && r.hiddenTriggerCount > 0 ? (n(), a(
-                  "span",
-                  C,
-                  " +" + y(r.hiddenTriggerCount),
-                  1
-                  /* TEXT */
-                )) : c("v-if", !0)
-              ], 8, N))),
-              128
-              /* KEYED_FRAGMENT */
-            )) : (n(), s(r.NmorphImage, {
-              key: 1,
-              src: r.triggerSource,
-              alt: r.props.alt,
-              fit: r.props.fit,
+            v(m(S), {
+              src: s.src,
+              alt: E(s.index),
+              fit: t.fit,
               "frame-border": 0
-            }, d({
-              _: 2
-              /* DYNAMIC */
-            }, [
+            }, b({ _: 2 }, [
               e.$slots.loading ? {
                 name: "loading",
-                fn: o(() => [
-                  t(e.$slots, "loading")
+                fn: n(() => [
+                  g(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
               e.$slots.error ? {
                 name: "error",
-                fn: o(() => [
-                  t(e.$slots, "error")
+                fn: n(() => [
+                  g(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["src", "alt", "fit"]))
-          ])
-        ],
-        6
-        /* CLASS, STYLE */
-      )) : c("v-if", !0),
-      r.open ? (n(), s(r.NmorphPreviewPortal, {
+            ]), 1032, ["src", "alt", "fit"]),
+            s.index === q.value && B.value > 0 ? (u(), c("span", Ie, " +" + ve(B.value), 1)) : N("", !0)
+          ], 8, Le))), 128)) : (u(), _(m(S), {
+            key: 1,
+            src: C.value,
+            alt: t.alt,
+            fit: t.fit,
+            "frame-border": 0
+          }, b({ _: 2 }, [
+            e.$slots.loading ? {
+              name: "loading",
+              fn: n(() => [
+                g(e.$slots, "loading")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.error ? {
+              name: "error",
+              fn: n(() => [
+                g(e.$slots, "error")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["src", "alt", "fit"]))
+        ])
+      ], 6)) : N("", !0),
+      i.value ? (u(), _(pe, {
         key: 1,
-        show: r.open,
-        "z-index": r.props.zIndex,
+        show: i.value,
+        "z-index": t.zIndex,
         "root-class": "nmorph-image-preview__portal",
-        "state-class": r.modifiers,
+        "state-class": x.value,
         "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": t.navigationButtonMargin,
+        "show-navigation": ie.value,
+        "show-action-bar": t.showActionBar,
+        onClose: Q,
+        onPrevious: z,
+        onNext: T
       }, {
-        actions: o(() => [
-          (n(), a(
-            m,
-            null,
-            f(r.actions, (i, h) => g("div", {
-              key: h,
-              class: "nmorph-image-preview__action-element"
-            }, [
-              l(r.NmorphButton, {
-                onClick: i.handler
-              }, {
-                default: o(() => [
-                  l(
-                    r.NmorphIcon,
-                    null,
-                    {
-                      default: o(() => [
-                        (n(), s(_(i.icon)))
-                      ]),
-                      _: 2
-                      /* DYNAMIC */
-                    },
-                    1024
-                    /* DYNAMIC_SLOTS */
-                  )
-                ]),
-                _: 2
-                /* DYNAMIC */
-              }, 1032, ["onClick"])
-            ])),
-            64
-            /* STABLE_FRAGMENT */
-          )),
-          g("div", S, [
-            l(r.NmorphButton, {
-              disabled: r.scaleLevel === 1,
-              onClick: r.enlargeShrinkActionData.handler
+        actions: n(() => [
+          (u(), c(L, null, R(le, (s, F) => I("div", {
+            key: F,
+            class: "nmorph-image-preview__action-element"
+          }, [
+            v(m(P), {
+              onClick: s.handler
+            }, {
+              default: n(() => [
+                v(m(O), null, {
+                  default: n(() => [
+                    (u(), _(G(s.icon)))
+                  ]),
+                  _: 2
+                }, 1024)
+              ]),
+              _: 2
+            }, 1032, ["onClick"])
+          ])), 64)),
+          I("div", be, [
+            v(m(P), {
+              disabled: o.value === 1,
+              onClick: K.value.handler
             }, {
-              default: o(() => [
-                l(r.NmorphIcon, null, {
-                  default: o(() => [
-                    (n(), s(_(r.enlargeShrinkActionData.icon)))
+              default: n(() => [
+                v(m(O), null, {
+                  default: n(() => [
+                    (u(), _(G(K.value.icon)))
                   ]),
                   _: 1
-                  /* STABLE */
                 })
               ]),
               _: 1
-              /* STABLE */
             }, 8, ["disabled", "onClick"])
           ])
         ]),
-        default: o(() => [
-          l(r.NmorphImage, {
-            src: r.triggerSource,
-            alt: r.props.alt,
+        default: n(() => [
+          v(m(S), {
+            src: C.value,
+            alt: t.alt,
             fit: "contain",
             "frame-border": 0,
-            style: v({ transform: `rotate(${r.rotateLevel}deg) scale(${r.scaleLevel})` })
-          }, d({
-            _: 2
-            /* DYNAMIC */
-          }, [
+            style: H({ transform: `rotate(${d.value}deg) scale(${o.value})` })
+          }, b({ _: 2 }, [
             e.$slots.loading ? {
               name: "loading",
-              fn: o(() => [
-                t(e.$slots, "loading")
+              fn: n(() => [
+                g(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
             e.$slots.error ? {
               name: "error",
-              fn: o(() => [
-                t(e.$slots, "error")
+              fn: n(() => [
+                g(e.$slots, "error")
               ]),
               key: "1"
             } : void 0
           ]), 1032, ["src", "alt", "style"])
         ]),
         _: 3
-        /* FORWARDED */
-      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "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"]]);
+      }, 8, ["show", "z-index", "state-class", "navigation-button-margin", "show-navigation", "show-action-bar"])) : N("", !0)
+    ], 64));
+  }
+});
 export {
-  V as default
+  Pe as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphImagePreview.css';
+import o from "./NmorphImagePreview.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

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-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}
+.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__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}