@momentum-ui/web-components 2.16.8 → 2.16.9

package/src/components/activity-button/scss/activity-button.scss

@@ -1,160 +0,0 @@
-/* @component activity */
-
-@include exports("md-activity") {
-  .md-button.md-activity {
-    fill: $md-white-100;
-    margin: rem-calc(5);
-
-    &__chat,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--blue__background-color,
-        $bg-hover: $button--blue__background-color--hover,
-        $bg-active: $button--blue__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--blue__background-color--contrast,
-          $bg-hover: $button--blue__background-color--hover--contrast,
-          $bg-active: $button--blue__background-color--active--contrast
-        );
-      }
-    }
-
-    &__camera,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--green__background-color,
-        $bg-hover: $button--green__background-color--hover,
-        $bg-active: $button--green__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--green__background-color--contrast,
-          $bg-hover: $button--green__background-color--hover--contrast,
-          $bg-active: $button--green__background-color--active--contrast
-        );
-      }
-    }
-
-    &__contact-card,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--duck-egg__background-color,
-        $bg-hover: $button--duck-egg__background-color--hover,
-        $bg-active: $button--duck-egg__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--duck-egg__background-color,
-          $bg-hover: $button--duck-egg__background-color--hover,
-          $bg-active: $button--duck-egg__background-color--active
-        );
-      }
-    }
-
-    &__meetings,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--orange__background-color,
-        $bg-hover: $button--orange__background-color--hover,
-        $bg-active: $button--orange__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--orange__background-color--contrast,
-          $bg-hover: $button--orange__background-color--hover--contrast,
-          $bg-active: $button--orange__background-color--active--contrast
-        );
-      }
-    }
-
-    &__whiteboard,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--purple__background-color,
-        $bg-hover: $button--purple__background-color--hover,
-        $bg-active: $button--purple__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--purple__background-color--contrast,
-          $bg-hover: $button--purple__background-color--hover--contrast,
-          $bg-active: $button--purple__background-color--active--contrast
-        );
-      }
-    }
-
-    &__files,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--yellow__background-color,
-        $bg-hover: $button--yellow__background-color--hover,
-        $bg-active: $button--yellow__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--yellow__background-color--contrast,
-          $bg-hover: $button--yellow__background-color--hover--contrast,
-          $bg-active: $button--yellow__background-color--active--contrast
-        );
-      }
-    }
-
-    &__share-screen,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--cyan__background-color,
-        $bg-hover: $button--cyan__background-color--hover,
-        $bg-active: $button--cyan__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--cyan__background-color--contrast,
-          $bg-hover: $button--cyan__background-color--hover--contrast,
-          $bg-active: $button--cyan__background-color--active--contrast
-        );
-      }
-    }
-
-    &__tasks,
-    .md--dark & {
-      @include button-color(
-        $color: $button__font-color--alt,
-        $bg: $button--mint__background-color,
-        $bg-hover: $button--mint__background-color--hover,
-        $bg-active: $button--mint__background-color--active
-      );
-
-      .md--contrast & {
-        @include button-color(
-          $color: $button__font-color--alt,
-          $bg: $button--mint__background-color--contrast,
-          $bg-hover: $button--mint__background-color--hover--contrast,
-          $bg-active: $button--mint__background-color--active--contrast
-        );
-      }
-    }
-  }
-}

package/src/components/activity-button/scss/module.scss

@@ -1,63 +0,0 @@
-@import "@/wc_scss/tools/functions/core.scss";
-
-// Settings
-@import "@/wc_scss/colors/settings-base.scss";
-@import "@/wc_scss/colors/settings-transparencies.scss";
-@import "@/wc_scss/settings/rem.scss";
-@import "@/wc_scss/settings/core.scss";
-@import "@/wc_scss/typography/settings.scss";
-
-// Tools
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/flex";
-@import "@/wc_scss/tools/mixins/focus";
-@import "@/wc_scss/settings/button-settings.scss";
-@import "@/wc_scss/tools/mixins/button";
-
-@include exports("md-button") {
-  [class|="md-button__container"] {
-    @include flex($display: inline-flex, $fd: column);
-
-    width: $button-container__width;
-
-    &[class$="--small"] {
-      width: $button-container--small__width;
-    }
-  }
-
-  // Default styles applied outside of media query
-  .md-button {
-    @include single-transition(background-color, $button__transition-speed, ease);
-    @include button-base;
-    @include button-size($height: rem-calc(36), $padding: $button__padding--36, $radius: $button__radius--36);
-    @include button-color($focus: true);
-
-    &.md-button {
-      &--circle {
-        padding: 0;
-
-        @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36);
-
-        @include radius($button__radius--round);
-
-        &[class*="--36"] {
-          @include button-circle-size($size: $button__size--36, $font-size: $button__font-size--36);
-        }
-
-        &[class*="--56"] {
-          @include button-circle-size($size: $button__size--56, $font-size: $button__font-size--56);
-        }
-
-        &[class*="--68"] {
-          @include button-circle-size($size: $button__size--68, $font-size: $button__font-size--68);
-        }
-
-        &[class*="--84"] {
-          @include button-circle-size($size: $button__size--84, $font-size: $button__font-size--84);
-        }
-      }
-    }
-  }
-}
-
-@import "activity-button";

package/src/components/advance-list/AdvanceList.test.ts

@@ -1,357 +0,0 @@
-import "@/components/advance-list/AdvanceList";
-import { AdvanceList } from "@/components/advance-list/AdvanceList";
-import { elementUpdated, fixture, fixtureCleanup, html, nextFrame } from "@open-wc/testing-helpers";
-import { render } from "lit-html"; // Import Lit's render function
-
-// Helper function to create mock items
-const createItems = (start: number, count: number) =>
-  Array.from({ length: count }, (_, i) => ({
-    name: `Item ${start + i}`,
-    id: `d-${start + i}`,
-    index: i,
-    ariaLabel: `Item ${start + i}`
-  }));
-
-// Helper function to append items to the Shadow DOM using Lit's render function
-const appendItemsToShadowDom = (items: any[], wrapper: Element, mockRender: jest.Mock) => {
-  items.forEach((item, index) => {
-    const listItemTemplate = mockRender(item, index);
-    const fragment = document.createDocumentFragment();
-    render(listItemTemplate, fragment);
-    wrapper.appendChild(fragment.firstElementChild as HTMLElement);
-  });
-};
-
-// Helper to mock renderItem function with prefixId
-const createMockRender = (prefixId: string) =>
-  jest.fn((data: any, index: number) => {
-    return html`
-      <div
-        class="default-wrapper"
-        aria-live="assertive"
-        role="option"
-        aria-setsize="600"
-        aria-posinset="${index + 1}"
-        aria-label="${data.name}"
-        id="${prefixId}${data.id}"
-        index="${index}"
-        style="position: absolute; transform: translate(0px, ${index * 30}px);"
-      >
-        <div
-          style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;line-height:30px;"
-          indexing="${index}"
-          ?disabled="${index === 10}"
-        >
-          ${data.name}
-        </div>
-      </div>
-    `;
-  });
-
-describe("advanceList Component", () => {
-  let el: AdvanceList.ELEMENT;
-  let mockRender: jest.Mock;
-
-  beforeEach(async () => {
-    const initialItems = createItems(1, 20);
-    const prefixId = "item-"; // Define the prefixId
-    mockRender = createMockRender(prefixId); // Pass prefixId to the render function
-
-    // Initialize the component with mock data
-    el = await fixture<AdvanceList.ELEMENT>(html`
-      <md-advance-list
-        .items=${initialItems}
-        .isLoading=${false}
-        .isError=${false}
-        .value=${"2"}
-        ariaRoleList="listbox"
-        ariaLabelList="state selector"
-        .totalRecords=${100}
-        .renderItem=${mockRender}
-      >
-        <md-spinner size="24" slot="spin-loader"></md-spinner>
-      </md-advance-list>
-    `);
-
-    await el.updateComplete;
-    await nextFrame();
-
-    const wrapper = el.shadowRoot?.querySelector(".md-advance-list-wrapper");
-    if (wrapper) {
-      appendItemsToShadowDom(initialItems, wrapper, mockRender);
-    }
-  });
-
-  afterEach(fixtureCleanup);
-
-  describe("Interaction", () => {
-    test("should render initial items and append more on scroll", async () => {
-      expect(el.items.length).toBe(20);
-      expect(mockRender).toHaveBeenCalledTimes(20);
-
-      const listItems = el.shadowRoot?.querySelectorAll(".default-wrapper");
-      expect(listItems?.length).toBe(20);
-
-      const newItems = createItems(21, 10);
-      const wrapper = el.shadowRoot?.querySelector(".md-advance-list-wrapper");
-      if (wrapper) {
-        appendItemsToShadowDom(newItems, wrapper, mockRender);
-      }
-      el.items = [...el.items, ...newItems];
-      await el.updateComplete;
-      await nextFrame();
-
-      expect(el.items.length).toBe(30);
-      expect(mockRender).toHaveBeenCalledTimes(30);
-
-      const updatedListItems = el.shadowRoot?.querySelectorAll(".default-wrapper");
-      expect(updatedListItems?.length).toBe(30);
-    });
-
-    test("should select an item on click", async () => {
-      const firstItem = el.shadowRoot?.querySelector(".default-wrapper") as HTMLElement;
-      expect(firstItem).not.toBeNull();
-      if (firstItem) {
-        firstItem.click();
-        await el.updateComplete;
-        await nextFrame();
-        expect(firstItem.classList.contains("selected")).toBe(true);
-      }
-    });
-
-    test("should not select disabled item on click", async () => {
-      const disabledId = el.items[10].id;
-      (el as any).updateSelectedState();
-      await nextFrame();
-
-      const disabledItem = el.shadowRoot?.querySelector(`#item-${disabledId}`) as HTMLElement;
-      if (disabledItem) {
-        disabledItem?.click();
-      }
-      expect(disabledItem).not.toBeNull();
-      expect(disabledItem?.getAttribute("aria-disabled")).toBe("true");
-      expect(disabledItem.classList.contains("selected")).toBe(false);
-    });
-
-    test("should handle ArrowDown and ArrowUp keys", async () => {
-      el.items = createItems(1, 20);
-      el.activeId = el.items[0].id;
-
-      el.requestUpdate();
-      await el.updateComplete;
-      await nextFrame();
-
-      const arrowDownEvent = new KeyboardEvent("keydown", { key: "ArrowDown" });
-      el.handleKeyDown(arrowDownEvent);
-      await nextFrame();
-
-      let currentIndex = el.items.findIndex((item) => item.id === el.activeId);
-      expect(currentIndex).toBe(1);
-
-      const arrowUpEvent = new KeyboardEvent("keydown", { key: "ArrowUp" });
-      el.handleKeyDown(arrowUpEvent);
-      await nextFrame();
-
-      currentIndex = el.items.findIndex((item) => item.id === el.activeId);
-      expect(currentIndex).toBe(0);
-    });
-
-    test("should handle ArrowDown for preselected value", async () => {
-      el.items = createItems(1, 20);
-      el.activeId = "";
-      el.value = el.items[3].id;
-
-      el.requestUpdate();
-      await el.updateComplete;
-      await nextFrame();
-
-      const arrowDownEvent = new KeyboardEvent("keydown", { key: "ArrowDown" });
-      el.handleKeyDown(arrowDownEvent);
-      await nextFrame();
-
-      expect(el.activeId).toBe(el.items[4].id);
-      let currentIndex = el.items.findIndex((item) => item.id === el.activeId);
-      expect(currentIndex).toBe(4);
-
-      const arrowUpEvent = new KeyboardEvent("keydown", { key: "ArrowUp" });
-      el.handleKeyDown(arrowUpEvent);
-      await nextFrame();
-
-      expect(el.activeId).toBe(el.items[3].id);
-      currentIndex = el.items.findIndex((item) => item.id === el.activeId);
-      expect(currentIndex).toBe(3);
-    });
-
-    test("should handle ArrowUp for preselected value", async () => {
-      el.items = createItems(1, 20);
-      el.activeId = "";
-      el.value = el.items[4].id; // Preselect item 5
-
-      el.requestUpdate();
-      await el.updateComplete;
-      await nextFrame();
-
-      const arrowUpEvent = new KeyboardEvent("keydown", { key: "ArrowUp" });
-      el.handleKeyDown(arrowUpEvent);
-      await nextFrame();
-
-      // Assert activeId is now the 4th item
-      expect(el.activeId).toBe(el.items[3].id);
-      let currentIndex = el.items.findIndex((item) => item.id === el.activeId);
-      expect(currentIndex).toBe(3);
-
-      const arrowDownEvent = new KeyboardEvent("keydown", { key: "ArrowDown" });
-      el.handleKeyDown(arrowDownEvent);
-      await nextFrame();
-
-      // Assert activeId moves back to the preselected 5th item
-      expect(el.activeId).toBe(el.items[4].id);
-      currentIndex = el.items.findIndex((item) => item.id === el.activeId);
-      expect(currentIndex).toBe(4);
-
-      // Ensure the preselected item has tabindex="0"
-      const preselectedItem = el.shadowRoot?.querySelector(`#item-${el.items[4].id}`) as HTMLElement;
-      expect(preselectedItem.getAttribute("tabindex")).toBe("0");
-    });
-
-    test("should handle Enter key and select non-disabled item", async () => {
-      el.items = createItems(1, 20);
-      el.activeId = el.items[1].id;
-
-      el.requestUpdate();
-      await el.updateComplete;
-      await nextFrame();
-
-      const enterEvent = new KeyboardEvent("keydown", { key: "Enter" });
-      el.handleKeyDown(enterEvent);
-      await nextFrame();
-
-      const selectedItem = el.shadowRoot?.querySelector(`#item-${el.activeId}`) as HTMLElement;
-      expect(selectedItem?.classList.contains("selected")).toBe(true);
-    });
-
-    test("should not select disabled item on Enter key press", async () => {
-      el.items = createItems(1, 20);
-      el.activeId = el.items[1].id;
-
-      el.requestUpdate();
-      await el.updateComplete;
-      await nextFrame();
-
-      const secondItem = el.shadowRoot?.querySelector(`#item-${el.activeId}`) as HTMLElement;
-      if (secondItem) {
-        secondItem.setAttribute("aria-disabled", "true");
-      }
-
-      const enterEvent = new KeyboardEvent("keydown", { key: "Enter" });
-      el.handleKeyDown(enterEvent);
-      await nextFrame();
-
-      expect(secondItem?.classList.contains("selected")).toBe(false);
-    });
-
-    test("should update selected state and handle disabled items", async () => {
-      el.items = createItems(1, 20);
-      el.activeId = el.items[1].id;
-      el.selectedItemId = el.items[1].id;
-
-      (el as any).updateSelectedState();
-      await nextFrame();
-
-      const selectedItem = el.shadowRoot?.querySelector(`#item-${el.activeId}`);
-      expect(selectedItem).not.toBeNull();
-      expect(selectedItem?.classList.contains("selected")).toBe(true);
-      expect(selectedItem?.getAttribute("selected")).toBe("true");
-      expect(selectedItem?.getAttribute("aria-selected")).toBe("true");
-      expect(selectedItem?.getAttribute("tabindex")).toBe("0");
-
-      const disabledId = el.items[10].id;
-      const disabledItem = el.shadowRoot?.querySelector(`#item-${disabledId}`);
-      expect(disabledItem?.getAttribute("disabled")).not.toBeNull();
-      expect(disabledItem?.getAttribute("aria-disabled")).toBe("true");
-    });
-
-    describe("Accessibility and Error Handling", () => {
-
-      test("should apply correct ARIA role and label", async () => {
-        const wrapper = el.shadowRoot?.querySelector(".md-advance-list-wrapper");
-        expect(wrapper?.getAttribute("role")).toBe("listbox");
-        expect(wrapper?.getAttribute("aria-label")).toBe("state selector");
-      });
-
-      test("should dispatch 'load-more' event when last item is reached", async () => {
-        el.items = createItems(1, 20);
-        el.totalRecords = 30;
-        el.requestUpdate();
-        await el.updateComplete;
-
-        const dispatchSpy = jest.spyOn(el, "dispatchEvent");
-        const customEvent = { last: 19 };
-        el.handleRangeChange(customEvent);
-
-        expect(dispatchSpy).toHaveBeenCalledWith(expect.any(CustomEvent));
-
-        // Verify that the event type is 'load-more'
-        const loadMoreEvent = dispatchSpy.mock.calls.find((call) => call[0]?.type === "load-more")?.[0] as CustomEvent;
-        expect(loadMoreEvent).toBeDefined();
-      });
-    });
-  });
-});
-
-describe("AdvanceList Component test seperate render", () => {
-  let el: AdvanceList.ELEMENT;
-
-  beforeEach(async () => {
-    el = await fixture(html`
-      <md-advance-list
-        .items=${Array.from({ length: 20 }, (_, i) => ({
-          name: `Item ${i + 1}`,
-          id: `item-${i + 1}`
-        }))}
-        .totalRecords=${30}
-      ></md-advance-list>
-    `);
-    await elementUpdated(el);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test("should correctly render each item using renderItem (bypassing virtualization)", async () => {
-    const mockItems = Array.from({ length: 3 }, (_, i) => ({
-      name: `Item ${i + 1}`,
-      id: `${i + 1}`,
-      template: (item: any, index: number) => html`<span>${item.name} - ${index}</span>`
-    }));
-
-    el.items = mockItems;
-    el.totalRecords = 3;
-
-    el.requestUpdate();
-    await el.updateComplete;
-
-    const wrapper = el.shadowRoot?.querySelector(".md-advance-list-wrapper");
-    mockItems.forEach((item, index) => {
-      const listItemTemplate = el.renderItem(item, index);
-      const fragment = document.createDocumentFragment();
-      render(listItemTemplate, fragment);
-      wrapper?.appendChild(fragment.firstElementChild as HTMLElement);
-    });
-
-    const renderedContent = el.shadowRoot?.querySelectorAll(".default-wrapper");
-
-    expect(renderedContent).toHaveLength(3);
-
-    renderedContent?.forEach((item, index) => {
-      const itemElement = item as HTMLElement;
-      expect(itemElement.getAttribute("aria-setsize")).toBe("3");
-      expect(itemElement.getAttribute("aria-posinset")).toBe(`${index + 1}`);
-      expect(itemElement.getAttribute("role")).toBe("option");
-      expect(itemElement.getAttribute("aria-label")).toBe(`Item ${index + 1}`);
-      expect(itemElement.getAttribute("id")).toBe(`item-${index + 1}`);
-      expect(itemElement.textContent?.trim()).toBe(`Item ${index + 1} - ${index}`);
-    });
-  });
-});