@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/taskitem/tokens/md-taskitem-tokens.js

@@ -1,72 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const task_item = {
-  prefix: "md",
-  component: "taskitem",
-  "text-color": {
-    light: colors.gray[100].name,
-    dark: colors.gray[10].name
-  },
-  "hover-bg-color": {
-    light: colors.blue[10].name,
-    dark: colors.blue[90].name
-  },
-  "pressed-bg-color": {
-    light: colors.blue[20].name,
-    dark: colors.blue[80].name
-  },
-  "focus-bg-color": {
-    light: "transparent",
-    dark: "transparent"
-  },
-  "focus-border-color": {
-    light: colors.theme[50].name,
-    dark: colors.theme[50].name
-  },
-  status: {
-    "bg-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[90].name
-    },
-    "text-color": {
-      light: colors.gray[90].name,
-      dark: colors.gray[20].name
-    },
-    pause: {
-      "bg-color": {
-        light: colors.yellow[30].name,
-        dark: colors.yellow[70].name
-      }
-    }
-  },
-  selected: {
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray[10].name
-    }
-  },
-  chat: {
-    "text-color": {
-      light: colors.gray[80].name,
-      dark: colors.gray[50].name
-    },
-    "quantity-bg-color": {
-      light: colors.cobalt[30].name,
-      dark: colors.cobalt[70].name
-    },
-    "quantity-text-color": {
-      light: colors.cobalt[80].name,
-      dark: colors.cobalt[20].name
-    }
-  },
-  timer: {
-    "text-color": {
-      light: colors.green[70].name,
-      dark: colors.green[50].name
-    }
-  }
-};
-
-module.exports = task_item;

package/src/components/taskitem/tokens/mdv2-taskitem-tokens.js

@@ -1,58 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-
-const task_item = {
-  prefix: "mdv2",
-  component: "taskitem",
-  "text-color": {
-    common: "$mds-color-theme-text-secondary-normal"
-  },
-  "hover-bg-color": {
-    common: "$mds-color-theme-background-primary-hover"
-  },
-  "pressed-bg-color": {
-    common: "$mds-color-theme-background-primary-active"
-  },
-  "focus-bg-color": {
-    common: "$mds-color-theme-background-primary-ghost"
-  },
-  "focus-border-color": {
-    common: "$mds-color-theme-outline-theme-normal"
-  },
-  status: {
-    "bg-color": {
-      common: "$mds-color-theme-background-solid-secondary-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-secondary-normal"
-    },
-    pause: {
-      "bg-color": {
-        common: "$mds-color-theme-background-alert-warning-normal"
-      }
-    }
-  },
-  selected: {
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  },
-  chat: {
-    "text-color": {
-      common: "$mds-color-theme-text-secondary-normal"
-    },
-    "quantity-bg-color": {
-      common: "$mds-color-theme-background-accent-normal"
-    },
-    "quantity-text-color": {
-      common: "$mds-color-theme-common-text-primary-normal"
-    }
-  },
-  timer: {
-    "text-color": {
-      common: "$mds-color-theme-text-success-normal"
-    }
-  }
-};
-
-module.exports = task_item;

package/src/components/theme/README.md

@@ -1,13 +0,0 @@
-# Theme Toggle wrapper component
-
-This component serves to control the applied CSS Variables that effect which visual theme is applied to all child components. 
-
-To use, wrap the content you want to be theme-changeable with `<md-theme>` tags. Then use whatever method you prefer to control the presence or absence of the component's boolean theme values, `darkTheme` and `lumos`.
-
-`<md-theme>` will by default apply color tokens for Momentum Light. 
-
-Adding `lumos` will activate Lumos color theme.
-
-Adding `darkTheme` will toggle colors to the dark theme hues for whichever color system is currently active.
-
-To make edits to the colors used in any theme, access the `tokens` settings files found in the individual components' directories.

package/src/components/theme/Theme.test.ts

@@ -1,88 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { Theme } from "./Theme";
-
-describe("Theme", () => {
-  afterEach(fixtureCleanup);
-
-  test("should render Theme Component", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme></md-theme>`);
-    expect(element).not.toBeNull();
-  });
-
-  test("should return theme from setTheme() function", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme darktheme></md-theme>`);
-    expect(element.darkTheme).toBeTruthy;
-  });
-
-  test("should return lumos from setTheme() function", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme lumos></md-theme>`);
-    expect(element.lumos).toBeTruthy;
-  });
-
-  test("should return lumos in darkTheme from setTheme() function", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme lumos darkTheme></md-theme>`);
-    expect(element.lumos).toBeTruthy;
-    expect(element.darkTheme).toBeTruthy;
-  });
-
-  test("should update when attribute is changed", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme darkTheme></md-theme>`);
-
-    const changeSpy = jest.spyOn(Theme.ELEMENT.prototype, "applyStyle" as never);
-
-    element.lumos = true;
-
-    await elementUpdated(element);
-    expect(changeSpy).toHaveBeenCalled();
-
-    changeSpy.mockRestore();
-  });
-
-  test("setTheme by name should update theme when attribute is changed", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme darkTheme></md-theme>`);
-
-    const changeSpy = jest.spyOn(Theme.ELEMENT.prototype, "applyStyle" as never);
-
-    element.theme = "momentumV2";
-
-    await elementUpdated(element);
-    expect(changeSpy).toHaveBeenCalled();
-    changeSpy.mockReset();
-
-    element.darkTheme = false;
-
-    await elementUpdated(element);
-    expect(changeSpy).toHaveBeenCalled();
-    changeSpy.mockReset();
-
-    element.theme = "momentum";
-
-    await elementUpdated(element);
-    expect(changeSpy).toHaveBeenCalled();
-    changeSpy.mockReset();
-
-    element.theme = "lumos";
-
-    await elementUpdated(element);
-    expect(changeSpy).toHaveBeenCalled();
-    changeSpy.mockRestore();
-  });
-
-  test("should return momentumV2 in darkTheme from setTheme() function", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme darkTheme theme="momentumV2"></md-theme>`);
-    expect(element.theme).toBe("momentumV2");
-    expect(element.darkTheme).toBeTruthy;
-  });
-
-  test("should return lumos from setTheme() function", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme theme="lumos"></md-theme>`);
-    expect(element.theme).toBe("lumos");
-    expect(element.darkTheme).toBeFalsy;
-  });
-
-  test("should return momentum from setTheme() function", async () => {
-    const element = await fixture<Theme.ELEMENT>(`<md-theme theme="momentum"></md-theme>`);
-    expect(element.theme).toBe("momentum");
-    expect(element.darkTheme).toBeFalsy;
-  });
-});

package/src/components/theme/Theme.ts

@@ -1,377 +0,0 @@
-/**
- * Copyright (c) Cisco Systems, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-import styles from "@/components/tooltip/scss/module.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { arrow, createPopper, flip, Instance, offset } from "@popperjs/core/lib";
-import { defaultModifiers } from "@popperjs/core/lib/popper-lite";
-import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
-import { Tooltip, TooltipEvent } from "../tooltip/Tooltip"; // Keep type import as a relative path
-import { lumosDark, lumosLight, momentumDark, momentumLight, momentumV2Dark, momentumV2Light } from "./index";
-
-declare global {
-  interface Window {
-    ShadyCSS: {
-      nativeShadow: boolean;
-      prepareTemplate(template: HTMLTemplateElement, elementName: string, typeExtension?: string): void;
-      styleElement(host: HTMLElement): void;
-      ScopingShim: {
-        prepareAdoptedCssText(cssTextArray: string[], elementName: string): void;
-      };
-    };
-  }
-  interface ShadowRoot {
-    adoptedStyleSheets?: ThemeStyleSheet[];
-  }
-
-  interface ThemeStyleSheet {
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    replaceSync: Function;
-  }
-}
-
-export type ThemeName = "momentum" | "lumos" | "momentumV2" | "";
-export const ThemeNameValues: ThemeName[] = ["momentum", "lumos", "momentumV2", ""];
-
-export namespace Theme {
-  export type Attributes = {
-    darkTheme: boolean;
-    mdTheme: boolean;
-  };
-
-  /**
-   * Popper.js can't position overlay content correct in
-   * case when element inside container with overflow: hidden.
-   * https://github.com/popperjs/popper-core/issues/112.
-   * To make possible to position such element correctly, we need
-   * move creating popper instance in parent container that guarantee
-   * will not contain overflow property with hidden value;
-   */
-
-  @customElementWithCheck("md-theme")
-  export class ELEMENT extends LitElement {
-    @property({ type: Boolean }) darkTheme = false;
-    @property({ type: Boolean }) lumos = false;
-    @property({ type: String }) theme: ThemeName = "";
-
-    @internalProperty() private activeTheme = momentumLight;
-
-    @query("[data-virtual-global-popper]") virtualWrapper!: HTMLDivElement;
-    @query("[data-virtual-global-reference]") virtualReference!: HTMLDivElement;
-
-    private placement: Tooltip.Placement = "bottom";
-    private popperInstance: Instance | null = null;
-    private eventListeners: {
-      mouseEnter?: (event: MouseEvent) => void;
-      mouseLeave?: (event: MouseEvent) => void;
-    } = {};
-    private currentPopperClone: HTMLElement | null = null;
-
-    private setTheme() {
-      //If the theme property is set, prefer using that theme over the lumos property
-      if (this.theme === "momentum") {
-        return this.darkTheme ? momentumDark : momentumLight;
-      } else if (this.theme === "lumos") {
-        return this.darkTheme ? lumosDark : lumosLight;
-      } else if (this.theme === "momentumV2") {
-        return this.darkTheme ? momentumV2Dark : momentumV2Light;
-      }
-      if (this.lumos) {
-        return this.darkTheme ? lumosDark : lumosLight;
-      } else {
-        return this.darkTheme ? momentumDark : momentumLight;
-      }
-    }
-
-    public getStyleElement() {
-      return document.createElement("style");
-    }
-
-    public applyStyle() {
-      const shadow = this.shadowRoot as ShadowRoot;
-      /* c8 ignore next 4 */
-      if ("adoptedStyleSheets" in document) {
-        const newTheme: ThemeStyleSheet = new CSSStyleSheet();
-        newTheme.replaceSync(this.activeTheme);
-        shadow.adoptedStyleSheets = [newTheme];
-      } else {
-        const styleNode: HTMLStyleElement = this.getStyleElement();
-        styleNode.textContent = this.activeTheme.cssText;
-        shadow.appendChild(styleNode);
-      }
-    }
-
-    private removeChildFromVirtualPopper() {
-      while (this.virtualWrapper.firstElementChild) {
-        this.virtualWrapper.firstElementChild.remove();
-      }
-    }
-
-    private setInitStyleToVirtualReference() {
-      const { style } = this.virtualReference;
-
-      style.top = "0";
-      style.bottom = "0";
-      style.left = "0";
-      style.right = "0";
-      style.width = "0";
-      style.height = "0";
-      style.zIndex = "-1";
-    }
-
-    private setStyleToVirtualReference(triggerRect: DOMRect) {
-      const { style } = this.virtualReference;
-      const { top, bottom, left, right, width, height } = triggerRect;
-
-      style.position = "fixed";
-      style.top = `${top}px`;
-      style.bottom = `${bottom}px`;
-      style.left = `${left}px`;
-      style.right = `${right}px`;
-      style.width = `${width}px`;
-      style.height = `${height}px`;
-      style.zIndex = "-1";
-    }
-
-    private setVirtualReferencePosition(trigger: HTMLElement) {
-      const triggerRect = trigger.getBoundingClientRect();
-
-      this.setStyleToVirtualReference(triggerRect);
-    }
-
-    private initVirtualElements(
-      popper: HTMLElement,
-      reference: HTMLElement,
-      slotContent: Element[] | null | undefined
-    ) {
-      const popperClone = popper.cloneNode(true) as HTMLDivElement;
-      const popperShadowRoot = (popper.getRootNode() as ShadowRoot).host;
-
-      this.eventListeners.mouseEnter = () => popperShadowRoot.toggleAttribute("opened", true);
-      this.eventListeners.mouseLeave = () => popperShadowRoot.toggleAttribute("opened", false);
-      popperClone.addEventListener("mouseenter", this.eventListeners.mouseEnter);
-      popperClone.addEventListener("mouseleave", this.eventListeners.mouseLeave);
-      this.currentPopperClone = popperClone;
-
-      if (this.virtualWrapper.hasChildNodes()) {
-        this.removeChildFromVirtualPopper();
-      }
-
-      this.virtualWrapper.append(popperClone);
-
-      if (slotContent) {
-        this.setVirtualSlotContent(slotContent);
-      }
-
-      this.setVirtualReferencePosition(reference);
-    }
-
-    private setVirtualSlotContent(slotContent: Element[]) {
-      if (this.virtualTooltipContent) {
-        while (this.virtualTooltipContent.firstElementChild) {
-          this.virtualTooltipContent.firstElementChild.remove();
-        }
-
-        slotContent.forEach((element) => this.virtualTooltipContent!.append(element));
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("lumos") || changedProperties.has("darkTheme") || changedProperties.has("theme")) {
-        this.dispatchEvent(
-          new CustomEvent("theme-changed", {
-            composed: true,
-            bubbles: true,
-            detail: {
-              darkTheme: this.darkTheme,
-              lumos: this.lumos,
-              theme: this.theme
-            }
-          })
-        );
-      }
-      this.activeTheme = this.setTheme();
-      this.applyStyle();
-    }
-
-    handleVirtualTooltipCreate(event: CustomEvent<TooltipEvent>) {
-      event.stopPropagation();
-
-      const { popper, placement, reference, slotContent } = event.detail;
-
-      this.placement = placement;
-      this.initVirtualElements(popper, reference, slotContent);
-      this.showVirtualTooltip();
-    }
-
-    handleVirtualTooltipDestroy(event: CustomEvent<TooltipEvent>) {
-      event.stopPropagation();
-      this.hideVirtualTooltip();
-    }
-
-    handleVirtualTooltipChangeMessage(event: CustomEvent<TooltipEvent>) {
-      const { popper } = event.detail;
-
-      const content = popper.querySelector(".md-tooltip__content");
-      const virtualContent = this.virtualWrapper.querySelector(".md-tooltip__content");
-
-      if (content && virtualContent) {
-        const message = content.textContent;
-        const virtualMessage = virtualContent.textContent;
-        if (message && virtualMessage) {
-          virtualContent.textContent = message;
-        }
-      }
-    }
-
-    handleVirtualTooltipSlotChange(event: CustomEvent<TooltipEvent>) {
-      const { slotContent } = event.detail;
-
-      if (slotContent) {
-        this.setVirtualSlotContent(slotContent);
-      }
-    }
-
-    handleTooltipRemoved = () => {
-      this.hideVirtualTooltip();
-    };
-
-    private destroyPopperInstance() {
-      if (this.popperInstance) {
-        this.popperInstance.destroy();
-        this.popperInstance = null;
-      }
-    }
-
-    private createPopperInstance(placement: Tooltip.Placement) {
-      if (this.virtualPopper) {
-        this.popperInstance = createPopper(this.virtualReference, this.virtualPopper, {
-          placement,
-          modifiers: [
-            ...defaultModifiers,
-            flip,
-            offset,
-            arrow,
-            {
-              name: "offset",
-              options: {
-                offset: [8, 8]
-              }
-            },
-            ...(this.virtualArrow
-              ? [
-                  {
-                    name: "arrow",
-                    options: {
-                      element: this.virtualArrow,
-                      padding: 5
-                    }
-                  }
-                ]
-              : [])
-          ]
-        });
-      }
-    }
-
-    private get virtualPopper() {
-      return this.shadowRoot!.querySelector(".md-tooltip__popper") as HTMLElement;
-    }
-
-    private get virtualArrow() {
-      return this.shadowRoot!.querySelector(".md-tooltip__arrow") as HTMLElement;
-    }
-
-    private get virtualTooltipContent() {
-      return this.shadowRoot!.querySelector(".md-tooltip__content");
-    }
-
-    private showVirtualTooltip() {
-      if (this.virtualPopper) {
-        this.virtualPopper.toggleAttribute("data-show", true);
-        this.createPopperInstance(this.placement);
-      }
-    }
-
-    private hideVirtualTooltip() {
-      if (this.virtualPopper) {
-        this.virtualPopper.toggleAttribute("data-show", false);
-        this.destroyPopperInstance();
-        this.setInitStyleToVirtualReference();
-      }
-    }
-
-    private setupEvents() {
-      this.addEventListener("tooltip-create", this.handleVirtualTooltipCreate as EventListener);
-      this.addEventListener("tooltip-destroy", this.handleVirtualTooltipDestroy as EventListener);
-      this.addEventListener("tooltip-message", this.handleVirtualTooltipChangeMessage as EventListener);
-      this.addEventListener("tooltip-slot", this.handleVirtualTooltipSlotChange as EventListener);
-
-      document.addEventListener("tooltip-disconnected", this.handleTooltipRemoved as EventListener, true);
-    }
-
-    private teardownEvents() {
-      this.removeEventListener("tooltip-create", this.handleVirtualTooltipCreate as EventListener);
-      this.removeEventListener("tooltip-destroy", this.handleVirtualTooltipDestroy as EventListener);
-      this.removeEventListener("tooltip-message", this.handleVirtualTooltipChangeMessage as EventListener);
-      this.removeEventListener("tooltip-slot", this.handleVirtualTooltipSlotChange as EventListener);
-
-      document.removeEventListener("tooltip-disconnected", this.handleTooltipRemoved as EventListener, true);
-    }
-
-    private removeVirtualPopperEvents() {
-      if (this.eventListeners.mouseEnter && this.currentPopperClone) {
-        this.currentPopperClone.removeEventListener("mouseenter", this.eventListeners.mouseEnter);
-      }
-      if (this.eventListeners.mouseLeave && this.currentPopperClone) {
-        this.currentPopperClone.removeEventListener("mouseleave", this.eventListeners.mouseLeave);
-      }
-      this.eventListeners.mouseEnter = undefined;
-      this.eventListeners.mouseLeave = undefined;
-      this.currentPopperClone = null;
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.teardownEvents();
-      this.removeVirtualPopperEvents();
-    }
-
-    protected async firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-      await new Promise((resolve) => setTimeout(resolve, 0));
-      this.setupEvents();
-    }
-
-    static get styles() {
-      return [momentumLight];
-    }
-
-    render() {
-      return html`
-        <div class="theme-wrapper" part="theme-wrapper">
-          <style>
-            ${styles} .theme-wrapper {
-              width: 100%;
-            }
-          </style>
-          <slot></slot>
-          <div class="md-tooltip" data-virtual-global-popper></div>
-          <div data-virtual-global-reference aria-describedby="tooltip"></div>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-theme": Theme.ELEMENT;
-  }
-}

package/src/components/theme/index.ts

@@ -1,8 +0,0 @@
-import lumosDark from "@/wc_scss/themes/vars/lmDark.scss";
-import lumosLight from "@/wc_scss/themes/vars/lmLight.scss";
-import momentumDark from "@/wc_scss/themes/vars/mdDark.scss";
-import momentumLight from "@/wc_scss/themes/vars/mdLight.scss";
-import momentumV2Light from "@/wc_scss/themes/vars/mdv2Light.scss";
-import momentumV2Dark from "@/wc_scss/themes/vars/mdv2Dark.scss";
-
-export { lumosDark, lumosLight, momentumDark, momentumLight, momentumV2Dark, momentumV2Light };

package/src/components/timepicker/TimePicker.stories.ts

@@ -1,44 +0,0 @@
-import { ThemeNameValues } from "@/components/theme/Theme";
-import { TIME_UNIT } from "@/constants";
-import { Args, Meta, StoryObj } from "@storybook/web-components";
-import { html } from "lit-element";
-import { timeSpecificity } from "./TimePicker"; // Keep type import as a relative path
-
-const render = (args: Args) => html`
-  <md-theme class="theme-toggle" id="timepicker" ?darkTheme=${args.darkTheme} theme=${args.theme}>
-    <md-timepicker
-      ?two-digit-auto-tab=${args.twoDigitAutoTab}
-      ?twenty-four-hour-format=${args.twentyFourHourFormat}
-      timeSpecificity=${args.theTimeSpecificity}
-      locale=${args.locale}
-      value=${args.value}
-    >
-    </md-timepicker>
-  </md-theme>
-`;
-
-export const TimePicker: StoryObj = {
-  args: {
-    theTimeSpecificity: TIME_UNIT.SECOND,
-    locale: "en-US",
-    value: "00:00:00-08:00"
-  },
-  render: render
-};
-
-const meta: Meta = {
-  title: "Components/Time Picker",
-  component: "md-timepicker",
-  argTypes: {
-    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
-    darkTheme: { control: "boolean" },
-    theTimeSpecificity: { control: { type: "select", options: timeSpecificity } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-timepicker"
-    }
-  }
-};
-
-export default meta;