@nmorph/nmorph-ui-kit 2.2.49 → 2.2.51

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js

@@ -1,34 +1,39 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as E, useSlots as A, ref as h, computed as u, openBlock as o, createElementBlock as t, normalizeStyle as M, normalizeClass as T, createCommentVNode as n, createVNode as s, unref as r, withCtx as c, createBlock as m, toDisplayString as _, renderSlot as O, createElementVNode as R } from "vue";
-import { useModifiers as L } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as j } from "../../../utils/common.js";
-import p from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import { defineComponent as Q, useAttrs as U, useSlots as W, ref as b, computed as s, openBlock as t, createElementBlock as a, Fragment as X, createElementVNode as _, mergeProps as Y, createCommentVNode as n, createVNode as l, unref as r, withCtx as d, createBlock as v, toDisplayString as k, renderSlot as Z, Teleport as ee } from "vue";
+import { useModifiers as oe } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as te } from "../../../utils/common.js";
+import u from "../../basic/nmorph-icon/NmorphIcon.vue.js";
 /* empty css                                      */
-import q from "../../../assets/icons/pause.svg.js";
-import F from "../../../assets/icons/play.svg.js";
-import G from "../../../assets/icons/loading.svg.js";
-import J from "../../../assets/icons/video.svg.js";
-import K from "../../../assets/icons/open.svg.js";
-import Q from "../../../assets/icons/download.svg.js";
-const U = ["src", "poster", "controls", "muted", "playsinline", "preload"], W = ["aria-label"], X = {
+import re from "../../../assets/icons/video.svg.js";
+import ae from "../../../assets/icons/eye.svg.js";
+import le from "../../../assets/icons/full-screen.svg.js";
+import ne from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+/* empty css                                             */
+import se from "../../../assets/icons/pause.svg.js";
+import ie from "../../../assets/icons/play.svg.js";
+import de from "../../../assets/icons/loading.svg.js";
+import ce from "../../../assets/icons/open.svg.js";
+import ue from "../../../assets/icons/download.svg.js";
+const pe = ["src", "poster", "controls", "muted", "playsinline", "preload"], me = ["aria-label"], ve = {
   key: 2,
   class: "nmorph-video-preview__state"
-}, Y = {
+}, fe = {
   key: 2,
   class: "nmorph-video-preview__error"
-}, Z = {
+}, _e = {
   key: 3,
   class: "nmorph-video-preview__meta"
-}, ee = {
+}, he = {
   key: 0,
   class: "nmorph-video-preview__name"
-}, oe = {
+}, we = {
   key: 1,
   class: "nmorph-video-preview__duration"
-}, ae = {
+}, ye = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, re = ["href", "aria-label"], te = ["href", "download", "aria-label"], _e = /* @__PURE__ */ E({
+}, be = ["aria-label"], ke = ["aria-label"], ge = ["href", "aria-label"], Ae = ["href", "download", "aria-label"], Be = { class: "nmorph-video-preview__portal" }, Pe = { class: "nmorph-video-preview__portal-content" }, Ce = ["src", "poster", "muted", "playsinline", "preload"], g = "var(--nmorph-contrast-text-color)", qe = /* @__PURE__ */ Q({
+  inheritAttrs: !1,
   __name: "NmorphVideoPreview",
   props: {
     src: {},
@@ -38,6 +43,8 @@ const U = ["src", "poster", "controls", "muted", "playsinline", "preload"], W =
     height: { default: void 0 },
     durationMs: { default: void 0 },
     surface: { default: "card" },
+    embedded: { type: Boolean, default: !1 },
+    showMeta: { type: Boolean, default: !0 },
     compact: { type: Boolean, default: !1 },
     controls: { type: Boolean, default: !0 },
     muted: { type: Boolean, default: !1 },
@@ -48,147 +55,237 @@ const U = ["src", "poster", "controls", "muted", "playsinline", "preload"], W =
     loading: { type: Boolean, default: !1 },
     error: { type: Boolean, default: !1 },
     errorText: { default: "" },
-    showDefaultActions: { type: Boolean, default: !0 }
+    showDefaultActions: { type: Boolean, default: !0 },
+    showPreviewAction: { type: Boolean, default: !0 },
+    showFullscreenAction: { type: Boolean, default: !0 }
   },
-  emits: ["play", "pause", "open", "download", "error"],
-  setup(y, { expose: w, emit: k }) {
-    const e = y, i = k, g = A(), d = h(null), l = h(!1), b = (a) => {
-      if (!a || a < 0) return "";
-      const v = Math.round(a / 1e3), I = Math.floor(v / 60), V = v % 60;
-      return `${I}:${V.toString().padStart(2, "0")}`;
-    }, f = u(() => b(e.durationMs)), B = u(
-      () => !!g.actions || e.showDefaultActions && (e.src || e.downloadHref)
-    ), H = u(
-      () => L({
+  emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
+  setup(P, { expose: C, emit: N }) {
+    const e = P, c = N, h = U(), H = W(), p = b(null), f = b(!1), i = b(!1), O = (o) => {
+      if (!o || o < 0) return "";
+      const m = Math.round(o / 1e3), G = Math.floor(m / 60), J = m % 60;
+      return `${G}:${J.toString().padStart(2, "0")}`;
+    }, w = s(() => O(e.durationMs)), y = s(() => !!e.src && !e.loading && !e.error), $ = s(() => y.value && (e.showPreviewAction || e.showFullscreenAction)), S = s(() => e.showDefaultActions && (e.src || e.downloadHref)), A = s(() => !!H.actions || $.value || S.value), E = s(
+      () => oe({
         "nmorph-video-preview": [
           e.surface,
+          e.embedded && "embedded",
+          !e.showMeta && "no-meta",
           e.compact && "compact",
           e.fit,
           e.loading && "loading",
           e.error && "error",
-          l.value && "playing"
+          i.value && "playing",
+          !A.value && "no-actions"
         ]
       })
-    ), N = u(
-      () => j({
+    ), F = s(
+      () => te({
         "--nmorph-video-preview-width": e.width,
         "--nmorph-video-preview-height": e.height
       })
-    ), z = () => i("open"), C = () => i("download"), P = async () => {
-      if (!(!d.value || e.loading || e.error)) {
-        if (l.value) {
-          d.value.pause();
+    ), I = s(() => Object.fromEntries(Object.entries(h).filter(([o]) => o !== "class" && o !== "style"))), z = s(() => [E.value, h.class]), D = s(() => [F.value, h.style]), x = () => c("open"), M = () => c("download"), R = () => {
+      f.value = !0, c("preview");
+    }, B = () => {
+      f.value = !1;
+    }, T = async () => {
+      const o = p.value;
+      if (o) {
+        c("fullscreen");
+        try {
+          const m = o.requestFullscreen?.() || o.webkitRequestFullscreen?.();
+          if (m) {
+            await m;
+            return;
+          }
+          o.webkitEnterFullscreen?.();
+        } catch {
+        }
+      }
+    }, V = async () => {
+      if (!(!p.value || e.loading || e.error)) {
+        if (i.value) {
+          p.value.pause();
           return;
         }
         try {
-          await d.value.play();
+          await p.value.play();
         } catch {
-          l.value = !1;
+          i.value = !1;
         }
       }
-    }, S = (a) => {
-      l.value = !0, i("play", a);
-    }, $ = (a) => {
-      l.value = !1, i("pause", a);
-    }, x = () => {
-      l.value = !1;
-    }, D = (a) => {
-      l.value = !1, i("error", a);
+    }, q = (o) => {
+      i.value = !0, c("play", o);
+    }, j = (o) => {
+      i.value = !1, c("pause", o);
+    }, L = () => {
+      i.value = !1;
+    }, K = (o) => {
+      i.value = !1, c("error", o);
     };
-    return w({ videoRef: d }), (a, v) => (o(), t("div", {
-      class: T(H.value),
-      style: M(N.value)
-    }, [
-      !e.loading && !e.error ? (o(), t("video", {
-        key: 0,
-        ref_key: "videoRef",
-        ref: d,
-        class: "nmorph-video-preview__media",
-        src: e.src,
-        poster: e.poster || void 0,
-        controls: e.controls,
-        muted: e.muted,
-        playsinline: e.playsinline,
-        preload: e.preload,
-        onPlay: S,
-        onPause: $,
-        onEnded: x,
-        onError: D
-      }, null, 40, U)) : n("", !0),
-      !e.loading && !e.error ? (o(), t("button", {
-        key: 1,
-        class: "nmorph-video-preview__play",
-        type: "button",
-        "aria-label": l.value ? `Pause ${e.name || "video"}` : `Play ${e.name || "video"}`,
-        onClick: P
-      }, [
-        s(r(p), { size: "medium" }, {
-          default: c(() => [
-            l.value ? (o(), m(r(q), { key: 0 })) : (o(), m(r(F), { key: 1 }))
-          ]),
-          _: 1
-        })
-      ], 8, W)) : (o(), t("div", X, [
-        e.loading ? (o(), m(r(p), {
+    return C({ videoRef: p }), (o, m) => (t(), a(X, null, [
+      _("div", Y(I.value, {
+        class: z.value,
+        style: D.value
+      }), [
+        !e.loading && !e.error ? (t(), a("video", {
           key: 0,
-          size: "large"
-        }, {
-          default: c(() => [
-            s(r(G))
-          ]),
-          _: 1
-        })) : (o(), m(r(p), {
+          ref_key: "videoRef",
+          ref: p,
+          class: "nmorph-video-preview__media",
+          src: e.src,
+          poster: e.poster || void 0,
+          controls: e.controls,
+          muted: e.muted,
+          playsinline: e.playsinline,
+          preload: e.preload,
+          onPlay: q,
+          onPause: j,
+          onEnded: L,
+          onError: K
+        }, null, 40, pe)) : n("", !0),
+        !e.loading && !e.error ? (t(), a("button", {
           key: 1,
-          size: "large"
-        }, {
-          default: c(() => [
-            s(r(J))
-          ]),
-          _: 1
-        })),
-        e.error && e.errorText ? (o(), t("span", Y, _(e.errorText), 1)) : n("", !0)
-      ])),
-      e.name || f.value ? (o(), t("div", Z, [
-        e.name ? (o(), t("span", ee, _(e.name), 1)) : n("", !0),
-        f.value ? (o(), t("span", oe, _(f.value), 1)) : n("", !0)
-      ])) : n("", !0),
-      B.value ? (o(), t("div", ae, [
-        O(a.$slots, "actions", {}, () => [
-          R("a", {
-            href: e.src,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            class: "nmorph-video-preview__action-link",
-            "aria-label": `Open ${e.name || "video"}`,
-            onClick: z
-          }, [
-            s(r(p), { size: "small" }, {
-              default: c(() => [
-                s(r(K))
-              ]),
-              _: 1
-            })
-          ], 8, re),
-          e.downloadHref ? (o(), t("a", {
+          class: "nmorph-video-preview__play",
+          type: "button",
+          "aria-label": i.value ? `Pause ${e.name || "video"}` : `Play ${e.name || "video"}`,
+          onClick: V
+        }, [
+          l(r(u), {
+            size: "medium",
+            color: g
+          }, {
+            default: d(() => [
+              i.value ? (t(), v(r(se), { key: 0 })) : (t(), v(r(ie), { key: 1 }))
+            ]),
+            _: 1
+          })
+        ], 8, me)) : (t(), a("div", ve, [
+          e.loading ? (t(), v(r(u), {
             key: 0,
-            href: e.downloadHref,
-            download: e.name,
-            class: "nmorph-video-preview__action-link",
-            "aria-label": `Download ${e.name || "video"}`,
-            onClick: C
-          }, [
-            s(r(p), { size: "small" }, {
-              default: c(() => [
-                s(r(Q))
-              ]),
-              _: 1
-            })
-          ], 8, te)) : n("", !0)
+            size: "large"
+          }, {
+            default: d(() => [
+              l(r(de))
+            ]),
+            _: 1
+          })) : (t(), v(r(u), {
+            key: 1,
+            size: "large"
+          }, {
+            default: d(() => [
+              l(r(re))
+            ]),
+            _: 1
+          })),
+          e.error && e.errorText ? (t(), a("span", fe, k(e.errorText), 1)) : n("", !0)
+        ])),
+        e.showMeta && (e.name || w.value) ? (t(), a("div", _e, [
+          e.name ? (t(), a("span", he, k(e.name), 1)) : n("", !0),
+          w.value ? (t(), a("span", we, k(w.value), 1)) : n("", !0)
+        ])) : n("", !0),
+        A.value ? (t(), a("div", ye, [
+          Z(o.$slots, "actions", {}, () => [
+            e.showPreviewAction && y.value ? (t(), a("button", {
+              key: 0,
+              type: "button",
+              class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--preview",
+              "aria-label": `Preview ${e.name || "video"}`,
+              onClick: R
+            }, [
+              l(r(u), {
+                size: "small",
+                color: g
+              }, {
+                default: d(() => [
+                  l(r(ae))
+                ]),
+                _: 1
+              })
+            ], 8, be)) : n("", !0),
+            e.showFullscreenAction && y.value ? (t(), a("button", {
+              key: 1,
+              type: "button",
+              class: "nmorph-video-preview__action-button nmorph-video-preview__action-button--fullscreen",
+              "aria-label": `Fullscreen ${e.name || "video"}`,
+              onClick: T
+            }, [
+              l(r(u), {
+                size: "small",
+                color: g
+              }, {
+                default: d(() => [
+                  l(r(le))
+                ]),
+                _: 1
+              })
+            ], 8, ke)) : n("", !0),
+            e.showDefaultActions && e.src ? (t(), a("a", {
+              key: 2,
+              href: e.src,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              class: "nmorph-video-preview__action-link",
+              "aria-label": `Open ${e.name || "video"}`,
+              onClick: x
+            }, [
+              l(r(u), { size: "small" }, {
+                default: d(() => [
+                  l(r(ce))
+                ]),
+                _: 1
+              })
+            ], 8, ge)) : n("", !0),
+            e.downloadHref ? (t(), a("a", {
+              key: 3,
+              href: e.downloadHref,
+              download: e.name,
+              class: "nmorph-video-preview__action-link",
+              "aria-label": `Download ${e.name || "video"}`,
+              onClick: M
+            }, [
+              l(r(u), { size: "small" }, {
+                default: d(() => [
+                  l(r(ue))
+                ]),
+                _: 1
+              })
+            ], 8, Ae)) : n("", !0)
+          ])
+        ])) : n("", !0)
+      ], 16),
+      f.value ? (t(), v(ee, {
+        key: 0,
+        to: "body"
+      }, [
+        _("div", Be, [
+          l(r(ne), {
+            show: f.value,
+            "disabled-teleport": "",
+            onOnOutsideClick: B,
+            onOnEscapeKeydown: B
+          }, {
+            default: d(() => [
+              _("div", Pe, [
+                _("video", {
+                  class: "nmorph-video-preview__portal-media",
+                  src: e.src,
+                  poster: e.poster || void 0,
+                  controls: "",
+                  autoplay: "",
+                  muted: e.muted,
+                  playsinline: e.playsinline,
+                  preload: e.preload
+                }, null, 8, Ce)
+              ])
+            ]),
+            _: 1
+          }, 8, ["show"])
         ])
       ])) : n("", !0)
-    ], 6));
+    ], 64));
   }
 });
 export {
-  _e as default
+  qe as default
 };

package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue.js

@@ -1,9 +1,12 @@
 import './NmorphNotificationProvider.css';
-import { defineComponent as A, ref as h, inject as F, computed as g, watch as L, onBeforeUnmount as O, openBlock as a, createElementBlock as c, normalizeStyle as I, Fragment as x, renderList as T, createBlock as P, TransitionGroup as S, normalizeClass as D, withCtx as V, createVNode as j, unref as q, mergeProps as G, createElementVNode as _, toDisplayString as U, createCommentVNode as H } from "vue";
-import { NmorphNotificationPlacement as J } from "./types.js";
-import K from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
+import { defineComponent as G, ref as h, inject as H, computed as g, watch as x, onBeforeUnmount as K, openBlock as a, createElementBlock as s, normalizeStyle as k, Fragment as M, renderList as A, createBlock as J, TransitionGroup as Q, normalizeClass as R, withCtx as W, createVNode as X, unref as Y, mergeProps as Z, createElementVNode as z, toDisplayString as ee, createCommentVNode as C } from "vue";
+import { NmorphNotificationPlacement as te } from "./types.js";
+import re from "../../feedback/nmorph-alert/NmorphAlert.vue.js";
 /* empty css                                           */
-const Q = ["title"], W = { class: "nmorph-notification-provider__duration-value" }, X = 500, re = /* @__PURE__ */ A({
+const ne = ["title"], oe = {
+  key: 0,
+  class: "nmorph-notification-provider__duration-value"
+}, ie = 500, ae = 250, de = /* @__PURE__ */ G({
   __name: "NmorphNotificationProvider",
   props: {
     notifications: {},
@@ -11,95 +14,117 @@ const Q = ["title"], W = { class: "nmorph-notification-provider__duration-value"
     zIndex: { default: void 0 },
     quantity: { default: 100 }
   },
-  setup(b) {
-    const k = (e) => typeof e.id == "string" && e.id.length > 0, d = h([]), i = h([]), n = h([]), s = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map(), w = Object.values(J), l = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), N = (e) => l(e) > 0, z = (e) => {
-      if (e < 1e3) return `${e}ms`;
-      const t = e / 1e3;
-      return `${Number.isInteger(t) ? t : Number(t.toFixed(1))}s`;
-    }, y = (e) => z(l(e)), $ = (e) => ({
-      "--nmorph-notification-provider-duration": `${l(e)}ms`
-    }), p = (e) => {
-      const t = s.get(e);
-      t && clearTimeout(t), s.delete(e), u.delete(e);
-    }, C = (e) => {
-      n.value = n.value.filter((t) => t.id !== e), i.value = i.value.filter((t) => t !== e), p(e);
-    }, f = (e, t = !0) => {
-      i.value.includes(e) || (p(e), t && !d.value.includes(e) && (d.value = [...d.value, e]), i.value = [...i.value, e], setTimeout(() => C(e), X));
-    }, E = (e) => {
-      const t = l(e);
-      u.get(e.id) !== t && (p(e.id), t && (s.set(
+  setup(E) {
+    const V = (e) => typeof e.id == "string" && e.id.length > 0, m = h([]), i = h([]), o = h([]), l = h(Date.now()), u = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
+    let c;
+    const $ = Object.values(te), d = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), _ = (e) => d(e) > 0, y = (e) => e.showDurationValue !== !1, B = (e) => {
+      const t = d(e), r = v.get(e.id);
+      return !t || !r ? t : Math.max(t - (l.value - r), 0);
+    }, b = (e) => e < 1e3 ? `${Math.ceil(e)}ms` : `${Math.ceil(e / 1e3)}s`, T = (e) => b(B(e)), P = (e) => ({
+      "--nmorph-notification-provider-duration": `${d(e)}ms`
+    }), L = (e) => {
+      const t = { ...e };
+      return delete t.duration, delete t.placement, delete t.showDurationValue, delete t.width, t;
+    }, N = (e, t = !1) => {
+      const r = u.get(e);
+      r && clearTimeout(r), u.delete(e), p.delete(e), t || v.delete(e);
+    }, O = (e) => {
+      o.value = o.value.filter((t) => t.id !== e), i.value = i.value.filter((t) => t !== e), N(e);
+    }, I = (e, t = !0) => {
+      i.value.includes(e) || (N(e, !0), t && !m.value.includes(e) && (m.value = [...m.value, e]), i.value = [...i.value, e], setTimeout(() => O(e), ie));
+    }, S = (e) => {
+      const t = d(e);
+      p.get(e.id) !== t && (N(e.id), t && (l.value = Date.now(), v.set(e.id, l.value), u.set(
         e.id,
-        setTimeout(() => f(e.id), t)
-      ), u.set(e.id, t)));
-    }, m = b, B = F("nmorph", void 0), M = g(
-      () => w.map((e) => {
-        const t = n.value.filter(
-          (o) => (o.placement ?? m.placement) === e
-        ), r = Math.max(t.length - m.quantity, 0);
+        setTimeout(() => I(e.id), t)
+      ), p.set(e.id, t)));
+    }, f = E, U = H("nmorph", void 0), j = g(
+      () => $.map((e) => {
+        const t = o.value.filter(
+          (n) => (n.placement ?? f.placement) === e
+        ), r = Math.max(t.length - f.quantity, 0);
         return {
           placement: e,
           notifications: t.slice(r)
         };
       })
-    );
-    L(
-      () => m.notifications,
+    ), q = g(
+      () => o.value.some(
+        (e) => _(e) && !i.value.includes(e.id)
+      )
+    ), w = () => {
+      c && (clearInterval(c), c = void 0);
+    };
+    x(
+      q,
+      (e) => {
+        if (!e) {
+          w();
+          return;
+        }
+        c || (l.value = Date.now(), c = setInterval(() => {
+          l.value = Date.now();
+        }, ae));
+      },
+      { immediate: !0 }
+    ), x(
+      () => f.notifications,
       (e) => {
-        const t = e.filter(k).filter((r) => !d.value.includes(r.id));
-        n.value = n.value.map((r) => {
-          const o = t.find((v) => v.id === r.id);
-          return o ? { ...r, ...o } : r;
+        const t = e.filter(V).filter((r) => !m.value.includes(r.id));
+        o.value = o.value.map((r) => {
+          const n = t.find((D) => D.id === r.id);
+          return n ? { ...r, ...n } : r;
         }), t.forEach((r) => {
-          n.value.some(
-            (v) => v.id === r.id
-          ) || n.value.push(r);
-        }), t.forEach((r) => E(r)), n.value.filter(
-          (r) => !t.some((o) => o.id === r.id)
-        ).forEach((r) => f(r.id, !1));
+          o.value.some(
+            (D) => D.id === r.id
+          ) || o.value.push(r);
+        }), t.forEach((r) => S(r)), o.value.filter(
+          (r) => !t.some((n) => n.id === r.id)
+        ).forEach((r) => I(r.id, !1));
       },
       { deep: !0, immediate: !0 }
     );
-    const R = g(() => m.zIndex ?? (B?.zIndex.current.value ?? 1e3) + 1);
-    return O(() => {
-      s.forEach((e) => clearTimeout(e)), s.clear(), u.clear();
-    }), (e, t) => (a(), c("div", {
+    const F = g(() => f.zIndex ?? (U?.zIndex.current.value ?? 1e3) + 1);
+    return K(() => {
+      u.forEach((e) => clearTimeout(e)), u.clear(), p.clear(), v.clear(), w();
+    }), (e, t) => (a(), s("div", {
       class: "nmorph-notification-provider",
-      style: I({ zIndex: R.value })
+      style: k({ zIndex: F.value })
     }, [
-      (a(!0), c(x, null, T(M.value, (r) => (a(), P(S, {
+      (a(!0), s(M, null, A(j.value, (r) => (a(), J(Q, {
         key: r.placement,
         appear: "",
         name: "nmorph-notification",
         tag: "div",
-        class: D(`nmorph-notification-provider__list nmorph-notification-provider__list--${r.placement}`)
+        class: R(`nmorph-notification-provider__list nmorph-notification-provider__list--${r.placement}`)
       }, {
-        default: V(() => [
-          (a(!0), c(x, null, T(r.notifications, (o) => (a(), c("div", {
-            key: o.id,
-            style: I($(o)),
-            class: D([
+        default: W(() => [
+          (a(!0), s(M, null, A(r.notifications, (n) => (a(), s("div", {
+            key: n.id,
+            style: k(P(n)),
+            class: R([
               "nmorph-notification-provider__notification",
-              N(o) && "nmorph-notification-provider__notification--with-duration",
-              i.value.includes(o.id) && "nmorph-notification-provider__notification--closing"
+              _(n) && "nmorph-notification-provider__notification--with-duration",
+              i.value.includes(n.id) && "nmorph-notification-provider__notification--closing"
             ])
           }, [
-            j(q(K), G({
+            X(Y(re), Z({
               class: "nmorph-notification-provider__alert",
-              style: { width: o.width }
-            }, { ref_for: !0 }, o, {
-              onClose: () => f(o.id)
+              style: { width: n.width }
+            }, { ref_for: !0 }, L(n), {
+              onClose: () => I(n.id)
             }), null, 16, ["style", "onClose"]),
-            N(o) ? (a(), c("div", {
-              key: `${o.id}-${l(o)}`,
+            _(n) ? (a(), s("div", {
+              key: `${n.id}-${d(n)}`,
               class: "nmorph-notification-provider__duration",
-              title: y(o),
+              title: y(n) ? T(n) : void 0,
               "aria-hidden": "true"
             }, [
-              t[0] || (t[0] = _("span", { class: "nmorph-notification-provider__duration-track" }, [
-                _("span", { class: "nmorph-notification-provider__duration-bar" })
+              t[0] || (t[0] = z("span", { class: "nmorph-notification-provider__duration-track" }, [
+                z("span", { class: "nmorph-notification-provider__duration-bar" })
               ], -1)),
-              _("span", W, U(y(o)), 1)
-            ], 8, Q)) : H("", !0)
+              y(n) ? (a(), s("span", oe, ee(T(n)), 1)) : C("", !0)
+            ], 8, ne)) : C("", !0)
           ], 6))), 128))
         ]),
         _: 2
@@ -108,5 +133,5 @@ const Q = ["title"], W = { class: "nmorph-notification-provider__duration-value"
   }
 });
 export {
-  re as default
+  de as default
 };