@nmorph/nmorph-ui-kit 3.0.3 → 3.0.5

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -1,141 +1,136 @@
 import './NmorphMediaTile.css';
-import m from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeClass as d, withDirectives as c, createElementVNode as p, vShow as _, createBlock as n, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
+import s from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as a, normalizeClass as m, withDirectives as c, createElementVNode as p, vShow as _, createCommentVNode as i, createBlock as r, withCtx as l, createVNode as n, toDisplayString as t, renderSlot as h } from "vue";
 /* empty css                     */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["src", "muted", "autoplay", "playsinline"], y = {
-  key: 0,
+const v = ["src", "muted", "autoplay", "playsinline"], y = ["muted", "autoplay"], k = {
+  key: 1,
   class: "nmorph-media-tile__fallback"
-}, k = {
+}, b = {
   key: 2,
   class: "nmorph-media-tile__initials"
 }, N = {
   key: 3,
   class: "nmorph-media-tile__name"
-}, b = {
+}, u = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, I = {
-  key: 1,
-  class: "nmorph-media-tile__status"
-}, S = {
-  key: 0,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Microphone muted"
 }, g = {
-  key: 1,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Video off"
-}, z = {
   key: 2,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Screen sharing"
-}, V = {
-  key: 3,
-  class: "nmorph-media-tile__status-item",
-  "aria-label": "Pinned"
+  class: "nmorph-media-tile__status"
 };
-function x(t, w, M, o, T, B) {
-  return e(), r(
+function S(d, x, V, o, B, M) {
+  return e(), a(
     "div",
     {
-      class: d(o.modifiers)
+      class: m(o.modifiers)
     },
     [
       c(p("video", {
         ref: "videoRef",
         class: "nmorph-media-tile__video",
-        src: o.props.src || void 0,
-        muted: o.props.muted,
+        src: o.videoSrc,
+        muted: o.videoMuted,
         autoplay: o.props.autoplay,
         playsinline: o.props.playsinline
       }, null, 8, v), [
-        [_, o.hasVideo && !o.props.loading]
+        [_, o.videoVisible && !o.props.loading]
       ]),
-      o.props.showFallback && (!o.hasVideo || o.props.loading) ? (e(), r("div", y, [
-        o.props.loading ? (e(), n(o.NmorphIcon, {
+      o.needsAudioOnlyOutput ? (e(), a("audio", {
+        key: 0,
+        ref: "audioRef",
+        class: "nmorph-media-tile__audio",
+        muted: o.props.muted,
+        autoplay: o.props.autoplay,
+        preload: "auto"
+      }, null, 8, y)) : i("v-if", !0),
+      o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), a("div", k, [
+        o.props.loading ? (e(), r(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
         }, {
-          default: s(() => [
-            a(o.NmorphIconLoaderDots)
+          default: l(() => [
+            n(o.NmorphIconLoaderDots)
           ]),
           _: 1
           /* STABLE */
-        })) : o.props.avatarSrc ? (e(), n(o.NmorphAvatar, {
+        })) : o.props.avatarSrc ? (e(), r(o.NmorphAvatar, {
           key: 1,
           src: o.props.avatarSrc,
           name: o.props.name,
           size: 72,
           design: "plain"
-        }, null, 8, ["src", "name"])) : (e(), r(
+        }, null, 8, ["src", "name"])) : (e(), a(
           "div",
-          k,
-          l(o.fallbackLabel),
+          b,
+          t(o.fallbackLabel),
           1
           /* TEXT */
         )),
-        o.props.name ? (e(), r(
+        o.props.name ? (e(), a(
           "span",
           N,
-          l(o.props.name),
+          t(o.props.name),
           1
           /* TEXT */
         )) : i("v-if", !0),
-        o.props.error && o.props.errorText ? (e(), r(
+        o.props.error && o.props.errorText ? (e(), a(
           "span",
-          b,
-          l(o.props.errorText),
+          u,
+          t(o.props.errorText),
           1
           /* TEXT */
         )) : i("v-if", !0)
       ])) : i("v-if", !0),
-      o.props.showStatus ? (e(), r("div", I, [
-        o.props.micMuted ? (e(), r("span", S, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconMic)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0),
-        o.props.videoOff ? (e(), r("span", g, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconVideo)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0),
-        o.props.screenSharing ? (e(), r("span", z, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconShare)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0),
-        o.props.pinned ? (e(), r("span", V, [
-          a(o.NmorphIcon, { size: "small" }, {
-            default: s(() => [
-              a(o.NmorphIconPin)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ])) : i("v-if", !0)
+      o.props.showStatus ? (e(), a("div", g, [
+        o.props.micMuted ? (e(), r(o.NmorphButton, {
+          key: 0,
+          class: "nmorph-media-tile__status-item",
+          design: "plain",
+          tabindex: -1,
+          "aria-label": "Microphone muted"
+        }, {
+          "icon-only": l(() => [
+            n(o.NmorphIconMute)
+          ]),
+          _: 1
+          /* STABLE */
+        })) : i("v-if", !0),
+        o.props.videoOff ? (e(), r(o.NmorphButton, {
+          key: 1,
+          class: "nmorph-media-tile__status-item",
+          design: "plain",
+          tabindex: -1,
+          "aria-label": "Video off"
+        }, {
+          "icon-only": l(() => [
+            n(o.NmorphIconVideoCameraOff)
+          ]),
+          _: 1
+          /* STABLE */
+        })) : i("v-if", !0),
+        o.props.screenSharing ? (e(), r(o.NmorphButton, {
+          key: 2,
+          class: "nmorph-media-tile__status-item",
+          design: "plain",
+          tabindex: -1,
+          "aria-label": "Screen sharing"
+        }, {
+          "icon-only": l(() => [
+            n(o.NmorphIconShare)
+          ]),
+          _: 1
+          /* STABLE */
+        })) : i("v-if", !0)
       ])) : i("v-if", !0),
-      h(t.$slots, "overlay")
+      h(d.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const P = /* @__PURE__ */ f(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const T = /* @__PURE__ */ f(s, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
-  P as default
+  T as default
 };

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -1,18 +1,19 @@
 import './NmorphMediaTile.css';
-import { defineComponent as d, ref as p, computed as o, watch as c } from "vue";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
-import h from "../../../assets/icons/share.svg.js";
-import y from "../../../assets/icons/pin.svg.js";
-import g from "../../../assets/icons/mic.svg.js";
-import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import B from "../nmorph-avatar/NmorphAvatar.vue.js";
-import v from "../../../assets/icons/video.svg.js";
-import N from "../../../assets/icons/loader.svg.js";
-const x = /* @__PURE__ */ d({
+import { defineComponent as O, ref as m, computed as t, watch as B } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import k from "../../../assets/icons/video-camera-off.svg.js";
+import I from "../../../assets/icons/share.svg.js";
+import N from "../../../assets/icons/mute.svg.js";
+import j from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import _ from "../../basic/nmorph-button/NmorphButton.vue.js";
+import A from "../nmorph-avatar/NmorphAvatar.vue.js";
+import M from "../../../assets/icons/loader.svg.js";
+const F = /* @__PURE__ */ O({
   __name: "NmorphMediaTile",
   props: {
     src: { type: String, required: !1, default: "" },
     srcObject: { type: null, required: !1, default: null },
+    sinkId: { type: String, required: !1, default: void 0 },
     fit: { type: String, required: !1, default: "cover" },
     mirrored: { type: Boolean, required: !1, default: !1 },
     muted: { type: Boolean, required: !1, default: !0 },
@@ -28,20 +29,20 @@ const x = /* @__PURE__ */ d({
     screenSharing: { type: Boolean, required: !1, default: !1 },
     speaking: { type: Boolean, required: !1, default: !1 },
     selected: { type: Boolean, required: !1, default: !1 },
-    pinned: { type: Boolean, required: !1, default: !1 },
     error: { type: Boolean, required: !1, default: !1 },
     errorText: { type: String, required: !1, default: "" }
   },
-  setup(l, { expose: i }) {
-    const e = l, r = p(null), n = o(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), t = o(
-      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((u) => u[0]?.toUpperCase()).join("")
-    ), f = o(() => t.value || e.name || "?"), s = o(
-      () => m({
+  setup(v, { expose: h }) {
+    const e = v, o = m(null), a = m(null), n = t(() => !!(e.src || e.srcObject)), i = t(() => n.value && !e.videoOff && !e.error), s = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), d = t(() => s(e.srcObject).length > 0), l = t(
+      () => !!(e.srcObject && e.videoOff && !e.muted && !e.error && d.value)
+    ), y = t(() => e.muted || l.value), g = t(() => i.value && e.src ? e.src : void 0), f = t(
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
+    ), S = t(() => f.value || e.name || "?"), q = t(
+      () => b({
         "nmorph-media-tile": [
           e.fit,
           e.mirrored && "mirrored",
           e.selected && "selected",
-          e.pinned && "pinned",
           e.speaking && "speaking",
           e.error && "error",
           e.videoOff && "video-off",
@@ -49,32 +50,53 @@ const x = /* @__PURE__ */ d({
           e.loading && "loading"
         ]
       })
-    );
-    c(
-      () => [e.srcObject, r.value],
+    ), u = (r) => {
+      if (!r || e.sinkId === void 0) return;
+      const p = r;
+      typeof p.setSinkId == "function" && p.setSinkId(e.sinkId).catch(() => {
+      });
+    };
+    B(
+      () => [
+        e.srcObject,
+        e.sinkId,
+        e.autoplay,
+        i.value,
+        l.value,
+        o.value,
+        a.value
+      ],
       () => {
-        r.value && r.value.srcObject !== e.srcObject && (r.value.srcObject = e.srcObject);
+        if (o.value) {
+          const r = i.value ? e.srcObject : null;
+          o.value.srcObject !== r && (o.value.srcObject = r), u(o.value);
+        }
+        if (a.value) {
+          const r = l.value ? e.srcObject : null;
+          a.value.srcObject !== r && (a.value.srcObject = r), u(a.value), e.autoplay && l.value && a.value.play().catch(() => {
+          });
+        }
       },
       { immediate: !0, flush: "post" }
-    ), i({ videoRef: r });
-    const a = { props: e, videoRef: r, hasVideo: n, initials: t, fallbackLabel: f, modifiers: s, get NmorphAvatar() {
-      return B;
+    ), h({ videoRef: o });
+    const c = { props: e, videoRef: o, audioRef: a, hasMediaSource: n, videoVisible: i, getAudioTracks: s, hasAudioTracks: d, needsAudioOnlyOutput: l, videoMuted: y, videoSrc: g, initials: f, fallbackLabel: S, modifiers: q, setMediaElementSinkId: u, get NmorphAvatar() {
+      return A;
+    }, get NmorphButton() {
+      return _;
     }, get NmorphIcon() {
-      return q;
+      return j;
     }, get NmorphIconLoaderDots() {
+      return M;
+    }, get NmorphIconMute() {
       return N;
-    }, get NmorphIconMic() {
-      return g;
-    }, get NmorphIconPin() {
-      return y;
     }, get NmorphIconShare() {
-      return h;
-    }, get NmorphIconVideo() {
-      return v;
+      return I;
+    }, get NmorphIconVideoCameraOff() {
+      return k;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  x as default
+  F as default
 };

package/dist/components/data/nmorph-pagination/NmorphPagination.vue.js

@@ -1,97 +1,93 @@
 import './NmorphPagination.css';
-import d from "./NmorphPagination.vue2.js";
-import { openBlock as e, createElementBlock as l, normalizeStyle as c, normalizeClass as t, createVNode as a, withCtx as i, Fragment as p, renderList as m, createBlock as s, createCommentVNode as h } from "vue";
+import c from "./NmorphPagination.vue2.js";
+import { openBlock as a, createElementBlock as l, normalizeStyle as d, normalizeClass as t, createVNode as i, withCtx as e, Fragment as h, renderList as m, createBlock as s, createCommentVNode as p } from "vue";
 /* empty css                      */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-function b(k, r, v, n, g, f) {
-  return n.show ? (e(), l(
-    "div",
-    {
-      key: 0,
-      class: t(n.modifiers),
-      style: c(n.paginationStyle)
-    },
-    [
-      a(n.NmorphButton, {
-        class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
-        thickness: n.props.thickness,
-        disabled: n.blockPrevButton || n.props.disabled,
-        onClick: n.prevClick
-      }, {
-        default: i(() => [
-          a(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
-            default: i(() => [
-              a(n.NmorphIconChevronDown)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["thickness", "disabled"]),
-      a(n.NmorphRadioGroup, {
-        modelValue: n.selectedPage,
-        "onUpdate:modelValue": r[0] || (r[0] = (o) => n.selectedPage = o),
-        class: "nmorph-pagination__page-group",
-        thickness: n.props.thickness,
-        disabled: n.props.disabled
-      }, {
-        default: i(() => [
-          (e(!0), l(
-            p,
-            null,
-            m(n.visiblePages, (o) => (e(), l("div", {
-              key: o.value,
-              class: "nmorph-pagination__page-btn-wrapper"
-            }, [
-              o.value === "prev" || o.value === "next" ? (e(), s(n.NmorphButton, {
-                key: 0,
-                class: t(`nmorph-pagination__page-btn nmorph-pagination__${o.value}`),
-                text: o.label,
-                thickness: n.props.thickness,
-                disabled: n.props.disabled,
-                onClick: (N) => n.bigStepUpdate(o.value)
-              }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (e(), s(n.NmorphRadio, {
-                key: 1,
-                value: o.value,
-                label: o.label,
-                class: "nmorph-pagination__page-btn",
-                thickness: n.props.thickness,
-                disabled: n.props.disabled
-              }, null, 8, ["value", "label", "thickness", "disabled"]))
-            ]))),
-            128
-            /* KEYED_FRAGMENT */
-          ))
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["modelValue", "thickness", "disabled"]),
-      a(n.NmorphButton, {
-        class: "nmorph-pagination__btn nmorph-pagination__next-btn",
-        thickness: n.props.thickness,
-        disabled: n.blockNextButton || n.props.disabled,
-        onClick: n.nextClick
-      }, {
-        default: i(() => [
-          a(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
-            default: i(() => [
-              a(n.NmorphIconChevronDown)
-            ]),
-            _: 1
-            /* STABLE */
-          })
-        ]),
-        _: 1
-        /* STABLE */
-      }, 8, ["thickness", "disabled"])
-    ],
-    6
-    /* CLASS, STYLE */
-  )) : h("v-if", !0);
+const b = ["aria-busy"];
+function k(v, r, g, n, f, N) {
+  return n.show ? (a(), l("div", {
+    key: 0,
+    class: t(n.modifiers),
+    style: d(n.paginationStyle),
+    "aria-busy": n.props.loading || void 0
+  }, [
+    i(n.NmorphButton, {
+      class: "nmorph-pagination__btn nmorph-pagination__prev-btn",
+      thickness: n.props.thickness,
+      disabled: n.blockPrevButton || n.interactionDisabled,
+      onClick: n.prevClick
+    }, {
+      default: e(() => [
+        i(n.NmorphIcon, { class: "nmorph-pagination__prev-icon" }, {
+          default: e(() => [
+            i(n.NmorphIconChevronDown)
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["thickness", "disabled"]),
+    i(n.NmorphRadioGroup, {
+      modelValue: n.selectedPage,
+      "onUpdate:modelValue": r[0] || (r[0] = (o) => n.selectedPage = o),
+      class: "nmorph-pagination__page-group",
+      thickness: n.props.thickness,
+      disabled: n.interactionDisabled
+    }, {
+      default: e(() => [
+        (a(!0), l(
+          h,
+          null,
+          m(n.visiblePages, (o) => (a(), l("div", {
+            key: o.value,
+            class: "nmorph-pagination__page-btn-wrapper"
+          }, [
+            o.value === "prev" || o.value === "next" ? (a(), s(n.NmorphButton, {
+              key: 0,
+              class: t(`nmorph-pagination__page-btn nmorph-pagination__${o.value}`),
+              text: o.label,
+              thickness: n.props.thickness,
+              disabled: n.interactionDisabled,
+              onClick: (x) => n.bigStepUpdate(o.value)
+            }, null, 8, ["class", "text", "thickness", "disabled", "onClick"])) : (a(), s(n.NmorphRadio, {
+              key: 1,
+              value: o.value,
+              label: o.label,
+              class: "nmorph-pagination__page-btn",
+              thickness: n.props.thickness,
+              disabled: n.interactionDisabled
+            }, null, 8, ["value", "label", "thickness", "disabled"]))
+          ]))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["modelValue", "thickness", "disabled"]),
+    i(n.NmorphButton, {
+      class: "nmorph-pagination__btn nmorph-pagination__next-btn",
+      thickness: n.props.thickness,
+      disabled: n.blockNextButton || n.interactionDisabled,
+      onClick: n.nextClick
+    }, {
+      default: e(() => [
+        i(n.NmorphIcon, { class: "nmorph-pagination__next-icon" }, {
+          default: e(() => [
+            i(n.NmorphIconChevronDown)
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["thickness", "disabled"])
+  ], 14, b)) : p("v-if", !0);
 }
-const P = /* @__PURE__ */ _(d, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
+const u = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-pagination/NmorphPagination.vue"]]);
 export {
-  P as default
+  u as default
 };