@nmorph/nmorph-ui-kit 3.0.5 → 3.0.7

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

@@ -1,96 +1,96 @@
 import './NmorphImagePreview.css';
 import _ from "./NmorphImagePreview.vue2.js";
-import { openBlock as n, createElementBlock as a, Fragment as g, normalizeStyle as v, normalizeClass as w, createElementVNode as d, renderList as p, withModifiers as k, createVNode as l, createSlots as m, withCtx as o, renderSlot as t, toDisplayString as y, createCommentVNode as c, createBlock as s, resolveDynamicComponent as f } from "vue";
+import { openBlock as n, createElementBlock as a, Fragment as g, normalizeStyle as p, normalizeClass as w, createElementVNode as m, renderList as v, 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 f } 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(r, B, T, e, L, P) {
+function I(e, T, B, r, P, z) {
   return n(), a(
     g,
     null,
     [
-      e.props.showTrigger ? (n(), a(
+      r.props.showTrigger ? (n(), a(
         "div",
         {
           key: 0,
-          class: w(e.modifiers),
-          style: v(e.triggerStyle)
+          class: w(r.modifiers),
+          style: p(r.triggerStyle)
         },
         [
-          d("div", {
+          m("div", {
             class: "nmorph-image-preview__trigger",
-            onClick: e.clickHandler
+            onClick: r.clickHandler
           }, [
-            e.showGalleryTrigger ? (n(!0), a(
+            r.showGalleryTrigger ? (n(!0), a(
               g,
               { key: 0 },
-              p(e.triggerSources, (i) => (n(), a("button", {
+              v(r.triggerSources, (i) => (n(), a("button", {
                 key: `${i.src}-${i.index}`,
                 type: "button",
                 class: "nmorph-image-preview__trigger-item",
-                "aria-label": e.getTriggerLabel(i.index),
-                onClick: k((h) => e.openPreviewAt(i.index), ["stop"])
+                "aria-label": r.getTriggerLabel(i.index),
+                onClick: k((h) => r.openPreviewAt(i.index), ["stop"])
               }, [
-                l(e.NmorphImage, {
+                l(r.NmorphImage, {
                   src: i.src,
-                  alt: e.getTriggerLabel(i.index),
-                  fit: e.props.fit,
+                  alt: r.getTriggerLabel(i.index),
+                  fit: r.props.fit,
                   design: "plain",
                   "frame-border": 0
-                }, m({
+                }, d({
                   _: 2
                   /* DYNAMIC */
                 }, [
-                  r.$slots.loading ? {
+                  e.$slots.loading ? {
                     name: "loading",
                     fn: o(() => [
-                      t(r.$slots, "loading")
+                      t(e.$slots, "loading")
                     ]),
                     key: "0"
                   } : void 0,
-                  r.$slots.error ? {
+                  e.$slots.error ? {
                     name: "error",
                     fn: o(() => [
-                      t(r.$slots, "error")
+                      t(e.$slots, "error")
                     ]),
                     key: "1"
                   } : void 0
                 ]), 1032, ["src", "alt", "fit"]),
-                i.index === e.lastVisibleTriggerIndex && e.hiddenTriggerCount > 0 ? (n(), a(
+                i.index === r.lastVisibleTriggerIndex && r.hiddenTriggerCount > 0 ? (n(), a(
                   "span",
                   C,
-                  " +" + y(e.hiddenTriggerCount),
+                  " +" + y(r.hiddenTriggerCount),
                   1
                   /* TEXT */
                 )) : c("v-if", !0)
               ], 8, N))),
               128
               /* KEYED_FRAGMENT */
-            )) : (n(), s(e.NmorphImage, {
+            )) : (n(), s(r.NmorphImage, {
               key: 1,
-              src: e.triggerSource,
-              alt: e.props.alt,
-              fit: e.props.fit,
+              src: r.triggerSource,
+              alt: r.props.alt,
+              fit: r.props.fit,
               design: "plain",
               "frame-border": 0
-            }, m({
+            }, d({
               _: 2
               /* DYNAMIC */
             }, [
-              r.$slots.loading ? {
+              e.$slots.loading ? {
                 name: "loading",
                 fn: o(() => [
-                  t(r.$slots, "loading")
+                  t(e.$slots, "loading")
                 ]),
                 key: "0"
               } : void 0,
-              r.$slots.error ? {
+              e.$slots.error ? {
                 name: "error",
                 fn: o(() => [
-                  t(r.$slots, "error")
+                  t(e.$slots, "error")
                 ]),
                 key: "1"
               } : void 0
@@ -100,34 +100,34 @@ function I(r, B, T, e, L, P) {
         6
         /* CLASS, STYLE */
       )) : c("v-if", !0),
-      e.open ? (n(), s(e.NmorphPreviewPortal, {
+      r.open ? (n(), s(r.NmorphPreviewPortal, {
         key: 1,
-        show: e.open,
-        "z-index": e.props.zIndex,
+        show: r.open,
+        "z-index": r.props.zIndex,
         "root-class": "nmorph-image-preview__portal",
-        "state-class": e.modifiers,
+        "state-class": r.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": 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
+        "navigation-button-margin": r.props.navigationButtonMargin,
+        "content-width": r.props.previewWidth,
+        "content-height": r.props.previewHeight,
+        "show-navigation": r.showNavigation,
+        "show-action-bar": r.props.showActionBar,
+        onClose: r.closeHandler,
+        onPrevious: r.previousHandler,
+        onNext: r.nextHandler
       }, {
         actions: o(() => [
           (n(), a(
             g,
             null,
-            p(e.actions, (i, h) => d("div", {
+            v(r.actions, (i, h) => m("div", {
               key: h,
               class: "nmorph-image-preview__action-element"
             }, [
-              l(e.NmorphButton, {
+              l(r.NmorphButton, {
                 class: "nmorph-preview-portal__control-button",
                 design: "plain",
                 borderless: "",
@@ -135,7 +135,7 @@ function I(r, B, T, e, L, P) {
               }, {
                 default: o(() => [
                   l(
-                    e.NmorphIcon,
+                    r.NmorphIcon,
                     null,
                     {
                       default: o(() => [
@@ -155,18 +155,18 @@ function I(r, B, T, e, L, P) {
             64
             /* STABLE_FRAGMENT */
           )),
-          d("div", S, [
-            l(e.NmorphButton, {
+          m("div", S, [
+            l(r.NmorphButton, {
               class: "nmorph-preview-portal__control-button",
               design: "plain",
               borderless: "",
-              disabled: e.scaleLevel === 1,
-              onClick: e.enlargeShrinkActionData.handler
+              disabled: r.scaleLevel === 1,
+              onClick: r.enlargeShrinkActionData.handler
             }, {
               default: o(() => [
-                l(e.NmorphIcon, null, {
+                l(r.NmorphIcon, null, {
                   default: o(() => [
-                    (n(), s(f(e.enlargeShrinkActionData.icon)))
+                    (n(), s(f(r.enlargeShrinkActionData.icon)))
                   ]),
                   _: 1
                   /* STABLE */
@@ -178,28 +178,28 @@ function I(r, B, T, e, L, P) {
           ])
         ]),
         default: o(() => [
-          l(e.NmorphImage, {
-            src: e.triggerSource,
-            alt: e.props.alt,
+          l(r.NmorphImage, {
+            src: r.triggerSource,
+            alt: r.props.alt,
             fit: "contain",
             design: "plain",
             "frame-border": 0,
-            style: v({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
-          }, m({
+            style: p({ transform: r.imageTransform })
+          }, d({
             _: 2
             /* DYNAMIC */
           }, [
-            r.$slots.loading ? {
+            e.$slots.loading ? {
               name: "loading",
               fn: o(() => [
-                t(r.$slots, "loading")
+                t(e.$slots, "loading")
               ]),
               key: "0"
             } : void 0,
-            r.$slots.error ? {
+            e.$slots.error ? {
               name: "error",
               fn: o(() => [
-                t(r.$slots, "error")
+                t(e.$slots, "error")
               ]),
               key: "1"
             } : void 0

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

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

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

@@ -1,6 +1,6 @@
 import './NmorphMediaTile.css';
 import s from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeClass as m, withDirectives as c, createElementVNode as p, vShow as _, createCommentVNode as i, createBlock as r, withCtx as l, createVNode as n, toDisplayString as t, renderSlot as h } from "vue";
+import { openBlock as e, createElementBlock as i, normalizeClass as m, withDirectives as p, createElementVNode as c, vShow as _, createCommentVNode as a, createBlock as r, withCtx as l, createVNode as n, toDisplayString as t, renderSlot as h } from "vue";
 /* empty css                     */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"], k = {
@@ -20,13 +20,13 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"]
   class: "nmorph-media-tile__status"
 };
 function S(d, x, V, o, B, M) {
-  return e(), a(
+  return e(), i(
     "div",
     {
       class: m(o.modifiers)
     },
     [
-      c(p("video", {
+      p(c("video", {
         ref: "videoRef",
         class: "nmorph-media-tile__video",
         src: o.videoSrc,
@@ -36,15 +36,15 @@ function S(d, x, V, o, B, M) {
       }, null, 8, v), [
         [_, o.videoVisible && !o.props.loading]
       ]),
-      o.needsAudioOnlyOutput ? (e(), a("audio", {
+      o.needsSeparateAudioOutput ? (e(), i("audio", {
         key: 0,
         ref: "audioRef",
         class: "nmorph-media-tile__audio",
         muted: o.props.muted,
         autoplay: o.props.autoplay,
         preload: "auto"
-      }, null, 8, y)) : i("v-if", !0),
-      o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), a("div", k, [
+      }, null, 8, y)) : a("v-if", !0),
+      o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), i("div", k, [
         o.props.loading ? (e(), r(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
@@ -61,29 +61,29 @@ function S(d, x, V, o, B, M) {
           name: o.props.name,
           size: 72,
           design: "plain"
-        }, null, 8, ["src", "name"])) : (e(), a(
+        }, null, 8, ["src", "name"])) : (e(), i(
           "div",
           b,
           t(o.fallbackLabel),
           1
           /* TEXT */
         )),
-        o.props.name ? (e(), a(
+        o.props.name ? (e(), i(
           "span",
           N,
           t(o.props.name),
           1
           /* TEXT */
-        )) : i("v-if", !0),
-        o.props.error && o.props.errorText ? (e(), a(
+        )) : a("v-if", !0),
+        o.props.error && o.props.errorText ? (e(), i(
           "span",
           u,
           t(o.props.errorText),
           1
           /* TEXT */
-        )) : i("v-if", !0)
-      ])) : i("v-if", !0),
-      o.props.showStatus ? (e(), a("div", g, [
+        )) : a("v-if", !0)
+      ])) : a("v-if", !0),
+      o.props.showStatus ? (e(), i("div", g, [
         o.props.micMuted ? (e(), r(o.NmorphButton, {
           key: 0,
           class: "nmorph-media-tile__status-item",
@@ -96,7 +96,7 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : i("v-if", !0),
+        })) : a("v-if", !0),
         o.props.videoOff ? (e(), r(o.NmorphButton, {
           key: 1,
           class: "nmorph-media-tile__status-item",
@@ -109,7 +109,7 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : i("v-if", !0),
+        })) : a("v-if", !0),
         o.props.screenSharing ? (e(), r(o.NmorphButton, {
           key: 2,
           class: "nmorph-media-tile__status-item",
@@ -122,15 +122,15 @@ function S(d, x, V, o, B, M) {
           ]),
           _: 1
           /* STABLE */
-        })) : i("v-if", !0)
-      ])) : i("v-if", !0),
+        })) : a("v-if", !0)
+      ])) : a("v-if", !0),
       h(d.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const T = /* @__PURE__ */ f(s, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const z = /* @__PURE__ */ f(s, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
-  T as default
+  z as default
 };