@momentum-ui/web-components 2.16.3 → 2.16.5

package/src/components/list/List.test.ts

@@ -1,214 +0,0 @@
-import "./List";
-import { List } from "./List";
-import "./ListItem";
-import { ListItem } from "./ListItem";
-import { Key } from "@/constants";
-import { defineCE, elementUpdated, fixture, fixtureCleanup, fixtureSync, oneEvent } from "@open-wc/testing-helpers";
-import { html, LitElement, PropertyValues } from "lit-element";
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyConstructor<A = LitElement> = new (...args: any[]) => A;
-
-describe("List", () => {
-  let element: List.ELEMENT;
-  let listItems: ListItem.ELEMENT[];
-  const keyEvent = (code: string) =>
-    new KeyboardEvent("keydown", {
-      code
-    });
-
-  beforeEach(async () => {
-    element = await fixture<List.ELEMENT>(html`
-      <md-list label="Transuranium elements">
-        <md-list-item slot="list-item">Neptunium</md-list-item>
-        <md-list-item slot="list-item">Plutonium</md-list-item>
-        <md-list-item slot="list-item">Americium</md-list-item>
-        <md-list-item slot="list-item">Curium</md-list-item>
-      </md-list>
-    `);
-    listItems = element.slotted as ListItem.ELEMENT[];
-  });
-  afterEach(fixtureCleanup);
-  test("should set correct attribute", async () => {
-    expect(element.shadowRoot?.querySelector("ul")?.getAttribute("role")).toEqual("listbox");
-    expect(element.getAttribute("aria-label")).toEqual("Transuranium elements");
-    expect(element.getAttribute("alignment")).toEqual("vertical");
-
-    element.alignment = "horizontal";
-    await elementUpdated(element);
-
-    expect(element.getAttribute("alignment")).toEqual("horizontal");
-  });
-
-  test("should correct handle lifecycle callbacks", async () => {
-    const mixin = (superclass: AnyConstructor) =>
-      class extends superclass {
-        protected firstUpdated(changedProperties: PropertyValues) {
-          super.firstUpdated(changedProperties);
-          this.dispatchEvent(new CustomEvent("first-updated"));
-        }
-
-        connectedCallback() {
-          super.connectedCallback();
-          this.dispatchEvent(new CustomEvent("connected-callback"));
-        }
-
-        disconnectedCallback() {
-          super.disconnectedCallback();
-          this.dispatchEvent(new CustomEvent("disconnected-callback"));
-        }
-      };
-
-    const tag = defineCE(class extends mixin(List.ELEMENT) {});
-    const firstElement = fixtureSync<List.ELEMENT>(`<${tag}></${tag}>`);
-    const firstEvent = await oneEvent(firstElement, "first-updated");
-    expect(firstEvent).toBeDefined();
-
-    firstElement.parentElement!.removeChild(firstElement);
-    setTimeout(() => firstElement.disconnectedCallback());
-    const thirdEvent = await oneEvent(firstElement, "disconnected-callback");
-    expect(thirdEvent).toBeDefined();
-
-    fixtureCleanup();
-
-    const secondElement = document.createElement(`${tag}`) as List.ELEMENT;
-    setTimeout(() => secondElement.connectedCallback());
-    const secondEvent = await oneEvent(secondElement, "connected-callback");
-    expect(secondEvent).toBeDefined();
-  });
-
-  test("should handle click event", async () => {
-    listItems[0].click();
-    await elementUpdated(element);
-
-    expect(element.selected).toEqual(0);
-
-    listItems[0].click();
-    await elementUpdated(element);
-
-    expect(element.selected).toEqual(0);
-
-    listItems[2].disabled = true;
-    await elementUpdated(element);
-
-    listItems[2].click();
-    await elementUpdated(element);
-
-    expect(element.selected).toEqual(0);
-  });
-
-  test("should set focus on first list item if selected is not provided", async () => {
-    expect(element.selected).toEqual(0);
-    element.dispatchEvent(keyEvent(Key.Tab));
-    expect(document.activeElement).toEqual(listItems[0]);
-    expect(element.selected).toEqual(0);
-  });
-
-  test("should reflect changes rely to activated", async () => {
-    element.activated = 4;
-    await elementUpdated(element);
-
-    expect(element.selected).toEqual(4);
-    expect(listItems[3].selected).toBeFalsy();
-
-    element.activated = 3;
-    await elementUpdated(element);
-
-    expect(element.selected).toEqual(3);
-    expect(listItems[3].selected).toBeTruthy();
-  });
-
-  test("should handle keydown event", async () => {
-    listItems[0].click();
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent("KeyA"));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(0);
-    element.dispatchEvent(keyEvent(Key.Space));
-    await elementUpdated(element);
-    expect(listItems[0].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowDown));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Enter));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(1);
-    expect(listItems[0].selected).toBeFalsy();
-    expect(listItems[1].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowRight));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Enter));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(2);
-    expect(listItems[1].selected).toBeFalsy();
-    expect(listItems[2].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowDown));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Enter));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(3);
-    expect(listItems[2].selected).toBeFalsy();
-    expect(listItems[3].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowDown));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Space));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(0);
-    expect(listItems[3].selected).toBeFalsy();
-    expect(listItems[0].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowUp));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Space));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(3);
-    expect(listItems[0].selected).toBeFalsy();
-    expect(listItems[3].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.ArrowLeft));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Space));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(2);
-    expect(listItems[3].selected).toBeFalsy();
-    expect(listItems[2].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.Home));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Space));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(0);
-    expect(listItems[3].selected).toBeFalsy();
-    expect(listItems[0].selected).toBeTruthy();
-
-    element.dispatchEvent(keyEvent(Key.End));
-    await elementUpdated(element);
-    element.dispatchEvent(keyEvent(Key.Enter));
-    await elementUpdated(element);
-    expect(element.activated).toEqual(3);
-    expect(listItems[0].selected).toBeFalsy();
-    expect(listItems[3].selected).toBeTruthy();
-  });
-
-  test("set first checked list item if selected property index provided", async () => {
-    element.selected = 2;
-    await elementUpdated(element);
-    expect(element.selected).toEqual(2);
-  });
-  test("should dispatch event when list item change", async () => {
-    const clickEvent = new MouseEvent("click");
-
-    setTimeout(() => {
-      listItems[0].click();
-      element.handleClick(clickEvent);
-    });
-    const { detail } = await oneEvent(element, "list-item-change");
-
-    await elementUpdated(element);
-
-    expect(detail).toBeDefined();
-  });
-});

package/src/components/list/List.ts

@@ -1,198 +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 { Key } from "@/constants";
-import { RovingTabIndexMixin } from "@/mixins";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, property, PropertyValues, query } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { ListItem } from "./ListItem"; // Keep type import as a relative path
-import styles from "./scss/module.scss";
-
-export namespace List {
-  @customElementWithCheck("md-list")
-  export class ELEMENT extends RovingTabIndexMixin(LitElement) {
-    @property({ type: String, reflect: true }) alignment: "horizontal" | "vertical" = "vertical";
-    @property({ type: String }) label = "option";
-    @property({ type: Number, reflect: true }) activated = -1;
-
-    @query("slot[name='list-item']") listItemSlot?: HTMLSlotElement;
-
-    private _role: "list" | "listbox" = "listbox";
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      this.setAttribute("aria-label", this.label);
-    }
-
-    private notifySelectedChange() {
-      this.dispatchEvent(
-        new CustomEvent("list-item-change", {
-          detail: {
-            selected: this.selected
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    /**
-     * @override
-     * Overridden isFocusable method.
-     * @param {Element} slottedItem - The slotted item to check.
-     * @returns {boolean} - Returns true if the slotted item does not have the "hidden" attribute, false otherwise.
-     */
-    private isFocusable(slottedItem: Element) {
-      return !slottedItem.hasAttribute("hidden");
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this._role = (this.getAttribute("role") as "list" | "listbox") || "listbox"; // Capture the role attribute value or use default "listbox"
-      this.removeAttribute("role"); // Ensure the role attribute is not set on the host element
-      this.addEventListener("keydown", this.handleKeyDown);
-      this.addEventListener("click", this.handleClick);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.removeEventListener("keydown", this.handleKeyDown);
-      this.removeEventListener("click", this.handleClick);
-    }
-
-    private findListItemIndex(event: MouseEvent | KeyboardEvent) {
-      const eventPath = event.composedPath();
-      return this.slotted.findIndex((listItem) => eventPath.includes(listItem));
-    }
-
-    private switchListItemOnArrowPress(startIndex: number, increment = 1) {
-      const newIndex = super.getAvailableSelectedIndex!(startIndex, increment);
-      if (newIndex !== -1) {
-        this.selected = newIndex;
-      }
-    }
-
-    private setActivated(index: number) {
-      if (index !== -1) {
-        this.activated = index;
-        this.selected = index;
-        this.setSelected(index);
-      }
-    }
-
-    private findSelectedListItemIndex() {
-      return this.slotted.findIndex((listItem) => (listItem as ListItem.ELEMENT).selected);
-    }
-
-    private setSelected(newIndex: number) {
-      const oldIndex = this.findSelectedListItemIndex();
-      if (oldIndex !== -1 && oldIndex !== newIndex) {
-        (this.slotted[oldIndex] as ListItem.ELEMENT).selected = false;
-      }
-      if (this.slotted[newIndex]) {
-        (this.slotted[newIndex] as ListItem.ELEMENT).selected = true;
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("slotted")) {
-        this.setActivated(this.activated);
-      }
-      if (changedProperties.has("activated")) {
-        this.setActivated(this.activated);
-      }
-      if (changedProperties.has("label")) {
-        this.setAttribute("aria-label", this.label);
-      }
-    }
-    private isListItemDisabled(index: number) {
-      return (this.slotted[index] as ListItem.ELEMENT).disabled;
-    }
-
-    handleClick(event: MouseEvent) {
-      const newIndex = this.findListItemIndex(event);
-      if (newIndex !== -1) {
-        if (!this.isListItemDisabled(newIndex)) {
-          this.setActivated(newIndex);
-          this.notifySelectedChange();
-        }
-      }
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      const { code } = event;
-      switch (code) {
-        case Key.End:
-          this.switchListItemOnArrowPress(this.slotted.length - 1);
-          break;
-        case Key.Home:
-          this.switchListItemOnArrowPress(0);
-          break;
-        case Key.ArrowUp:
-        case Key.ArrowLeft:
-          event.preventDefault();
-          {
-            if (this.selected === 0) {
-              this.switchListItemOnArrowPress(this.slotted.length - 1, -1);
-            } else {
-              this.switchListItemOnArrowPress(this.selected - 1, -1);
-            }
-          }
-          break;
-        case Key.ArrowDown:
-        case Key.ArrowRight:
-          event.preventDefault();
-          {
-            if (this.selected === this.slotted.length - 1) {
-              this.switchListItemOnArrowPress(0);
-            } else {
-              this.switchListItemOnArrowPress(this.selected + 1);
-            }
-          }
-          break;
-        case Key.Enter:
-        case Key.Space:
-          {
-            if (!this.isListItemDisabled(this.selected)) {
-              this.setActivated(this.selected);
-              this.notifySelectedChange();
-            }
-          }
-          break;
-        default:
-          break;
-      }
-    }
-
-    get slotElement() {
-      return this.listItemSlot;
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html`
-        <ul role=${ifDefined(this._role !== "list" ? this._role : undefined)} class="md-list" part="list">
-          <slot name="list-item"></slot>
-        </ul>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-list": List.ELEMENT;
-  }
-}

package/src/components/list/ListItem.test.ts

@@ -1,59 +0,0 @@
-import { defineCE, elementUpdated, fixture, fixtureCleanup, fixtureSync, oneEvent } from "@open-wc/testing-helpers";
-import { PropertyValues } from "lit-element";
-import "./ListItem";
-import { ListItem } from "./ListItem";
-
-describe("ListItem", () => {
-  afterEach(fixtureCleanup);
-  test("should set tabindex attribute", async () => {
-    const element = await fixture<ListItem.ELEMENT>(`<md-list-item>Neptunium</md-list-item>`);
-    expect(element.getAttribute("tabindex")).toEqual("-1");
-  });
-  test("should add correct aria attribute", async () => {
-    const element = await fixture<ListItem.ELEMENT>(`<md-list-item disabled>Neptunium</md-list-item>`);
-    expect(element.disabled).toBeTruthy();
-    expect(element.getAttribute("aria-disabled")).toEqual("true");
-    expect(element.getAttribute("role")).toEqual("option");
-  });
-
-  test("should change tabindex when disabled attribute is set", async () => {
-    const element = await fixture<ListItem.ELEMENT>(`<md-list-item disabled>Neptunium</md-list-item>`);
-
-    expect(element.tabIndex).toEqual(-1);
-    expect(element.getAttribute("tabindex")).toEqual("-1");
-
-    element.disabled = false;
-    await elementUpdated(element);
-
-    expect(element.tabIndex).toEqual(-1);
-    expect(element.getAttribute("tabindex")).toEqual("-1");
-  });
-
-  test("handle firstUpdated lifecycle hook", async () => {
-    const tag = defineCE(
-      class extends ListItem.ELEMENT {
-        protected firstUpdated(changedProperties: PropertyValues) {
-          super.firstUpdated(changedProperties);
-          this.dispatchEvent(new CustomEvent("first-updated"));
-        }
-      }
-    );
-    const element = fixtureSync(`<${tag}></${tag}>`);
-    const event = await oneEvent(element, "first-updated");
-    expect(event).toBeDefined();
-  });
-
-  test("should reflect shape property changes to the class attribute", async () => {
-    const element = await fixture<ListItem.ELEMENT>(`<md-list-item shape="rounded"></md-list-item>`);
-    const listItem = await element.shadowRoot!.querySelector(".md-list-item--rounded");
-    let expectedClassList = ["md-list-item", "md-list-item--rounded"];
-    expect(listItem?.classList.length).toEqual(expectedClassList.length);
-    expect(expectedClassList.every((className) => listItem?.classList?.contains(className))).toBe(true);
-
-    element.shape = "pill";
-    await elementUpdated(element);
-    expectedClassList = ["md-list-item", "md-list-item--pill"];
-    expect(listItem?.classList.length).toEqual(expectedClassList.length);
-    expect(expectedClassList.every((className) => listItem?.classList?.contains(className))).toBe(true);
-  });
-});

package/src/components/list/ListItem.ts

@@ -1,69 +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 { classMap } from "lit-html/directives/class-map";
-import styles from "./scss/module.scss";
-
-export namespace ListItem {
-  @customElementWithCheck("md-list-item")
-  export class ELEMENT extends FocusMixin(LitElement) {
-    @property({ type: String, reflect: true }) role: "listitem" | "option" = "option";
-    @property({ type: Number, reflect: true }) tabIndex = -1;
-    @property({ type: String, reflect: true }) shape: "pill" | "rounded" = "rounded";
-
-    private _disabled = false;
-    @property({ type: Boolean, reflect: true })
-    get disabled() {
-      return this._disabled;
-    }
-    set disabled(value: boolean) {
-      const oldValue = this._disabled;
-      this._disabled = value;
-      this.setAttribute("aria-disabled", `${value}`);
-      this.requestUpdate("disabled", oldValue);
-    }
-
-    private _selected = false;
-    @property({ type: Boolean, reflect: true })
-    get selected() {
-      return this._selected;
-    }
-    set selected(value: boolean) {
-      const oldValue = this._selected;
-      this._selected = value;
-      this.requestUpdate("selected", oldValue);
-    }
-
-    get listItemTemplateClassMap() {
-      return {
-        [`md-list-item--${this.shape}`]: !!this.shape
-      };
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html`
-        <li class="md-list-item ${classMap(this.listItemTemplateClassMap)}" part="list-item">
-          <slot></slot>
-        </li>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-list-item": ListItem.ELEMENT;
-  }
-}

package/src/components/list/scss/list.scss

@@ -1,26 +0,0 @@
-
-:host(md-list) {
-  .md-list {
-    @include flex($fd: column, $ai: stretch);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-    width: 100%;
-  }
-}
-
-:host([alignment="horizontal"]) ul {
-  @include flex($fd: row, $jc: stretch);
-}
-
-:host([alignment="horizontal"]) ::slotted(md-list-item) {
-  @include flex($jc: center, $ai: center);
-  flex: 1 1 auto;
-}
-
-:host([alignment="vertical"]) {
-  @include flex($fd: column, $ai: stretch);
-}
-
-

package/src/components/list/scss/listitem.scss

@@ -1,88 +0,0 @@
-:host(:focus) {
-  box-shadow: none;
-  outline: none;
-}
-
-:host(md-list-item) {
-  box-sizing: border-box;
-  cursor: pointer;
-
-  .md-list-item {
-    box-sizing: border-box;
-    color: var(--list-text-color, $md-list-text-color-light);
-    flex: 1 1 auto;
-    font-size: $list-item__font-size;
-    line-height: $list-item__line-height;
-    min-height: $list-item__min-height;
-    padding: $list-item__padding;
-    position: relative;
-
-    // Declarations before nested rules
-    @include list-item;
-  }
-
-  .md-list-item--pill {
-    border-radius: var(--list-border-radius-pill);
-  }
-
-  .md-list-item--rounded {
-    border-radius: var(--list-border-radius-rounded);
-  }
-}
-
-:host(:hover:not([disabled])) {
-  .md-list-item {
-    background-color: var(--list-hover-background, $md-list-hover-background-light);
-    color: var(--list-hover-text-color, $md-list-hover-text-color-light);
-  }
-}
-
-:host(:active:not([disabled])),
-:host([selected]:not([disabled])) {
-  .md-list-item {
-    background-color: var(--list-active-background, $md-list-active-background-light);
-    color: var(--list-active-text-color, $md-list-active-text-color-light);
-  }
-}
-
-:host([focus-visible]) {
-  .md-list-item {
-    box-shadow: $list-item__focus-shadow;
-  }
-}
-
-:host(:active[disabled]),
-:host([disabled]) {
-  .md-list-item {
-    color: var(--list-disabled-text-color, $md-list-disabled-text-color-light);
-    pointer-events: none;
-  }
-}
-
-@media (forced-colors: active) {
-  :host([focus-visible]:not([disabled])),
-  :host(:hover:not([disabled])),
-  :host(:focus:not([disabled])) {
-    .md-list-item {
-      outline: 2px solid Highlight;
-    }
-  }
-
-  :host(:active[disabled]),
-  :host([disabled]) {
-    .md-list-item {
-      color: GrayText;
-    }
-  }
-
-  :host(:active:not([disabled])),
-  :host([selected]:not([disabled])) {
-    .md-list-item {
-      forced-color-adjust: none;
-      background-color: Highlight;
-      color: Canvas;
-      box-shadow: none;
-      border: none;
-    }
-  }
-}

package/src/components/list/scss/mixins.scss

@@ -1,8 +0,0 @@
-@mixin list-item() {
-  @include flex($jc: flex-start, $ac: center,  $ai: center);
-
-  .md-input-container {
-    margin-bottom: 0;
-  }
-}
-

package/src/components/list/scss/module.scss

@@ -1,15 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/settings/rem.scss";
-@import "@/wc_scss/colors/settings-base.scss";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/flex";
-
-@import "./vars/md-list-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./listitem";
-@import "./list";

package/src/components/list/scss/settings.scss

@@ -1,7 +0,0 @@
-$list-item__font-size: rem-calc(14);
-$list-item__line-height: var(--list-line-height, rem-calc(18));
-$list-item__padding: (rem-calc(8) rem-calc(12));
-$list-item__margin: $base-unit;
-$list-item__min-height: (rem-calc(36));
-$list-item__focus-shadow: 0 0 0 rem-calc(2) var(--list-focus-border-color, $md-list-focus-border-color-light);
-