@momentum-ui/web-components 2.16.2 → 2.16.3

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

@@ -0,0 +1,214 @@
+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

@@ -0,0 +1,198 @@
+/**
+ * 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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,69 @@
+/**
+ * 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

@@ -0,0 +1,26 @@
+
+: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

@@ -0,0 +1,88 @@
+: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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,7 @@
+$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);
+