@nmorph/nmorph-ui-kit 2.2.50 → 2.2.52

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

@@ -0,0 +1,298 @@
+import './NmorphMediaGallery.css';
+import { defineComponent as de, ref as f, computed as i, watch as C, onBeforeUnmount as ce, openBlock as p, createBlock as y, withCtx as r, createElementVNode as g, unref as t, normalizeStyle as ve, createElementBlock as T, createCommentVNode as L, withModifiers as me, createVNode as l } from "vue";
+import { useModifiers as fe } from "../../../utils/create-modifiers.js";
+import pe from "../nmorph-preview-portal/NmorphPreviewPortal.vue.js";
+/* empty css                                                */
+import he from "../nmorph-image/NmorphImage.vue.js";
+/* empty css                               */
+import k from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import w from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import _e from "../../../assets/icons/pause.svg.js";
+import ye from "../../../assets/icons/play.svg.js";
+import ge from "../../../assets/icons/rotate-right.svg.js";
+import ke from "../../../assets/icons/rotate-left.svg.js";
+import Ie from "../../../assets/icons/zoom-in.svg.js";
+import xe from "../../../assets/icons/zoom-out.svg.js";
+import we from "../../../assets/icons/enlarge.svg.js";
+import Ne from "../../../assets/icons/shrink.svg.js";
+const be = { class: "nmorph-media-gallery__stage" }, Pe = ["src", "poster", "controls", "muted", "playsinline", "preload", "title"], Ce = ["aria-label"], Ve = { class: "nmorph-media-gallery__action-element" }, Ee = { class: "nmorph-media-gallery__action-element" }, He = { class: "nmorph-media-gallery__action-element" }, Be = { class: "nmorph-media-gallery__action-element" }, Le = { class: "nmorph-media-gallery__action-element" }, Fe = 45, Je = /* @__PURE__ */ de({
+  __name: "NmorphMediaGallery",
+  props: {
+    modelValue: { type: Boolean, default: !1 },
+    items: {},
+    initialIndex: { default: 0 },
+    activeIndex: { default: void 0 },
+    zIndex: { default: void 0 },
+    showNavigationButtons: { type: Boolean, default: !0 },
+    showActionBar: { type: Boolean, default: !0 },
+    imageFit: { default: "contain" },
+    videoFit: { default: "contain" }
+  },
+  emits: ["update:model-value", "update:active-index", "close", "change"],
+  setup(X, { emit: Y }) {
+    const o = X, N = Y, c = f(o.modelValue), I = f(0), v = f(null), b = f(null), u = f(!1), d = f(1), s = f(0), h = f(null), m = i(() => o.items || []), F = i(() => m.value.length > 1), z = i(() => o.showNavigationButtons && F.value), x = (e) => {
+      const n = m.value.length - 1;
+      return n < 0 || !Number.isFinite(e) || e < 0 ? 0 : e > n ? n : e;
+    }, _ = i(() => x(I.value)), a = i(() => m.value[_.value]), M = i(() => a.value?.kind === "image"), V = i(() => a.value?.kind === "video"), U = i(
+      () => a.value?.kind === "video" ? a.value.controls !== !1 : !1
+    ), Z = i(() => a.value?.kind === "video" ? a.value.muted === !0 : !1), G = i(
+      () => a.value?.kind === "video" ? a.value.playsinline !== !1 : !0
+    ), W = i(
+      () => a.value?.kind === "video" && a.value.preload || "metadata"
+    ), R = i(
+      () => a.value?.kind === "video" && a.value.name || "video"
+    ), j = i(
+      () => fe({
+        "nmorph-media-gallery": [
+          c.value && "opened",
+          M.value && "image",
+          V.value && "video",
+          u.value && V.value && "video-playing",
+          o.imageFit === "cover" && M.value && "image-cover",
+          o.videoFit === "cover" && V.value && "video-cover"
+        ]
+      })
+    ), q = i(() => `rotate(${s.value}deg) scale(${d.value})`);
+    C(
+      () => o.modelValue,
+      (e) => {
+        c.value = e;
+      }
+    ), C(
+      () => o.activeIndex,
+      (e) => {
+        typeof e == "number" && (I.value = x(e));
+      },
+      { immediate: !0 }
+    ), C(
+      () => [o.initialIndex, m.value.length],
+      () => {
+        typeof o.activeIndex != "number" && (I.value = x(o.initialIndex));
+      },
+      { immediate: !0 }
+    );
+    const E = () => {
+      !v.value || v.value === b.value || (v.value.pause(), u.value = !1, b.value = v.value);
+    }, J = () => {
+      d.value = 1, s.value = 0;
+    }, $ = (e) => {
+      if (!m.value.length) return;
+      const n = x(e);
+      if (n === _.value) return;
+      E(), u.value = !1, I.value = n, J(), N("update:active-index", n);
+      const P = m.value[n];
+      P && N("change", P, n);
+    }, H = () => {
+      const e = m.value.length;
+      e && $(_.value === 0 ? e - 1 : _.value - 1);
+    }, B = () => {
+      const e = m.value.length;
+      e && $(_.value === e - 1 ? 0 : _.value + 1);
+    }, K = () => {
+      c.value && (E(), c.value = !1, N("update:model-value", !1), N("close"));
+    }, Q = () => {
+      s.value = s.value + 90, s.value >= 360 && (s.value = 0);
+    }, ee = () => {
+      s.value = s.value - 90, s.value <= -360 && (s.value = 0);
+    }, ae = () => {
+      d.value = parseFloat(Math.min(d.value + 0.2, 4).toFixed(3));
+    }, te = () => {
+      d.value = parseFloat(Math.max(d.value - 0.2, 0.2).toFixed(3));
+    }, oe = () => {
+      d.value = 1;
+    }, le = async () => {
+      if (v.value) {
+        if (u.value) {
+          v.value.pause();
+          return;
+        }
+        try {
+          await v.value.play();
+        } catch {
+          u.value = !1;
+        }
+      }
+    }, ne = () => {
+      u.value = !0, b.value = null;
+    }, ie = () => {
+      u.value = !1;
+    }, re = () => {
+      u.value = !1;
+    }, ue = () => {
+      u.value = !1;
+    }, S = (e) => {
+      if (c.value && !(e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) {
+        if (e.key === "Escape") {
+          e.preventDefault(), K();
+          return;
+        }
+        F.value && (e.key === "ArrowLeft" && (e.preventDefault(), H()), e.key === "ArrowRight" && (e.preventDefault(), B()));
+      }
+    }, se = () => {
+      typeof document > "u" || document.addEventListener("keydown", S);
+    }, D = () => {
+      typeof document > "u" || document.removeEventListener("keydown", S);
+    };
+    C(
+      c,
+      (e) => {
+        e ? (se(), b.value = null, I.value = x(
+          typeof o.activeIndex == "number" ? o.activeIndex : o.initialIndex
+        )) : (E(), u.value = !1, D());
+      },
+      { immediate: !0 }
+    ), ce(D);
+    const A = (e) => {
+      h.value = { x: e.clientX, y: e.clientY };
+    }, O = (e) => {
+      if (!h.value || !z.value) {
+        h.value = null;
+        return;
+      }
+      const n = e.clientX - h.value.x, P = e.clientY - h.value.y;
+      h.value = null, !(Math.abs(n) < Fe || Math.abs(n) < Math.abs(P) * 1.2) && (n > 0 ? H() : B());
+    };
+    return (e, n) => c.value ? (p(), y(pe, {
+      key: 0,
+      show: c.value,
+      "z-index": o.zIndex,
+      "state-class": j.value,
+      "content-class": "nmorph-media-gallery__content",
+      "left-class": "nmorph-media-gallery__left",
+      "right-class": "nmorph-media-gallery__right",
+      "actions-class": "nmorph-media-gallery__actions",
+      "show-navigation": z.value,
+      "show-action-bar": o.showActionBar && a.value?.kind === "image",
+      onClose: K,
+      onPrevious: H,
+      onNext: B
+    }, {
+      actions: r(() => [
+        g("div", Ve, [
+          l(t(w), { onClick: Q }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(ge))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", Ee, [
+          l(t(w), { onClick: ee }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(ke))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", He, [
+          l(t(w), { onClick: ae }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(Ie))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", Be, [
+          l(t(w), { onClick: te }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  l(t(xe))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        g("div", Le, [
+          l(t(w), {
+            disabled: d.value === 1,
+            onClick: oe
+          }, {
+            default: r(() => [
+              l(t(k), null, {
+                default: r(() => [
+                  d.value < 1 ? (p(), y(t(we), { key: 0 })) : (p(), y(t(Ne), { key: 1 }))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["disabled"])
+        ])
+      ]),
+      default: r(() => [
+        g("div", be, [
+          a.value?.kind === "image" ? (p(), y(t(he), {
+            key: 0,
+            src: a.value.src,
+            alt: a.value.alt || a.value.name || "",
+            title: a.value.name,
+            fit: o.imageFit,
+            "frame-border": 0,
+            style: ve({ transform: q.value }),
+            onPointerdown: A,
+            onPointerup: O
+          }, null, 8, ["src", "alt", "title", "fit", "style"])) : a.value?.kind === "video" ? (p(), T("video", {
+            key: 1,
+            ref_key: "currentVideoRef",
+            ref: v,
+            class: "nmorph-media-gallery__video",
+            src: a.value.src,
+            poster: a.value.poster || void 0,
+            controls: U.value,
+            muted: Z.value,
+            playsinline: G.value,
+            preload: W.value,
+            title: a.value.name,
+            onPointerdown: A,
+            onPointerup: O,
+            onPlay: ne,
+            onPause: ie,
+            onEnded: re,
+            onError: ue
+          }, null, 40, Pe)) : L("", !0),
+          a.value?.kind === "video" ? (p(), T("button", {
+            key: 2,
+            class: "nmorph-media-gallery__play",
+            type: "button",
+            "aria-label": u.value ? `Pause ${R.value}` : `Play ${R.value}`,
+            onClick: me(le, ["stop"])
+          }, [
+            l(t(k), {
+              size: "medium",
+              color: "var(--nmorph-contrast-text-color)"
+            }, {
+              default: r(() => [
+                u.value ? (p(), y(t(_e), { key: 0 })) : (p(), y(t(ye), { key: 1 }))
+              ]),
+              _: 1
+            })
+          ], 8, Ce)) : L("", !0)
+        ])
+      ]),
+      _: 1
+    }, 8, ["show", "z-index", "state-class", "show-navigation", "show-action-bar"])) : L("", !0);
+  }
+});
+export {
+  Je as default
+};

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

@@ -0,0 +1,6 @@
+import './NmorphMediaGallery.css';
+import o from "./NmorphMediaGallery.vue.js";
+/* empty css                        */
+export {
+  o as default
+};

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

@@ -0,0 +1 @@
+.nmorph-preview-portal{display:contents}.nmorph-preview-portal .nmorph-preview-portal__content{--nmorph-preview-portal-content-width: min( calc(100vw - 96px) , 960px);--nmorph-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-preview-portal-content-width);height:var(--nmorph-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-preview-portal-btn-margin: 20px}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__left{left:var(--nmorph-preview-portal-btn-margin)}.nmorph-preview-portal.nmorph-preview-portal--opened .nmorph-preview-portal__right{right:var(--nmorph-preview-portal-btn-margin)}

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

@@ -0,0 +1,110 @@
+import './NmorphPreviewPortal.css';
+import { defineComponent as k, computed as u, openBlock as r, createBlock as B, Teleport as $, createElementVNode as f, normalizeStyle as N, normalizeClass as a, createVNode as o, unref as s, withCtx as l, renderSlot as v, createElementBlock as m, createCommentVNode as i } from "vue";
+import { createCssSizeVariables as x } from "../../../utils/common.js";
+import z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+import c from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import w from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import C from "../../../assets/icons/chevron-down.svg.js";
+const D = /* @__PURE__ */ k({
+  __name: "NmorphPreviewPortal",
+  props: {
+    show: { type: Boolean },
+    zIndex: { default: void 0 },
+    rootClass: { default: "" },
+    stateClass: { default: "" },
+    contentClass: { default: "" },
+    leftClass: { default: "" },
+    rightClass: { default: "" },
+    actionsClass: { default: "" },
+    navigationButtonMargin: { default: void 0 },
+    showNavigation: { type: Boolean, default: !1 },
+    showActionBar: { type: Boolean, default: !1 }
+  },
+  emits: ["close", "previous", "next"],
+  setup(h, { emit: _ }) {
+    const e = h, n = _, y = u(() => [
+      "nmorph-preview-portal",
+      e.rootClass,
+      e.stateClass,
+      e.show && "nmorph-preview-portal--opened"
+    ]), g = u(
+      () => x({
+        "--nmorph-preview-portal-btn-margin": e.navigationButtonMargin
+      })
+    );
+    return (d, t) => e.show ? (r(), B($, {
+      key: 0,
+      to: "body"
+    }, [
+      f("div", {
+        class: a(y.value),
+        style: N(g.value)
+      }, [
+        o(s(z), {
+          show: e.show,
+          "z-index": e.zIndex,
+          "disabled-teleport": "",
+          onOnOutsideClick: t[2] || (t[2] = (p) => n("close")),
+          onOnEscapeKeydown: t[3] || (t[3] = (p) => n("close"))
+        }, {
+          default: l(() => [
+            f("div", {
+              class: a(["nmorph-preview-portal__content", e.contentClass])
+            }, [
+              v(d.$slots, "default")
+            ], 2),
+            e.showNavigation ? (r(), m("div", {
+              key: 0,
+              class: a(["nmorph-preview-portal__left", e.leftClass])
+            }, [
+              o(s(c), {
+                onClick: t[0] || (t[0] = (p) => n("previous"))
+              }, {
+                default: l(() => [
+                  o(s(w), null, {
+                    default: l(() => [
+                      o(s(C))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ], 2)) : i("", !0),
+            e.showNavigation ? (r(), m("div", {
+              key: 1,
+              class: a(["nmorph-preview-portal__right", e.rightClass])
+            }, [
+              o(s(c), {
+                onClick: t[1] || (t[1] = (p) => n("next"))
+              }, {
+                default: l(() => [
+                  o(s(w), null, {
+                    default: l(() => [
+                      o(s(C))
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ], 2)) : i("", !0),
+            e.showActionBar ? (r(), m("div", {
+              key: 2,
+              class: a(["nmorph-preview-portal__actions", e.actionsClass])
+            }, [
+              v(d.$slots, "actions")
+            ], 2)) : i("", !0)
+          ]),
+          _: 3
+        }, 8, ["show", "z-index"])
+      ], 6)
+    ])) : i("", !0);
+  }
+});
+export {
+  D as default
+};

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

@@ -0,0 +1,6 @@
+import './NmorphPreviewPortal.css';
+import o from "./NmorphPreviewPortal.vue.js";
+/* empty css                         */
+export {
+  o as default
+};

package/dist/components/data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js

@@ -1,12 +1,12 @@
 import './NmorphTagItem.css';
-import { defineComponent as S, ref as v, computed as p, onMounted as $, onBeforeUnmount as x, watch as I, openBlock as d, createElementBlock as _, normalizeStyle as z, normalizeClass as H, createElementVNode as F, renderSlot as U, toDisplayString as G, createBlock as P, unref as k, withModifiers as K, withCtx as j, createVNode as Z, createCommentVNode as q, nextTick as J } from "vue";
-import { useModifiers as Q } from "../../../../../utils/create-modifiers.js";
-import { createCssVariables as W } from "../../../../../utils/common.js";
-import { NmorphComponentHeight as X } from "../../../../../types/common.types.js";
-import Y from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as I, ref as b, computed as m, onMounted as S, onBeforeUnmount as $, watch as z, openBlock as h, createElementBlock as _, normalizeStyle as H, normalizeClass as F, createElementVNode as U, renderSlot as G, toDisplayString as P, createBlock as K, unref as k, withModifiers as j, withCtx as Z, createVNode as q, createCommentVNode as J, nextTick as Q } from "vue";
+import { useModifiers as W } from "../../../../../utils/create-modifiers.js";
+import { createCssVariables as X } from "../../../../../utils/common.js";
+import { NmorphComponentHeight as Y } from "../../../../../types/common.types.js";
+import ee from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                            */
-import ee from "../../../../../assets/icons/error.svg.js";
-const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--nmorph-gray-color)", y = "var(--nmorph-black-color)", ne = "var(--nmorph-white-color)", pe = /* @__PURE__ */ S({
+import te from "../../../../../assets/icons/error.svg.js";
+const oe = { class: "nmorph-tag-item__content" }, re = { key: 1 }, ne = "var(--nmorph-gray-color)", y = "var(--nmorph-black-color)", le = "var(--nmorph-white-color)", de = /* @__PURE__ */ I({
   __name: "NmorphTagItem",
   props: {
     value: {},
@@ -14,25 +14,27 @@ const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--n
     removable: { type: Boolean, default: !0 },
     height: { default: "basic" },
     design: { default: "nmorph" },
-    color: { default: re }
+    color: { default: ne }
   },
   emits: ["click", "close"],
-  setup(f, { emit: O }) {
-    const N = { r: 201, g: 210, b: 222 }, s = f, i = v(null), h = v(y);
-    let m = null;
-    const R = p(
-      () => Q({
-        nmorph: [X[s.height]],
-        "nmorph-tag-item": [s.design]
+  setup(g, { emit: O }) {
+    const N = { r: 201, g: 210, b: 222 }, l = g, i = b(null), u = b(y);
+    let p = null;
+    const R = m(
+      () => W({
+        nmorph: [Y[l.height]],
+        "nmorph-tag-item": [l.design]
       })
-    ), g = p(() => s.design === "common"), w = p(() => g.value ? W({
-      "--tag-item-background-color": s.color,
-      "--tag-item-content-color": h.value
-    }) : {}), C = O, V = () => {
-      C("close", s.value);
-    }, D = () => {
-      C("click", s.value);
-    }, L = (o) => {
+    ), d = m(() => l.design === "common"), w = m(
+      () => d.value ? u.value : "var(--nmorph-contrast-text-color)"
+    ), V = m(() => d.value ? X({
+      "--tag-item-background-color": l.color,
+      "--tag-item-content-color": u.value
+    }) : {}), C = O, D = () => {
+      C("close", l.value);
+    }, L = () => {
+      C("click", l.value);
+    }, T = (o) => {
       const t = o.trim().replace("#", "");
       if (![3, 4, 6, 8].includes(t.length)) return null;
       const e = t.length <= 4 ? t.split("").map((r) => `${r}${r}`).join("") : t;
@@ -41,69 +43,70 @@ const te = { class: "nmorph-tag-item__content" }, oe = { key: 1 }, re = "var(--n
         g: parseInt(e.slice(2, 4), 16),
         b: parseInt(e.slice(4, 6), 16)
       };
-    }, T = (o) => {
+    }, M = (o) => {
       const t = o.match(/^rgba?\((.+)\)$/);
       if (!t) return null;
-      const e = t[1].split("/")[0], r = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = r.map((l) => Number.parseFloat(l));
-      return [n, a, c].some((l) => Number.isNaN(l)) ? null : { r: n, g: a, b: c };
-    }, M = (o, t) => {
+      const e = t[1].split("/")[0], r = e.includes(",") ? e.split(",") : e.trim().split(/\s+/), [n, a, c] = r.map((s) => Number.parseFloat(s));
+      return [n, a, c].some((s) => Number.isNaN(s)) ? null : { r: n, g: a, b: c };
+    }, x = (o, t) => {
       const e = o.trim().match(/^var\(\s*(--[A-Za-z0-9-_]+)(?:\s*,\s*(.+))?\)$/);
       if (!e) return o;
-      const [, r, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(r).trim(), l = getComputedStyle(a.documentElement).getPropertyValue(r).trim();
-      return c || l || n || o;
+      const [, r, n] = e, a = t.ownerDocument, c = getComputedStyle(t).getPropertyValue(r).trim(), s = getComputedStyle(a.documentElement).getPropertyValue(r).trim();
+      return c || s || n || o;
     }, A = (o, t) => {
       let e = o;
       for (let r = 0; r < 4; r += 1) {
-        const n = M(e, t);
+        const n = x(e, t);
         if (n === e) break;
         e = n;
       }
-      return L(e) || T(e) || N;
+      return T(e) || M(e) || N;
     }, B = ({ r: o, g: t, b: e }) => {
       const [r, n, a] = [o, t, e].map((c) => {
-        const l = c / 255;
-        return l <= 0.03928 ? l / 12.92 : ((l + 0.055) / 1.055) ** 2.4;
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
       });
       return 0.2126 * r + 0.7152 * n + 0.0722 * a;
-    }, b = (o, t) => {
+    }, v = (o, t) => {
       const [e, r] = [o, t].sort((n, a) => a - n);
       return (e + 0.05) / (r + 0.05);
     }, E = (o) => {
-      const t = B(o), e = b(t, 1), r = b(t, 0);
-      return e > r ? ne : y;
-    }, u = async () => {
-      await J(), !(!g.value || !i.value) && (h.value = E(A(s.color, i.value)));
+      const t = B(o), e = v(t, 1), r = v(t, 0);
+      return e > r ? le : y;
+    }, f = async () => {
+      await Q(), !(!d.value || !i.value) && (u.value = E(A(l.color, i.value)));
     };
-    return $(() => {
-      u(), !(typeof MutationObserver > "u" || !i.value) && (m = new MutationObserver(() => u()), m.observe(i.value.ownerDocument.documentElement, {
+    return S(() => {
+      f(), !(typeof MutationObserver > "u" || !i.value) && (p = new MutationObserver(() => f()), p.observe(i.value.ownerDocument.documentElement, {
         attributes: !0,
         attributeFilter: ["nmorph-data-theme", "class", "style"]
       }));
-    }), x(() => {
-      m?.disconnect();
-    }), I(() => [s.color, s.design], u, { flush: "post" }), (o, t) => (d(), _("div", {
+    }), $(() => {
+      p?.disconnect();
+    }), z(() => [l.color, l.design], f, { flush: "post" }), (o, t) => (h(), _("div", {
       ref_key: "tagRef",
       ref: i,
-      class: H(R.value),
-      style: z(w.value),
-      onClick: D
+      class: F(R.value),
+      style: H(V.value),
+      onClick: L
     }, [
-      F("div", te, [
-        o.$slots.default ? U(o.$slots, "default", { key: 0 }) : (d(), _("span", oe, G(f.text), 1)),
-        s.removable ? (d(), P(k(Y), {
+      U("div", oe, [
+        o.$slots.default ? G(o.$slots, "default", { key: 0 }) : (h(), _("span", re, P(g.text), 1)),
+        l.removable ? (h(), K(k(ee), {
           key: 2,
           class: "nmorph-tag-item__close-icon",
-          onClick: K(V, ["stop"])
+          color: w.value,
+          onClick: j(D, ["stop"])
         }, {
-          default: j(() => [
-            Z(k(ee))
+          default: Z(() => [
+            q(k(te))
           ]),
           _: 1
-        })) : q("", !0)
+        }, 8, ["color"])) : J("", !0)
       ])
     ], 6));
   }
 });
 export {
-  pe as default
+  de as default
 };

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css

@@ -1 +1 @@
-.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-text-color);background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--color: currentColor}.nmorph-video-preview .nmorph-video-preview__play:hover{color:var(--nmorph-accent-color)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-video-preview-width, 100%);height:var(--nmorph-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:2px;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;color:var(--nmorph-text-color);text-decoration:none;border-radius:var(--default-border-radius)}.nmorph-video-preview .nmorph-video-preview__action-link:hover{color:var(--nmorph-accent-color);background:color-mix(in srgb,var(--nmorph-accent-color) 10%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--color: currentColor}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}
+.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--font-size-extra-small);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-video-preview-width, 100%);height:var(--nmorph-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--font-size-extra-small);line-height:var(--line-height-regular);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;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-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-icon-color: var(--nmorph-contrast-text-color);--color: var(--nmorph-contrast-text-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-video-preview-width, 180px);height:var(--nmorph-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-video-preview-portal-width);height:var(--nmorph-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}