@momentum-ui/web-components 2.16.3 → 2.16.5

package/src/components/floating-modal/FloatingModal.stories.ts

@@ -1,67 +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 "@/components/floating-modal/FloatingModal";
-import "@/components/radio/Radio";
-import "@/components/radio/RadioGroup";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-html";
-import mdx from "./Floating.mdx";
-
-export default {
-  title: "Components/Floating Modal",
-  component: "md-floating-modal",
-  argTypes: {
-    fixfull: {
-      description: "fix modal position to the screen, not parent div"
-    },
-    onCornerClick: { table: { disable: true } },
-    draggingWindow: { table: { disable: true } },
-    draggingCorner: { table: { disable: true } },
-    onCornerMove: { table: { disable: true } },
-    resizeStyleMap: { table: { disable: true } },
-    fullScreen: { table: { disable: true } },
-    show: { control: "boolean", defaultValue: true },
-    full: { control: "boolean", defaultValue: false },
-    fixed: { control: "boolean", defaultValue: false },
-    ascpectRatio: { control: "boolean", defaultValue: false },
-    heading: { control: "text", defaultValue: "Test Heading" },
-    label: { control: "text", defaultValue: "Test label" }
-  },
-  parameters: {
-    a11y: {
-      element: "md-floating-modal"
-    },
-    docs: {
-      page: mdx,
-      description: {
-        component: "some component description"
-      }
-    }
-  }
-};
-
-export const FloatingModal = (args: Args) => {
-  return html`
-    <md-floating-modal
-      ?show=${args.show}
-      ?full-screen=${args.full}
-      ?fixed-strategy=${args.fixed}
-      ?aspect-ratio=${args.ascpectRatio}
-      heading=${args.heading}
-      label=${args.label}
-    >
-      <md-radiogroup group-label="group_process">
-        <md-radio slot="radio" value="Option 1">Option 1</md-radio>
-        <md-radio slot="radio" value="Option 2">Option 2</md-radio>
-        <md-radio slot="radio" value="Option 3">Option 3</md-radio>
-        <md-radio slot="radio" value="Option 4">Option 4</md-radio>
-      </md-radiogroup>
-    </md-floating-modal>
-  `;
-};

package/src/components/floating-modal/FloatingModal.test.ts

@@ -1,114 +0,0 @@
-import { Button } from "@/components/button/Button";
-import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers";
-import "./FloatingModal";
-import { FloatingModal } from "./FloatingModal";
-
-Object.defineProperties(Element.prototype, {
-  getBoundingClientRect: {
-    value: jest.fn().mockReturnValue({
-      width: 10,
-      height: 10,
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0
-    })
-  }
-});
-
-describe("Floating Modal Component", () => {
-  let element: FloatingModal.ELEMENT;
-
-  beforeEach(async () => {
-    element = await fixture<FloatingModal.ELEMENT>(html` <md-floating-modal></md-floating-modal> `);
-  });
-  afterEach(fixtureCleanup);
-
-  test("should show modal", async () => {
-    element.show = true;
-    await nextFrame();
-    await elementUpdated(element);
-
-    expect(element.show).toBeTruthy();
-  });
-
-  test("should set label is value provided", async () => {
-    element.show = true;
-    element.label = "Floating Modal";
-    await nextFrame();
-    await elementUpdated(element);
-
-    expect(element.container!.getAttribute("aria-label")).toEqual("Floating Modal");
-  });
-
-  test("should close modal with button click", async () => {
-    element.show = true;
-    await nextFrame();
-    await elementUpdated(element);
-
-    const mdButton = element.shadowRoot!.querySelector(".md-floating__close") as Button.ELEMENT;
-    const button = mdButton.shadowRoot!.querySelector("button");
-    button!.click();
-
-    await elementUpdated(element);
-    expect(element.show).toBeFalsy();
-  });
-
-  test("should dispatch event when modal close", async () => {
-    element.show = true;
-    await nextFrame();
-    await elementUpdated(element);
-
-    const clickEvent = new MouseEvent("click");
-    setTimeout(() => element.handleClose(clickEvent));
-
-    const { detail } = await oneEvent(element, "floating-modal-close");
-
-    expect(detail).toBeDefined();
-    expect(detail.srcEvent).toEqual(clickEvent);
-  });
-
-  test("should resize modal when resize button click", async () => {
-    element.show = true;
-    await nextFrame();
-    await elementUpdated(element);
-
-    const mdButton = element.shadowRoot!.querySelector(".md-floating__resize") as Button.ELEMENT;
-    const button = mdButton.shadowRoot!.querySelector("button");
-    button!.click();
-
-    await elementUpdated(element);
-    expect(element.show).toBeTruthy();
-    expect(element.full).toBeTruthy();
-  });
-
-  test("should show minimize option", async () => {
-    element.show = true;
-    element.minimizable = true;
-    await nextFrame();
-    await elementUpdated(element);
-
-    const mdButton = element.shadowRoot!.querySelector(".md-floating__minimize") as Button.ELEMENT;
-    const button = mdButton.shadowRoot!.querySelector("button");
-    button!.click();
-
-    await elementUpdated(element);
-    expect(element.show).toBeTruthy();
-    expect(element.minimizable).toBeTruthy();
-  });
-
-  test("should resize", async () => {
-    element.show = true;
-    await nextFrame();
-    await elementUpdated(element);
-
-    // Change the viewport to 500px.
-    global.innerWidth = 500;
-
-    // Trigger the window resize event.
-    global.dispatchEvent(new Event("resize"));
-
-    await elementUpdated(element);
-    expect(element.show).toBeTruthy();
-  });
-});

package/src/components/floating-modal/FloatingModal.ts

@@ -1,372 +0,0 @@
-import "@/components/button/Button";
-import "@/components/icon/Icon";
-import { FocusMixin, SlottedMixin } from "@/mixins";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import "@interactjs/actions/drag";
-import "@interactjs/actions/resize";
-import "@interactjs/auto-start";
-import interact from "@interactjs/interact/index";
-import "@interactjs/modifiers";
-import * as Interact from "@interactjs/types";
-import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
-import { nothing } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-import "./FloatingMinimizedModal";
-import styles from "./scss/module.scss";
-
-export namespace FloatingModal {
-  @customElementWithCheck("md-floating-modal")
-  export class ELEMENT extends FocusMixin(SlottedMixin(LitElement)) {
-    @property({ type: String }) heading = "";
-    @property({ type: String }) label = "";
-    @property({ type: Boolean, reflect: true }) show = false;
-    @property({ type: Boolean, reflect: true, attribute: "aspect-ratio" }) aspectRatio = false;
-    @property({ type: Boolean, reflect: true, attribute: "fixed-strategy" }) fixed = false;
-    @property({ type: Boolean, reflect: true, attribute: "full-screen" }) full = false;
-    @property({ type: String, attribute: "close-aria-label" }) closeAriaLabel = "Close Modal";
-    @property({ type: String, attribute: "resize-aria-label" }) resizeAriaLabel = "Resize Modal";
-    @property({ type: String, attribute: "maximize-aria-label" }) maximizeScreenLabel = "Maximize Modal";
-    @property({ type: String, attribute: "minimize-aria-label" }) minimizeAriaLabel = "Minimize Modal";
-    @property({ type: Boolean, reflect: true }) private minimize = false;
-    @property({ type: Object }) position:
-      | {
-          x: number;
-          y: number;
-        }
-      | undefined;
-    @property({ type: Object }) minPosition:
-      | {
-          x: number;
-          y: number;
-        }
-      | undefined;
-    @property({ type: Boolean, reflect: true }) minimizable = false;
-    @property({ type: Object }) containerRect: DOMRect | null = null;
-
-    @internalProperty() private dragOccured: boolean | false = false;
-
-    @query(".md-floating") container?: HTMLDivElement;
-    @query(".md-floating__body") body!: HTMLDivElement;
-    @query(".md-floating__header") header!: HTMLDivElement;
-    @query(".md-floating-min-parent") minimizedHeader!: HTMLDivElement;
-    @query('slot[name="header"]') headerSlot!: HTMLSlotElement;
-
-    private containerTransform = "";
-
-    private applyInitialPosition = true;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("show")) {
-        if (this.container && this.show) {
-          this.applyInitialPosition = true;
-          this.setContainerRect();
-          this.setInteractInstance();
-        } else {
-          this.cleanContainerStyles();
-          this.destroyInteractInstance();
-        }
-      }
-      if (this.container && changedProperties.has("position") && !changedProperties.has("show")) {
-        this.setInitialTargetPosition();
-      }
-    }
-
-    private isNewPositionNotSame() {
-      if (this.container) {
-        return (
-          Number(this.container?.getAttribute("data-x")) !== this.position?.x ||
-          Number(this.container?.getAttribute("data-y")) !== this.position?.y
-        );
-      }
-    }
-
-    private setInitialTargetPosition() {
-      if (this.container && this.isNewPositionNotSame()) {
-        this.setTargetPosition(this.container, Number(this.position?.x), Number(this.position?.y));
-      }
-    }
-
-    private cleanContainerStyles() {
-      this.containerTransform = "";
-    }
-
-    private getContainerTransform() {
-      const dataX = this.container!.getAttribute("data-x");
-      const dataY = this.container!.getAttribute("data-y");
-      if (dataX && dataY) {
-        this.dispatchEvent(
-          new CustomEvent("floating-modal-location", {
-            composed: true,
-            bubbles: true,
-            detail: {
-              transform: { x: dataX, y: dataY }
-            }
-          })
-        );
-        return `translate(${dataX}px, ${dataY}px)`;
-      }
-      return this.container!.style.transform;
-    }
-
-    private setContainerRect() {
-      requestAnimationFrame(async () => {
-        await this.updateComplete;
-
-        this.containerRect = this.container!.getBoundingClientRect();
-        this.dispatchEvent(
-          new CustomEvent("floating-modal-resize", {
-            composed: true,
-            bubbles: true,
-            detail: {
-              size: this.containerRect
-            }
-          })
-        );
-
-        this.containerTransform = this.getContainerTransform();
-      });
-    }
-
-    private setInteractInstance() {
-      requestAnimationFrame(() => {
-        if (this.container) {
-          interact(this.container)
-            .resizable({
-              edges: { left: true, right: true, bottom: true, top: true },
-              listeners: {
-                end: this.resizeEndListener,
-                move: this.resizeMoveListener
-              },
-              modifiers: this.aspectRatio
-                ? [
-                    interact.modifiers.aspectRatio({
-                      ratio: "preserve",
-                      equalDelta: true,
-                      modifiers: [interact.modifiers.restrictSize({ max: "parent" })]
-                    })
-                  ]
-                : undefined
-            })
-            .draggable({
-              autoScroll: true,
-              allowFrom: this.header,
-              ignoreFrom: this.body,
-              listeners: {
-                move: this.dragMoveListener,
-                end: this.dragEndListener
-              }
-            });
-        }
-      });
-    }
-
-    handleClose(event: MouseEvent) {
-      this.show = false;
-      this.full = false;
-
-      this.dispatchEvent(
-        new CustomEvent("floating-modal-close", {
-          composed: true,
-          bubbles: true,
-          detail: {
-            srcEvent: event
-          }
-        })
-      );
-    }
-
-    handleMinimize() {
-      if (this.minimizable) {
-        if (!this.dragOccured) {
-          this.minimize = !this.minimize;
-          this.dispatchEvent(
-            new CustomEvent("floating-modal-minimize", {
-              composed: true,
-              bubbles: true,
-              detail: {
-                minimize: this.minimize
-              }
-            })
-          );
-        }
-        this.dragOccured = false;
-      }
-    }
-
-    handleToggleExpandCollapse() {
-      this.full = !this.full;
-    }
-
-    private resizeMoveListener = (event: Interact.ResizeEvent) => {
-      const { target } = event;
-      let x = parseFloat(target.getAttribute("data-x") as string) || 0;
-      let y = parseFloat(target.getAttribute("data-y") as string) || 0;
-      target.style.setProperty("width", `${event.rect.width}px`, "important");
-      target.style.setProperty("height", `${event.rect.height}px`, "important");
-      const { initialX, initialY } = this.getInitialPosition();
-      x += event.deltaRect!.left + initialX;
-      y += event.deltaRect!.top + initialY;
-
-      this.setTargetPosition(target, x, y);
-      this.applyInitialPosition = false;
-    };
-
-    private resizeEndListener = () => {
-      this.setContainerRect();
-    };
-
-    private getInitialPosition = () => {
-      if (this.applyInitialPosition && this.position) {
-        return { initialX: Number(this.position?.x), initialY: Number(this.position?.y) };
-      }
-      return { initialX: 0, initialY: 0 };
-    };
-
-    private getTransformValues(event: Interact.InteractEvent) {
-      const { target, dx, dy } = event;
-      const { initialX, initialY } = this.getInitialPosition();
-      const x = (parseFloat(target.getAttribute("data-x") as string) || 0) + dx + initialX;
-      const y = (parseFloat(target.getAttribute("data-y") as string) || 0) + dy + initialY;
-      return { x, y };
-    }
-
-    private dragMoveListener = (event: Interact.InteractEvent) => {
-      const { target } = event;
-      const { x, y } = this.getTransformValues(event);
-      this.setTargetPosition(target, x, y);
-      this.applyInitialPosition = false;
-    };
-
-    private dragEndListener = () => {
-      this.dragOccured = true;
-      this.setContainerRect();
-    };
-
-    private setTargetPosition(target: Interact.Element, x: number, y: number) {
-      target.style.transform = `translate(${x}px, ${y}px)`;
-      target.setAttribute("data-x", `${x}`);
-      target.setAttribute("data-y", `${y}`);
-    }
-
-    private destroyInteractInstance() {
-      if (this.container && interact.isSet(this.container)) {
-        interact(this.container).unset();
-      }
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.destroyInteractInstance();
-    }
-
-    renderedCallback() {
-      this.containerTransform = this.position ? `translate(${this.position.x}px, ${this.position.y}px)` : "";
-    }
-
-    render() {
-      return html`
-        ${this.show
-          ? html`
-              <div
-                class="md-floating ${this.fixed ? "fixed" : ""} ${this.minimize ? "hide" : ""}"
-                part="floating"
-                role="dialog"
-                aria-label=${ifDefined(this.label || undefined)}
-                aria-modal="true"
-                style=${ifDefined(
-                  this.containerRect
-                    ? `width: ${this.full ? "100% !important" : `${this.containerRect.width}px !important`};
-                  height: ${this.full ? "100% !important" : `${this.containerRect.height}px !important`};
-                  top: ${this.full ? "0 !important" : ""};
-                  left: ${this.full ? "0 !important" : ""};
-                  bottom: ${this.full ? "0 !important" : ""};
-                  right: ${this.full ? "0 !important" : ""};
-                  ${this.full ? "transform: none !important" : ""};
-                  ${!this.full ? `transform: ${this.position ? `translate(${this.position.x}px, ${this.position.y}px)` : this.containerTransform} !important` : ""};`
-                    : undefined
-                )}
-              >
-                <div class="md-floating__header">
-                  <div class="md-floating__header-text">
-                    ${this.heading
-                      ? html` ${this.heading} `
-                      : html`
-                          ${!this.minimize && this.headerSlot}
-                          <slot name="header"></slot>
-                        `}
-                  </div>
-                  ${this.minimizable
-                    ? html` <md-button
-                        color="color-none"
-                        class="md-floating__minimize"
-                        ariaLabel="${this.minimizeAriaLabel}"
-                        circle
-                        @click=${this.handleMinimize}
-                      >
-                        <md-icon name="minus-bold" size="16" iconSet="momentumDesign"></md-icon>
-                      </md-button>`
-                    : nothing}
-                  ${!this.minimize
-                    ? html` <md-button
-                        color="color-none"
-                        class="md-floating__resize"
-                        ariaLabel="${this.full ? this.resizeAriaLabel : this.maximizeScreenLabel}"
-                        circle
-                        @click=${this.handleToggleExpandCollapse}
-                      >
-                        <md-icon
-                          name=${this.full ? "minimize-bold" : "maximize-bold"}
-                          size="16"
-                          iconSet="momentumDesign"
-                        ></md-icon>
-                      </md-button>`
-                    : ""}
-
-                  <md-button
-                    color="color-none"
-                    class="md-floating__close"
-                    ariaLabel="${this.closeAriaLabel}"
-                    circle
-                    @click=${this.handleClose}
-                  >
-                    <md-icon name="cancel-bold" size="16" iconSet="momentumDesign"></md-icon>
-                  </md-button>
-                </div>
-                <div class="md-floating__body" part="floating-body">
-                  <slot></slot>
-                </div>
-              </div>
-              ${this.minimizable
-                ? html` <div class="md-floating-min-parent" part="minimize-floating" tabindex="-1">
-                    <md-floating-modal-minimized
-                      class="float-modal-min"
-                      part="floating-minimized"
-                      heading=${this.heading}
-                      .minimize=${this.minimize}
-                      .minPosition=${this.minPosition}
-                      @floating-min-modal-minimize=${() => this.handleMinimize()}
-                      @floating-modal-close=${this.handleClose}
-                      ?show=${this.show}
-                    >
-                      ${this.minimize && this.headerSlot}
-                    </md-floating-modal-minimized>
-                  </div>`
-                : nothing}
-            `
-          : nothing}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-floating-modal": FloatingModal.ELEMENT;
-  }
-}

package/src/components/floating-modal/README.md

@@ -1,36 +0,0 @@
-# Floating Modal
-
-Floating Modal provides a movable and scalable modal for more dynamic UI.
-
-### Attributes
-- `heading` : String - Text content for the modal header
-- `label` : String - text content for the `aria-label` attribute for A11y
-- `aspect-ratio` : Boolean - Preserves width/height ratio of modal on resize
-- `fixed-strategy` : Boolean - Allows user to enable `fixed` position style for the modal element.
-- `full-screen` : Boolean - Toggles full screen modal mode
-
-### Styling
-The wrapping container of the modal can be reached via CSS by using the `::part()` selector. For example, in your application's stylesheet you can say:
-```CSS
-md-floating-modal::part(floating) {
-  min-height: 400px;
-  min-width: 600px;
-} 
-```
-
-### Slots
-#### Unnamed Slots
-The Unnamed `<slot>` will render any content you pass between the `<md-floating-modal></md-floating-modal>` tags.
-```html
-<md-floating-modal> 
-    <div>My modal's content!</div> 
-</md-floating-modal>
-```
-
-#### Named Slots
-Floating Modal exposes a 'header' slot for composable header content.
-```html
-<md-floating-modal>
-    <h3 slot=“header”>My Header</h3>
-</md-floating-modal>
-```

package/src/components/floating-modal/scss/floating.scss

@@ -1,85 +0,0 @@
-.md-floating {
-  background-color: var(--floating-modal-main-bg-color, $lm-floating-modal-main-bg-color-light);
-  border: $floating-main-border;
-  border-radius: 8px;
-  box-shadow: var(--floating-modal-main-box-shadow, $lm-floating-modal-main-box-shadow-light);
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
-  position: absolute;
-  touch-action: none;
-  user-select: none;
-  z-index: 1040;
-
-  &.fixed {
-    position: fixed;
-  }
-
-  &.hide {
-    display: block;
-    height: 0;
-    visibility: hidden;
-    width: 0;
-  }
-
-  &.md-floating-minimize {
-    background: var(--floating-modal-main-bg-color-alternate, $lm-floating-modal-main-bg-color-alternate-light);
-    border-radius: 8px;
-    width: 100%;
-  }
-
-  &.md-floating-minimize:focus {
-    box-shadow: 0 0 0 $focus-ring-size $md-blue-70;
-    outline: none;
-  }
-
-  .md-floating__header {
-    align-items: center;
-    border-bottom: $floating-header-border;
-    color: var(--floating-modal-main-text-color, $lm-floating-modal-main-text-color-light);
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    max-height: $floating-header-max-height;
-    padding: $floating-header-padding;
-    width: 100%;
-
-    &-text {
-      flex: 2 1 auto;
-      font-family: $body-font-family;
-      font-size: $font-size-large;
-      line-height: $font-size-large;
-      text-align: left;
-    }
-  }
-
-  .md-floating__body {
-    height: calc(100% - 3rem);
-    overflow: auto;
-    padding: $floating-body-padding;
-  }
-
-  .md-floating-body-minimize {
-    display: block;
-    height: 0;
-    visibility: hidden;
-  }
-
-  .md-floating__header-minimize {
-    border-bottom: 0;
-    color: var(--floating-modal-main-text-color-alternate, $lm-floating-modal-main-text-color-alternate-light);
-    font-size: 16px;
-    line-height: 24px;
-    width: 100%;
-  }
-}
-
-.md-floating-min-parent {
-  bottom: 0;
-  height: 3rem !important;
-  position: absolute;
-  right: 0;
-  width: 223px !important;
-}

package/src/components/floating-modal/scss/module.scss

@@ -1,19 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/flex";
-@import "@/wc_scss/tools/mixins/easing";
-
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/settings/media";
-
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "@/wc_scss/typography/settings";
-
-@import "./vars/lm-floating-modal-settings";
-
-@import "./settings";
-@import "./floating";

package/src/components/floating-modal/scss/settings.scss

@@ -1,5 +0,0 @@
-$floating-header-border: 1px solid var(--floating-modal-main-border-color, $lm-floating-modal-main-border-color-light);
-$floating-main-border: 1px solid var(--floating-modal-outer-border-color, $lm-floating-modal-outer-border-color-light);
-$floating-header-padding: rem-calc(8) rem-calc(8) rem-calc(8) rem-calc(12);
-$floating-body-padding: rem-calc(12) rem-calc(20);
-$floating-header-max-height: rem-calc(48);