@nmorph/nmorph-ui-kit 3.0.21 → 3.0.23

package/package.json

@@ -2,7 +2,7 @@
   "name": "@nmorph/nmorph-ui-kit",
   "type": "module",
   "private": false,
-  "version": "3.0.21",
+  "version": "3.0.23",
   "license": "MIT",
   "repository": {
     "type": "git",

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css

@@ -1 +0,0 @@
-.nmorph-media-tile{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:0;overflow:hidden;background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-media-tile.nmorph-media-tile--video{aspect-ratio:16/9}.nmorph-media-tile.nmorph-media-tile--fill{width:100%;height:100%;aspect-ratio:auto}.nmorph-media-tile .nmorph-media-tile__video{width:100%;height:100%;object-fit:cover}.nmorph-media-tile.nmorph-media-tile--contain .nmorph-media-tile__video{object-fit:contain}.nmorph-media-tile.nmorph-media-tile--mirrored .nmorph-media-tile__video{transform:scaleX(-1)}.nmorph-media-tile .nmorph-media-tile__fallback{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;width:100%;height:100%;padding:var(--indentation-04);color:var(--nmorph-text-color);text-align:center}.nmorph-media-tile .nmorph-media-tile__initials{display:flex;justify-content:center;align-items:center;width:72px;height:72px;color:var(--nmorph-focus-text-color);font-weight:var(--font-weight-bold);font-size:var(--nmorph-typography-title-large-font-size);background:var(--nmorph-accent-color);border-radius:var(--border-radius-circular)}.nmorph-media-tile .nmorph-media-tile__name,.nmorph-media-tile .nmorph-media-tile__error-text{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-media-tile .nmorph-media-tile__error-text{color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-media-tile .nmorph-media-tile__status{position:absolute;right:var(--indentation-03);bottom:var(--indentation-03);display:flex;gap:var(--indentation-02)}.nmorph-media-tile .nmorph-media-tile__status-item{color:var(--nmorph-text-color)}.nmorph-media-tile .nmorph-media-tile__status-item .nmorph-button__content{width:28px;min-width:28px;height:24px;min-height:24px;padding:0;color:currentColor;background:color-mix(in srgb,var(--nmorph-main-color) 86%,transparent);border-color:color-mix(in srgb,currentColor 35%,transparent);border-radius:var(--default-border-radius)}.nmorph-media-tile.nmorph-media-tile--selected{outline:2px solid var(--nmorph-accent-color)}.nmorph-media-tile.nmorph-media-tile--speaking{outline:3px solid var(--nmorph-success-text-color)}.nmorph-media-tile.nmorph-media-tile--error{outline:2px solid var(--nmorph-error-text-color)}.nmorph-media-tile.nmorph-media-tile--plain{border:var(--nmorph-plain-border);box-shadow:none}.nmorph-media-tile.nmorph-media-tile--screen-sharing{box-shadow:0 0 0 2px var(--nmorph-success-text-color)}

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

@@ -1,139 +0,0 @@
-import './NmorphMediaTile.css';
-import d from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeClass as m, withDirectives as p, createElementVNode as c, vShow as _, createCommentVNode as r, createBlock as i, withCtx as n, createVNode as l, 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 = ["muted", "autoplay"], k = {
-  key: 1,
-  class: "nmorph-media-tile__fallback"
-}, b = {
-  key: 2,
-  class: "nmorph-media-tile__initials"
-}, N = {
-  key: 3,
-  class: "nmorph-media-tile__name"
-}, u = {
-  key: 4,
-  class: "nmorph-media-tile__error-text"
-}, g = {
-  key: 2,
-  class: "nmorph-media-tile__status"
-};
-function S(s, x, V, o, w, B) {
-  return e(), a(
-    "div",
-    {
-      class: m(o.modifiers)
-    },
-    [
-      p(c("video", {
-        ref: "videoRef",
-        class: "nmorph-media-tile__video",
-        src: o.videoSrc,
-        muted: o.videoMuted,
-        autoplay: o.props.autoplay,
-        playsinline: o.props.playsinline
-      }, null, 8, v), [
-        [_, o.videoVisible && !o.props.loading]
-      ]),
-      o.needsSeparateAudioOutput ? (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)) : r("v-if", !0),
-      o.props.showFallback && (!o.videoVisible || o.props.loading) ? (e(), a("div", k, [
-        o.props.loading ? (e(), i(o.NmorphIcon, {
-          key: 0,
-          class: "nmorph-media-tile__loader",
-          size: "large"
-        }, {
-          default: n(() => [
-            l(o.NmorphIconLoaderDots)
-          ]),
-          _: 1
-          /* STABLE */
-        })) : o.props.avatarSrc ? (e(), i(o.NmorphAvatar, {
-          key: 1,
-          src: o.props.avatarSrc,
-          name: o.props.name,
-          size: 72,
-          design: "plain"
-        }, null, 8, ["src", "name"])) : (e(), a(
-          "div",
-          b,
-          t(o.fallbackLabel),
-          1
-          /* TEXT */
-        )),
-        o.props.name ? (e(), a(
-          "span",
-          N,
-          t(o.props.name),
-          1
-          /* TEXT */
-        )) : r("v-if", !0),
-        o.props.error && o.props.errorText ? (e(), a(
-          "span",
-          u,
-          t(o.props.errorText),
-          1
-          /* TEXT */
-        )) : r("v-if", !0)
-      ])) : r("v-if", !0),
-      o.props.showStatus ? (e(), a("div", g, [
-        o.props.micMuted ? (e(), i(o.NmorphButton, {
-          key: 0,
-          class: "nmorph-media-tile__status-item",
-          design: "plain",
-          borderless: "",
-          tabindex: -1,
-          "aria-label": "Microphone muted"
-        }, {
-          "icon-only": n(() => [
-            l(o.NmorphIconMute)
-          ]),
-          _: 1
-          /* STABLE */
-        })) : r("v-if", !0),
-        o.props.videoOff ? (e(), i(o.NmorphButton, {
-          key: 1,
-          class: "nmorph-media-tile__status-item",
-          design: "plain",
-          borderless: "",
-          tabindex: -1,
-          "aria-label": "Video off"
-        }, {
-          "icon-only": n(() => [
-            l(o.NmorphIconVideoCameraOff)
-          ]),
-          _: 1
-          /* STABLE */
-        })) : r("v-if", !0),
-        o.props.screenSharing ? (e(), i(o.NmorphButton, {
-          key: 2,
-          class: "nmorph-media-tile__status-item",
-          design: "plain",
-          borderless: "",
-          tabindex: -1,
-          "aria-label": "Screen sharing"
-        }, {
-          "icon-only": n(() => [
-            l(o.NmorphIconShare)
-          ]),
-          _: 1
-          /* STABLE */
-        })) : r("v-if", !0)
-      ])) : r("v-if", !0),
-      h(s.$slots, "overlay")
-    ],
-    2
-    /* CLASS */
-  );
-}
-const z = /* @__PURE__ */ f(d, [["render", S], ["__file", "/home/runner/work/nmorph/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
-export {
-  z as default
-};

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

@@ -1,139 +0,0 @@
-import './NmorphMediaTile.css';
-import { defineComponent as _, ref as m, computed as t, watch as I } from "vue";
-import { useModifiers as E } from "../../../utils/create-modifiers.js";
-import L from "../../../assets/icons/video-camera-off.svg.js";
-import A from "../../../assets/icons/share.svg.js";
-import C from "../../../assets/icons/mute.svg.js";
-import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import w from "../../basic/nmorph-button/NmorphButton.vue.js";
-import R from "../nmorph-avatar/NmorphAvatar.vue.js";
-import D from "../../../assets/icons/loader.svg.js";
-const W = /* @__PURE__ */ _({
-  __name: "NmorphMediaTile",
-  props: {
-    design: { type: null, required: !1, default: "nmorph" },
-    aspect: { type: String, required: !1, default: "video" },
-    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 },
-    autoplay: { type: Boolean, required: !1, default: !0 },
-    playsinline: { type: Boolean, required: !1, default: !0 },
-    name: { type: String, required: !1, default: "" },
-    avatarSrc: { type: String, required: !1, default: "" },
-    loading: { type: Boolean, required: !1, default: !1 },
-    showFallback: { type: Boolean, required: !1, default: !0 },
-    showStatus: { type: Boolean, required: !1, default: !0 },
-    micMuted: { type: Boolean, required: !1, default: !1 },
-    videoOff: { type: Boolean, required: !1, default: !1 },
-    screenSharing: { type: Boolean, required: !1, default: !1 },
-    speaking: { type: Boolean, required: !1, default: !1 },
-    selected: { type: Boolean, required: !1, default: !1 },
-    error: { type: Boolean, required: !1, default: !1 },
-    errorText: { type: String, required: !1, default: "" }
-  },
-  setup(j, { expose: N }) {
-    const e = j, o = m(null), i = m(null), u = m({
-      audio: 0,
-      video: 0
-    }), y = t(() => !!(e.src || e.srcObject)), h = (r) => !r || typeof r.getAudioTracks != "function" ? [] : r.getAudioTracks(), g = (r) => !r || typeof r.getVideoTracks != "function" ? [] : r.getVideoTracks(), d = (r) => {
-      u.value = {
-        audio: h(r).length,
-        video: g(r).length
-      };
-    }, k = t(() => typeof e.srcObject?.getVideoTracks == "function"), S = t(() => u.value.video > 0), O = t(
-      () => !!(e.src || e.srcObject && (!k.value || S.value))
-    ), s = t(() => y.value && O.value && !e.videoOff && !e.error), n = t(() => !!(e.srcObject && !e.muted && !e.error)), b = t(() => e.muted || n.value), T = t(() => s.value && e.src ? e.src : void 0), q = t(
-      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((r) => r[0]?.toUpperCase()).join("")
-    ), M = t(() => q.value || e.name || "?"), V = t(
-      () => E({
-        "nmorph-media-tile": [
-          e.design,
-          e.aspect,
-          e.fit,
-          e.mirrored && "mirrored",
-          e.selected && "selected",
-          e.speaking && "speaking",
-          e.error && "error",
-          e.videoOff && "video-off",
-          e.screenSharing && "screen-sharing",
-          e.loading && "loading"
-        ]
-      })
-    ), c = (r) => {
-      if (!r || e.sinkId === void 0) return;
-      const a = r;
-      typeof a.setSinkId == "function" && a.setSinkId(e.sinkId).catch(() => {
-      });
-    }, f = (r) => {
-      console.warn("[NmorphMediaTile] media autoplay failed", r);
-    }, p = (r) => {
-      if (!r || !e.autoplay) return;
-      let a;
-      try {
-        a = r.play();
-      } catch (v) {
-        f(v);
-        return;
-      }
-      a && typeof a.catch == "function" && a.catch(f);
-    };
-    I(
-      () => e.srcObject,
-      (r, a, v) => {
-        if (d(r), !r || typeof r.addEventListener != "function" || typeof r.removeEventListener != "function")
-          return;
-        const l = () => d(r);
-        r.addEventListener("addtrack", l), r.addEventListener("removetrack", l), v(() => {
-          r.removeEventListener("addtrack", l), r.removeEventListener("removetrack", l);
-        });
-      },
-      { immediate: !0 }
-    ), I(
-      () => [
-        e.srcObject,
-        e.sinkId,
-        e.autoplay,
-        e.videoOff,
-        e.error,
-        s.value,
-        n.value,
-        b.value,
-        o.value,
-        i.value
-      ],
-      () => {
-        if (o.value) {
-          const r = e.srcObject;
-          o.value.srcObject !== r && (o.value.srcObject = r), c(o.value), e.autoplay && r && !e.videoOff && !e.error && p(o.value);
-        }
-        if (i.value) {
-          const r = n.value ? e.srcObject : null;
-          i.value.srcObject !== r && (i.value.srcObject = r), c(i.value), e.autoplay && n.value && p(i.value);
-        }
-      },
-      { immediate: !0, flush: "post" }
-    ), N({ videoRef: o });
-    const B = { props: e, videoRef: o, audioRef: i, srcObjectTrackCount: u, hasMediaSource: y, getAudioTracks: h, getVideoTracks: g, updateSrcObjectTrackCount: d, canInspectVideoTracks: k, hasVideoTracks: S, hasVideoSource: O, videoVisible: s, needsSeparateAudioOutput: n, videoMuted: b, videoSrc: T, initials: q, fallbackLabel: M, modifiers: V, setMediaElementSinkId: c, logMediaPlaybackError: f, playMediaElement: p, get NmorphAvatar() {
-      return R;
-    }, get NmorphButton() {
-      return w;
-    }, get NmorphIcon() {
-      return x;
-    }, get NmorphIconLoaderDots() {
-      return D;
-    }, get NmorphIconMute() {
-      return C;
-    }, get NmorphIconShare() {
-      return A;
-    }, get NmorphIconVideoCameraOff() {
-      return L;
-    } };
-    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
-  }
-});
-export {
-  W as default
-};

package/dist/src/components/data/nmorph-media-tile/NmorphMediaTile.vue.d.ts

@@ -1,40 +0,0 @@
-import { INmorphMediaTileProps } from './types';
-import { DefineComponent, Ref, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { NmorphMediaTileFit, NmorphMediaTileAspect } from '../..';
-declare const _default: __VLS_WithTemplateSlots< DefineComponent<INmorphMediaTileProps, {
-    videoRef: Ref<HTMLVideoElement, HTMLVideoElement>;
-}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<INmorphMediaTileProps> & Readonly<{}>, {
-    name: string;
-    design: "nmorph" | "plain";
-    loading: boolean;
-    error: boolean;
-    src: string;
-    fit: NmorphMediaTileFit;
-    errorText: string;
-    muted: boolean;
-    playsinline: boolean;
-    autoplay: boolean;
-    aspect: NmorphMediaTileAspect;
-    srcObject: MediaStream;
-    sinkId: string;
-    mirrored: boolean;
-    avatarSrc: string;
-    showFallback: boolean;
-    showStatus: boolean;
-    micMuted: boolean;
-    videoOff: boolean;
-    screenSharing: boolean;
-    speaking: boolean;
-    selected: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {
-    videoRef: HTMLVideoElement;
-    audioRef: HTMLAudioElement;
-}, HTMLDivElement>, {
-    overlay?(_: {}): any;
-}>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/src/components/data/nmorph-media-tile/types.d.ts

@@ -1,30 +0,0 @@
-import { NmorphElementDesignType } from '../../../types';
-export type NmorphMediaTileFit = 'cover' | 'contain';
-export type NmorphMediaTileAspect = 'video' | 'fill';
-export interface INmorphMediaTileProps {
-    design?: NmorphElementDesignType;
-    aspect?: NmorphMediaTileAspect;
-    src?: string;
-    srcObject?: MediaStream | null;
-    sinkId?: string;
-    fit?: NmorphMediaTileFit;
-    mirrored?: boolean;
-    muted?: boolean;
-    autoplay?: boolean;
-    playsinline?: boolean;
-    name?: string;
-    avatarSrc?: string;
-    loading?: boolean;
-    showFallback?: boolean;
-    showStatus?: boolean;
-    micMuted?: boolean;
-    videoOff?: boolean;
-    screenSharing?: boolean;
-    speaking?: boolean;
-    selected?: boolean;
-    error?: boolean;
-    errorText?: string;
-}
-export interface INmorphMediaTileExpose {
-    videoRef: HTMLVideoElement | null;
-}