@momentum-ui/web-components 2.16.5 → 2.16.8

package/src/internal-components/color-table/utils.ts

@@ -0,0 +1,552 @@
+import { html } from "lit-html";
+
+export const allColorTemplates = () => {
+  return html`
+    <template id="mdblue10">
+      <div part="mdblue10 color-box"></div>
+    </template>
+    <template id="mdblue20">
+      <div part="mdblue20 color-box"></div>
+    </template>
+    <template id="mdblue30">
+      <div part="mdblue30 color-box"></div>
+    </template>
+    <template id="mdblue40">
+      <div part="mdblue40 color-box"></div>
+    </template>
+    <template id="mdblue50">
+      <div part="mdblue50 color-box"></div>
+    </template>
+    <template id="mdblue60">
+      <div part="mdblue60 color-box"></div>
+    </template>
+    <template id="mdblue70">
+      <div part="mdblue70 color-box"></div>
+    </template>
+    <template id="mdblue80">
+      <div part="mdblue80 color-box"></div>
+    </template>
+    <template id="mdblue90">
+      <div part="mdblue90 color-box"></div>
+    </template>
+    <template id="mdblue95">
+      <div part="mdblue95 color-box"></div>
+    </template>
+    <template id="mdblue05">
+      <div part="mdblue05 color-box"></div>
+    </template>
+    <template id="mdred10">
+      <div part="mdred10 color-box"></div>
+    </template>
+    <template id="mdred20">
+      <div part="mdred20 color-box"></div>
+    </template>
+    <template id="mdred30">
+      <div part="mdred30 color-box"></div>
+    </template>
+    <template id="mdred40">
+      <div part="mdred40 color-box"></div>
+    </template>
+    <template id="mdred50">
+      <div part="mdred50 color-box"></div>
+    </template>
+    <template id="mdred60">
+      <div part="mdred60 color-box"></div>
+    </template>
+    <template id="mdred70">
+      <div part="mdred70 color-box"></div>
+    </template>
+    <template id="mdred80">
+      <div part="mdred80 color-box"></div>
+    </template>
+    <template id="mdred90">
+      <div part="mdred90 color-box"></div>
+    </template>
+    <template id="mdred95">
+      <div part="mdred95 color-box"></div>
+    </template>
+    <template id="mdred05">
+      <div part="mdred05 color-box"></div>
+    </template>
+    <template id="mdyellow10">
+      <div part="mdyellow10 color-box"></div>
+    </template>
+    <template id="mdyellow20">
+      <div part="mdyellow20 color-box"></div>
+    </template>
+    <template id="mdyellow30">
+      <div part="mdyellow30 color-box"></div>
+    </template>
+    <template id="mdyellow40">
+      <div part="mdyellow40 color-box"></div>
+    </template>
+    <template id="mdyellow50">
+      <div part="mdyellow50 color-box"></div>
+    </template>
+    <template id="mdyellow60">
+      <div part="mdyellow60 color-box"></div>
+    </template>
+    <template id="mdyellow70">
+      <div part="mdyellow70 color-box"></div>
+    </template>
+    <template id="mdyellow80">
+      <div part="mdyellow80 color-box"></div>
+    </template>
+    <template id="mdyellow90">
+      <div part="mdyellow90 color-box"></div>
+    </template>
+    <template id="mdyellow95">
+      <div part="mdyellow95 color-box"></div>
+    </template>
+    <template id="mdyellow05">
+      <div part="mdyellow05 color-box"></div>
+    </template>
+    <template id="mdgreen10">
+      <div part="mdgreen10 color-box"></div>
+    </template>
+    <template id="mdgreen20">
+      <div part="mdgreen20 color-box"></div>
+    </template>
+    <template id="mdgreen30">
+      <div part="mdgreen30 color-box"></div>
+    </template>
+    <template id="mdgreen40">
+      <div part="mdgreen40 color-box"></div>
+    </template>
+    <template id="mdgreen50">
+      <div part="mdgreen50 color-box"></div>
+    </template>
+    <template id="mdgreen60">
+      <div part="mdgreen60 color-box"></div>
+    </template>
+    <template id="mdgreen70">
+      <div part="mdgreen70 color-box"></div>
+    </template>
+    <template id="mdgreen80">
+      <div part="mdgreen80 color-box"></div>
+    </template>
+    <template id="mdgreen90">
+      <div part="mdgreen90 color-box"></div>
+    </template>
+    <template id="mdgreen95">
+      <div part="mdgreen95 color-box"></div>
+    </template>
+    <template id="mdgreen05">
+      <div part="mdgreen05 color-box"></div>
+    </template>
+    <template id="mdgray10">
+      <div part="mdgray10 color-box"></div>
+    </template>
+    <template id="mdgray20">
+      <div part="mdgray20 color-box"></div>
+    </template>
+    <template id="mdgray30">
+      <div part="mdgray30 color-box"></div>
+    </template>
+    <template id="mdgray40">
+      <div part="mdgray40 color-box"></div>
+    </template>
+    <template id="mdgray50">
+      <div part="mdgray50 color-box"></div>
+    </template>
+    <template id="mdgray60">
+      <div part="mdgray60 color-box"></div>
+    </template>
+    <template id="mdgray70">
+      <div part="mdgray70 color-box"></div>
+    </template>
+    <template id="mdgray80">
+      <div part="mdgray80 color-box"></div>
+    </template>
+    <template id="mdgray90">
+      <div part="mdgray90 color-box"></div>
+    </template>
+    <template id="mdgray95">
+      <div part="mdgray95 color-box"></div>
+    </template>
+    <template id="mdgray100">
+      <div part="mdgray100 color-box"></div>
+    </template>
+    <template id="mdgray05">
+      <div part="mdgray05 color-box"></div>
+    </template>
+    <template id="mdwhite60">
+      <div part="mdwhite60 color-box"></div>
+    </template>
+    <template id="mdwhite100">
+      <div part="mdwhite100 color-box"></div>
+    </template>
+    <template id="mdwhite">
+      <div part="mdwhite color-box"></div>
+    </template>
+    <template id="mdblack100">
+      <div part="mdblack100 color-box"></div>
+    </template>
+    <template id="mdblack">
+      <div part="mdblack color-box"></div>
+    </template>
+    <template id="mdorange10">
+      <div part="mdorange10 color-box"></div>
+    </template>
+    <template id="mdorange20">
+      <div part="mdorange20 color-box"></div>
+    </template>
+    <template id="mdorange30">
+      <div part="mdorange30 color-box"></div>
+    </template>
+    <template id="mdorange40">
+      <div part="mdorange40 color-box"></div>
+    </template>
+    <template id="mdorange50">
+      <div part="mdorange50 color-box"></div>
+    </template>
+    <template id="mdorange60">
+      <div part="mdorange60 color-box"></div>
+    </template>
+    <template id="mdorange70">
+      <div part="mdorange70 color-box"></div>
+    </template>
+    <template id="mdorange80">
+      <div part="mdorange80 color-box"></div>
+    </template>
+    <template id="mdorange90">
+      <div part="mdorange90 color-box"></div>
+    </template>
+    <template id="mdorange100">
+      <div part="mdorange100 color-box"></div>
+    </template>
+    <template id="mdgold10">
+      <div part="mdgold10 color-box"></div>
+    </template>
+    <template id="mdgold20">
+      <div part="mdgold20 color-box"></div>
+    </template>
+    <template id="mdgold30">
+      <div part="mdgold30 color-box"></div>
+    </template>
+    <template id="mdgold40">
+      <div part="mdgold40 color-box"></div>
+    </template>
+    <template id="mdgold50">
+      <div part="mdgold50 color-box"></div>
+    </template>
+    <template id="mdgold60">
+      <div part="mdgold60 color-box"></div>
+    </template>
+    <template id="mdgold70">
+      <div part="mdgold70 color-box"></div>
+    </template>
+    <template id="mdgold80">
+      <div part="mdgold80 color-box"></div>
+    </template>
+    <template id="mdgold90">
+      <div part="mdgold90 color-box"></div>
+    </template>
+    <template id="mdgold100">
+      <div part="mdgold100 color-box"></div>
+    </template>
+    <template id="mdolive10">
+      <div part="mdolive10 color-box"></div>
+    </template>
+    <template id="mdolive20">
+      <div part="mdolive20 color-box"></div>
+    </template>
+    <template id="mdolive30">
+      <div part="mdolive30 color-box"></div>
+    </template>
+    <template id="mdolive40">
+      <div part="mdolive40 color-box"></div>
+    </template>
+    <template id="mdolive50">
+      <div part="mdolive50 color-box"></div>
+    </template>
+    <template id="mdolive60">
+      <div part="mdolive60 color-box"></div>
+    </template>
+    <template id="mdolive70">
+      <div part="mdolive70 color-box"></div>
+    </template>
+    <template id="mdolive80">
+      <div part="mdolive80 color-box"></div>
+    </template>
+    <template id="mdolive90">
+      <div part="mdolive90 color-box"></div>
+    </template>
+    <template id="mdolive100">
+      <div part="mdolive100 color-box"></div>
+    </template>
+    <template id="mdlime10">
+      <div part="mdlime10 color-box"></div>
+    </template>
+    <template id="mdlime20">
+      <div part="mdlime20 color-box"></div>
+    </template>
+    <template id="mdlime30">
+      <div part="mdlime30 color-box"></div>
+    </template>
+    <template id="mdlime40">
+      <div part="mdlime40 color-box"></div>
+    </template>
+    <template id="mdlime50">
+      <div part="mdlime50 color-box"></div>
+    </template>
+    <template id="mdlime60">
+      <div part="mdlime60 color-box"></div>
+    </template>
+    <template id="mdlime70">
+      <div part="mdlime70 color-box"></div>
+    </template>
+    <template id="mdlime80">
+      <div part="mdlime80 color-box"></div>
+    </template>
+    <template id="mdlime90">
+      <div part="mdlime90 color-box"></div>
+    </template>
+    <template id="mdlime100">
+      <div part="mdlime100 color-box"></div>
+    </template>
+    <template id="mdmint10">
+      <div part="mdmint10 color-box"></div>
+    </template>
+    <template id="mdmint20">
+      <div part="mdmint20 color-box"></div>
+    </template>
+    <template id="mdmint30">
+      <div part="mdmint30 color-box"></div>
+    </template>
+    <template id="mdmint40">
+      <div part="mdmint40 color-box"></div>
+    </template>
+    <template id="mdmint50">
+      <div part="mdmint50 color-box"></div>
+    </template>
+    <template id="mdmint60">
+      <div part="mdmint60 color-box"></div>
+    </template>
+    <template id="mdmint70">
+      <div part="mdmint70 color-box"></div>
+    </template>
+    <template id="mdmint80">
+      <div part="mdmint80 color-box"></div>
+    </template>
+    <template id="mdmint90">
+      <div part="mdmint90 color-box"></div>
+    </template>
+    <template id="mdmint100">
+      <div part="mdmint100 color-box"></div>
+    </template>
+    <template id="mdcyan10">
+      <div part="mdcyan10 color-box"></div>
+    </template>
+    <template id="mdcyan20">
+      <div part="mdcyan20 color-box"></div>
+    </template>
+    <template id="mdcyan30">
+      <div part="mdcyan30 color-box"></div>
+    </template>
+    <template id="mdcyan40">
+      <div part="mdcyan40 color-box"></div>
+    </template>
+    <template id="mdcyan50">
+      <div part="mdcyan50 color-box"></div>
+    </template>
+    <template id="mdcyan60">
+      <div part="mdcyan60 color-box"></div>
+    </template>
+    <template id="mdcyan70">
+      <div part="mdcyan70 color-box"></div>
+    </template>
+    <template id="mdcyan80">
+      <div part="mdcyan80 color-box"></div>
+    </template>
+    <template id="mdcyan90">
+      <div part="mdcyan90 color-box"></div>
+    </template>
+    <template id="mdcyan100">
+      <div part="mdcyan100 color-box"></div>
+    </template>
+    <template id="mdcobalt10">
+      <div part="mdcobalt10 color-box"></div>
+    </template>
+    <template id="mdcobalt20">
+      <div part="mdcobalt20 color-box"></div>
+    </template>
+    <template id="mdcobalt30">
+      <div part="mdcobalt30 color-box"></div>
+    </template>
+    <template id="mdcobalt40">
+      <div part="mdcobalt40 color-box"></div>
+    </template>
+    <template id="mdcobalt50">
+      <div part="mdcobalt50 color-box"></div>
+    </template>
+    <template id="mdcobalt60">
+      <div part="mdcobalt60 color-box"></div>
+    </template>
+    <template id="mdcobalt70">
+      <div part="mdcobalt70 color-box"></div>
+    </template>
+    <template id="mdcobalt80">
+      <div part="mdcobalt80 color-box"></div>
+    </template>
+    <template id="mdcobalt90">
+      <div part="mdcobalt90 color-box"></div>
+    </template>
+    <template id="mdcobalt100">
+      <div part="mdcobalt100 color-box"></div>
+    </template>
+    <template id="mdslate10">
+      <div part="mdslate10 color-box"></div>
+    </template>
+    <template id="mdslate20">
+      <div part="mdslate20 color-box"></div>
+    </template>
+    <template id="mdslate30">
+      <div part="mdslate30 color-box"></div>
+    </template>
+    <template id="mdslate40">
+      <div part="mdslate40 color-box"></div>
+    </template>
+    <template id="mdslate50">
+      <div part="mdslate50 color-box"></div>
+    </template>
+    <template id="mdslate60">
+      <div part="mdslate60 color-box"></div>
+    </template>
+    <template id="mdslate70">
+      <div part="mdslate70 color-box"></div>
+    </template>
+    <template id="mdslate80">
+      <div part="mdslate80 color-box"></div>
+    </template>
+    <template id="mdslate90">
+      <div part="mdslate90 color-box"></div>
+    </template>
+    <template id="mdslate100">
+      <div part="mdslate100 color-box"></div>
+    </template>
+    <template id="mdviolet10">
+      <div part="mdviolet10 color-box"></div>
+    </template>
+    <template id="mdviolet20">
+      <div part="mdviolet20 color-box"></div>
+    </template>
+    <template id="mdviolet30">
+      <div part="mdviolet30 color-box"></div>
+    </template>
+    <template id="mdviolet40">
+      <div part="mdviolet40 color-box"></div>
+    </template>
+    <template id="mdviolet50">
+      <div part="mdviolet50 color-box"></div>
+    </template>
+    <template id="mdviolet60">
+      <div part="mdviolet60 color-box"></div>
+    </template>
+    <template id="mdviolet70">
+      <div part="mdviolet70 color-box"></div>
+    </template>
+    <template id="mdviolet80">
+      <div part="mdviolet80 color-box"></div>
+    </template>
+    <template id="mdviolet90">
+      <div part="mdviolet90 color-box"></div>
+    </template>
+    <template id="mdviolet100">
+      <div part="mdviolet100 color-box"></div>
+    </template>
+    <template id="mdpurple10">
+      <div part="mdpurple10 color-box"></div>
+    </template>
+    <template id="mdpurple20">
+      <div part="mdpurple20 color-box"></div>
+    </template>
+    <template id="mdpurple30">
+      <div part="mdpurple30 color-box"></div>
+    </template>
+    <template id="mdpurple40">
+      <div part="mdpurple40 color-box"></div>
+    </template>
+    <template id="mdpurple50">
+      <div part="mdpurple50 color-box"></div>
+    </template>
+    <template id="mdpurple60">
+      <div part="mdpurple60 color-box"></div>
+    </template>
+    <template id="mdpurple70">
+      <div part="mdpurple70 color-box"></div>
+    </template>
+    <template id="mdpurple80">
+      <div part="mdpurple80 color-box"></div>
+    </template>
+    <template id="mdpurple90">
+      <div part="mdpurple90 color-box"></div>
+    </template>
+    <template id="mdpurple100">
+      <div part="mdpurple100 color-box"></div>
+    </template>
+    <template id="mdpink10">
+      <div part="mdpink10 color-box"></div>
+    </template>
+    <template id="mdpink20">
+      <div part="mdpink20 color-box"></div>
+    </template>
+    <template id="mdpink30">
+      <div part="mdpink30 color-box"></div>
+    </template>
+    <template id="mdpink40">
+      <div part="mdpink40 color-box"></div>
+    </template>
+    <template id="mdpink50">
+      <div part="mdpink50 color-box"></div>
+    </template>
+    <template id="mdpink60">
+      <div part="mdpink60 color-box"></div>
+    </template>
+    <template id="mdpink70">
+      <div part="mdpink70 color-box"></div>
+    </template>
+    <template id="mdpink80">
+      <div part="mdpink80 color-box"></div>
+    </template>
+    <template id="mdpink90">
+      <div part="mdpink90 color-box"></div>
+    </template>
+    <template id="mdpink100">
+      <div part="mdpink100 color-box"></div>
+    </template>
+    <template id="mdtheme10">
+      <div part="mdtheme10 color-box"></div>
+    </template>
+    <template id="mdtheme20">
+      <div part="mdtheme20 color-box"></div>
+    </template>
+    <template id="mdtheme30">
+      <div part="mdtheme30 color-box"></div>
+    </template>
+    <template id="mdtheme40">
+      <div part="mdtheme40 color-box"></div>
+    </template>
+    <template id="mdtheme50">
+      <div part="mdtheme50 color-box"></div>
+    </template>
+    <template id="mdtheme60">
+      <div part="mdtheme60 color-box"></div>
+    </template>
+    <template id="mdtheme70">
+      <div part="mdtheme70 color-box"></div>
+    </template>
+    <template id="mdtheme80">
+      <div part="mdtheme80 color-box"></div>
+    </template>
+    <template id="mdtheme90">
+      <div part="mdtheme90 color-box"></div>
+    </template>
+    <template id="mdtheme95">
+      <div part="mdtheme95 color-box"></div>
+    </template>
+    <template id="mdtheme05">
+      <div part="mdtheme05 color-box"></div>
+    </template>
+  `;
+};

package/src/managers/ThemeManager.ts

@@ -0,0 +1,91 @@
+import { ThemeName } from "@/components/theme/Theme";
+import { action, computed, observable } from "mobx";
+
+/**
+ * ThemeManager is a class that manages the global theme state.
+ * It provides observable properties that can be observed by other classes
+ * to set properties on their components, such as whether dark mode is enabled.
+ */
+class ThemeManager {
+  /**
+   * Observable property to indicate if dark mode is enabled
+   * Is needed by components styled outside of the web components
+   */
+  @observable
+  isDarkMode = false;
+
+  /**
+   * Observable property to store the current theme name
+   */
+  @observable
+  themeName: ThemeName = "lumos";
+
+  /**
+   * Observable property to indicate if visual rebrand is enabled
+   * Will be used to allow users to toggle to updated visuals
+   */
+  @observable
+  isVisualRebrandEnabled = false;
+
+  /**
+   * Observable property to indicate if Momentum Avatar is enabled
+   * Should be used to set the new momentum style on avatars and sue
+   * correct momentum presence states
+   */
+  @observable
+  isMomentumAvatarEnabled = false;
+
+  constructor(other?: Partial<ThemeManager>) {
+    if (other) {
+      this.update(other);
+    }
+  }
+
+  @action
+  update(other: Partial<ThemeManager>) {
+    if (other.isDarkMode !== undefined) {
+      this.isDarkMode = other.isDarkMode;
+    }
+    if (other.themeName !== undefined) {
+      this.themeName = other.themeName;
+    }
+    if (other.isVisualRebrandEnabled !== undefined) {
+      this.isVisualRebrandEnabled = other.isVisualRebrandEnabled;
+    }
+    if (other.isMomentumAvatarEnabled !== undefined) {
+      this.isMomentumAvatarEnabled = other.isMomentumAvatarEnabled;
+    }
+  }
+
+  @action
+  setDarkMode(value: boolean) {
+    this.isDarkMode = value;
+  }
+
+  @action
+  setThemeName(value: ThemeName) {
+    this.themeName = value;
+  }
+
+  @action
+  setVisualRebrandEnabled(value: boolean) {
+    this.isVisualRebrandEnabled = value;
+  }
+
+  @action
+  setMomentumAvatar(value: boolean) {
+    this.isMomentumAvatarEnabled = value;
+  }
+
+  /**
+   * Computed property to check if the current theme is Momentum V2.
+   * @returns {boolean} True if the current theme is Momentum V2, otherwise false
+   */
+  @computed
+  get isMomentumV2Enabled() {
+    return this.themeName === "momentumV2";
+  }
+}
+
+const themeManager = new ThemeManager();
+export { themeManager, ThemeManager };

package/src/mixins/CustomElementCheck.ts

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const standardCustomElement = (tagName: string, descriptor: any) => {
+  const { kind, elements } = descriptor;
+  return {
+    kind,
+    elements,
+    finisher(clazz: any) {
+      if (!window.customElements.get(tagName)) {
+        window.customElements.define(tagName, clazz);
+      }
+    }
+  };
+};
+
+const legacyCustomElement = (tagName: string, clazz: any) => {
+  if (!window.customElements.get(tagName)) {
+    window.customElements.define(tagName, clazz);
+  }
+  return clazz as any;
+};
+
+export const customElementWithCheck = (tagName: string) => (classOrDescriptor: any) =>
+  typeof classOrDescriptor === "function"
+    ? legacyCustomElement(tagName, classOrDescriptor)
+    : standardCustomElement(tagName, classOrDescriptor);