@nmorph/nmorph-ui-kit 2.2.59 → 3.0.1

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

@@ -1,8 +1,8 @@
 import './NmorphMediaGallery.css';
-import { defineComponent as He, ref as c, computed as n, watch as N, onBeforeUnmount as Ae } from "vue";
+import { defineComponent as He, ref as c, computed as n, watch as N, onBeforeUnmount as Se } from "vue";
 import { useModifiers as X } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as Te } from "../../../utils/common.js";
-import Se from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+import { createCssSizeVariables as Ae } from "../../../utils/common.js";
+import Te from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
 import Pe from "../nmorph-image/NmorphImage.vue.js";
 import Me from "../../../assets/icons/full-screen.svg.js";
 import Ve from "../../../assets/icons/eye.svg.js";
@@ -25,6 +25,8 @@ const Y = 45, dt = /* @__PURE__ */ He({
     activeIndex: { type: Number, required: !1, default: void 0 },
     zIndex: { type: Number, 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 },
     showTrigger: { type: Boolean, required: !1, default: !1 },
     showTriggerName: { type: Boolean, required: !1, default: !0 },
     showTriggerSize: { type: Boolean, required: !1, default: !0 },
@@ -43,12 +45,12 @@ const Y = 45, dt = /* @__PURE__ */ He({
     videoFit: { type: String, required: !1, default: "contain" }
   },
   emits: ["update:model-value", "update:active-index", "close", "change", "download", "fullscreen"],
-  setup(G, { expose: j, emit: W }) {
-    j();
-    const o = G, a = W, v = c(o.modelValue), m = c(0), h = c(null), F = c({}), y = c(null), l = c(!1), f = c(1), u = c(0), g = c(null), i = n(() => o.items || []), x = n(() => i.value.length > 1), V = n(() => o.showNavigationButtons && x.value), p = (e) => {
-      const t = i.value.length - 1;
+  setup(G, { expose: W, emit: j }) {
+    W();
+    const o = G, a = j, v = c(o.modelValue), m = c(0), h = c(null), F = c({}), y = c(null), l = c(!1), f = c(1), i = c(0), p = c(null), u = n(() => o.items || []), x = n(() => u.value.length > 1), V = n(() => o.showNavigationButtons && x.value), g = (e) => {
+      const t = u.value.length - 1;
       return t < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > t ? t : e;
-    }, d = n(() => p(m.value)), r = n(() => i.value[d.value]), B = n(() => r.value?.kind === "image"), I = n(() => r.value?.kind === "video"), L = n(
+    }, d = n(() => g(m.value)), r = n(() => u.value[d.value]), B = n(() => r.value?.kind === "image"), I = n(() => r.value?.kind === "video"), L = n(
       () => r.value?.kind === "video" ? r.value.controls !== !1 : !1
     ), J = n(() => r.value?.kind === "video" ? r.value.muted === !0 : !1), Q = n(
       () => r.value?.kind === "video" ? r.value.playsinline !== !1 : !0
@@ -69,20 +71,20 @@ const Y = 45, dt = /* @__PURE__ */ He({
           o.videoFit === "cover" && I.value && "video-cover"
         ]
       })
-    ), ae = n(() => `rotate(${u.value}deg) scale(${f.value})`), le = n(
-      () => Te({
-        "--nmorph-media-gallery-trigger-height": o.height
+    ), ae = n(() => `rotate(${i.value}deg) scale(${f.value})`), le = n(
+      () => Ae({
+        "--nmorph-private-media-gallery-trigger-height": o.height
       })
-    ), ue = n(
+    ), ie = n(
       () => X({
         "nmorph-media-gallery__trigger": [o.height !== void 0 && "fixed-height"]
       })
     ), q = (e) => {
       if (e === void 0 || Number.isNaN(e) || e < 0) return "";
       if (e === 0) return "0 B";
-      const t = ["B", "KB", "MB", "GB", "TB"], s = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), M = e / 1024 ** s, be = M >= 10 || s === 0 || Number.isInteger(M) ? 0 : 1;
-      return `${M.toFixed(be)} ${t[s]}`;
-    }, ie = n(() => o.showFileSize ? q(r.value?.size) : ""), se = (e) => e.name || "", de = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, ce = (e) => q(e.size), E = (e) => e.downloadHref || "", z = (e) => o.showTriggerPreviewAction && e.kind === "video", C = (e) => o.showTriggerFullscreenAction && e.kind === "video", K = (e) => o.showTriggerDownloadAction && !!E(e), ve = (e) => o.showTriggerActions && (z(e) || C(e) || K(e)), fe = (e, t) => {
+      const t = ["B", "KB", "MB", "GB", "TB"], s = Math.min(Math.floor(Math.log(e) / Math.log(1024)), t.length - 1), M = e / 1024 ** s, ke = M >= 10 || s === 0 || Number.isInteger(M) ? 0 : 1;
+      return `${M.toFixed(ke)} ${t[s]}`;
+    }, ue = n(() => o.showFileSize ? q(r.value?.size) : ""), se = (e) => e.name || "", de = (e, t) => e.name || `${e.kind === "video" ? "Video" : "Image"} ${t + 1}`, ce = (e) => q(e.size), E = (e) => e.downloadHref || "", z = (e) => o.showTriggerPreviewAction && e.kind === "video", C = (e) => o.showTriggerFullscreenAction && e.kind === "video", K = (e) => o.showTriggerDownloadAction && !!E(e), ve = (e) => o.showTriggerActions && (z(e) || C(e) || K(e)), fe = (e, t) => {
       F.value[e] = t instanceof HTMLVideoElement ? t : null;
     };
     N(
@@ -93,13 +95,13 @@ const Y = 45, dt = /* @__PURE__ */ He({
     ), N(
       () => o.activeIndex,
       (e) => {
-        typeof e == "number" && (m.value = p(e));
+        typeof e == "number" && (m.value = g(e));
       },
       { immediate: !0 }
     ), N(
-      () => [o.initialIndex, i.value.length],
+      () => [o.initialIndex, u.value.length],
       () => {
-        typeof o.activeIndex != "number" && (m.value = p(o.initialIndex));
+        typeof o.activeIndex != "number" && (m.value = g(o.initialIndex));
       },
       { immediate: !0 }
     ), N(
@@ -110,40 +112,40 @@ const Y = 45, dt = /* @__PURE__ */ He({
     );
     const w = () => {
       !h.value || h.value === y.value || (h.value.pause(), l.value = !1, y.value = h.value);
-    }, k = () => {
-      f.value = 1, u.value = 0;
-    }, b = (e) => {
-      if (!i.value.length) return;
-      const t = p(e);
+    }, b = () => {
+      f.value = 1, i.value = 0;
+    }, k = (e) => {
+      if (!u.value.length) return;
+      const t = g(e);
       if (t === d.value) return;
-      w(), l.value = !1, m.value = t, k(), a("update:active-index", t);
-      const s = i.value[t];
+      w(), l.value = !1, m.value = t, b(), a("update:active-index", t);
+      const s = u.value[t];
       s && a("change", s, t);
     }, H = () => {
-      const e = i.value.length;
-      e && b(d.value === 0 ? e - 1 : d.value - 1);
-    }, A = () => {
-      const e = i.value.length;
-      e && b(d.value === e - 1 ? 0 : d.value + 1);
+      const e = u.value.length;
+      e && k(d.value === 0 ? e - 1 : d.value - 1);
+    }, S = () => {
+      const e = u.value.length;
+      e && k(d.value === e - 1 ? 0 : d.value + 1);
     }, me = (e) => {
-      if (!i.value.length) return;
-      const t = p(e);
-      w(), l.value = !1, m.value = t, k(), v.value = !0, a("update:model-value", !0), a("update:active-index", t);
-      const s = i.value[t];
+      if (!u.value.length) return;
+      const t = g(e);
+      w(), l.value = !1, m.value = t, b(), v.value = !0, a("update:model-value", !0), a("update:active-index", t);
+      const s = u.value[t];
       s && a("change", s, t);
     }, $ = () => {
       v.value && (w(), v.value = !1, a("update:model-value", !1), a("close"));
-    }, ge = () => {
-      u.value = u.value + 90, u.value >= 360 && (u.value = 0);
     }, pe = () => {
-      u.value = u.value - 90, u.value <= -360 && (u.value = 0);
+      i.value = i.value + 90, i.value >= 360 && (i.value = 0);
+    }, ge = () => {
+      i.value = i.value - 90, i.value <= -360 && (i.value = 0);
     }, he = () => {
       f.value = parseFloat(Math.min(f.value + 0.2, 4).toFixed(3));
     }, ye = () => {
       f.value = parseFloat(Math.max(f.value - 0.2, 0.2).toFixed(3));
     }, Ie = () => {
       f.value = 1;
-    }, T = async (e) => {
+    }, A = async (e) => {
       if (e)
         try {
           const t = e.requestFullscreen?.() || e.webkitRequestFullscreen?.();
@@ -155,9 +157,9 @@ const Y = 45, dt = /* @__PURE__ */ He({
         } catch {
         }
     }, we = async () => {
-      !r.value || r.value.kind !== "video" || (a("fullscreen", r.value, d.value), await T(h.value));
+      !r.value || r.value.kind !== "video" || (a("fullscreen", r.value, d.value), await A(h.value));
     }, Ne = async (e, t) => {
-      e.kind === "video" && (a("fullscreen", e, t), await T(F.value[t]));
+      e.kind === "video" && (a("fullscreen", e, t), await A(F.value[t]));
     }, O = (e, t) => {
       a("download", e, t);
     }, Fe = () => {
@@ -168,39 +170,39 @@ const Y = 45, dt = /* @__PURE__ */ He({
       l.value = !1;
     }, qe = () => {
       l.value = !1;
-    }, ke = () => {
+    }, be = () => {
       l.value = !1;
-    }, S = (e) => {
+    }, T = (e) => {
       if (v.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
         if (e.key === "Escape") {
           e.preventDefault(), $();
           return;
         }
-        x.value && (e.key === "ArrowLeft" && (e.preventDefault(), H()), e.key === "ArrowRight" && (e.preventDefault(), A()));
+        x.value && (e.key === "ArrowLeft" && (e.preventDefault(), H()), e.key === "ArrowRight" && (e.preventDefault(), S()));
       }
     }, Z = () => {
-      typeof document > "u" || document.addEventListener("keydown", S);
+      typeof document > "u" || document.addEventListener("keydown", T);
     }, P = () => {
-      typeof document > "u" || document.removeEventListener("keydown", S);
+      typeof document > "u" || document.removeEventListener("keydown", T);
     };
     N(
       v,
       (e) => {
-        e ? (Z(), y.value = null, m.value = p(
+        e ? (Z(), y.value = null, m.value = g(
           typeof o.activeIndex == "number" ? o.activeIndex : o.initialIndex
         )) : (w(), l.value = !1, P());
       },
       { immediate: !0 }
-    ), Ae(P);
-    const U = { SWIPE_THRESHOLD: Y, props: o, emit: a, open: v, currentIndex: m, currentVideoRef: h, triggerVideoRefs: F, pausedVideoRef: y, videoPlaying: l, scaleLevel: f, rotateLevel: u, pointerStart: g, sourceList: i, multipleItems: x, showNavigation: V, getClampedIndex: p, resolvedCurrentIndex: d, currentItem: r, isImage: B, isVideo: I, videoControls: L, videoMuted: J, videoPlaysinline: Q, videoPreload: ee, currentVideoName: te, currentItemName: R, currentName: oe, currentDownloadHref: D, showVideoFullscreenAction: _, showFileActions: re, modifiers: ne, imageTransform: ae, triggerStyle: le, triggerModifiers: ue, formatSize: q, currentSize: ie, getItemName: se, getItemLabel: de, getItemSize: ce, getItemDownloadHref: E, showTriggerPreviewActionForItem: z, showTriggerFullscreenActionForItem: C, showTriggerDownloadActionForItem: K, showTriggerActionsForItem: ve, setTriggerVideoRef: fe, pauseCurrentVideo: w, resetImageTransform: k, setCurrentIndex: b, previousHandler: H, nextHandler: A, openPreviewAt: me, closeHandler: $, rotateRight: ge, rotateLeft: pe, zoomIn: he, zoomOut: ye, toggleNormalSize: Ie, requestVideoFullscreen: T, fullscreenHandler: we, triggerFullscreenHandler: Ne, downloadItemHandler: O, downloadHandler: Fe, videoPlayHandler: xe, videoPauseHandler: Be, videoEndedHandler: qe, videoErrorHandler: ke, keyboardNavigationHandler: S, addKeyboardNavigationListener: Z, removeKeyboardNavigationListener: P, pointerDownHandler: (e) => {
-      g.value = { x: e.clientX, y: e.clientY };
+    ), Se(P);
+    const U = { SWIPE_THRESHOLD: Y, props: o, emit: a, open: v, currentIndex: m, currentVideoRef: h, triggerVideoRefs: F, pausedVideoRef: y, videoPlaying: l, scaleLevel: f, rotateLevel: i, pointerStart: p, sourceList: u, multipleItems: x, showNavigation: V, getClampedIndex: g, resolvedCurrentIndex: d, currentItem: r, isImage: B, isVideo: I, videoControls: L, videoMuted: J, videoPlaysinline: Q, videoPreload: ee, currentVideoName: te, currentItemName: R, currentName: oe, currentDownloadHref: D, showVideoFullscreenAction: _, showFileActions: re, modifiers: ne, imageTransform: ae, triggerStyle: le, triggerModifiers: ie, formatSize: q, currentSize: ue, getItemName: se, getItemLabel: de, getItemSize: ce, getItemDownloadHref: E, showTriggerPreviewActionForItem: z, showTriggerFullscreenActionForItem: C, showTriggerDownloadActionForItem: K, showTriggerActionsForItem: ve, setTriggerVideoRef: fe, pauseCurrentVideo: w, resetImageTransform: b, setCurrentIndex: k, previousHandler: H, nextHandler: S, openPreviewAt: me, closeHandler: $, rotateRight: pe, rotateLeft: ge, zoomIn: he, zoomOut: ye, toggleNormalSize: Ie, requestVideoFullscreen: A, fullscreenHandler: we, triggerFullscreenHandler: Ne, downloadItemHandler: O, downloadHandler: Fe, videoPlayHandler: xe, videoPauseHandler: Be, videoEndedHandler: qe, videoErrorHandler: be, keyboardNavigationHandler: T, addKeyboardNavigationListener: Z, removeKeyboardNavigationListener: P, pointerDownHandler: (e) => {
+      p.value = { x: e.clientX, y: e.clientY };
     }, pointerUpHandler: (e) => {
-      if (!g.value || !V.value) {
-        g.value = null;
+      if (!p.value || !V.value) {
+        p.value = null;
         return;
       }
-      const t = e.clientX - g.value.x, s = e.clientY - g.value.y;
-      g.value = null, !(Math.abs(t) < Y || Math.abs(t) < Math.abs(s) * 1.2) && (t > 0 ? H() : A());
+      const t = e.clientX - p.value.x, s = e.clientY - p.value.y;
+      p.value = null, !(Math.abs(t) < Y || Math.abs(t) < Math.abs(s) * 1.2) && (t > 0 ? H() : S());
     }, get NmorphButton() {
       return Re;
     }, get NmorphIcon() {
@@ -227,7 +229,7 @@ const Y = 45, dt = /* @__PURE__ */ He({
       return De;
     }, get NmorphImage() {
       return Pe;
-    }, NmorphPreviewPortal: Se };
+    }, NmorphPreviewPortal: Te };
     return Object.defineProperty(U, "__isScriptSetup", { enumerable: !1, value: !0 }), U;
   }
 });

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css

@@ -1 +1 @@
-.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:700;font-size:var(--font-size-extra-large);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);--color: currentColor}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}
+.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);--nmorph-private-icon-color: currentColor}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-color)}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-color)}

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -1,6 +1,6 @@
 import './NmorphMediaTile.css';
-import d from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeClass as c, withDirectives as p, createElementVNode as n, vShow as _, createBlock as t, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
+import m from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeClass as d, withDirectives as c, createElementVNode as p, vShow as _, createBlock as n, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
 /* empty css                     */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = ["src", "muted", "autoplay", "playsinline"], y = {
@@ -12,10 +12,13 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = {
 }, N = {
   key: 3,
   class: "nmorph-media-tile__name"
-}, I = {
+}, b = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, b = { class: "nmorph-media-tile__status" }, S = {
+}, I = {
+  key: 1,
+  class: "nmorph-media-tile__status"
+}, S = {
   key: 0,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Microphone muted"
@@ -32,14 +35,14 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = {
   class: "nmorph-media-tile__status-item",
   "aria-label": "Pinned"
 };
-function x(m, M, T, o, w, B) {
+function x(t, w, M, o, T, B) {
   return e(), r(
     "div",
     {
-      class: c(o.modifiers)
+      class: d(o.modifiers)
     },
     [
-      p(n("video", {
+      c(p("video", {
         ref: "videoRef",
         class: "nmorph-media-tile__video",
         src: o.props.src || void 0,
@@ -49,8 +52,8 @@ function x(m, M, T, o, w, B) {
       }, null, 8, v), [
         [_, o.hasVideo && !o.props.loading]
       ]),
-      !o.hasVideo || o.props.loading ? (e(), r("div", y, [
-        o.props.loading ? (e(), t(o.NmorphIcon, {
+      o.props.showFallback && (!o.hasVideo || o.props.loading) ? (e(), r("div", y, [
+        o.props.loading ? (e(), n(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
@@ -60,11 +63,12 @@ function x(m, M, T, o, w, B) {
           ]),
           _: 1
           /* STABLE */
-        })) : o.props.avatarSrc ? (e(), t(o.NmorphAvatar, {
+        })) : o.props.avatarSrc ? (e(), n(o.NmorphAvatar, {
           key: 1,
           src: o.props.avatarSrc,
           name: o.props.name,
-          size: 72
+          size: 72,
+          design: "plain"
         }, null, 8, ["src", "name"])) : (e(), r(
           "div",
           k,
@@ -81,13 +85,13 @@ function x(m, M, T, o, w, B) {
         )) : i("v-if", !0),
         o.props.error && o.props.errorText ? (e(), r(
           "span",
-          I,
+          b,
           l(o.props.errorText),
           1
           /* TEXT */
         )) : i("v-if", !0)
       ])) : i("v-if", !0),
-      n("div", b, [
+      o.props.showStatus ? (e(), r("div", I, [
         o.props.micMuted ? (e(), r("span", S, [
           a(o.NmorphIcon, { size: "small" }, {
             default: s(() => [
@@ -124,14 +128,14 @@ function x(m, M, T, o, w, B) {
             /* STABLE */
           })
         ])) : i("v-if", !0)
-      ]),
-      h(m.$slots, "overlay")
+      ])) : i("v-if", !0),
+      h(t.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const P = /* @__PURE__ */ f(d, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const P = /* @__PURE__ */ f(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
   P as default
 };

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphMediaTile.css';
-import { defineComponent as u, ref as p, computed as o, watch as c } from "vue";
+import { defineComponent as d, ref as p, computed as o, watch as c } from "vue";
 import { useModifiers as m } from "../../../utils/create-modifiers.js";
 import h from "../../../assets/icons/share.svg.js";
-import g from "../../../assets/icons/pin.svg.js";
-import y from "../../../assets/icons/mic.svg.js";
+import y from "../../../assets/icons/pin.svg.js";
+import g from "../../../assets/icons/mic.svg.js";
 import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import v from "../nmorph-avatar/NmorphAvatar.vue.js";
-import N from "../../../assets/icons/video.svg.js";
-import B from "../../../assets/icons/loader.svg.js";
-const L = /* @__PURE__ */ u({
+import B from "../nmorph-avatar/NmorphAvatar.vue.js";
+import v from "../../../assets/icons/video.svg.js";
+import N from "../../../assets/icons/loader.svg.js";
+const x = /* @__PURE__ */ d({
   __name: "NmorphMediaTile",
   props: {
     src: { type: String, required: !1, default: "" },
@@ -21,6 +21,8 @@ const L = /* @__PURE__ */ u({
     name: { type: String, required: !1, default: "" },
     avatarSrc: { type: String, required: !1, default: "" },
     loading: { type: Boolean, required: !1, default: !1 },
+    showFallback: { type: Boolean, required: !1, default: !0 },
+    showStatus: { type: Boolean, required: !1, default: !0 },
     micMuted: { type: Boolean, required: !1, default: !1 },
     videoOff: { type: Boolean, required: !1, default: !1 },
     screenSharing: { type: Boolean, required: !1, default: !1 },
@@ -32,7 +34,7 @@ const L = /* @__PURE__ */ u({
   },
   setup(l, { expose: i }) {
     const e = l, r = p(null), n = o(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), t = o(
-      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((d) => d[0]?.toUpperCase()).join("")
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((u) => u[0]?.toUpperCase()).join("")
     ), f = o(() => t.value || e.name || "?"), s = o(
       () => m({
         "nmorph-media-tile": [
@@ -56,23 +58,23 @@ const L = /* @__PURE__ */ u({
       { immediate: !0, flush: "post" }
     ), i({ videoRef: r });
     const a = { props: e, videoRef: r, hasVideo: n, initials: t, fallbackLabel: f, modifiers: s, get NmorphAvatar() {
-      return v;
+      return B;
     }, get NmorphIcon() {
       return q;
     }, get NmorphIconLoaderDots() {
-      return B;
+      return N;
     }, get NmorphIconMic() {
-      return y;
-    }, get NmorphIconPin() {
       return g;
+    }, get NmorphIconPin() {
+      return y;
     }, get NmorphIconShare() {
       return h;
     }, get NmorphIconVideo() {
-      return N;
+      return v;
     } };
     return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  L as default
+  x as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.css

@@ -1 +1 @@
-.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;gap:8px;justify-content:center}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:0;margin-bottom:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{--height: var(--nmorph-pagination-height);--size: var(--nmorph-pagination-height);width:40px;min-width:40px;height:var(--height);min-height:var(--height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--button .nmorph-radio__fake{padding:0}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}
+.nmorph-pagination{display:flex;justify-content:center;margin-top:var(--indentation-04)}.nmorph-pagination .nmorph-radio-group__content{display:flex;gap:8px;justify-content:center}.nmorph-pagination .nmorph-radio-group{display:inline-flex;align-items:center}.nmorph-pagination .nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:0;margin-bottom:0}.nmorph-pagination .nmorph-pagination__page-group{margin:0 var(--indentation-01)}.nmorph-pagination .nmorph-pagination__prev-icon{rotate:90deg}.nmorph-pagination .nmorph-pagination__next-icon{rotate:-90deg}.nmorph-pagination .nmorph-pagination__prev-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-btn{margin-left:8px}.nmorph-pagination .nmorph-pagination__page-btn{--nmorph-private-control-height: var(--nmorph-private-pagination-height);--nmorph-private-selection-control-size: var(--nmorph-private-pagination-height);width:40px;min-width:40px;height:var(--nmorph-private-pagination-height);min-height:var(--nmorph-private-pagination-height)}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__content,.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio .nmorph-radio__fake{width:100%;height:100%}.nmorph-pagination .nmorph-pagination__page-btn.nmorph-radio.nmorph-radio--nmorph .nmorph-radio__fake{padding:0}.nmorph-pagination .nmorph-pagination__page-btn-wrapper{display:flex}.nmorph-pagination .nmorph-pagination__prev-secondary-btn{margin-right:8px}.nmorph-pagination .nmorph-pagination__next-secondary-btn{margin-left:8px}

package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js

@@ -1,27 +1,27 @@
 import './NmorphPagination.css';
 import d from "./NmorphPagination.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeStyle as p, normalizeClass as t, createVNode as i, withCtx as a, Fragment as m, renderList as c, createBlock as h, mergeProps as s, createCommentVNode as _ } from "vue";
+import { openBlock as e, createElementBlock as l, normalizeStyle as c, normalizeClass as t, createVNode as a, withCtx as i, Fragment as p, renderList as m, createBlock as s, createCommentVNode as h } from "vue";
 /* empty css                      */
-import g from "../../../_virtual/_plugin-vue_export-helper.js";
-function b(f, l, v, o, k, N) {
-  return o.show ? (e(), r(
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+function b(k, r, v, n, g, f) {
+  return n.show ? (e(), l(
     "div",
     {
       key: 0,
-      class: t(o.modifiers),
-      style: p(o.paginationStyle)
+      class: t(n.modifiers),
+      style: c(n.paginationStyle)
     },
     [
-      i(o.NmorphButton, {
+      a(n.NmorphButton, {
         class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
-        height: o.props.height,
-        disabled: o.blockPrevButton || o.props.disabled,
-        onClick: o.prevClick
+        thickness: n.props.thickness,
+        disabled: n.blockPrevButton || n.props.disabled,
+        onClick: n.prevClick
       }, {
-        default: a(() => [
-          i(o.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
-            default: a(() => [
-              i(o.NmorphIconChevronDown)
+        default: i(() => [
+          a(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
+            default: i(() => [
+              a(n.NmorphIconChevronDown)
             ]),
             _: 1
             /* STABLE */
@@ -29,37 +29,37 @@ function b(f, l, v, o, k, N) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["height", "disabled"]),
-      i(o.NmorphRadioGroup, {
-        modelValue: o.selectedPage,
-        "onUpdate:modelValue": l[0] || (l[0] = (n) => o.selectedPage = n),
+      }, 8, ["thickness", "disabled"]),
+      a(n.NmorphRadioGroup, {
+        modelValue: n.selectedPage,
+        "onUpdate:modelValue": r[0] || (r[0] = (o) => n.selectedPage = o),
         class: "nmorph-pagination__page-group",
-        height: o.props.height,
-        disabled: o.props.disabled
+        thickness: n.props.thickness,
+        disabled: n.props.disabled
       }, {
-        default: a(() => [
-          (e(!0), r(
-            m,
+        default: i(() => [
+          (e(!0), l(
+            p,
             null,
-            c(o.visiblePages, (n) => (e(), r("div", {
-              key: n.value,
+            m(n.visiblePages, (o) => (e(), l("div", {
+              key: o.value,
               class: "nmorph-pagination__page-btn-wrapper"
             }, [
-              n.value === "prev" || n.value === "next" ? (e(), h(o.NmorphButton, {
+              o.value === "prev" || o.value === "next" ? (e(), s(n.NmorphButton, {
                 key: 0,
-                class: t(`nmorph-pagination__page-btn nmorph-pagination__${n.value}`),
-                text: n.label,
-                height: o.props.height,
-                disabled: o.props.disabled,
-                onClick: (x) => o.bigStepUpdate(n.value)
-              }, null, 8, ["class", "text", "height", "disabled", "onClick"])) : (e(), h(o.NmorphRadio, s({
+                class: t(`nmorph-pagination__page-btn nmorph-pagination__${o.value}`),
+                text: o.label,
+                thickness: n.props.thickness,
+                disabled: n.props.disabled,
+                onClick: (N) => n.bigStepUpdate(o.value)
+              }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (e(), s(n.NmorphRadio, {
                 key: 1,
-                ref_for: !0
-              }, n, {
+                value: o.value,
+                label: o.label,
                 class: "nmorph-pagination__page-btn",
-                height: o.props.height,
-                disabled: o.props.disabled
-              }), null, 16, ["height", "disabled"]))
+                thickness: n.props.thickness,
+                disabled: n.props.disabled
+              }, null, 8, ["value", "label", "thickness", "disabled"]))
             ]))),
             128
             /* KEYED_FRAGMENT */
@@ -67,17 +67,17 @@ function b(f, l, v, o, k, N) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["modelValue", "height", "disabled"]),
-      i(o.NmorphButton, {
+      }, 8, ["modelValue", "thickness", "disabled"]),
+      a(n.NmorphButton, {
         class: "nmorph-pagination__btn nmorph-pagination__next-btn",
-        height: o.props.height,
-        disabled: o.blockNextButton || o.props.disabled,
-        onClick: o.nextClick
+        thickness: n.props.thickness,
+        disabled: n.blockNextButton || n.props.disabled,
+        onClick: n.nextClick
       }, {
-        default: a(() => [
-          i(o.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
-            default: a(() => [
-              i(o.NmorphIconChevronDown)
+        default: i(() => [
+          a(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
+            default: i(() => [
+              a(n.NmorphIconChevronDown)
             ]),
             _: 1
             /* STABLE */
@@ -85,13 +85,13 @@ function b(f, l, v, o, k, N) {
         ]),
         _: 1
         /* STABLE */
-      }, 8, ["height", "disabled"])
+      }, 8, ["thickness", "disabled"])
     ],
     6
     /* CLASS, STYLE */
-  )) : _("v-if", !0);
+  )) : h("v-if", !0);
 }
-const w = /* @__PURE__ */ g(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const P = /* @__PURE__ */ _(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
-  w as default
+  P as default
 };