@nmorph/nmorph-ui-kit 3.0.1 → 3.0.2

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

@@ -1,15 +1,15 @@
 import './NmorphMediaGallery.css';
-import y from "./NmorphMediaGallery.vue2.js";
-import { openBlock as l, createElementBlock as a, Fragment as s, normalizeStyle as g, normalizeClass as f, renderList as v, createElementVNode as c, createBlock as m, createVNode as e, withCtx as n, createCommentVNode as i, toDisplayString as _, withModifiers as h } from "vue";
+import v from "./NmorphMediaGallery.vue2.js";
+import { openBlock as l, createElementBlock as n, Fragment as h, normalizeStyle as g, normalizeClass as f, renderList as y, createElementVNode as c, createBlock as m, createVNode as e, withCtx as a, createCommentVNode as i, toDisplayString as _, withModifiers as s } from "vue";
 /* empty css                        */
 import I from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
+const w = ["aria-label", "onClick"], p = ["src", "poster", "title"], N = {
   key: 2,
   class: "nmorph-media-gallery__trigger-play"
-}, b = {
+}, k = {
   key: 3,
   class: "nmorph-media-gallery__trigger-name"
-}, p = {
+}, b = {
   key: 4,
   class: "nmorph-media-gallery__trigger-size"
 }, z = {
@@ -26,11 +26,11 @@ const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
   class: "nmorph-media-gallery__file-size"
 }, E = { class: "nmorph-media-gallery__action-element" }, V = { class: "nmorph-media-gallery__action-element" }, R = { class: "nmorph-media-gallery__action-element" }, x = { class: "nmorph-media-gallery__action-element" }, M = { class: "nmorph-media-gallery__action-element" };
 function O(G, U, Z, o, j, W) {
-  return l(), a(
-    s,
+  return l(), n(
+    h,
     null,
     [
-      o.props.showTrigger ? (l(), a(
+      o.props.showTrigger ? (l(), n(
         "div",
         {
           key: 0,
@@ -38,10 +38,10 @@ function O(G, U, Z, o, j, W) {
           style: g(o.triggerStyle)
         },
         [
-          (l(!0), a(
-            s,
+          (l(!0), n(
+            h,
             null,
-            v(o.sourceList, (r, t) => (l(), a(
+            y(o.sourceList, (r, t) => (l(), n(
               "div",
               {
                 key: `${r.kind}-${r.src}-${t}`,
@@ -60,8 +60,9 @@ function O(G, U, Z, o, j, W) {
                     alt: r.alt || o.getItemLabel(r, t),
                     title: o.getItemName(r),
                     fit: "cover",
+                    design: "plain",
                     "frame-border": 0
-                  }, null, 8, ["src", "alt", "title"])) : (l(), a("video", {
+                  }, null, 8, ["src", "alt", "title"])) : (l(), n("video", {
                     key: 1,
                     ref_for: !0,
                     ref: (d) => o.setTriggerVideoRef(t, d),
@@ -72,84 +73,84 @@ function O(G, U, Z, o, j, W) {
                     playsinline: "",
                     preload: "metadata",
                     title: o.getItemName(r)
-                  }, null, 8, k)),
-                  o.props.showTriggerPlayButton && r.kind === "video" ? (l(), a("span", w, [
+                  }, null, 8, p)),
+                  o.props.showTriggerPlayButton && r.kind === "video" ? (l(), n("span", N, [
                     e(o.NmorphIcon, {
                       size: "medium",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconPlay)
                       ]),
                       _: 1
                       /* STABLE */
                     })
                   ])) : i("v-if", !0),
-                  o.props.showTriggerName && o.getItemName(r) ? (l(), a(
+                  o.props.showTriggerName && o.getItemName(r) ? (l(), n(
                     "span",
-                    b,
+                    k,
                     _(o.getItemName(r)),
                     1
                     /* TEXT */
                   )) : i("v-if", !0),
-                  o.props.showTriggerSize && o.getItemSize(r) ? (l(), a(
+                  o.props.showTriggerSize && o.getItemSize(r) ? (l(), n(
                     "span",
-                    p,
+                    b,
                     _(o.getItemSize(r)),
                     1
                     /* TEXT */
                   )) : i("v-if", !0)
-                ], 8, N),
-                o.showTriggerActionsForItem(r) ? (l(), a("div", z, [
-                  o.showTriggerPreviewActionForItem(r) ? (l(), a("button", {
+                ], 8, w),
+                o.showTriggerActionsForItem(r) ? (l(), n("div", z, [
+                  o.showTriggerPreviewActionForItem(r) ? (l(), n("button", {
                     key: 0,
                     type: "button",
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Preview ${o.getItemLabel(r, t)}`,
-                    onClick: h((d) => o.openPreviewAt(t), ["stop"])
+                    onClick: s((d) => o.openPreviewAt(t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconEye)
                       ]),
                       _: 1
                       /* STABLE */
                     })
                   ], 8, C)) : i("v-if", !0),
-                  o.showTriggerFullscreenActionForItem(r) ? (l(), a("button", {
+                  o.showTriggerFullscreenActionForItem(r) ? (l(), n("button", {
                     key: 1,
                     type: "button",
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Fullscreen ${o.getItemLabel(r, t)}`,
-                    onClick: h((d) => o.triggerFullscreenHandler(r, t), ["stop"])
+                    onClick: s((d) => o.triggerFullscreenHandler(r, t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconFullScreen)
                       ]),
                       _: 1
                       /* STABLE */
                     })
                   ], 8, H)) : i("v-if", !0),
-                  o.showTriggerDownloadActionForItem(r) ? (l(), a("a", {
+                  o.showTriggerDownloadActionForItem(r) ? (l(), n("a", {
                     key: 2,
                     href: o.getItemDownloadHref(r),
                     download: o.getItemName(r) || void 0,
                     class: "nmorph-media-gallery__trigger-action",
                     "aria-label": `Download ${o.getItemLabel(r, t)}`,
-                    onClick: h((d) => o.downloadItemHandler(r, t), ["stop"])
+                    onClick: s((d) => o.downloadItemHandler(r, t), ["stop"])
                   }, [
                     e(o.NmorphIcon, {
                       size: "small",
                       color: "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: n(() => [
+                      default: a(() => [
                         e(o.NmorphIconDownload)
                       ]),
                       _: 1
@@ -185,12 +186,17 @@ function O(G, U, Z, o, j, W) {
         onPrevious: o.previousHandler,
         onNext: o.nextHandler
       }, {
-        actions: n(() => [
+        actions: a(() => [
           c("div", E, [
-            e(o.NmorphButton, { onClick: o.rotateRight }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.rotateRight
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconRotateRight)
                   ]),
                   _: 1
@@ -202,10 +208,15 @@ function O(G, U, Z, o, j, W) {
             })
           ]),
           c("div", V, [
-            e(o.NmorphButton, { onClick: o.rotateLeft }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.rotateLeft
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconRotateLeft)
                   ]),
                   _: 1
@@ -217,10 +228,15 @@ function O(G, U, Z, o, j, W) {
             })
           ]),
           c("div", R, [
-            e(o.NmorphButton, { onClick: o.zoomIn }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.zoomIn
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconZoomIn)
                   ]),
                   _: 1
@@ -232,10 +248,15 @@ function O(G, U, Z, o, j, W) {
             })
           ]),
           c("div", x, [
-            e(o.NmorphButton, { onClick: o.zoomOut }, {
-              default: n(() => [
+            e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
+              onClick: o.zoomOut
+            }, {
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconZoomOut)
                   ]),
                   _: 1
@@ -248,12 +269,15 @@ function O(G, U, Z, o, j, W) {
           ]),
           c("div", M, [
             e(o.NmorphButton, {
+              class: "nmorph-preview-portal__control-button",
+              design: "plain",
+              borderless: "",
               disabled: o.scaleLevel === 1,
               onClick: o.toggleNormalSize
             }, {
-              default: n(() => [
+              default: a(() => [
                 e(o.NmorphIcon, null, {
-                  default: n(() => [
+                  default: a(() => [
                     o.scaleLevel < 1 ? (l(), m(o.NmorphIconEnlarge, { key: 0 })) : (l(), m(o.NmorphIconShrink, { key: 1 }))
                   ]),
                   _: 1
@@ -265,7 +289,7 @@ function O(G, U, Z, o, j, W) {
             }, 8, ["disabled"])
           ])
         ]),
-        default: n(() => [
+        default: a(() => [
           c("div", F, [
             o.currentItem?.kind === "image" ? (l(), m(o.NmorphImage, {
               key: 0,
@@ -273,11 +297,12 @@ function O(G, U, Z, o, j, W) {
               alt: o.currentItem.alt || o.currentItem.name || "",
               title: o.currentItem.name,
               fit: o.props.imageFit,
+              design: "plain",
               "frame-border": 0,
               style: g({ transform: o.imageTransform }),
               onPointerdown: o.pointerDownHandler,
               onPointerup: o.pointerUpHandler
-            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), a("video", {
+            }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), n("video", {
               key: 1,
               ref: "currentVideoRef",
               class: "nmorph-media-gallery__video",
@@ -295,45 +320,45 @@ function O(G, U, Z, o, j, W) {
               onEnded: o.videoEndedHandler,
               onError: o.videoErrorHandler
             }, null, 40, S)) : i("v-if", !0),
-            o.currentName ? (l(), a(
+            o.currentName ? (l(), n(
               "span",
               D,
               _(o.currentName),
               1
               /* TEXT */
             )) : i("v-if", !0),
-            o.showFileActions ? (l(), a("div", L, [
-              o.showVideoFullscreenAction ? (l(), a("button", {
+            o.showFileActions ? (l(), n("div", L, [
+              o.showVideoFullscreenAction ? (l(), n("button", {
                 key: 0,
                 type: "button",
                 class: "nmorph-media-gallery__file-action",
                 "aria-label": `Fullscreen ${o.currentVideoName}`,
-                onClick: h(o.fullscreenHandler, ["stop"])
+                onClick: s(o.fullscreenHandler, ["stop"])
               }, [
                 e(o.NmorphIcon, {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconFullScreen)
                   ]),
                   _: 1
                   /* STABLE */
                 })
               ], 8, B)) : i("v-if", !0),
-              o.currentDownloadHref ? (l(), a("a", {
+              o.currentDownloadHref ? (l(), n("a", {
                 key: 1,
                 href: o.currentDownloadHref,
                 download: o.currentItemName || void 0,
                 class: "nmorph-media-gallery__file-action",
                 "aria-label": `Download ${o.currentItemName || "media"}`,
-                onClick: h(o.downloadHandler, ["stop"])
+                onClick: s(o.downloadHandler, ["stop"])
               }, [
                 e(o.NmorphIcon, {
                   size: "small",
                   color: "var(--nmorph-contrast-text-color)"
                 }, {
-                  default: n(() => [
+                  default: a(() => [
                     e(o.NmorphIconDownload)
                   ]),
                   _: 1
@@ -341,7 +366,7 @@ function O(G, U, Z, o, j, W) {
                 })
               ], 8, T)) : i("v-if", !0)
             ])) : i("v-if", !0),
-            o.currentSize ? (l(), a(
+            o.currentSize ? (l(), n(
               "span",
               A,
               _(o.currentSize),
@@ -358,7 +383,7 @@ function O(G, U, Z, o, j, W) {
     /* STABLE_FRAGMENT */
   );
 }
-const X = /* @__PURE__ */ I(y, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
+const X = /* @__PURE__ */ I(v, [["render", O], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue"]]);
 export {
   X as default
 };

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css

@@ -1 +1 @@
-.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}
+.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-private-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-private-preview-portal-content-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-preview-portal-content-width);height:var(--nmorph-private-preview-portal-content-height);transform:translate(-50%,-50%);transition:var(--transition-04) opacity ease-in-out;pointer-events:none}.nmorph-preview-portal .nmorph-preview-portal__actions{position:absolute;bottom:-50px;left:50%;z-index:2;display:flex;height:0;transform:translate(-50%);transition:ease-in-out bottom var(--transition-03)}.nmorph-preview-portal .nmorph-button__content{box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button{background:var(--nmorph-overlay-color);border-radius:4px}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-contrast-text-color);background:transparent;border:0;box-shadow:none}.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content .nmorph-icon,.nmorph-preview-portal .nmorph-preview-portal__control-button .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-preview-portal .nmorph-preview-portal__left,.nmorph-preview-portal .nmorph-preview-portal__right{z-index:2}.nmorph-preview-portal .nmorph-preview-portal__left{position:absolute;top:50%;left:-100%;transform:rotate(90deg) translate(-50%);transition:ease-in-out left var(--transition-03)}.nmorph-preview-portal .nmorph-preview-portal__right{position:absolute;top:50%;right:-100%;transform:rotate(270deg) translate(50%);transition:ease-in-out right var(--transition-03)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__actions{bottom:50px}.nmorph-preview-portal.nmorph-preview-portal--opened{--nmorph-private-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-private-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-private-preview-portal-btn-margin)}

package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.js

@@ -1,10 +1,10 @@
 import './NmorphPreviewPortal.css';
 import v from "./NmorphPreviewPortal.vue2.js";
-import { openBlock as t, createBlock as c, Teleport as f, createElementVNode as m, normalizeStyle as h, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as s, createCommentVNode as i } from "vue";
+import { openBlock as t, createBlock as c, Teleport as h, createElementVNode as m, normalizeStyle as f, normalizeClass as n, createVNode as e, withCtx as l, renderSlot as d, createElementBlock as a, createCommentVNode as i } from "vue";
 /* empty css                         */
 import w from "../../../_virtual/_plugin-vue_export-helper.js";
-function N(p, r, C, o, _, k) {
-  return o.props.show ? (t(), c(f, {
+function _(p, r, N, o, C, k) {
+  return o.props.show ? (t(), c(h, {
     key: 0,
     to: "body"
   }, [
@@ -12,15 +12,15 @@ function N(p, r, C, o, _, k) {
       "div",
       {
         class: n(o.rootClasses),
-        style: h(o.portalStyle)
+        style: f(o.portalStyle)
       },
       [
         e(o.NmorphOverlay, {
           show: o.props.show,
           "z-index": o.props.zIndex,
           "disabled-teleport": "",
-          onOnOutsideClick: r[2] || (r[2] = (a) => o.emit("close")),
-          onOnEscapeKeydown: r[3] || (r[3] = (a) => o.emit("close"))
+          onOnOutsideClick: r[2] || (r[2] = (s) => o.emit("close")),
+          onOnEscapeKeydown: r[3] || (r[3] = (s) => o.emit("close"))
         }, {
           default: l(() => [
             m(
@@ -34,7 +34,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             ),
-            o.props.showNavigation ? (t(), s(
+            o.props.showNavigation ? (t(), a(
               "div",
               {
                 key: 0,
@@ -42,8 +42,10 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  class: "nmorph-preview-portal__control-button",
                   design: "plain",
-                  onClick: r[0] || (r[0] = (a) => o.emit("previous"))
+                  borderless: "",
+                  onClick: r[0] || (r[0] = (s) => o.emit("previous"))
                 }, {
                   default: l(() => [
                     e(o.NmorphIcon, null, {
@@ -61,7 +63,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showNavigation ? (t(), s(
+            o.props.showNavigation ? (t(), a(
               "div",
               {
                 key: 1,
@@ -69,8 +71,10 @@ function N(p, r, C, o, _, k) {
               },
               [
                 e(o.NmorphButton, {
+                  class: "nmorph-preview-portal__control-button",
                   design: "plain",
-                  onClick: r[1] || (r[1] = (a) => o.emit("next"))
+                  borderless: "",
+                  onClick: r[1] || (r[1] = (s) => o.emit("next"))
                 }, {
                   default: l(() => [
                     e(o.NmorphIcon, null, {
@@ -88,7 +92,7 @@ function N(p, r, C, o, _, k) {
               2
               /* CLASS */
             )) : i("v-if", !0),
-            o.props.showActionBar ? (t(), s(
+            o.props.showActionBar ? (t(), a(
               "div",
               {
                 key: 2,
@@ -110,7 +114,7 @@ function N(p, r, C, o, _, k) {
     )
   ])) : i("v-if", !0);
 }
-const z = /* @__PURE__ */ w(v, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
+const B = /* @__PURE__ */ w(v, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue"]]);
 export {
-  z as default
+  B as default
 };