@nmorph/nmorph-ui-kit 3.0.1 → 3.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/assets/icons/external-link.svg.js +2 -2
  2. package/dist/assets/icons/hand.svg.js +30 -9
  3. package/dist/components/basic/nmorph-scroll/NmorphScroll.vue.js +5 -4
  4. package/dist/components/basic/nmorph-scroll/NmorphScroll.vue2.js +143 -124
  5. package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css +1 -1
  6. package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue.js +10 -10
  7. package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue2.js +24 -24
  8. package/dist/components/data/nmorph-avatar/NmorphAvatar.css +1 -1
  9. package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js +28 -26
  10. package/dist/components/data/nmorph-badge/NmorphBadge.css +1 -1
  11. package/dist/components/data/nmorph-badge/NmorphBadge.vue.js +60 -59
  12. package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js +28 -26
  13. package/dist/components/data/nmorph-image/NmorphImage.vue.js +22 -20
  14. package/dist/components/data/nmorph-image/NmorphImage.vue2.js +24 -18
  15. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +17 -10
  16. package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css +1 -1
  17. package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +100 -70
  18. package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue2.js +158 -137
  19. package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css +1 -1
  20. package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.js +17 -13
  21. package/dist/components/data/nmorph-progress/NmorphProgress.css +1 -1
  22. package/dist/components/data/nmorph-progress/NmorphProgress.vue2.js +6 -6
  23. package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue2.js +8 -8
  24. package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js +12 -11
  25. package/dist/index.umd.js +45 -45
  26. package/dist/package.json.js +1 -1
  27. package/dist/src/components/data/nmorph-avatar/NmorphAvatar.vue.d.ts +1 -0
  28. package/dist/src/components/data/nmorph-avatar/types.d.ts +1 -0
  29. package/dist/src/components/data/nmorph-image/types.d.ts +1 -0
  30. package/dist/src/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.d.ts +2 -0
  31. package/dist/src/components/data/nmorph-media-gallery/types.d.ts +10 -0
  32. package/dist/style.css +1 -1
  33. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  import './NmorphImagePreview.css';
2
2
  import _ from "./NmorphImagePreview.vue2.js";
3
- import { openBlock as n, createElementBlock as a, Fragment as g, normalizeStyle as v, normalizeClass as w, createElementVNode as m, renderList as f, 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 p } from "vue";
3
+ 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";
4
4
  /* empty css */
5
5
  import b from "../../../_virtual/_plugin-vue_export-helper.js";
6
6
  const N = ["aria-label", "onClick"], C = {
@@ -20,14 +20,14 @@ function I(r, B, T, e, L, P) {
20
20
  style: v(e.triggerStyle)
21
21
  },
22
22
  [
23
- m("div", {
23
+ d("div", {
24
24
  class: "nmorph-image-preview__trigger",
25
25
  onClick: e.clickHandler
26
26
  }, [
27
27
  e.showGalleryTrigger ? (n(!0), a(
28
28
  g,
29
29
  { key: 0 },
30
- f(e.triggerSources, (i) => (n(), a("button", {
30
+ p(e.triggerSources, (i) => (n(), a("button", {
31
31
  key: `${i.src}-${i.index}`,
32
32
  type: "button",
33
33
  class: "nmorph-image-preview__trigger-item",
@@ -38,8 +38,9 @@ function I(r, B, T, e, L, P) {
38
38
  src: i.src,
39
39
  alt: e.getTriggerLabel(i.index),
40
40
  fit: e.props.fit,
41
+ design: "plain",
41
42
  "frame-border": 0
42
- }, d({
43
+ }, m({
43
44
  _: 2
44
45
  /* DYNAMIC */
45
46
  }, [
@@ -73,8 +74,9 @@ function I(r, B, T, e, L, P) {
73
74
  src: e.triggerSource,
74
75
  alt: e.props.alt,
75
76
  fit: e.props.fit,
77
+ design: "plain",
76
78
  "frame-border": 0
77
- }, d({
79
+ }, m({
78
80
  _: 2
79
81
  /* DYNAMIC */
80
82
  }, [
@@ -121,12 +123,14 @@ function I(r, B, T, e, L, P) {
121
123
  (n(), a(
122
124
  g,
123
125
  null,
124
- f(e.actions, (i, h) => m("div", {
126
+ p(e.actions, (i, h) => d("div", {
125
127
  key: h,
126
128
  class: "nmorph-image-preview__action-element"
127
129
  }, [
128
130
  l(e.NmorphButton, {
131
+ class: "nmorph-preview-portal__control-button",
129
132
  design: "plain",
133
+ borderless: "",
130
134
  onClick: i.handler
131
135
  }, {
132
136
  default: o(() => [
@@ -135,7 +139,7 @@ function I(r, B, T, e, L, P) {
135
139
  null,
136
140
  {
137
141
  default: o(() => [
138
- (n(), s(p(i.icon)))
142
+ (n(), s(f(i.icon)))
139
143
  ]),
140
144
  _: 2
141
145
  /* DYNAMIC */
@@ -151,16 +155,18 @@ function I(r, B, T, e, L, P) {
151
155
  64
152
156
  /* STABLE_FRAGMENT */
153
157
  )),
154
- m("div", S, [
158
+ d("div", S, [
155
159
  l(e.NmorphButton, {
160
+ class: "nmorph-preview-portal__control-button",
156
161
  design: "plain",
162
+ borderless: "",
157
163
  disabled: e.scaleLevel === 1,
158
164
  onClick: e.enlargeShrinkActionData.handler
159
165
  }, {
160
166
  default: o(() => [
161
167
  l(e.NmorphIcon, null, {
162
168
  default: o(() => [
163
- (n(), s(p(e.enlargeShrinkActionData.icon)))
169
+ (n(), s(f(e.enlargeShrinkActionData.icon)))
164
170
  ]),
165
171
  _: 1
166
172
  /* STABLE */
@@ -176,9 +182,10 @@ function I(r, B, T, e, L, P) {
176
182
  src: e.triggerSource,
177
183
  alt: e.props.alt,
178
184
  fit: "contain",
185
+ design: "plain",
179
186
  "frame-border": 0,
180
187
  style: v({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
181
- }, d({
188
+ }, m({
182
189
  _: 2
183
190
  /* DYNAMIC */
184
191
  }, [
@@ -1 +1 @@
1
- .nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;object-fit:cover}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--nmorph-typography-caption-font-size)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--nmorph-typography-caption-font-size)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}
1
+ .nmorph-media-gallery__trigger{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--indentation-03);width:100%}.nmorph-media-gallery__trigger--fixed-height{grid-auto-rows:var(--nmorph-private-media-gallery-trigger-height)}.nmorph-media-gallery__trigger-item{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);aspect-ratio:16/9}.nmorph-media-gallery__trigger--fixed-height .nmorph-media-gallery__trigger-item{height:100%;aspect-ratio:auto}.nmorph-media-gallery__trigger-open{position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;color:inherit;font:inherit;text-align:initial;background:transparent;border:0;cursor:pointer}.nmorph-media-gallery__trigger-open:after{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,color-mix(in srgb,var(--nmorph-black-color) 38%,transparent),transparent 42%),linear-gradient(0deg,color-mix(in srgb,var(--nmorph-black-color) 28%,transparent),transparent 48%);content:"";pointer-events:none}.nmorph-media-gallery__trigger-open .nmorph-image,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%;transition:filter var(--transition-03) ease-in-out,transform var(--transition-03) ease-in-out}.nmorph-media-gallery__trigger-open .nmorph-image img,.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{display:block;width:100%;height:100%}.nmorph-media-gallery__trigger-open .nmorph-media-gallery__trigger-video{object-fit:var(--nmorph-private-media-gallery-trigger-video-fit)}.nmorph-media-gallery__trigger-open:hover .nmorph-image,.nmorph-media-gallery__trigger-open:hover .nmorph-media-gallery__trigger-video{transform:scale(1.035);filter:brightness(.86)}.nmorph-media-gallery__trigger-name,.nmorph-media-gallery__trigger-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery__trigger-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.nmorph-media-gallery__trigger-item--video .nmorph-media-gallery__trigger-name{max-width:calc(100% - 118px)}.nmorph-media-gallery__trigger-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--nmorph-typography-caption-font-size)}.nmorph-media-gallery__trigger-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01)}.nmorph-media-gallery__trigger-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery__trigger-action .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery__trigger-action:hover{color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery__trigger-play{position:absolute;top:50%;left:50%;z-index:2;display:inline-flex;justify-content:center;align-items:center;width:54px;height:54px;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);pointer-events:none}.nmorph-media-gallery__trigger-play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery{display:contents}.nmorph-media-gallery .nmorph-media-gallery__stage{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;overflow:hidden;pointer-events:none}.nmorph-media-gallery .nmorph-image{width:100%;height:100%;transition:transform var(--transition-03) ease-in-out;pointer-events:none}.nmorph-media-gallery .nmorph-image img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__video{display:block;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--nmorph-black-color);border-radius:var(--default-border-radius);object-fit:contain;pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-name,.nmorph-media-gallery .nmorph-media-gallery__file-size{position:absolute;z-index:2;display:block;box-sizing:border-box;min-width:0;min-height:22px;padding:0 6px;overflow:hidden;color:var(--nmorph-contrast-text-color);line-height:22px;white-space:nowrap;text-overflow:ellipsis;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border-radius:var(--default-border-radius);pointer-events:none}.nmorph-media-gallery .nmorph-media-gallery__file-name{top:var(--indentation-02);left:var(--indentation-02);max-width:calc(100% - 56px);font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size)}.nmorph-media-gallery.nmorph-media-gallery--video .nmorph-media-gallery__file-name{max-width:calc(100% - 92px)}.nmorph-media-gallery .nmorph-media-gallery__file-size{right:var(--indentation-02);bottom:var(--indentation-02);max-width:calc(100% - var(--indentation-04));font-size:var(--nmorph-typography-caption-font-size)}.nmorph-media-gallery .nmorph-media-gallery__file-actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);z-index:3;display:flex;gap:var(--indentation-01);pointer-events:auto}.nmorph-media-gallery .nmorph-media-gallery__file-action{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;line-height:1;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-media-gallery .nmorph-media-gallery__file-action .nmorph-icon{flex:0 0 auto;--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-media-gallery .nmorph-media-gallery__file-action:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-media-gallery .nmorph-media-gallery__action-element{margin-right:var(--indentation-03)}.nmorph-media-gallery.nmorph-media-gallery--image-cover .nmorph-image img{width:100%;height:100%;object-fit:cover}.nmorph-media-gallery.nmorph-media-gallery--video-cover .nmorph-media-gallery__video{object-fit:cover}
@@ -1,51 +1,56 @@
1
1
  import './NmorphMediaGallery.css';
2
2
  import y from "./NmorphMediaGallery.vue2.js";
3
- 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";
3
+ import { openBlock as l, createElementBlock as n, Fragment as g, normalizeStyle as h, normalizeClass as f, renderList as v, createElementVNode as c, createBlock as m, createVNode as e, withCtx as a, createCommentVNode as i, toDisplayString as _, withModifiers as s } from "vue";
4
4
  /* empty css */
5
5
  import I from "../../../_virtual/_plugin-vue_export-helper.js";
6
- const N = ["aria-label", "onClick"], k = ["src", "poster", "title"], w = {
6
+ const w = ["aria-label", "onClick"], N = ["src", "poster", "title"], p = {
7
7
  key: 2,
8
8
  class: "nmorph-media-gallery__trigger-play"
9
- }, b = {
9
+ }, k = {
10
10
  key: 3,
11
11
  class: "nmorph-media-gallery__trigger-name"
12
- }, p = {
12
+ }, b = {
13
13
  key: 4,
14
14
  class: "nmorph-media-gallery__trigger-size"
15
15
  }, z = {
16
16
  key: 0,
17
17
  class: "nmorph-media-gallery__trigger-actions"
18
- }, C = ["aria-label", "onClick"], H = ["aria-label", "onClick"], P = ["href", "download", "aria-label", "onClick"], F = { class: "nmorph-media-gallery__stage" }, S = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], D = {
18
+ }, C = ["aria-label", "onClick"], H = ["aria-label", "onClick"], P = ["href", "download", "aria-label", "onClick"], F = { class: "nmorph-media-gallery__stage" }, S = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], T = {
19
19
  key: 2,
20
20
  class: "nmorph-media-gallery__file-name"
21
- }, L = {
21
+ }, D = {
22
22
  key: 3,
23
23
  class: "nmorph-media-gallery__file-actions"
24
- }, B = ["aria-label"], T = ["href", "download", "aria-label"], A = {
24
+ }, L = ["aria-label"], B = ["href", "download", "aria-label"], A = {
25
25
  key: 4,
26
26
  class: "nmorph-media-gallery__file-size"
27
- }, 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" };
27
+ }, E = { class: "nmorph-media-gallery__action-element" }, V = { class: "nmorph-media-gallery__action-element" }, R = { class: "nmorph-media-gallery__action-element" }, M = { class: "nmorph-media-gallery__action-element" }, x = { class: "nmorph-media-gallery__action-element" };
28
28
  function O(G, U, Z, o, j, W) {
29
- return l(), a(
30
- s,
29
+ return l(), n(
30
+ g,
31
31
  null,
32
32
  [
33
- o.props.showTrigger ? (l(), a(
33
+ o.props.showTrigger ? (l(), n(
34
34
  "div",
35
35
  {
36
36
  key: 0,
37
37
  class: f(o.triggerModifiers),
38
- style: g(o.triggerStyle)
38
+ style: h(o.triggerStyle)
39
39
  },
40
40
  [
41
- (l(!0), a(
42
- s,
41
+ (l(!0), n(
42
+ g,
43
43
  null,
44
- v(o.sourceList, (r, t) => (l(), a(
44
+ v(o.sourceList, (r, t) => (l(), n(
45
45
  "div",
46
46
  {
47
47
  key: `${r.kind}-${r.src}-${t}`,
48
- class: f(["nmorph-media-gallery__trigger-item", `nmorph-media-gallery__trigger-item--${r.kind}`])
48
+ class: f([
49
+ "nmorph-media-gallery__trigger-item",
50
+ `nmorph-media-gallery__trigger-item--${r.kind}`,
51
+ o.getTriggerItemClass(r, t)
52
+ ]),
53
+ style: h(o.getTriggerItemStyle(r, t))
49
54
  },
50
55
  [
51
56
  c("button", {
@@ -59,9 +64,10 @@ function O(G, U, Z, o, j, W) {
59
64
  src: r.src,
60
65
  alt: r.alt || o.getItemLabel(r, t),
61
66
  title: o.getItemName(r),
62
- fit: "cover",
67
+ fit: o.props.triggerImageFit,
68
+ design: "plain",
63
69
  "frame-border": 0
64
- }, null, 8, ["src", "alt", "title"])) : (l(), a("video", {
70
+ }, null, 8, ["src", "alt", "title", "fit"])) : (l(), n("video", {
65
71
  key: 1,
66
72
  ref_for: !0,
67
73
  ref: (d) => o.setTriggerVideoRef(t, d),
@@ -72,84 +78,84 @@ function O(G, U, Z, o, j, W) {
72
78
  playsinline: "",
73
79
  preload: "metadata",
74
80
  title: o.getItemName(r)
75
- }, null, 8, k)),
76
- o.props.showTriggerPlayButton && r.kind === "video" ? (l(), a("span", w, [
81
+ }, null, 8, N)),
82
+ o.props.showTriggerPlayButton && r.kind === "video" ? (l(), n("span", p, [
77
83
  e(o.NmorphIcon, {
78
84
  size: "medium",
79
85
  color: "var(--nmorph-contrast-text-color)"
80
86
  }, {
81
- default: n(() => [
87
+ default: a(() => [
82
88
  e(o.NmorphIconPlay)
83
89
  ]),
84
90
  _: 1
85
91
  /* STABLE */
86
92
  })
87
93
  ])) : i("v-if", !0),
88
- o.props.showTriggerName && o.getItemName(r) ? (l(), a(
94
+ o.props.showTriggerName && o.getItemName(r) ? (l(), n(
89
95
  "span",
90
- b,
96
+ k,
91
97
  _(o.getItemName(r)),
92
98
  1
93
99
  /* TEXT */
94
100
  )) : i("v-if", !0),
95
- o.props.showTriggerSize && o.getItemSize(r) ? (l(), a(
101
+ o.props.showTriggerSize && o.getItemSize(r) ? (l(), n(
96
102
  "span",
97
- p,
103
+ b,
98
104
  _(o.getItemSize(r)),
99
105
  1
100
106
  /* TEXT */
101
107
  )) : i("v-if", !0)
102
- ], 8, N),
103
- o.showTriggerActionsForItem(r) ? (l(), a("div", z, [
104
- o.showTriggerPreviewActionForItem(r) ? (l(), a("button", {
108
+ ], 8, w),
109
+ o.showTriggerActionsForItem(r) ? (l(), n("div", z, [
110
+ o.showTriggerPreviewActionForItem(r) ? (l(), n("button", {
105
111
  key: 0,
106
112
  type: "button",
107
113
  class: "nmorph-media-gallery__trigger-action",
108
114
  "aria-label": `Preview ${o.getItemLabel(r, t)}`,
109
- onClick: h((d) => o.openPreviewAt(t), ["stop"])
115
+ onClick: s((d) => o.openPreviewAt(t), ["stop"])
110
116
  }, [
111
117
  e(o.NmorphIcon, {
112
118
  size: "small",
113
119
  color: "var(--nmorph-contrast-text-color)"
114
120
  }, {
115
- default: n(() => [
121
+ default: a(() => [
116
122
  e(o.NmorphIconEye)
117
123
  ]),
118
124
  _: 1
119
125
  /* STABLE */
120
126
  })
121
127
  ], 8, C)) : i("v-if", !0),
122
- o.showTriggerFullscreenActionForItem(r) ? (l(), a("button", {
128
+ o.showTriggerFullscreenActionForItem(r) ? (l(), n("button", {
123
129
  key: 1,
124
130
  type: "button",
125
131
  class: "nmorph-media-gallery__trigger-action",
126
132
  "aria-label": `Fullscreen ${o.getItemLabel(r, t)}`,
127
- onClick: h((d) => o.triggerFullscreenHandler(r, t), ["stop"])
133
+ onClick: s((d) => o.triggerFullscreenHandler(r, t), ["stop"])
128
134
  }, [
129
135
  e(o.NmorphIcon, {
130
136
  size: "small",
131
137
  color: "var(--nmorph-contrast-text-color)"
132
138
  }, {
133
- default: n(() => [
139
+ default: a(() => [
134
140
  e(o.NmorphIconFullScreen)
135
141
  ]),
136
142
  _: 1
137
143
  /* STABLE */
138
144
  })
139
145
  ], 8, H)) : i("v-if", !0),
140
- o.showTriggerDownloadActionForItem(r) ? (l(), a("a", {
146
+ o.showTriggerDownloadActionForItem(r) ? (l(), n("a", {
141
147
  key: 2,
142
148
  href: o.getItemDownloadHref(r),
143
149
  download: o.getItemName(r) || void 0,
144
150
  class: "nmorph-media-gallery__trigger-action",
145
151
  "aria-label": `Download ${o.getItemLabel(r, t)}`,
146
- onClick: h((d) => o.downloadItemHandler(r, t), ["stop"])
152
+ onClick: s((d) => o.downloadItemHandler(r, t), ["stop"])
147
153
  }, [
148
154
  e(o.NmorphIcon, {
149
155
  size: "small",
150
156
  color: "var(--nmorph-contrast-text-color)"
151
157
  }, {
152
- default: n(() => [
158
+ default: a(() => [
153
159
  e(o.NmorphIconDownload)
154
160
  ]),
155
161
  _: 1
@@ -158,8 +164,8 @@ function O(G, U, Z, o, j, W) {
158
164
  ], 8, P)) : i("v-if", !0)
159
165
  ])) : i("v-if", !0)
160
166
  ],
161
- 2
162
- /* CLASS */
167
+ 6
168
+ /* CLASS, STYLE */
163
169
  ))),
164
170
  128
165
171
  /* KEYED_FRAGMENT */
@@ -185,12 +191,17 @@ function O(G, U, Z, o, j, W) {
185
191
  onPrevious: o.previousHandler,
186
192
  onNext: o.nextHandler
187
193
  }, {
188
- actions: n(() => [
194
+ actions: a(() => [
189
195
  c("div", E, [
190
- e(o.NmorphButton, { onClick: o.rotateRight }, {
191
- default: n(() => [
196
+ e(o.NmorphButton, {
197
+ class: "nmorph-preview-portal__control-button",
198
+ design: "plain",
199
+ borderless: "",
200
+ onClick: o.rotateRight
201
+ }, {
202
+ default: a(() => [
192
203
  e(o.NmorphIcon, null, {
193
- default: n(() => [
204
+ default: a(() => [
194
205
  e(o.NmorphIconRotateRight)
195
206
  ]),
196
207
  _: 1
@@ -202,10 +213,15 @@ function O(G, U, Z, o, j, W) {
202
213
  })
203
214
  ]),
204
215
  c("div", V, [
205
- e(o.NmorphButton, { onClick: o.rotateLeft }, {
206
- default: n(() => [
216
+ e(o.NmorphButton, {
217
+ class: "nmorph-preview-portal__control-button",
218
+ design: "plain",
219
+ borderless: "",
220
+ onClick: o.rotateLeft
221
+ }, {
222
+ default: a(() => [
207
223
  e(o.NmorphIcon, null, {
208
- default: n(() => [
224
+ default: a(() => [
209
225
  e(o.NmorphIconRotateLeft)
210
226
  ]),
211
227
  _: 1
@@ -217,10 +233,15 @@ function O(G, U, Z, o, j, W) {
217
233
  })
218
234
  ]),
219
235
  c("div", R, [
220
- e(o.NmorphButton, { onClick: o.zoomIn }, {
221
- default: n(() => [
236
+ e(o.NmorphButton, {
237
+ class: "nmorph-preview-portal__control-button",
238
+ design: "plain",
239
+ borderless: "",
240
+ onClick: o.zoomIn
241
+ }, {
242
+ default: a(() => [
222
243
  e(o.NmorphIcon, null, {
223
- default: n(() => [
244
+ default: a(() => [
224
245
  e(o.NmorphIconZoomIn)
225
246
  ]),
226
247
  _: 1
@@ -231,11 +252,16 @@ function O(G, U, Z, o, j, W) {
231
252
  /* STABLE */
232
253
  })
233
254
  ]),
234
- c("div", x, [
235
- e(o.NmorphButton, { onClick: o.zoomOut }, {
236
- default: n(() => [
255
+ c("div", M, [
256
+ e(o.NmorphButton, {
257
+ class: "nmorph-preview-portal__control-button",
258
+ design: "plain",
259
+ borderless: "",
260
+ onClick: o.zoomOut
261
+ }, {
262
+ default: a(() => [
237
263
  e(o.NmorphIcon, null, {
238
- default: n(() => [
264
+ default: a(() => [
239
265
  e(o.NmorphIconZoomOut)
240
266
  ]),
241
267
  _: 1
@@ -246,14 +272,17 @@ function O(G, U, Z, o, j, W) {
246
272
  /* STABLE */
247
273
  })
248
274
  ]),
249
- c("div", M, [
275
+ c("div", x, [
250
276
  e(o.NmorphButton, {
277
+ class: "nmorph-preview-portal__control-button",
278
+ design: "plain",
279
+ borderless: "",
251
280
  disabled: o.scaleLevel === 1,
252
281
  onClick: o.toggleNormalSize
253
282
  }, {
254
- default: n(() => [
283
+ default: a(() => [
255
284
  e(o.NmorphIcon, null, {
256
- default: n(() => [
285
+ default: a(() => [
257
286
  o.scaleLevel < 1 ? (l(), m(o.NmorphIconEnlarge, { key: 0 })) : (l(), m(o.NmorphIconShrink, { key: 1 }))
258
287
  ]),
259
288
  _: 1
@@ -265,7 +294,7 @@ function O(G, U, Z, o, j, W) {
265
294
  }, 8, ["disabled"])
266
295
  ])
267
296
  ]),
268
- default: n(() => [
297
+ default: a(() => [
269
298
  c("div", F, [
270
299
  o.currentItem?.kind === "image" ? (l(), m(o.NmorphImage, {
271
300
  key: 0,
@@ -273,11 +302,12 @@ function O(G, U, Z, o, j, W) {
273
302
  alt: o.currentItem.alt || o.currentItem.name || "",
274
303
  title: o.currentItem.name,
275
304
  fit: o.props.imageFit,
305
+ design: "plain",
276
306
  "frame-border": 0,
277
- style: g({ transform: o.imageTransform }),
307
+ style: h({ transform: o.imageTransform }),
278
308
  onPointerdown: o.pointerDownHandler,
279
309
  onPointerup: o.pointerUpHandler
280
- }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), a("video", {
310
+ }, null, 8, ["src", "alt", "title", "fit", "style"])) : o.currentItem?.kind === "video" ? (l(), n("video", {
281
311
  key: 1,
282
312
  ref: "currentVideoRef",
283
313
  class: "nmorph-media-gallery__video",
@@ -295,53 +325,53 @@ function O(G, U, Z, o, j, W) {
295
325
  onEnded: o.videoEndedHandler,
296
326
  onError: o.videoErrorHandler
297
327
  }, null, 40, S)) : i("v-if", !0),
298
- o.currentName ? (l(), a(
328
+ o.currentName ? (l(), n(
299
329
  "span",
300
- D,
330
+ T,
301
331
  _(o.currentName),
302
332
  1
303
333
  /* TEXT */
304
334
  )) : i("v-if", !0),
305
- o.showFileActions ? (l(), a("div", L, [
306
- o.showVideoFullscreenAction ? (l(), a("button", {
335
+ o.showFileActions ? (l(), n("div", D, [
336
+ o.showVideoFullscreenAction ? (l(), n("button", {
307
337
  key: 0,
308
338
  type: "button",
309
339
  class: "nmorph-media-gallery__file-action",
310
340
  "aria-label": `Fullscreen ${o.currentVideoName}`,
311
- onClick: h(o.fullscreenHandler, ["stop"])
341
+ onClick: s(o.fullscreenHandler, ["stop"])
312
342
  }, [
313
343
  e(o.NmorphIcon, {
314
344
  size: "small",
315
345
  color: "var(--nmorph-contrast-text-color)"
316
346
  }, {
317
- default: n(() => [
347
+ default: a(() => [
318
348
  e(o.NmorphIconFullScreen)
319
349
  ]),
320
350
  _: 1
321
351
  /* STABLE */
322
352
  })
323
- ], 8, B)) : i("v-if", !0),
324
- o.currentDownloadHref ? (l(), a("a", {
353
+ ], 8, L)) : i("v-if", !0),
354
+ o.currentDownloadHref ? (l(), n("a", {
325
355
  key: 1,
326
356
  href: o.currentDownloadHref,
327
357
  download: o.currentItemName || void 0,
328
358
  class: "nmorph-media-gallery__file-action",
329
359
  "aria-label": `Download ${o.currentItemName || "media"}`,
330
- onClick: h(o.downloadHandler, ["stop"])
360
+ onClick: s(o.downloadHandler, ["stop"])
331
361
  }, [
332
362
  e(o.NmorphIcon, {
333
363
  size: "small",
334
364
  color: "var(--nmorph-contrast-text-color)"
335
365
  }, {
336
- default: n(() => [
366
+ default: a(() => [
337
367
  e(o.NmorphIconDownload)
338
368
  ]),
339
369
  _: 1
340
370
  /* STABLE */
341
371
  })
342
- ], 8, T)) : i("v-if", !0)
372
+ ], 8, B)) : i("v-if", !0)
343
373
  ])) : i("v-if", !0),
344
- o.currentSize ? (l(), a(
374
+ o.currentSize ? (l(), n(
345
375
  "span",
346
376
  A,
347
377
  _(o.currentSize),