Moser Labs Custom Elements

This package contains a collection of custom elements that can be used in any web application.

Installation

npm i @moser-inc/moser-labs-custom-elements

Usage

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.

import Keycloak from 'keycloak-js';
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;

  registerCustomElements({ keycloak });
});

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.

registerCustomElements({ keycloak, apiUri: import.meta.env.VITE_API_URI });

External

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.

import { registerCustomElements } from '@moser-inc/moser-labs-custom-elements/external';