@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/pagination/Pagination.ts

@@ -1,211 +0,0 @@
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property } from "lit-element";
-import { nothing } from "lit-html";
-import styles from "./scss/module.scss";
-
-export namespace Pagination {
-  @customElementWithCheck("md-pagination")
-  export class ELEMENT extends LitElement {
-    private _currentPage = 1;
-
-    @property({ type: Boolean, attribute: "dots" }) hasDots = false;
-    @property({ type: Boolean, reflect: true, attribute: "only-dots" }) onlyDots = false;
-    @property({ type: Boolean, reflect: true, attribute: "no-navigation" }) noNavigation = false;
-    @property({ type: Number, reflect: true, attribute: "total-page" }) totalPage = 0;
-    @property({ type: Number, reflect: true, attribute: "visible-page" }) visiblePage = 3;
-    @property({ type: Number, reflect: true, attribute: "current-page" })
-    get currentPage() {
-      return this._currentPage;
-    }
-
-    set currentPage(newPage: number) {
-      const oldPage = this._currentPage;
-      this._currentPage = newPage;
-      this.notifyPageChange(oldPage, newPage);
-      this.requestUpdate("currentPage", oldPage);
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    private computePrevious(page: number) {
-      if (page !== 1 && page !== this.currentPage) {
-        this.currentPage -= 1;
-      }
-    }
-
-    private computeNext(page: number) {
-      if (page <= this.totalPage && page !== this.currentPage) {
-        this.currentPage += 1;
-      }
-    }
-
-    private computeFirst() {
-      if (this.currentPage >= 1) {
-        this.currentPage = 1;
-      }
-    }
-
-    private computeLast() {
-      if (this.currentPage >= 1) {
-        this.currentPage = this.totalPage;
-      }
-    }
-
-    private computeCurrent(page: number) {
-      this.currentPage = page;
-    }
-
-    private notifyPageChange(oldPage: number, newPage: number) {
-      this.dispatchEvent(
-        new CustomEvent<{ oldPage: number; newPage: number }>("page-change", {
-          composed: true,
-          bubbles: true,
-          detail: { oldPage, newPage }
-        })
-      );
-    }
-
-    get hasPreviousPage() {
-      return this.currentPage <= 1;
-    }
-
-    get hasNextPage() {
-      return this.currentPage >= this.totalPage;
-    }
-
-    private computePageList(shouldCompute: boolean) {
-      if (this.totalPage > this.visiblePage && shouldCompute) {
-        const [previous, current, next] = [this.currentPage - 1, this.currentPage, this.currentPage + 1];
-        let newPageList: (string | number)[] = [];
-
-        if (current <= this.visiblePage - 1) {
-          newPageList = [...Array(this.visiblePage)].map((_, index) => 1 + index);
-          newPageList.push("...");
-          newPageList.push(this.totalPage);
-          return newPageList;
-        }
-
-        if (this.totalPage - current <= this.visiblePage - 2) {
-          newPageList = [];
-          newPageList.push(1);
-          newPageList.push("...");
-          const newPageListRemain = [...Array(this.visiblePage)].map(
-            (_, index) => this.totalPage - this.visiblePage + 1 + index
-          );
-          return newPageList.concat(newPageListRemain);
-        }
-
-        return [1, "...", previous, current, next, "...", this.totalPage];
-      }
-      return [...Array(this.totalPage)].map((_, index) => 1 + index);
-    }
-
-    private pagesTemplate(shouldCompute: boolean) {
-      return this.computePageList(shouldCompute).map(page =>
-        page === "..."
-          ? html`
-              <li class="page-ellipsis">${page}</li>
-            `
-          : html`
-              <li @click=${() => this.computeCurrent(page as number)} aria-current=${page === this.currentPage}>
-                ${page}
-              </li>
-            `
-      );
-    }
-
-    private dotsTemplate(shouldCompute: boolean) {
-      return this.computePageList(shouldCompute).map(page =>
-        page === "..."
-          ? nothing
-          : html`
-              <li @click=${() => this.computeCurrent(page as number)} aria-current=${page === this.currentPage}></li>
-            `
-      );
-    }
-
-    render() {
-      return html`
-        <nav class="md-pagination" role="navigation" part="pagination">
-          ${this.noNavigation
-            ? nothing
-            : html`
-                <button
-                  class="md-pagination-nav"
-                  aria-label="First Page"
-                  ?disabled=${this.hasPreviousPage}
-                  aria-disabled=${this.hasPreviousPage}
-                  @click=${this.computeFirst}
-                  part="pagination-first"
-                >
-                  <md-icon name="icon-overflow-left_16"></md-icon>
-                </button>
-                <button
-                  class="md-pagination-nav"
-                  aria-label="Next Page"
-                  ?disabled=${this.hasPreviousPage}
-                  aria-disabled=${this.hasPreviousPage}
-                  @click=${() => this.computePrevious(this.currentPage - 1)}
-                  part="pagination-prev"
-                >
-                  <md-icon name="icon-arrow-left_16"></md-icon>
-                </button>
-              `}
-          <div class="md-pagination-container">
-            ${this.onlyDots
-              ? html`
-                  <ul class="md-pagination-dots" part="pagination-only-dots">
-                    ${this.dotsTemplate(false)}
-                  </ul>
-                `
-              : html`
-                  <ul class="md-pagination-list" part=pagination-list">
-                    ${this.pagesTemplate(true)}
-                  </ul>
-                `}
-            ${this.hasDots && !this.onlyDots
-              ? html`
-                  <ul class="md-pagination-dots" part="pagination-dots">
-                    ${this.dotsTemplate(true)}
-                  </ul>
-                `
-              : nothing}
-          </div>
-          ${this.noNavigation
-            ? nothing
-            : html`
-                <button
-                  class="md-pagination-nav"
-                  aria-label="Previous Page"
-                  ?disabled=${this.hasNextPage}
-                  aria-disabled=${this.hasNextPage}
-                  @click=${() => this.computeNext(this.currentPage + 1)}
-                  part="pagination-next"
-                >
-                  <md-icon name="icon-arrow-right_16"></md-icon>
-                </button>
-                <button
-                  class="md-pagination-nav"
-                  aria-label="Last Page"
-                  ?disabled=${this.hasNextPage}
-                  aria-disabled=${this.hasNextPage}
-                  @click=${this.computeLast}
-                  part="pagination-last"
-                >
-                  <md-icon name="icon-overflow-right_16"></md-icon>
-                </button>
-              `}
-        </nav>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-pagination": Pagination.ELEMENT;
-  }
-}

package/src/components/pagination/scss/mixins.scss

@@ -1,11 +0,0 @@
-@mixin list-style() {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-@mixin text-overflow() {
-  display: block;
-  overflow: hidden;
-  text-indent: -9999px;
-}

package/src/components/pagination/scss/module.scss

@@ -1,18 +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/typography/settings";
-
-@import "./vars/md-pagination-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./pagination";

package/src/components/pagination/scss/pagination.scss

@@ -1,101 +0,0 @@
-:host(:focus) {
-  box-shadow: none;
-  outline: none !important;
-}
-
-:host(md-pagination) {
-  .md-pagination {
-    color: var(--pagination-nav-color, $md-pagination-nav-color-light);
-    display: flex;
-    padding: 0;
-    position: relative;
-
-    &-container {
-      @include flex($fd: column);
-      flex: 0 1 100%;
-    }
-
-    &-list {
-      @include list-style();
-      @include flex();
-      font-size: $pagination-font-size;
-      line-height: $pagination-line-height;
-      color: var(--pagination-color, $md-pagination-color-light);
-
-      li:not(.page-ellipsis) {
-        @include flex();
-        border-radius: $pagination-border-radius;
-        cursor: pointer;
-        height: $pagination-size;
-        margin: $pagination-indent;
-        min-width: $pagination-size;
-        padding: $pagination-item-indent;
-
-        &:hover {
-          background: var(--pagination-bg-hover, $md-pagination-bg-hover-light);
-          color: var(--pagination-color-current, $md-pagination-color-current-light);
-        }
-
-        &:focus {
-          box-shadow: $pagination-nav-focus var(--md-default-focus-outline-color, $md-blue-70);
-        }
-
-        &[aria-current="true"] {
-          background: var(--pagination-bg-current, $md-pagination-bg-current-light);
-          color: var(--pagination-color-current, $md-pagination-color-current-light);
-          cursor: default;
-          pointer-events: none;
-        }
-      }
-    }
-
-    &-nav {
-      @include flex;
-      background: none;
-      border: 0;
-      border-radius: $pagination-nav-border-radius;
-      color: var(--pagination-nav-color, $md-pagination-nav-color-light);
-      cursor: pointer;
-      flex: 0 0 $pagination-arrow-size;
-      outline: none;
-      padding: 0;
-
-      &:hover {
-        color: var(--pagination-nav-hover, $md-pagination-nav-hover-light);
-      }
-
-      &:disabled {
-        color: var(--pagination-nav-disabled, $md-pagination-nav-disabled-light);
-        cursor: default;
-      }
-
-      &:focus {
-        box-shadow: $pagination-nav-focus var(--md-default-focus-outline-color, $md-blue-70);
-      }
-    }
-
-    &-dots {
-      @include list-style();
-      @include flex;
-
-      li {
-        @include text-overflow();
-        background: var(--pagination-dots-color, $md-pagination-dots-color-light);
-        border-radius: 50%;
-        cursor: pointer;
-        height: $pagination-dots-size;
-        margin: $pagination-dots-margin;
-        width: $pagination-dots-size;
-
-        &[aria-current="true"],
-        &:hover {
-          background: var(--pagination-dots-color-current, $md-pagination-dots-color-current-light);
-        }
-      }
-    }
-  }
-}
-
-:host([focus-visible]) {
-  box-shadow: $pagination-nav-focus var(--md-default-focus-outline-color, $md-blue-70);
-}

package/src/components/pagination/scss/settings.scss

@@ -1,11 +0,0 @@
-$pagination-size: rem-calc(20);
-$pagination-font-size: rem-calc(14);
-$pagination-line-height: 1;
-$pagination-item-indent: rem-calc(4);
-$pagination-indent: rem-calc(0 2);
-$pagination-border-radius: rem-calc(14);
-$pagination-nav-border-radius: rem-calc(4);
-$pagination-arrow-size: rem-calc(20);
-$pagination-dots-size: rem-calc(8);
-$pagination-dots-margin: rem-calc(4);
-$pagination-nav-focus: 0 0 0 rem-calc(2);

package/src/components/pagination/tokens/lm-pagination-tokens.js

@@ -1,49 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const pagination = {
-  prefix: "lm",
-  component: "pagination",
-  color: {
-    light: colors.gray[50].name,
-    dark: colors.gray[60].name,
-    current: {
-      light: colors.white[100].name,
-      dark: colors.white[100].name
-    }
-  },
-  "bg-current": {
-    light: colors.blue[50].name,
-    dark: colors.blue[60].name
-  },
-
-  "bg-hover": {
-    light: colors.gray[20].name,
-    dark: colors.gray[10].name
-  },
-  nav: {
-    color: {
-      light: colors.gray[90].name,
-      dark: colors.gray[40].name
-    },
-    hover: {
-      light: colors.gray[100].name,
-      dark: colors.gray[60].name
-    },
-    disabled: {
-      light: colors.gray[30].name,
-      dark: colors.gray[30].name
-    }
-  },
-  "dots-color": {
-    light: colors.gray[30].name,
-    dark: colors.gray[30].name,
-    current: {
-      light: colors.gray[100].name,
-      dark: colors.gray[60].name
-    }
-  }
-};
-
-module.exports = pagination;

package/src/components/pagination/tokens/md-pagination-tokens.js

@@ -1,49 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const pagination = {
-  prefix: "md",
-  component: "pagination",
-  color: {
-    light: colors.gray[50].name,
-    dark: colors.gray[60].name,
-    current: {
-      light: colors.white[100].name,
-      dark: colors.white[100].name
-    }
-  },
-  "bg-current": {
-    light: colors.blue[50].name,
-    dark: colors.blue[60].name
-  },
-
-  "bg-hover": {
-    light: colors.blue[60].name,
-    dark: colors.blue[70].name
-  },
-  nav: {
-    color: {
-      light: colors.gray[70].name,
-      dark: colors.gray[70].name
-    },
-    hover: {
-      light: colors.blue[60].name,
-      dark: colors.blue[70].name
-    },
-    disabled: {
-      light: colors.gray[30].name,
-      dark: colors.gray[30].name
-    }
-  },
-  "dots-color": {
-    light: colors.gray[30].name,
-    dark: colors.gray[40].name,
-    current: {
-      light: colors.blue[50].name,
-      dark: colors.blue[60].name
-    }
-  }
-};
-
-module.exports = pagination;

package/src/components/phone-input/PhoneInput.stories.ts

@@ -1,47 +0,0 @@
-import "@/components/phone-input/PhoneInput";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import "../theme/Theme";
-
-export default {
-  title: "Components/Phone Input",
-  component: "md-phone-input",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-phone-input"
-    }
-  }
-};
-
-export const PhoneInput = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-
-  const pill = boolean("pill", false);
-  const disabled = boolean("disabled", false);
-  const showFlags = boolean("showFlags", false);
-
-  const codePlaceholder = text("codePlaceholder", "+1");
-  const numberPlaceholder = text("numberPlaceholder", "Enter Phone Number");
-  const countryCallingCode = text("country-calling-code", "Enter Phone Number");
-  const value = text("value", "");
-  const errorMessage = text("errorMessage", "");
-
-  return html`
-    <md-theme class="theme-toggle" id="datetimepicker" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-phone-input
-        ?pill=${pill}
-        ?disabled=${disabled}
-        ?show-flags=${showFlags}
-        value=${value}
-        codePlaceholder=${codePlaceholder}
-        numberPlaceholder=${numberPlaceholder}
-        country-calling-code=${countryCallingCode}
-        errorMessage=${errorMessage}
-      >
-      </md-phone-input>
-    </md-theme>
-  `;
-};

package/src/components/phone-input/PhoneInput.test.ts

@@ -1,193 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import countryCodesList, { customArray } from "country-codes-list";
-import "libphonenumber-js";
-import "./PhoneInput";
-import { PhoneInput } from "./PhoneInput";
-
-const countryData = [
-  { name: "Andorra", value: "376", code: "AD" },
-  { name: "Afghanistan", value: "93", code: "AF" },
-  { name: "Antigua and Barbuda", value: "1268", code: "AG" }
-];
-
-describe("PhoneInput Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-    jest.restoreAllMocks();
-  });
-
-  let customArraySpy: jest.SpyInstance<unknown, unknown[]>;
-  beforeEach(() => {
-    customArraySpy = jest.spyOn(countryCodesList, "customArray").mockReturnValueOnce(countryData);
-  });
-
-  test("should get country code list", async () => {
-    const codeList = customArray({
-      name: "{countryNameEn}",
-      value: "{countryCallingCode}",
-      code: "{countryCode}"
-    });
-    expect(codeList).not.toBeNull;
-  });
-
-  test("should render phone input", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input></md-phone-input>
-      `
-    );
-    expect(customArraySpy).toHaveBeenCalled();
-    expect(element).not.toBeNull();
-  });
-
-  test("should render a Pill shape", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input pill></md-phone-input>
-      `
-    );
-    expect(element.hasAttribute("pill")).toBeTruthy();
-    expect(element.shadowRoot!.querySelector("md-combobox")?.shape).toEqual("pill");
-    expect(element.shadowRoot!.querySelector("md-input")?.shape).toEqual("pill");
-  });
-  test("should trigger a Country Change", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input></md-phone-input>
-      `
-    );
-    const event: CustomEvent = new CustomEvent("change-selected", {
-      composed: true,
-      bubbles: true,
-      detail: {
-        value: {
-          id: "+1268,AntiguaandBarbuda,AG",
-          value: "+1268"
-        }
-      }
-    });
-    element.handleCountryChange(event);
-
-    expect(element.countryCallingCode).toEqual("+1268,AntiguaandBarbuda,AG");
-  });
-
-  test("should not trigger a Country Change if the field is exited without a value", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input></md-phone-input>
-      `
-    );
-    const event: CustomEvent = new CustomEvent("change-selected", {
-      composed: true,
-      bubbles: true,
-      detail: {
-        value: undefined
-      }
-    });
-    element.handleCountryChange(event);
-
-    expect(element.countryCallingCode).toEqual("");
-  });
-  test("should emit a custom event on input blur", async () => {
-    const parentElement = await fixture(
-      html`
-        <div class="parent"></div>
-      `
-    );
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input></md-phone-input>
-      `
-    );
-
-    const mockFunc = jest.fn();
-    parentElement.appendChild(element);
-    parentElement.addEventListener("phoneinput-blur", mockFunc);
-
-    const event: Event = new Event("input-blur");
-    element.handleBlur(event);
-
-    expect(mockFunc).toHaveBeenCalled();
-    expect(element.value).toBeFalsy();
-  });
-  test("should verify phone number on input blur", async () => {
-    const parentElement = await fixture(
-      html`
-        <div class="parent"></div>
-      `
-    );
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input value="(773)-777-6002"></md-phone-input>
-      `
-    );
-
-    parentElement.appendChild(element);
-
-    const event: Event = new Event("input-blur");
-    element.handleBlur(event);
-
-    expect(element.value).toBeTruthy();
-  });
-
-  test("should trigger a Phone Change event", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input></md-phone-input>
-      `
-    );
-    const phoneChangeSpy = jest.spyOn(element, "handlePhoneChange");
-    const phoneInput = element.shadowRoot?.querySelector("md-input");
-    const event: CustomEvent = new CustomEvent("input-change", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: "a"
-      }
-    });
-    phoneInput?.dispatchEvent(event);
-    expect(phoneChangeSpy).toHaveBeenCalled();
-  });
-  test("should register a KeyDown event", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input></md-phone-input>
-      `
-    );
-    const keyDownSpy = jest.spyOn(element, "handleKeydown");
-    const phoneInput = element.shadowRoot?.querySelector("md-input");
-    const event: CustomEvent = new CustomEvent("input-keydown", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: "a"
-      }
-    });
-    phoneInput?.dispatchEvent(event);
-    expect(keyDownSpy).toHaveBeenCalled();
-  });
-
-  test("Should render a flag image when show-flags is true", async () => {
-    const element = await fixture<PhoneInput.ELEMENT>(
-      html`
-        <md-phone-input show-flags></md-phone-input>
-      `
-    );
-    const getFlagOperation = jest.spyOn(element, "getCountryFlag");
-    const event: CustomEvent = new CustomEvent("change-selected", {
-      composed: true,
-      bubbles: true,
-      detail: {
-        value: {
-          id: "+1,United States of America,US",
-          value: "+1"
-        }
-      }
-    });
-    element.handleCountryChange(event);
-    await elementUpdated(element);
-    const flag = element.shadowRoot?.querySelector("span.flag-box");
-    expect(getFlagOperation).toHaveBeenCalled();
-    expect(flag?.querySelector("img")).not.toBeNull();
-  });
-});