@nmorph/nmorph-ui-kit 3.0.6 → 3.0.7

package/dist/assets/icons/hand.svg.js

@@ -1,7 +1,7 @@
 import { openBlock as t, createElementBlock as o, createElementVNode as r } from "vue";
 const n = {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 1024 1024"
+  viewBox: "0 0 1024 1088"
 };
 function c(l, e) {
   return t(), o("svg", n, [...e[0] || (e[0] = [
@@ -9,7 +9,7 @@ function c(l, e) {
       "path",
       {
         fill: "currentColor",
-        d: "M360 140c0-36.45 29.55-66 66-66s66 29.55 66 66v420h32V86c0-36.45 29.55-66 66-66s66 29.55 66 66v474h32V160c0-36.45 29.55-66 66-66s66 29.55 66 66v424h30V256c0-36.45 29.55-66 66-66s66 29.55 66 66v444c0 167.9-136.1 304-304 304h-82c-98.69 0-190.2-51.5-241.34-135.92l-244.93-233.2a70 70 0 0 1 120.06-71.76L360 780z"
+        d: "M360 131.2c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28v453.6h32V72.88c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28V584.8h32v-432c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28v457.92h30V256.48c0-39.366 29.55-71.28 66-71.28s66 31.914 66 71.28V736c0 181.332-136.1 328.32-304 328.32h-82c-98.69 0-190.2-55.62-241.34-146.794L109.73 665.67a70 75.6 0 0 1 120.06-77.5L360 822.4z"
       },
       null,
       -1

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue.js

@@ -1,18 +1,18 @@
 import './NmorphCalendar.css';
 import f from "./NmorphCalendar.vue2.js";
-import { openBlock as o, createElementBlock as n, normalizeStyle as k, normalizeClass as h, renderSlot as r, createVNode as s, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as C, createTextVNode as _, toDisplayString as m } from "vue";
+import { openBlock as o, createElementBlock as r, normalizeStyle as k, normalizeClass as i, renderSlot as n, createVNode as s, mergeProps as C, withCtx as l, Fragment as c, renderList as y, createBlock as D, createElementVNode as m, createTextVNode as _, toDisplayString as v } from "vue";
 /* empty css                    */
-import v from "../../../_virtual/_plugin-vue_export-helper.js";
+import T from "../../../_virtual/_plugin-vue_export-helper.js";
 const g = ["data-date", "onClick"];
-function T(d, p, B, a, M, w) {
-  return o(), n(
+function p(d, B, M, a, w, x) {
+  return o(), r(
     "div",
     {
-      class: h(a.modifiers),
+      class: i(a.modifiers),
       style: k(a.styles)
     },
     [
-      r(d.$slots, "header", {}, () => [
+      n(d.$slots, "header", {}, () => [
         s(a.NmorphCalendarHeader, {
           year: a.initialDate.getFullYear(),
           month: a.initialDate.getMonth(),
@@ -25,54 +25,52 @@ function T(d, p, B, a, M, w) {
           onClickToday: a.setTodayMonth
         }, null, 8, ["year", "month", "design", "show-previous-month-button", "show-today-button", "show-next-month-button"])
       ]),
-      r(d.$slots, "content", {}, () => [
-        s(a.NmorphTable, {
+      n(d.$slots, "content", {}, () => [
+        s(a.NmorphTable, C({
           data: a.calendar,
-          bordered: "",
-          "row-hover": !1,
-          design: a.props.design
-        }, {
+          "row-hover": !1
+        }, a.tableDesignProps), {
           default: l(() => [
-            (o(!0), n(
+            (o(!0), r(
               c,
               null,
-              y(a.days, (e) => (o(), D(a.NmorphTableColumn, {
-                key: `${e}`,
-                prop: e,
-                label: e.toUpperCase()
+              y(a.days, (t) => (o(), D(a.NmorphTableColumn, {
+                key: `${t}`,
+                prop: t,
+                label: t.toUpperCase()
               }, {
                 default: l(({ scope: b }) => [
-                  (o(!0), n(
+                  (o(!0), r(
                     c,
                     null,
-                    y(b.rows, (t, i) => (o(), D(a.NmorphTableCell, {
-                      key: i,
-                      row: i
+                    y(b.rows, (e, h) => (o(), D(a.NmorphTableCell, {
+                      key: h,
+                      row: h
                     }, {
                       default: l(() => [
-                        C("div", {
-                          "data-date": `${a.dateData(t[e]).date}`,
-                          class: h([
+                        m("div", {
+                          "data-date": `${a.dateData(e[t]).date}`,
+                          class: i([
                             "nmorph-calendar-date",
-                            `nmorph-calendar-date--${a.dateData(t[e]).monthType}`,
+                            `nmorph-calendar-date--${a.dateData(e[t]).monthType}`,
                             {
-                              "nmorph-calendar-date--today": a.dateData(t[e]).isToday && !a.dateData(t[e]).hidden && a.props.markToday
+                              "nmorph-calendar-date--today": a.dateData(e[t]).isToday && !a.dateData(e[t]).hidden && a.props.markToday
                             },
-                            { "nmorph-calendar-date--hidden": a.dateData(t[e]).hidden },
+                            { "nmorph-calendar-date--hidden": a.dateData(e[t]).hidden },
                             {
-                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(t[e]).date)
+                              "nmorph-calendar-date--selected": a.isValueSelected(a.dateData(e[t]).date)
                             }
                           ]),
-                          onClick: (x) => a.clickDate(a.dateData(t[e]))
+                          onClick: (P) => a.clickDate(a.dateData(e[t]))
                         }, [
-                          r(d.$slots, "date-cell", {
+                          n(d.$slots, "date-cell", {
                             scope: {
-                              ...a.dateData(t[e]),
-                              selected: a.isValueSelected(a.dateData(t[e]).date)
+                              ...a.dateData(e[t]),
+                              selected: a.isValueSelected(a.dateData(e[t]).date)
                             }
                           }, () => [
                             _(
-                              m(a.dateData(t[e]).hidden ? "-" : a.dateData(t[e]).value),
+                              v(a.dateData(e[t]).hidden ? "-" : a.dateData(e[t]).value),
                               1
                               /* TEXT */
                             )
@@ -95,14 +93,14 @@ function T(d, p, B, a, M, w) {
           ]),
           _: 3
           /* FORWARDED */
-        }, 8, ["data", "design"])
+        }, 16, ["data"])
       ])
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const z = /* @__PURE__ */ v(f, [["render", T], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
+const E = /* @__PURE__ */ T(f, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-calendar/NmorphCalendar.vue"]]);
 export {
-  z as default
+  E as default
 };

package/dist/components/data/nmorph-calendar/NmorphCalendar.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphCalendar.css';
-import { defineComponent as R, ref as x, onMounted as O, reactive as k, watch as v, computed as s } from "vue";
-import { useModifiers as j } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as z } from "../../../utils/common.js";
-import W from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
-import { useCalendarTexts as Z } from "./hooks/use-calendar-texts.js";
-import { hasAnyRangeDateInPrevMonth as F, hasAnyRangeDateInNextMonth as G, isTodayInMonthRange as J, resetTimeToZero as d, getMonthDaysByWeek as K } from "./utils.js";
-import L from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
-import Q from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
-import U from "../nmorph-table/NmorphTable.vue.js";
-const ue = /* @__PURE__ */ R({
+import { defineComponent as O, ref as x, onMounted as k, reactive as j, watch as h, computed as u } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as W } from "../../../utils/common.js";
+import Z from "./inner-components/nmorph-calendar-header/NmorphCalendarHeader.vue.js";
+import { useCalendarTexts as F } from "./hooks/use-calendar-texts.js";
+import { hasAnyRangeDateInPrevMonth as G, hasAnyRangeDateInNextMonth as J, isTodayInMonthRange as K, resetTimeToZero as d, getMonthDaysByWeek as L } from "./utils.js";
+import Q from "../nmorph-table/components/nmorph-table-cell/NmorphTableCell.vue.js";
+import U from "../nmorph-table/components/nmorph-table-column/NmorphTableColumn.vue.js";
+import X from "../nmorph-table/NmorphTable.vue.js";
+const se = /* @__PURE__ */ O({
   __name: "NmorphCalendar",
   props: {
     markToday: { type: Boolean, required: !1, default: !0 },
@@ -22,119 +22,121 @@ const ue = /* @__PURE__ */ R({
   emits: ["update:model-value", "update-initial-date"],
   setup(N, { expose: b, emit: _ }) {
     b();
-    const r = N, i = _, { days: h } = Z(), y = () => {
-      l.value = M.value;
+    const a = N, s = _, { days: v } = F(), y = () => {
+      o.value = M.value;
     }, C = () => {
-      l.value = /* @__PURE__ */ new Date();
+      o.value = /* @__PURE__ */ new Date();
     }, g = () => {
-      l.value = A.value;
-    }, u = () => {
+      o.value = A.value;
+    }, i = () => {
       throw new Error("model value and type prop not matched");
     }, c = (e) => {
       if (e === null) return null;
-      if (r.type === "date") {
+      if (a.type === "date") {
         if (e instanceof Date)
           return d(e);
-        u();
+        i();
       }
-      const o = Array.isArray(e) && e.every((a) => a instanceof Date);
-      if (r.type === "dates") {
-        if (o)
-          return e.map((a) => d(a));
-        u();
+      const l = Array.isArray(e) && e.every((r) => r instanceof Date);
+      if (a.type === "dates") {
+        if (l)
+          return e.map((r) => d(r));
+        i();
       }
-      if (r.type === "daterange") {
-        if (o)
-          return e.map((a) => d(a)).slice(0, 2);
-        u();
+      if (a.type === "daterange") {
+        if (l)
+          return e.map((r) => d(r)).slice(0, 2);
+        i();
       }
     }, q = (e) => {
       if (t.value === null) return;
-      const { monthType: o, hidden: a } = e;
-      if (a) return;
-      o === "next" && g(), o === "previous" && y();
+      const { monthType: l, hidden: r } = e;
+      if (r) return;
+      l === "next" && g(), l === "previous" && y();
       const { date: n } = e;
-      if (r.type === "date" && (t.value = n, i("update:model-value", t.value)), r.type === "dates") {
-        if (!Array.isArray(t.value)) return u();
-        const m = n.toDateString(), w = t.value.map((P) => P.toDateString()).indexOf(m);
-        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), i("update:model-value", t.value);
+      if (a.type === "date" && (t.value = n, s("update:model-value", t.value)), a.type === "dates") {
+        if (!Array.isArray(t.value)) return i();
+        const m = n.toDateString(), w = t.value.map((R) => R.toDateString()).indexOf(m);
+        w !== -1 ? t.value.splice(w, 1) : t.value.push(n), s("update:model-value", t.value);
       }
-      if (r.type === "daterange") {
-        if (!Array.isArray(t.value)) return u();
-        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], i("update:model-value", t.value.slice(0, 2));
+      if (a.type === "daterange") {
+        if (!Array.isArray(t.value)) return i();
+        t.value.length === 0 ? t.value.push(n) : t.value.length === 1 ? n < t.value[0] ? t.value = [n, t.value[0]] : t.value.push(n) : t.value = [n], s("update:model-value", t.value.slice(0, 2));
       }
-    }, D = (e, o) => {
-      const [a, n] = o;
-      return o.length === 1 ? e.toDateString() === a.toDateString() : a && n ? e >= d(a) && e <= d(n) : !1;
+    }, D = (e, l) => {
+      const [r, n] = l;
+      return l.length === 1 ? e.toDateString() === r.toDateString() : r && n ? e >= d(r) && e <= d(n) : !1;
     }, B = (e) => {
       if (t.value === null) return !1;
-      if (r.type === "date")
-        return Array.isArray(t.value) ? u() : t.value.toDateString() === e.toDateString();
-      if (r.type === "dates")
-        return Array.isArray(t.value) ? !!t.value.find((a) => a.toDateString() === e.toDateString()) : u();
-      if (r.type === "daterange")
-        return Array.isArray(t.value) ? D(e, t.value) : u();
-    }, l = x(r.initialDate), t = x(c(r.modelValue));
-    O(() => {
-      i("update:model-value", t.value);
+      if (a.type === "date")
+        return Array.isArray(t.value) ? i() : t.value.toDateString() === e.toDateString();
+      if (a.type === "dates")
+        return Array.isArray(t.value) ? !!t.value.find((r) => r.toDateString() === e.toDateString()) : i();
+      if (a.type === "daterange")
+        return Array.isArray(t.value) ? D(e, t.value) : i();
+    }, o = x(a.initialDate), t = x(c(a.modelValue));
+    k(() => {
+      s("update:model-value", t.value);
     });
-    let p = k([]);
+    let p = j([]);
     const f = () => {
-      p = [], K(l, r.range).forEach((o) => {
-        const a = {};
-        o.forEach((n, m) => {
-          const T = h[m];
-          a[T] = n;
-        }), p.push(a);
+      p = [], L(o, a.range).forEach((l) => {
+        const r = {};
+        l.forEach((n, m) => {
+          const T = v[m];
+          r[T] = n;
+        }), p.push(r);
       });
     };
-    v(
-      () => r.initialDate,
+    h(
+      () => a.initialDate,
       (e) => {
-        l.value = e;
+        o.value = e;
       },
       {
         deep: !0
       }
-    ), v(l, () => {
-      f(), i("update-initial-date", l.value);
-    }), v(
-      () => r.modelValue,
+    ), h(o, () => {
+      f(), s("update-initial-date", o.value);
+    }), h(
+      () => a.modelValue,
       (e) => {
         t.value = c(e);
       }
     );
-    const M = s(() => new Date(l.value.setMonth(l.value.getMonth() - 1))), A = s(() => new Date(l.value.setMonth(l.value.getMonth() + 1))), V = s(() => {
-      const { range: e } = r, o = e ? F(l.value, e[0]) : !0, a = e ? G(l.value, e[1]) : !0, n = J(e);
+    const M = u(() => new Date(o.value.setMonth(o.value.getMonth() - 1))), A = u(() => new Date(o.value.setMonth(o.value.getMonth() + 1))), V = u(() => {
+      const { range: e } = a, l = e ? G(o.value, e[0]) : !0, r = e ? J(o.value, e[1]) : !0, n = K(e);
       return {
-        showPreviousMonthButton: o,
-        showNextMonthButton: a,
+        showPreviousMonthButton: l,
+        showNextMonthButton: r,
         showTodayButton: n
       };
-    }), E = s(
-      () => j({
+    }), E = u(
+      () => z({
         "nmorph-calendar": []
       })
-    ), H = s(
-      () => z({
-        "--nmorph-private-calendar-cell-height": r.cellHeight
+    ), P = u(
+      () => W({
+        "--nmorph-private-calendar-cell-height": a.cellHeight
       })
+    ), H = u(
+      () => a.design === "plain" ? { design: "plain", bordered: !0 } : { design: "nmorph" }
     ), I = (e) => e;
     f();
-    const S = { props: r, emit: i, days: h, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: u, convertValue: c, clickDate: q, isDateInRange: D, isValueSelected: B, initialDate: l, selectedValue: t, get calendar() {
+    const S = { props: a, emit: s, days: v, setPreviousMonth: y, setTodayMonth: C, setNextMonth: g, wrongType: i, convertValue: c, clickDate: q, isDateInRange: D, isValueSelected: B, initialDate: o, selectedValue: t, get calendar() {
       return p;
     }, set calendar(e) {
       p = e;
-    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: V, modifiers: E, styles: H, dateData: I, get NmorphTable() {
-      return U;
+    }, updateCalendar: f, prevMonth: M, nextMonth: A, showHeaderButtons: V, modifiers: E, styles: P, tableDesignProps: H, dateData: I, get NmorphTable() {
+      return X;
     }, get NmorphTableColumn() {
-      return Q;
+      return U;
     }, get NmorphTableCell() {
-      return L;
-    }, NmorphCalendarHeader: W };
+      return Q;
+    }, NmorphCalendarHeader: Z };
     return Object.defineProperty(S, "__isScriptSetup", { enumerable: !1, value: !0 }), S;
   }
 });
 export {
-  ue as default
+  se as default
 };

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