@moser-inc/moser-labs-custom-elements 2.1.0 → 2.2.0

package/README.md

@@ -10,30 +10,33 @@ npm i @moser-inc/moser-labs-custom-elements
 
 ## Usage
 
-For these custom elements to function properly, you must first authenticate the user with Keycloak and call the provided `authenticateCustomElements` function before registering.
+For these custom elements to function properly, you must first authenticate the user with Keycloak before calling the provided `registerCustomElements` function, passing the Keycloak instance to it.
 
 ```ts
 import Keycloak from 'keycloak-js';
-import { authenticateCustomElements, registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
+import { registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
 
 const keycloak = new Keycloak('/keycloak.json');
 
 keycloak.init({ onLoad: 'login-required' }).then((isAuthenticated) => {
   if (!isAuthenticated) return;
 
-  authenticateCustomElements(keycloak);
-  registerCustomElements();
+  registerCustomElements({ keycloak });
 });
 ```
 
-For greater flexibility, you are also able to import and define each custom element individually rather than registering them all at once.
+## API
+
+In order for the custom elements to use the correct instance for calling API endpoints and getting profile pictures, pass the `apiUri` option to `registerCustomElements`, using an environment variable for it to be dynamic between staging and production. It defaults to using `window.location.origin`.
 
 ```ts
-import { LabsAppSwitcher, registerCustomElements } from '@moser-inc/moser-labs-custom-elements';
+registerCustomElements({ keycloak, apiUri: import.meta.env.VITE_API_URI });
+```
 
-// Register all custom elements at once
-registerCustomElements();
+## External
 
-// Or register each custom element individually as needed
-customElements.register('labs-app-switcher', LabsAppSwitcher);
+When using a Vue + PrimeVue based application, a version of the package is provided that marks these dependencies as external to drastically reduce the bundle size.
+
+```ts
+import { registerCustomElements } from '@moser-inc/moser-labs-custom-elements/external';
 ```

package/dist/external/moser-labs-custom-elements.js

@@ -1,10 +1,10 @@
 var X = Object.defineProperty;
 var Z = (a, r, s) => r in a ? X(a, r, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[r] = s;
-var y = (a, r, s) => Z(a, typeof r != "symbol" ? r + "" : r, s);
+var A = (a, r, s) => Z(a, typeof r != "symbol" ? r + "" : r, s);
 import ee from "primevue/config";
 import te from "primevue/tooltip";
-import * as V from "vue";
-import { inject as se, defineComponent as T, toRef as b, ref as R, computed as g, openBlock as C, createBlock as O, unref as v, createElementBlock as S, Fragment as I, createVNode as E, withCtx as L, createElementVNode as A, toDisplayString as P, resolveDirective as oe, withDirectives as ne, createSlots as re, mergeProps as ie, normalizeClass as B, createCommentVNode as z, createTextVNode as ae, getCurrentInstance as le, nextTick as ce, render as F, h as ue } from "vue";
+import * as B from "vue";
+import { inject as se, defineComponent as M, toRef as b, ref as T, computed as g, openBlock as y, createBlock as D, unref as v, createElementBlock as C, Fragment as R, createVNode as E, withCtx as P, createElementVNode as x, toDisplayString as S, createCommentVNode as I, resolveDirective as oe, withDirectives as ne, createSlots as re, mergeProps as ie, normalizeClass as z, createTextVNode as ae, getCurrentInstance as le, nextTick as ce, render as F, h as ue } from "vue";
 import G from "primevue/button";
 import pe from "primevue/divider";
 import W from "primevue/menu";
@@ -12,8 +12,8 @@ import { useEventListener as de, useFetch as fe, createEventHook as he } from "@
 import me from "primevue/avatar";
 import _e from "primevue/inlinemessage";
 import be from "primevue/progressspinner";
-import { extend as H, isArray as K, camelize as M, toNumber as q, hyphenate as x } from "@vue/shared";
-const J = Symbol("labs-custom-elements-options"), D = () => {
+import { extend as H, isArray as K, camelize as O, toNumber as q, hyphenate as L } from "@vue/shared";
+const J = Symbol("labs-custom-elements-options"), $ = () => {
   const a = se(J);
   if (!a)
     throw new Error("useCeOptions(): could not find custom elements options!");
@@ -21,7 +21,7 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
     ...a,
     apiUri: a.apiUri || window.location.origin
   };
-}, ve = /* @__PURE__ */ T({
+}, ve = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "LabsAvatar.ce",
   props: {
@@ -32,53 +32,62 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
     shape: { type: null }
   },
   setup(a) {
-    const r = a, { apiUri: s } = D(), t = b(() => r.userId), e = R(), o = g(() => {
+    const r = a, { apiUri: s } = $(), t = b(() => r.userId), e = T(), o = g(() => {
       if (!e.value) return;
-      const p = e.value.$el;
-      if (!p) return;
-      const h = p.querySelector("img");
+      const d = e.value.$el;
+      if (!d) return;
+      const h = d.querySelector("img");
       if (h)
         return h;
-    }), n = R(!0);
+    }), n = T(!0);
     de(o, "error", () => n.value = !1);
     const u = b(() => `${s}/api/users/${t.value}/photo`), f = g(() => {
       var i, m;
-      const p = ((i = r.firstName) == null ? void 0 : i.charAt(0).toLocaleUpperCase()) ?? "", h = ((m = r.lastName) == null ? void 0 : m.charAt(0).toLocaleUpperCase()) ?? "";
-      return `${p}${h}`;
-    }), d = g(() => {
+      const d = ((i = r.firstName) == null ? void 0 : i.charAt(0).toLocaleUpperCase()) ?? "", h = ((m = r.lastName) == null ? void 0 : m.charAt(0).toLocaleUpperCase()) ?? "";
+      return `${d}${h}`;
+    }), p = g(() => {
       if (!n.value)
         return f.value;
     }), _ = g(() => {
       if (n.value)
         return u.value;
     }), c = g(() => {
-      if (!(n.value || d.value))
+      if (!(n.value || p.value))
         return "pi-user";
     });
-    return (p, h) => (C(), O(v(me), {
+    return (d, h) => (y(), D(v(me), {
       ref_key: "avatarRef",
       ref: e,
-      size: p.size,
-      shape: p.shape,
-      label: d.value,
+      size: d.size,
+      shape: d.shape,
+      label: p.value,
       image: _.value,
       icon: c.value,
       pt: { image: "size-full rounded-inherit object-cover" }
     }, null, 8, ["size", "shape", "label", "image", "icon"]));
   }
-}), ge = "", $ = (a, r) => {
+}), ge = "", U = (a, r) => {
   const s = a.__vccOpts || a;
   for (const [t, e] of r)
     s[t] = e;
   return s;
-}, Y = /* @__PURE__ */ $(ve, [["styles", [ge]]]), ye = "moser-labs-web", Ae = Object.freeze({
+}, Y = /* @__PURE__ */ U(ve, [["styles", [ge]]]), ye = "moser-labs-web", Ae = Object.freeze({
   SUPER_ADMIN: "super-admin",
   TENANT_ADMIN: "tenant-admin"
-}), Ee = { class: "flex flex-col break-words px-5 py-3 line-height-relaxed" }, we = { class: "font-bold" }, ke = { class: "text-sm text-color-secondary" }, Ce = { class: "text-xs text-color-secondary" }, Ne = /* @__PURE__ */ T({
+}), Ee = { class: "flex flex-col gap-1 break-words px-5 py-3 leading-tight" }, ke = {
+  key: 0,
+  class: "text-base font-bold leading-inherit"
+}, we = {
+  key: 1,
+  class: "text-sm text-color-secondary leading-inherit"
+}, Ce = {
+  key: 2,
+  class: "text-xs text-color-secondary leading-inherit"
+}, Ne = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "LabsAccount.ce",
   setup(a) {
-    const { keycloak: r, apiUri: s } = D(), t = b(() => r.tokenParsed), e = b(() => {
+    const { keycloak: r, apiUri: s } = $(), t = b(() => r.tokenParsed), e = b(() => {
       var l;
       return ((l = t.value) == null ? void 0 : l.user_id) || "";
     }), o = b(() => {
@@ -93,7 +102,7 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
     }), f = b(() => {
       var l;
       return ((l = t.value) == null ? void 0 : l.job_title) || "";
-    }), d = b(() => {
+    }), p = b(() => {
       var l;
       return ((l = t.value) == null ? void 0 : l.email) || "";
     }), _ = b(() => {
@@ -102,7 +111,7 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
     }), c = b(() => {
       var l;
       return ((l = _.value) == null ? void 0 : l.roles) ?? [];
-    }), { SUPER_ADMIN: p, TENANT_ADMIN: h } = Ae, i = g(() => c.value.includes(p)), m = g(() => c.value.includes(h)), w = g(() => i.value || m.value), k = g(() => [
+    }), { SUPER_ADMIN: d, TENANT_ADMIN: h } = Ae, i = g(() => c.value.includes(d)), m = g(() => c.value.includes(h)), k = g(() => i.value || m.value), w = g(() => [
       {
         label: "Profile",
         icon: "pi-user",
@@ -112,18 +121,18 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
         label: "Admin",
         icon: "pi-shield",
         url: `${s}/admin`,
-        visible: w.value
+        visible: k.value
       },
       {
         label: "Logout",
         icon: "pi-sign-out",
         command: () => r.logout({ redirectUri: `${s}/login` })
       }
-    ]), j = R(), Q = (l) => {
+    ]), V = T(), Q = (l) => {
       var N;
-      return (N = j.value) == null ? void 0 : N.toggle(l);
+      return (N = V.value) == null ? void 0 : N.toggle(l);
     };
-    return (l, N) => (C(), S(I, null, [
+    return (l, N) => (y(), C(R, null, [
       E(v(G), {
         "aria-label": `Signed in as ${u.value} - toggle account menu`,
         "aria-haspopup": "",
@@ -131,7 +140,7 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
         class: "border-0 bg-transparent p-0 text-inherit",
         onClick: Q
       }, {
-        default: L(() => [
+        default: P(() => [
           E(Y, {
             "user-id": e.value,
             "first-name": o.value,
@@ -143,17 +152,17 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
       E(v(W), {
         id: "account-menu",
         ref_key: "menuRef",
-        ref: j,
+        ref: V,
         "aria-label": "Account",
-        model: k.value,
+        model: w.value,
         popup: "",
         class: "mt-2 w-50"
       }, {
-        start: L(() => [
-          A("div", Ee, [
-            A("span", we, P(u.value), 1),
-            A("span", ke, P(f.value), 1),
-            A("span", Ce, P(d.value), 1)
+        start: P(() => [
+          x("div", Ee, [
+            u.value ? (y(), C("span", ke, S(u.value), 1)) : I("", !0),
+            f.value ? (y(), C("span", we, S(f.value), 1)) : I("", !0),
+            p.value ? (y(), C("span", Ce, S(p.value), 1)) : I("", !0)
           ]),
           E(v(pe), { class: "my-1" })
         ]),
@@ -161,11 +170,11 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
       }, 8, ["model"])
     ], 64));
   }
-}), xe = "", Le = /* @__PURE__ */ $(Ne, [["styles", [xe]]]), Pe = ["href"], Se = { class: "text-xs leading-tight" }, Ie = { class: "p-button-label" }, Re = /* @__PURE__ */ T({
+}), xe = "", Le = /* @__PURE__ */ U(Ne, [["styles", [xe]]]), Pe = ["href"], Se = { class: "text-xs leading-tight" }, Ie = { class: "p-button-label" }, Re = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "LabsAppSwitcher.ce",
   setup(a) {
-    const { keycloak: r, apiUri: s } = D(), { data: t, isFetching: e, error: o } = fe(
+    const { keycloak: r, apiUri: s } = $(), { data: t, isFetching: e, error: o } = fe(
       () => `${s}/graphql`,
       {
         async beforeFetch(c) {
@@ -194,8 +203,8 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
         }
       }
     ), n = b(() => {
-      var c, p;
-      return ((p = (c = t.value) == null ? void 0 : c.tenant) == null ? void 0 : p.apps) ?? [];
+      var c, d;
+      return ((d = (c = t.value) == null ? void 0 : c.tenant) == null ? void 0 : d.apps) ?? [];
     }), u = (c) => c ? {
       EATS: "i-mli-eats-badge",
       ENGAGEMENTS: "i-mli-engagements-badge",
@@ -212,20 +221,20 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
         href: h.url,
         label: h.name,
         icon: u(h.id)
-      })), p = {
+      })), d = {
         variant: "button",
         href: s,
         label: "Moser Labs Dashboard",
         icon: "pi-arrow-right"
       };
-      return [...c, p].filter((h) => !h.hidden);
-    }), d = R(), _ = (c) => {
-      var p;
-      return (p = d.value) == null ? void 0 : p.toggle(c);
+      return [...c, d].filter((h) => !h.hidden);
+    }), p = T(), _ = (c) => {
+      var d;
+      return (d = p.value) == null ? void 0 : d.toggle(c);
     };
-    return (c, p) => {
+    return (c, d) => {
       const h = oe("tooltip");
-      return C(), S(I, null, [
+      return y(), C(R, null, [
         ne(E(v(G), {
           "aria-label": "App Switcher",
           "aria-haspopup": "",
@@ -246,7 +255,7 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
         E(v(W), {
           id: "app-switcher-menu",
           ref_key: "menuRef",
-          ref: d,
+          ref: p,
           "aria-label": "Moser labs apps",
           model: f.value,
           popup: "",
@@ -261,44 +270,44 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
             content: "flex flex-col items-center rounded-xl transition-200"
           }
         }, re({
-          item: L(({ item: i, props: m }) => [
-            A("a", ie({
+          item: P(({ item: i, props: m }) => [
+            x("a", ie({
               href: i.href,
               class: ["w-full duration-150 !rounded-inherit !transition-background-color", {
                 "flex flex-col gap-2 p-3 text-center text-color-secondary": i.variant === "app",
                 "p-button p-button-text w-full rounded-xl color-inherit no-underline": i.variant === "button"
               }]
             }, m.action), [
-              i.variant === "app" ? (C(), S(I, { key: 0 }, [
-                A("i", {
-                  class: B([i.icon, "text-5xl"])
+              i.variant === "app" ? (y(), C(R, { key: 0 }, [
+                x("i", {
+                  class: z([i.icon, "text-5xl"])
                 }, null, 2),
-                A("span", Se, P(i.label), 1)
-              ], 64)) : i.variant === "button" ? (C(), S(I, { key: 1 }, [
-                A("span", Ie, P(i.label), 1),
-                A("i", {
-                  class: B([i.icon, "p-button-icon p-button-icon-right"])
+                x("span", Se, S(i.label), 1)
+              ], 64)) : i.variant === "button" ? (y(), C(R, { key: 1 }, [
+                x("span", Ie, S(i.label), 1),
+                x("i", {
+                  class: z([i.icon, "p-button-icon p-button-icon-right"])
                 }, null, 2)
-              ], 64)) : z("", !0)
+              ], 64)) : I("", !0)
             ], 16, Pe)
           ]),
           _: 2
         }, [
           v(e) || v(o) ? {
             name: "start",
-            fn: L(() => [
-              v(e) ? (C(), O(v(be), {
+            fn: P(() => [
+              v(e) ? (y(), D(v(be), {
                 key: 0,
                 class: "m-8"
-              })) : v(o) ? (C(), O(v(_e), {
+              })) : v(o) ? (y(), D(v(_e), {
                 key: 1,
                 severity: "error"
               }, {
-                default: L(() => [
+                default: P(() => [
                   ae(" Unable to load application list ")
                 ]),
                 _: 1
-              })) : z("", !0)
+              })) : I("", !0)
             ]),
             key: "0"
           } : void 0
@@ -306,9 +315,9 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
       ], 64);
     };
   }
-}), Te = "", Me = /* @__PURE__ */ $(Re, [["styles", [Te]]]), Oe = (a) => {
+}), Te = "", Me = /* @__PURE__ */ U(Re, [["styles", [Te]]]), Oe = (a) => {
   const r = le(), s = he();
-  if (V.onBeforeUnmount(() => s.trigger(void 0)), !r)
+  if (B.onBeforeUnmount(() => s.trigger(void 0)), !r)
     throw new Error("useCeVueApp(): could not find vue instance!");
   const t = {
     version: "FAKE_APP_FOR_CE",
@@ -323,7 +332,7 @@ const J = Symbol("labs-custom-elements-options"), D = () => {
       return r.appContext.directives[e] = o, t;
     },
     provide(e, o) {
-      return V.provide(e, o), t;
+      return B.provide(e, o), t;
     },
     onUnmount(e) {
       s.on(e);
@@ -347,13 +356,13 @@ const De = (() => {
   document.addEventListener(a, e);
   class o extends HTMLElement {
     static withParsedCallback(u, f = "parsed") {
-      const { prototype: d } = u, { connectedCallback: _ } = d, c = f + "Callback", p = (i, m, w, k) => {
-        m.disconnect(), w.removeEventListener(a, k), h(i);
+      const { prototype: p } = u, { connectedCallback: _ } = p, c = f + "Callback", d = (i, m, k, w) => {
+        m.disconnect(), k.removeEventListener(a, w), h(i);
       }, h = (i) => {
         s.length || requestAnimationFrame(e), s.push([i, c]);
       };
       return Object.defineProperties(
-        d,
+        p,
         {
           connectedCallback: {
             configurable: !0,
@@ -364,12 +373,12 @@ const De = (() => {
                 if (r.set(i, !1), m.readyState === "complete" || t(i))
                   h(i);
                 else {
-                  const w = () => p(i, k, m, w);
-                  m.addEventListener(a, w);
-                  const k = new MutationObserver(() => {
-                    t(i) && p(i, k, m, w);
+                  const k = () => d(i, w, m, k);
+                  m.addEventListener(a, k);
+                  const w = new MutationObserver(() => {
+                    t(i) && d(i, w, m, k);
                   });
-                  k.observe(i.parentNode, { childList: !0, subtree: !0 });
+                  w.observe(i.parentNode, { childList: !0, subtree: !0 });
                 }
               }
             }
@@ -389,29 +398,29 @@ const De = (() => {
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
 function $e(a, r, s) {
-  const t = T(a);
-  class e extends U {
+  const t = M(a);
+  class e extends j {
     constructor(n) {
       super(t, n, r, s);
     }
   }
-  return y(e, "def", t), e;
+  return A(e, "def", t), e;
 }
 const Ue = typeof HTMLElement < "u" ? De : class {
 };
-class U extends Ue {
+class j extends Ue {
   constructor(s, t = {}, e = {}, o) {
     super();
     /**
      * @internal
      */
-    y(this, "_instance", null);
-    y(this, "_connected", !1);
-    y(this, "_resolved", !1);
-    y(this, "_numberProps", null);
-    y(this, "_styles");
-    y(this, "_slots");
-    y(this, "_ob", null);
+    A(this, "_instance", null);
+    A(this, "_connected", !1);
+    A(this, "_resolved", !1);
+    A(this, "_numberProps", null);
+    A(this, "_styles");
+    A(this, "_slots");
+    A(this, "_ob", null);
     this._def = s, this._props = t, this._config = e, this._config = H(
       {
         shadowRoot: !0
@@ -454,12 +463,12 @@ class U extends Ue {
       const { props: n, styles: u } = e;
       let f;
       if (n && !K(n))
-        for (const d in n) {
-          const _ = n[d];
-          (_ === Number || _ && _.type === Number) && (d in this._props && (this._props[d] = q(this._props[d])), (f || (f = /* @__PURE__ */ Object.create(null)))[M(d)] = !0);
+        for (const p in n) {
+          const _ = n[p];
+          (_ === Number || _ && _.type === Number) && (p in this._props && (this._props[p] = q(this._props[p])), (f || (f = /* @__PURE__ */ Object.create(null)))[O(p)] = !0);
         }
       this._numberProps = f, o && this._resolveProps(e), this._config.shadowRoot || (this._slots = Array.from(this.children).map(
-        (d) => d.cloneNode(!0)
+        (p) => p.cloneNode(!0)
       ), this.replaceChildren()), this._applyStyles(u), this._update();
     }, t = this._def.__asyncLoader;
     t ? t().then((e) => s(e, !0)) : s(this._def);
@@ -468,7 +477,7 @@ class U extends Ue {
     const { props: t } = s, e = K(t) ? t : Object.keys(t || {});
     for (const o of Object.keys(this))
       o[0] !== "_" && e.includes(o) && this._setProp(o, this[o], !0, !1);
-    for (const o of e.map(M))
+    for (const o of e.map(O))
       Object.defineProperty(this, o, {
         get() {
           return this._getProp(o);
@@ -480,7 +489,7 @@ class U extends Ue {
   }
   _setAttr(s) {
     let t = this.getAttribute(s);
-    const e = M(s);
+    const e = O(s);
     this._numberProps && this._numberProps[e] && (t = q(t)), this._setProp(e, t, !1);
   }
   /**
@@ -493,7 +502,7 @@ class U extends Ue {
    * @internal
    */
   _setProp(s, t, e = !0, o = !0) {
-    t !== this._props[s] && (this._props[s] = t, o && this._instance && this._update(), e && (t === !0 ? this.setAttribute(x(s), "") : typeof t == "string" || typeof t == "number" ? this.setAttribute(x(s), t + "") : t || this.removeAttribute(x(s))));
+    t !== this._props[s] && (this._props[s] = t, o && this._instance && this._update(), e && (t === !0 ? this.setAttribute(L(s), "") : typeof t == "string" || typeof t == "number" ? this.setAttribute(L(s), t + "") : t || this.removeAttribute(L(s))));
   }
   _update() {
     F(this._createVNode(), this._root);
@@ -504,8 +513,8 @@ class U extends Ue {
       const e = (o) => {
         const n = {};
         for (let u = 0, f = o.length; u < f; u++) {
-          const d = o[u];
-          n[d.nodeName] = d.nodeValue;
+          const p = o[u];
+          n[p.nodeName] = p.nodeValue;
         }
         return n;
       };
@@ -525,11 +534,11 @@ class U extends Ue {
         );
       };
       e.emit = (u, ...f) => {
-        o(u, f), x(u) !== u && o(x(u), f);
+        o(u, f), L(u) !== u && o(L(u), f);
       };
       let n = this;
       for (; n = n && (n.parentNode || n.host); )
-        if (n instanceof U) {
+        if (n instanceof j) {
           e.parent = n._instance, e.provides = n._instance.provides;
           break;
         }