@momentum-ui/web-components 2.5.7 → 2.6.0

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/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);

package/src/mixins/DedupeMixin.test.ts

@@ -1,81 +0,0 @@
-import { defineCE, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { customElement, LitElement } from "lit-element";
-import { AnyConstructor, DedupeMixin, wasApplied } from "./DedupeMixin";
-
-describe("Dedupe Mixin", () => {
-  afterEach(fixtureCleanup);
-
-  @customElement("custom-element")
-  class CustomElement extends LitElement {
-    getMixinName() {
-      return "";
-    }
-  }
-
-  const MixinA = (base: AnyConstructor<CustomElement>) => {
-    if (wasApplied(MixinA, base)) {
-      return base;
-    }
-    class MixinAClass extends base {
-      getMixinName() {
-        const superName = super.getMixinName();
-        return `MixinA ${superName}`.trim();
-      }
-    }
-
-    DedupeMixin(MixinA, MixinAClass);
-
-    return MixinAClass;
-  };
-
-  const MixinB = (base: AnyConstructor<CustomElement>) => {
-    if (wasApplied(MixinB, base)) {
-      return base;
-    }
-    class MixinBClass extends base {
-      getMixinName() {
-        const superName = super.getMixinName();
-        return `MixinB ${superName}`.trim();
-      }
-    }
-
-    DedupeMixin(MixinB, MixinBClass);
-
-    return MixinBClass;
-  };
-
-  const MixinC = (base: AnyConstructor<CustomElement>) => {
-    class MixinCClass extends MixinB(MixinA(base)) {
-      getMixinName() {
-        const superName = super.getMixinName();
-        return `MixinC ${superName}`.trim();
-      }
-    }
-
-    return MixinCClass;
-  };
-  test("should applying to component", async () => {
-    const tag = defineCE(class extends MixinA(CustomElement) {});
-    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
-    expect(el.getMixinName()).toEqual("MixinA");
-  });
-
-  test("should dedupes mixins only explicitly", async () => {
-    const tag = defineCE(class extends MixinC(MixinC(MixinA(MixinA(CustomElement)))) {});
-    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
-    expect(el.getMixinName()).toEqual("MixinC MixinC MixinB MixinA");
-  });
-
-  test("should dedupes another mixins", async () => {
-    const tag = defineCE(class extends MixinA(MixinB(MixinC(CustomElement))) {});
-    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
-    expect(el.getMixinName()).toEqual("MixinC MixinB MixinA");
-  });
-
-  test("should dedupes another mixins applied on inherited base classes", async () => {
-    const BaseClass = class extends MixinB(MixinC(MixinA(CustomElement))) {};
-    const tag = defineCE(class extends BaseClass {});
-    const el = await fixture<CustomElement>(`<${tag}></${tag}>`);
-    expect(el.getMixinName()).toEqual("MixinC MixinB MixinA");
-  });
-});