@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/draggable/Draggable.test.ts

@@ -1,116 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
-import Sortable, { SortableEvent, SortableOptions } from "sortablejs";
-import { mocked } from "ts-jest/utils";
-import "./Draggable";
-import { Draggable } from "./Draggable";
-import "./DraggableItem";
-import { DraggableItem } from "./DraggableItem";
-
-jest.mock("sortablejs");
-
-const mockedSortable = mocked(Sortable, true);
-
-const resetMocks = () => {
-  mockedSortable.mockClear();
-  jest.restoreAllMocks();
-};
-
-describe("Draggable Component", () => {
-  let element: Draggable.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    resetMocks();
-
-    element = await fixture<Draggable.ELEMENT>(html`
-      <md-draggable>
-        <md-draggable-item slot="draggable-item">Sortable Item1</md-draggable-item>
-        <md-draggable-item slot="draggable-item">Sortable Item2</md-draggable-item>
-        <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
-        <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
-      </md-draggable>
-    `);
-  });
-
-  test("should create sortable instance with options", async () => {
-    expect(mockedSortable.create.mock.calls).toHaveLength(2);
-    const parameters = mockedSortable.create.mock.calls[0];
-    expect(parameters[0]).toBe(element);
-  });
-
-  test.each([
-    ["choose", "handleOnChoose"],
-    ["unchoose", "handleOnUnchoose"],
-    ["move", "handleOnMove"],
-    ["end", "handleOnEnd"],
-    ["clone", "handleOnClone"],
-    ["start", "handleOnStart"],
-    ["add", "handleOnAdd"],
-    ["remove", "handleOnRemove"],
-    ["change", "handleOnChange"]
-  ])("emitted `%s` event from sortable", async (event: string, functionName: string) => {
-    const mockSortableEvent = new CustomEvent<SortableEvent>(event, {
-      detail: {
-        from: jest.fn().mockReturnValue(element) as unknown as HTMLElement,
-        clone: jest.fn().mockReturnValue(element) as unknown as HTMLElement,
-        item: jest.fn().mockReturnValue(element) as unknown as HTMLElement,
-        target: jest.fn().mockReturnValue(element) as unknown as HTMLElement,
-        to: jest.fn().mockReturnValue(element) as unknown as HTMLElement,
-        newIndex: jest.fn().mockReturnValue(0) as unknown as number,
-        oldIndex: jest.fn().mockReturnValue(1) as unknown as number
-      } as SortableEvent
-    });
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setTimeout(() => (element as any)[functionName](mockSortableEvent));
-
-    const { detail } = await oneEvent(element, `drag-${event}`);
-
-    expect(detail).toBeDefined();
-    expect(detail.srcEvent).toEqual(mockSortableEvent);
-  });
-
-  test("should cleanup sortable instance after disconnected from DOM", async () => {
-    element["sortableInstance"] = jest.fn().mockReturnValue({
-      el: element
-    } as unknown as SortableOptions) as unknown as Sortable;
-
-    const mockDestroy = jest.fn();
-
-    element["sortableInstance"].destroy = mockDestroy;
-
-    element.parentElement!.removeChild(element);
-    setTimeout(() => element.disconnectedCallback());
-
-    expect(mockDestroy).toHaveBeenCalled();
-  });
-
-  test("should initialize sortable instance after slot `change` event", async () => {
-    const initializeSortableMock = jest.fn();
-    element["slottedChanged"] = initializeSortableMock;
-
-    const draggableItem = await fixture<DraggableItem.ELEMENT>(html`
-      <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
-    `);
-    element.append(draggableItem);
-    await elementUpdated(element);
-
-    expect(initializeSortableMock).toHaveBeenCalled();
-  });
-
-  test("should update sortable options if any related property changed", async () => {
-    element["sortableInstance"] = jest.fn().mockReturnValue({
-      el: element
-    } as unknown as SortableOptions) as unknown as Sortable;
-
-    const optionMock = jest.fn();
-    element["sortableInstance"].destroy = jest.fn();
-    element["sortableInstance"].option = optionMock.mockImplementation(() => true);
-
-    element.delay = 100;
-    await elementUpdated(element);
-
-    expect(optionMock).toHaveBeenCalled();
-  });
-});

package/src/components/draggable/Draggable.ts

@@ -1,203 +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 { html, LitElement, property, PropertyValues, query } from "lit-element";
-import Sortable from "sortablejs";
-import reset from "@/wc_scss/reset.scss";
-import styles from "./scss/module.scss";
-import { debounce } from "@/utils/helpers";
-import { customElementWithCheck, SlottedMixin } from "@/mixins";
-
-export namespace Draggable {
-  @customElementWithCheck("md-draggable")
-  export class ELEMENT extends SlottedMixin(LitElement) {
-    @property({ type: Number }) delay = 0;
-    @property({ type: Number }) animation = 0;
-    @property({ type: String }) handle = "";
-    @property({ type: String }) filter = "";
-    @property({ type: String }) easing = "";
-    @property({ type: String }) direction: "horizontal" | "vertical" = "vertical";
-    @property({ type: Object }) group: Sortable.GroupOptions | null = null;
-    @property({ type: String, attribute: "draggable-items" }) draggableItems = "md-draggable-item";
-    @property({ type: String, attribute: "ghost-class" }) ghostClass = "";
-    @property({ type: String, attribute: "chosen-class" }) chosenClass = "";
-    @property({ type: String, attribute: "drag-class" }) dragClass = "";
-    @property({ type: String, attribute: "fallback-class" }) fallbackClass = "";
-    @property({ type: Number, attribute: "swap-threshold" }) swapThreshold = 1;
-    @property({ type: Number, attribute: "touch-start-threshold" }) touchStartThreshold = 0;
-    @property({ type: Boolean, attribute: "force-fallback" }) forceFallback = false;
-    @property({ type: Boolean, reflect: true }) sort = false;
-    @property({ type: Boolean, reflect: true }) disabled = false;
-    @property({ type: Boolean, reflect: true }) editable = false;
-
-    @query("slot[name='draggable-item']") draggableSlot!: HTMLSlotElement;
-
-    private sortableInstance: Sortable | null = null;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get slotElement() {
-      return this.draggableSlot;
-    }
-
-    private generateOptions() {
-      return {
-        ...(this.group && { group: this.group }),
-        disabled: this.disabled,
-        animation: this.animation,
-        sort: this.sort,
-        delay: this.delay,
-        handle: this.handle,
-        easing: this.easing,
-        filter: this.filter,
-        swapThreshold: this.swapThreshold,
-        touchStartThreshold: this.touchStartThreshold,
-        draggable: this.draggableItems,
-        direction: this.direction,
-        ghostClass: this.ghostClass,
-        chosenClass: this.chosenClass,
-        dragClass: this.dragClass,
-        fallbackClass: this.fallbackClass,
-        forceFallback: this.forceFallback,
-        onStart: this.handleOnStart,
-        onMove: this.handleOnMove,
-        onEnd: this.handleOnEnd,
-        onChoose: this.handleOnChoose,
-        onAdd: this.handleOnAdd,
-        onRemove: this.handleOnRemove,
-        onUnchoose: this.handleOnUnchoose,
-        onClone: this.handleOnClone,
-        onChange: this.handleOnChange
-      };
-    }
-
-    private initializeSortable() {
-      if (!this.sortableInstance) {
-        this.sortableInstance = Sortable.create(this, this.generateOptions());
-      }
-    }
-
-    private dispatchDragEvent(eventName: string, srcEvent: Sortable.SortableEvent | Sortable.MoveEvent) {
-      this.dispatchEvent(
-        new CustomEvent<{ srcEvent: Sortable.SortableEvent | Sortable.MoveEvent }>(eventName, {
-          composed: true,
-          bubbles: true,
-          detail: {
-            srcEvent
-          }
-        })
-      );
-    }
-
-    handleOnChange = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-change", event);
-    };
-
-    handleOnClone = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-clone", event);
-    };
-
-    handleOnUnchoose = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-unchoose", event);
-    };
-
-    handleOnRemove = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-remove", event);
-    };
-
-    handleOnAdd = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-add", event);
-    };
-
-    handleOnChoose = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-choose", event);
-    };
-
-    handleOnEnd = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-end", event);
-    };
-
-    handleOnMove = debounce((event: Sortable.MoveEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-move", event);
-    }, 100);
-
-    handleOnStart = (event: Sortable.SortableEvent) => {
-      event.stopPropagation();
-      this.dispatchDragEvent("drag-start", event);
-    };
-
-    private cleanupSortable() {
-      if (this.sortableInstance) {
-        this.sortableInstance.destroy();
-        this.sortableInstance = null;
-      }
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.initializeSortable();
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.cleanupSortable();
-    }
-
-    private setSortableOption(
-      name: Partial<keyof Sortable.SortableOptions>,
-      value: Sortable.SortableOptions[keyof Sortable.SortableOptions]
-    ) {
-      if (this.sortableInstance && this.sortableInstance.option(name) !== undefined) {
-        this.sortableInstance.option(name, value);
-      }
-    }
-
-    private updateSortableInstance(changedProperties: PropertyValues) {
-      for (const propertyKey of changedProperties.keys()) {
-        const value = (this as Draggable.ELEMENT)[propertyKey as keyof Draggable.ELEMENT];
-        this.setSortableOption(
-          propertyKey as keyof Sortable.SortableOptions,
-          value as Sortable.SortableOptions[keyof Sortable.SortableOptions]
-        );
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      this.updateSortableInstance(changedProperties);
-    }
-
-    protected slottedChanged() {
-      this.initializeSortable();
-    }
-
-    render() {
-      return html`
-        <div class="md-draggable" part="draggable" aria-disabled=${this.disabled}>
-          <slot name="draggable-item"></slot>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-draggable": Draggable.ELEMENT;
-  }
-}

package/src/components/draggable/DraggableItem.test.ts

@@ -1,45 +0,0 @@
-import "@/components/icon/Icon";
-import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-import "./DraggableItem";
-import { DraggableItem } from "./DraggableItem";
-
-describe("Draggable Item Component", () => {
-  let element: DraggableItem.ELEMENT;
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    element = await fixture<DraggableItem.ELEMENT>(html` <md-draggable-item></md-draggable-item> `);
-  });
-
-  test("should render with correct class", async () => {
-    expect(element.shadowRoot!.querySelector(".md-draggable-item")!.classList.contains("default")).toBeTruthy();
-
-    element.disabled = true;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector(".md-draggable-item")!.classList.contains("disabled")).toBeTruthy();
-
-    element.extended = true;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector(".md-draggable-item")!.classList.contains("default")).toBeFalsy();
-    expect(element.shadowRoot!.querySelector(".md-draggable-item")!.classList.contains("extended")).toBeTruthy();
-  });
-
-  test("should render different html depending on the properties value", async () => {
-    expect(element.shadowRoot!.querySelector("slot[name='extended']")).toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon[name='dragger-vertical-bold']")).toBeNull();
-
-    element.extended = true;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector("slot[name='extended']")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon[name='dragger-vertical-bold']")).toBeNull();
-
-    element.editable = true;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector("md-icon[name='dragger-vertical-bold']")).not.toBeNull();
-  });
-});

package/src/components/draggable/DraggableItem.ts

@@ -1,58 +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 { FocusMixin } from "@/mixins";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property } from "lit-element";
-import { nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import styles from "./scss/module.scss";
-
-export namespace DraggableItem {
-  @customElementWithCheck("md-draggable-item")
-  export class ELEMENT extends FocusMixin(LitElement) {
-    @property({ type: Boolean, reflect: true }) disabled = false;
-    @property({ type: Boolean, reflect: true }) extended = false;
-    @property({ type: Boolean, reflect: true }) editable = false;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get draggableItemClassMap() {
-      return {
-        extended: this.extended,
-        default: !this.extended,
-        disabled: this.disabled
-      };
-    }
-
-    render() {
-      return html`
-        <div
-          class="md-draggable-item ${classMap(this.draggableItemClassMap)}"
-          part="draggable-item"
-          aria-disabled=${this.disabled}
-        >
-          ${this.extended && this.editable
-            ? html` <md-icon name="dragger-vertical-bold" size="16" iconSet="momentumDesign"></md-icon> `
-            : nothing}
-          <slot></slot>
-          ${this.extended ? html` <slot name="extended"></slot> ` : nothing}
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-draggable-item": DraggableItem.ELEMENT;
-  }
-}

package/src/components/draggable/scss/draggable-item.scss

@@ -1,70 +0,0 @@
-:host {
-  display: block;
-}
-
-.md-draggable-item {
-  &.extended {
-    align-items: center;
-    background-color: var(--md-secondary-white-bg-color);
-    border: $draggable-row-border;
-    display: flex;
-    flex-direction: row;
-    padding: $draggable-padding;
-
-    md-icon {
-      cursor: grab;
-      margin-right: $draggable-padding;
-    }
-
-    &:hover {
-      background-color: var(--md-secondary-bg-color);
-    }
-
-    ::slotted(*) {
-      flex: 1 1 auto;
-      margin-right: calc(#{$draggable-padding} * 2);
-      text-align: left;
-    }
-  }
-
-  &.default {
-    border: $draggable-default-border;
-    border-radius: $draggable-item-border-radius;
-    cursor: grab;
-    display: flex;
-    padding: calc(#{$draggable-padding} / 2) $draggable-padding;
-
-    &:hover {
-      background-color: var(--md-tertiary-white-bg-color);
-      border: $draggable-focus-border;
-      box-shadow: $draggable-item-shadow;
-    }
-  }
-
-  &.disabled {
-    cursor: default;
-
-    &:hover {
-      background-color: transparent;
-      border: $draggable-default-border;
-      box-shadow: none;
-    }
-  }
-}
-
-@media(forced-colors:active) {
-  .md-draggable-item {
-    &.extended {
-      border: 1px solid CanvasText;
-    }
-    &.default {
-      border:none;
-      outline:none;
-  
-      &:hover {
-        outline: 1px solid Highlight;
-        border: none;
-      }
-    }
-  }
-}

package/src/components/draggable/scss/module.scss

@@ -1,12 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "@/wc_scss/typography/settings";
-
-@import "./settings.scss";
-@import "./draggable-item";

package/src/components/draggable/scss/settings.scss

@@ -1,6 +0,0 @@
-$draggable-padding: rem-calc(6);
-$draggable-row-border: 1px solid var(--md-menu-overlay-border-color);
-$draggable-item-border-radius: rem-calc(4);
-$draggable-default-border: 2px solid transparent;
-$draggable-focus-border: 2px solid var(--md-default-focus-outline-color);
-$draggable-item-shadow: 0 2px 4px rgba($md-black-100, 0.1), 0 0 1px rgba($md-black-100, 0.18);

package/src/components/dropdown/Dropdown.stories.ts

@@ -1,121 +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/dropdown/Dropdown";
-
-import {
-  dropdownObjectKeyValueOptions,
-  dropdownObjectLongOptions,
-  dropdownStringLongOptions,
-  dropdownStringOptions
-} from "@/[sandbox]/examples/dropdown";
-import { ThemeNameValues } from "@/components/theme/Theme";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Dropdown",
-  component: "md-dropdown",
-  argTypes: {
-    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
-    darkTheme: { control: "boolean" },
-    title: { control: "text", defaultValue: "Select..." },
-    disabled: { control: "boolean" },
-    newMomentum: { control: "boolean" },
-    searchable: { control: "boolean" },
-    leftIcon: { control: "text" },
-    placeholder: { control: "text" },
-    simpleLong: { control: "boolean" },
-    singleKeyValue: { control: "boolean" },
-    multiKeyValue: { control: "boolean" }
-  },
-  parameters: {
-    a11y: {
-      element: "md-dropdown"
-    }
-  }
-};
-
-const renderSimpleLong = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" id="dropdown" ?darkTheme="${args.darkTheme}" theme=${args.theme}>
-      <md-dropdown
-        .options="${dropdownStringLongOptions}"
-        .defaultOption="${dropdownStringLongOptions[29]}"
-        .title="${args.title}"
-        ?disabled="${args.disabled}"
-        ?newMomentum="${args.newMomentum}"
-        ?searchable="${args.searchable}"
-        .leftIcon="${args.leftIcon}"
-        .placeholder="${args.placeholder}"
-      ></md-dropdown>
-    </md-theme>
-  `;
-};
-
-const renderSimpleKeyValue = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" id="dropdown" ?darkTheme="${args.darkTheme}" theme=${args.theme}>
-      <md-dropdown
-        .options="${dropdownObjectKeyValueOptions}"
-        .title="${args.title}"
-        ?disabled="${args.disabled}"
-        ?newMomentum="${args.newMomentum}"
-        ?searchable="${args.searchable}"
-        .leftIcon="${args.leftIcon}"
-        .placeholder="${args.placeholder}"
-      ></md-dropdown>
-    </md-theme>
-  `;
-};
-
-const renderMultiKeyValue = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" id="dropdown" ?darkTheme="${args.darkTheme}" theme=${args.theme}>
-      <md-dropdown
-        .options="${dropdownObjectLongOptions}"
-        option-id="id"
-        option-value="country"
-        .title="${args.title}"
-        ?disabled="${args.disabled}"
-        ?newMomentum="${args.newMomentum}"
-        ?searchable="${args.searchable}"
-        .leftIcon="${args.leftIcon}"
-        .placeholder="${args.placeholder}"
-      ></md-dropdown>
-    </md-theme>
-  `;
-};
-
-const renderDropdownStringValues = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" id="dropdown" ?darkTheme="${args.darkTheme}" theme=${args.theme}>
-      <md-dropdown
-        .options="${dropdownStringOptions}"
-        .title="${args.title}"
-        ?disabled="${args.disabled}"
-        ?newMomentum="${args.newMomentum}"
-        ?searchable="${args.searchable}"
-        .leftIcon="${args.leftIcon}"
-        .placeholder="${args.placeholder}"
-      ></md-dropdown>
-    </md-theme>
-  `;
-};
-
-export const Dropdown = (args: Args) => {
-  if (args.simpleLong) {
-    return renderSimpleLong(args);
-  } else if (args.singleKeyValue) {
-    return renderSimpleKeyValue(args);
-  } else if (args.multiKeyValue) {
-    return renderMultiKeyValue(args);
-  } else {
-    return renderDropdownStringValues(args);
-  }
-};