@momentum-ui/web-components 2.16.8 → 2.16.9

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

@@ -1,552 +0,0 @@
-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

@@ -1,91 +0,0 @@
-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

@@ -1,25 +0,0 @@
-/* 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);