@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/timepicker/TimePicker.ts

@@ -1,417 +0,0 @@
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property, internalProperty, PropertyValues } from "lit-element";
-import reset from "@/wc_scss/reset.scss";
-import styles from "./scss/module.scss";
-import "@/components/input/Input";
-import { ValidationRegex } from "@/utils/validations.ts";
-import { Input } from "../input/Input"; // Keep type import as a relative path
-import { Key } from "@/constants";
-import { TIME_UNIT } from "../../constants"; // Keep type import as a relative path
-import { ifDefined } from "lit-html/directives/if-defined";
-import { nothing } from "lit-html";
-import { DateTime } from "luxon";
-import { now } from "@/utils/dateUtils";
-import { classMap } from "lit-html/directives/class-map";
-
-export const timeUnits = [TIME_UNIT.HOUR, TIME_UNIT.MINUTE, TIME_UNIT.SECOND, TIME_UNIT.AM_PM] as const;
-
-export const timeSpecificity = [TIME_UNIT.HOUR, TIME_UNIT.MINUTE, TIME_UNIT.SECOND];
-
-const timePlaceholders = {
-  [TIME_UNIT.HOUR]: "HH",
-  [TIME_UNIT.MINUTE]: "MM",
-  [TIME_UNIT.SECOND]: "SS",
-  [TIME_UNIT.AM_PM]: "AM"
-};
-
-const timeUnitProps = (isTwentyFourHour: boolean) => {
-  return {
-    [TIME_UNIT.HOUR]: {
-      type: "number" as Input.Type,
-      min: isTwentyFourHour ? 0 : 1,
-      max: isTwentyFourHour ? 23 : 12
-    },
-    [TIME_UNIT.MINUTE]: {
-      type: "number" as Input.Type,
-      min: 0,
-      max: 59
-    },
-    [TIME_UNIT.SECOND]: {
-      type: "number" as Input.Type,
-      min: 0,
-      max: 59
-    },
-    [TIME_UNIT.AM_PM]: {
-      type: "text" as Input.Type,
-      min: undefined,
-      max: undefined
-    }
-  };
-};
-
-export namespace TimePicker {
-  export type TimeUnit = typeof timeUnits[number];
-  export type TimeSpecificity = typeof timeSpecificity[number];
-
-  @customElementWithCheck("md-timepicker")
-  export class ELEMENT extends LitElement {
-    @property({ type: Boolean, attribute: "two-digit-auto-tab" }) twoDigitAutoTab = false;
-    @property({ type: Boolean, attribute: "twenty-four-hour-format", reflect: true }) twentyFourHourFormat = false;
-    @property({ type: String }) timeSpecificity: TimePicker.TimeSpecificity = TIME_UNIT.SECOND;
-    @property({ type: String }) locale = "en-US";
-    @property({ type: String, reflect: true }) value = "00:00:00-08:00"; // ISO FORMAT
-
-    @internalProperty() private localeTwentyFourFormat = false;
-    @internalProperty() private finalTwentyFourFormat = false;
-    @internalProperty() private timeObject: DateTime = now();
-    @internalProperty() private tabNext = false;
-    @internalProperty() private timeValue = {
-      [TIME_UNIT.HOUR]: "12",
-      [TIME_UNIT.MINUTE]: "00",
-      [TIME_UNIT.SECOND]: "00",
-      [TIME_UNIT.AM_PM]: "AM"
-    };
-
-    @internalProperty() private timeValidity = {
-      [TIME_UNIT.HOUR]: true,
-      [TIME_UNIT.MINUTE]: true,
-      [TIME_UNIT.SECOND]: true,
-      [TIME_UNIT.AM_PM]: true
-    };
-
-    get timePickerClassMap() {
-      return {
-        "twenty-four-hour-format": this.finalTwentyFourFormat
-      };
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-
-      if (
-        this.value &&
-        (changedProperties.has("value") ||
-          changedProperties.has("locale") ||
-          changedProperties.has("twentyFourHourFormat"))
-      ) {
-        this.timeObject = DateTime.fromISO(this.value, { locale: this.locale });
-        const localeTimeFormat = this.getLocaleTimeFormat(this.timeObject);
-        this.finalTwentyFourFormat = this.twentyFourHourFormat || localeTimeFormat;
-        this.value = this.timeObject.toISOTime({ suppressMilliseconds: true });
-        this.updateTimeValues();
-      }
-    }
-
-    addLeadingZeros = (value: string | undefined) => {
-      if (value) {
-        if (value.length === 0) {
-          return "00";
-        } else if (value.length === 1) {
-          return `0${value}`;
-        }
-      }
-      return value;
-    };
-
-    formatAndValidate = (timeUnitString: string | undefined, unit: TIME_UNIT) => {
-      if (timeUnitString) {
-        this.updateValidity(timeUnitString, unit);
-        if (this.timeValidity[unit]) {
-          return this.addLeadingZeros(timeUnitString);
-        }
-      }
-      return undefined;
-    };
-
-    getLocaleTimeFormat = (aTimeObject: DateTime) => {
-      const stringDate = aTimeObject.toFormat("tt");
-      const [times, amPmValue] = stringDate.split(" ");
-
-      const localeTwentyFourFormat = !amPmValue;
-      return localeTwentyFourFormat;
-    };
-
-    updateTimeValues = () => {
-      let stringDate;
-      if (this.finalTwentyFourFormat) {
-        stringDate = this.timeObject.toFormat("HH:mm:ss");
-      } else {
-        stringDate = this.timeObject.toFormat("tt");
-      }
-
-      const [times, amPmValue] = stringDate.split(" ");
-      const splitTimes = times.split(":");
-
-      timeSpecificity.forEach((unit: TIME_UNIT) => {
-        const formattedValue = this.formatAndValidate(splitTimes.shift(), unit);
-        if (formattedValue) {
-          if (unit === TIME_UNIT.HOUR && amPmValue) {
-            this.timeValue[TIME_UNIT.AM_PM] = amPmValue;
-          }
-          this.timeValue[unit] = formattedValue;
-        }
-      });
-    };
-
-    updateValidity = (input: string, unit: TimePicker.TimeUnit) => {
-      let result = true;
-      const regexTester = (regex: RegExp): void => {
-        if (input.match(regex) === null) {
-          result = false;
-        }
-      };
-
-      switch (unit) {
-        case TIME_UNIT.HOUR:
-          if (this.finalTwentyFourFormat) {
-            regexTester(new RegExp(ValidationRegex.twentyFourHourString));
-          } else {
-            regexTester(new RegExp(ValidationRegex.hourString));
-          }
-          break;
-        case TIME_UNIT.MINUTE:
-          regexTester(new RegExp(ValidationRegex.minuteSecondString));
-          break;
-        case TIME_UNIT.SECOND:
-          regexTester(new RegExp(ValidationRegex.minuteSecondString));
-          break;
-        case TIME_UNIT.AM_PM:
-          regexTester(new RegExp(ValidationRegex.amPmString));
-          break;
-        default:
-          break;
-      }
-
-      this.timeValidity[unit] = result;
-    };
-
-    to12HourFormat = (amPm: string, hour: string) => {
-      if (!this.finalTwentyFourFormat && this.timeValidity[TIME_UNIT.HOUR] && this.timeValidity[TIME_UNIT.AM_PM]) {
-        let hourValue = Number(hour);
-        if (amPm === "PM") {
-          hourValue = 12 + (hourValue % 12);
-        } else {
-          hourValue = hourValue % 12;
-        }
-        return hourValue;
-      }
-    };
-
-    isEntireTimeValid = () => {
-      return Object.values(this.timeValidity).every(timeUnitValidity => timeUnitValidity);
-    };
-
-    updateTimeUnit = (unit: TIME_UNIT) => {
-      this.updateValidity(this.timeValue[unit], unit);
-
-      if (this.timeObject && this.timeValidity[unit]) {
-        if (unit !== TIME_UNIT.AM_PM) {
-          this.timeObject = this.timeObject?.set({ [unit]: this.timeValue[unit] });
-        } else {
-          this.timeObject = this.timeObject?.set({
-            hour: this.to12HourFormat(this.timeValue[TIME_UNIT.AM_PM], this.timeValue[TIME_UNIT.HOUR])
-          });
-        }
-
-        if (this.isEntireTimeValid()) {
-          this.timeObject = this.timeObject?.set({
-            hour: this.to12HourFormat(this.timeValue[TIME_UNIT.AM_PM], this.timeValue[TIME_UNIT.HOUR])
-          });
-
-          this.value = this.timeObject.toISOTime({ suppressMilliseconds: true }) || this.value;
-
-          this.dispatchEvent(
-            new CustomEvent(`time-selection-change`, {
-              bubbles: true,
-              composed: true,
-              detail: {
-                time: this.value,
-                data: this.timeObject
-              }
-            })
-          );
-        }
-      }
-    };
-
-    handleTimeChange(event: CustomEvent, unit: TimePicker.TimeUnit) {
-      this.timeValue[unit] = event?.detail?.value;
-      this.requestUpdate();
-      this.formatTimeUnit(unit);
-
-      const unitValue = this.timeValue[unit];
-      if (
-        this.twoDigitAutoTab &&
-        this.tabNext &&
-        ((unit !== TIME_UNIT.AM_PM && unitValue.length === 2 && unitValue[0] !== "0") || unitValue === "00")
-      ) {
-        event.preventDefault();
-        const currentNode = event?.target as Node;
-        const allInputs = this.shadowRoot?.querySelectorAll("md-input, md-combobox");
-
-        if (allInputs) {
-          const currentIndex = Array.prototype.findIndex.call(allInputs, el => currentNode?.isEqualNode(el));
-          const targetIndex = (currentIndex + 1) % allInputs.length;
-
-          if (currentIndex < allInputs.length - 1) {
-            const targetInput = allInputs[targetIndex].shadowRoot?.querySelector("input") as HTMLInputElement;
-            targetInput?.focus();
-          }
-        }
-      } else if (unit === TIME_UNIT.AM_PM) {
-        this.updateTimeUnit(unit);
-      }
-
-      event.stopPropagation();
-      this.dispatchEvent(
-        new CustomEvent(`${unit}-change`, {
-          bubbles: true,
-          composed: true,
-          detail: {
-            srcEvent: event,
-            value: `${this.timeValue[unit]}`,
-            isValid: this.timeValidity[unit]
-          }
-        })
-      );
-    }
-
-    handleTimeKeyDown(event: CustomEvent, unit: TimePicker.TimeUnit) {
-      const { key } = event?.detail?.srcEvent;
-
-      if (key === Key.ArrowDown || key === Key.ArrowUp) {
-        this.tabNext = false;
-      } else {
-        this.tabNext = true;
-      }
-
-      this.timeValidity[unit] = true;
-      this.requestUpdate();
-
-      event.stopPropagation();
-      this.dispatchEvent(
-        new CustomEvent(`${unit}-keydown`, {
-          bubbles: true,
-          composed: true,
-          detail: {
-            srcEvent: event,
-            value: `${this.timeValue[unit]}`
-          }
-        })
-      );
-    }
-
-    handleTimeBlur(event: CustomEvent, unit: TimePicker.TimeUnit) {
-      if (this.timeValue[unit] === "0") {
-        this.timeValue[unit] = "00";
-      }
-
-      this.updateTimeUnit(unit);
-      this.requestUpdate();
-
-      event.stopPropagation();
-      this.dispatchEvent(
-        new CustomEvent(`${unit}-blur`, {
-          bubbles: true,
-          composed: true,
-          detail: {
-            srcEvent: event,
-            time: this.value,
-            isValid: this.timeValidity[unit]
-          }
-        })
-      );
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    formatTimeUnit = (unit: TimePicker.TimeUnit) => {
-      if (this.timeValue[unit].length === 1) {
-        if (this.timeValue[unit] !== "0") {
-          this.timeValue[unit] = "0" + this.timeValue[unit];
-        }
-      } else if (this.timeValue[unit].length > 2 && this.timeValue[unit][0] === "0") {
-        const newValue = this.timeValue[unit].substring(1);
-        const regexNoPreZeros = RegExp(ValidationRegex.noPrecedingZerosString);
-        const noPrecedingZeros = regexNoPreZeros.test(newValue);
-        if (noPrecedingZeros) {
-          this.timeValue[unit] = newValue;
-        }
-      }
-      this.requestUpdate();
-    };
-
-    messageType = (isValid: boolean) => {
-      return isValid ? "" : "error";
-    };
-
-    generateTimeBox = (unit: TimePicker.TimeUnit) => {
-      const unitProperties = timeUnitProps(this.finalTwentyFourFormat)[unit];
-
-      return html`
-        ${unit === TIME_UNIT.MINUTE || unit === TIME_UNIT.SECOND
-          ? html`
-              <span class="colon-separator">:</span>
-            `
-          : nothing}
-        <md-input
-          compact
-          select-when-in-focus
-          class="${`time-input-box ${unit}`}"
-          id="time-${timeUnits.findIndex(aUnit => aUnit === unit) + 1}"
-          value="${this.timeValue[unit]}"
-          type="${unitProperties.type}"
-          min=${ifDefined(unitProperties.min)}
-          max=${ifDefined(unitProperties.max)}
-          maxLength=${2}
-          placeholder="${timePlaceholders[unit]}"
-          @input-change="${(e: CustomEvent) => this.handleTimeChange(e, unit)}"
-          @input-keydown="${(e: CustomEvent) => this.handleTimeKeyDown(e, unit)}"
-          @input-blur="${(e: CustomEvent) => this.handleTimeBlur(e, unit)}"
-          .messageArr=${[{ message: "", type: this.messageType(this.timeValidity[unit]) } as Input.Message]}
-          .ariaLabel="${unit}-input"
-          ariaInvalid="${!this.timeValidity[unit]}"
-        ></md-input>
-      `;
-    };
-
-    generateAmPmComboBox = () => {
-      const options = ["AM", "PM"];
-      return html`
-        <md-combobox
-          compact
-          select-when-in-focus
-          class="amPm-combo-box"
-          .options=${options}
-          .value=${[options[0]]}
-          .inputValue=${this.timeValue[TIME_UNIT.AM_PM]}
-          .ariaLabel=${this.timeValue[TIME_UNIT.AM_PM]}
-          @change-selected="${(e: CustomEvent) => this.handleTimeChange(e, TIME_UNIT.AM_PM)}"
-        ></md-combobox>
-      `;
-    };
-
-    render() {
-      return html`
-        <div class="md-timepicker ${classMap(this.timePickerClassMap)}">
-          <div class="time-inputs-wrapper">
-            ${this.generateTimeBox(TIME_UNIT.HOUR)}
-            ${this.timeSpecificity === TIME_UNIT.HOUR ? nothing : this.generateTimeBox(TIME_UNIT.MINUTE)}
-            ${this.timeSpecificity === TIME_UNIT.MINUTE || this.timeSpecificity === TIME_UNIT.HOUR
-              ? nothing
-              : this.generateTimeBox(TIME_UNIT.SECOND)}
-            ${this.finalTwentyFourFormat ? nothing : this.generateAmPmComboBox()}
-          </div>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-timepicker": TimePicker.ELEMENT;
-  }
-}

package/src/components/timepicker/scss/module.scss

@@ -1,9 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/core";
-
-@import "./settings";
-@import "./timepicker";

package/src/components/timepicker/scss/settings.scss

@@ -1,8 +0,0 @@
-$time-box-width: rem-calc(40);
-$time-box-height: rem-calc(32);
-$am-pm-combobox-width: rem-calc(48);
-$am-pm-combobox-left-margin: rem-calc(8);
-$am-pm-combobox-side-padding: rem-calc(7);
-$am-pm-combobox-dropdown-max-height: rem-calc(80);
-$colon-side-margin: rem-calc(4);
-$colon-separator-font-size: rem-calc(20);

package/src/components/timepicker/scss/timepicker.scss

@@ -1,64 +0,0 @@
-
-
-.md-timepicker {
-  padding-right: $am-pm-combobox-width;
-  width: fit-content;
-
-  &.twenty-four-hour-format {
-    padding-right: 0;
-  }
-
-  .time-input-box {
-    display: inline-block;
-    height: $time-box-height;
-    width: $time-box-width;
-  }
-
-  .amPm-combo-box {
-    display: inline-block;
-    height: $time-box-height;
-    margin-left: $am-pm-combobox-left-margin;
-    position: absolute;
-    width: $time-box-width;
-  }
-
-  .amPm-combo-box::part(group) {
-    padding: 0;
-  }
-
-  .amPm-combo-box::part(multiwrap-input) {
-    text-align: center;
-    text-transform: uppercase;
-    width: 100%;
-  }
-
-  .amPm-combo-box::part(label) {
-    padding: 0 $am-pm-combobox-side-padding;
-    width: 100%;
-  }
-
-  .amPm-combo-box::part(combobox-option) {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .amPm-combo-box::part(combobox-options) {
-    max-height: $am-pm-combobox-dropdown-max-height;
-  }
-
-  md-input::part(input) {
-    padding: 0;
-    text-align: center;
-  }
-
-  md-input::part(message) {
-    display: none;
-  }
-
-  .colon-separator {
-    color: var(--md-secondary-text-color, $md-gray-70);
-    font-size: $colon-separator-font-size;
-    line-height: 125%;
-    margin: 0 $colon-side-margin;
-  }
-}

package/src/components/toggle-switch/ToggleSwitch.stories.ts

@@ -1,43 +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/toggle-switch/ToggleSwitch";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Toggle Switch",
-  component: "md-toggle-switch",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    toggleSwitchClassMap: { table: { disable: true } },
-    autofocus: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-toggle-switch"
-    }
-  }
-};
-
-export const ToggleSwitch = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const checked = boolean("Checked", false);
-  const disabled = boolean("Disabled", false);
-  const smaller = boolean("Smaller", false);
-
-  return html`
-  <md-theme class="theme-toggle" id="toggle" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-    <md-toggle-switch htmlId="toggleSwitch" ?checked=${checked} ?disabled=${disabled} .smaller=${smaller}> Label Toggle Switch </md-toggle-switch>
-  </md-theme>
-  `;
-};
-

package/src/components/toggle-switch/ToggleSwitch.test.ts

@@ -1,60 +0,0 @@
-import "./ToggleSwitch";
-import { ToggleSwitch } from "./ToggleSwitch";
-import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-
-describe("Toggle Switch Component", () => {
-  let element: ToggleSwitch.ELEMENT;
-
-  beforeEach(async () => {
-    element = await fixture<ToggleSwitch.ELEMENT>(
-      html`
-        <md-toggle-switch></md-toggle-switch>
-      `
-    );
-  });
-  afterEach(fixtureCleanup);
-  test("shouldn't toggle if disabled property provided", async () => {
-    element.disabled = true;
-    await elementUpdated(element);
-    expect(element.checked).toBeFalsy();
-  });
-  test("should apply correct tabindex", async () => {
-    const input = element.shadowRoot!.querySelector(".md-toggle-switch__input") as HTMLInputElement;
-    expect(input.tabIndex).toBe(0);
-    element.disabled = true;
-    await elementUpdated(element);
-    expect(input.tabIndex).toBe(-1);
-  });
-
-  test("should add class on different sizes", async () => {
-    const div = element.shadowRoot!.querySelector(".md-toggle-switch") as HTMLInputElement;
-    element.small = true;
-    await elementUpdated(element);
-
-    expect(div.classList.contains("md-toggle-switch--small")).toBeTruthy();
-
-    element.smaller = true;
-    element.small = false;
-    await elementUpdated(element);
-
-    expect(div.classList.contains("md-toggle-switch--smaller")).toBeTruthy();
-    expect(div.classList.contains("md-toggle-switch--small")).toBeFalsy();
-  });
-
-  test("should handle click event", async () => {
-    const label = element.shadowRoot!.querySelector(".md-toggle-switch__label") as HTMLLabelElement;
-
-    expect(element.checked).toBeFalsy();
-
-    label.click();
-    expect(element.checked).toBeTruthy();
-
-    element.disabled = true;
-    await elementUpdated(element);
-
-    label.click();
-
-    expect(element.checked).toBeTruthy();
-  });
-});

package/src/components/toggle-switch/ToggleSwitch.ts

@@ -1,73 +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/label/Label";
-import { FocusMixin } from "@/mixins";
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import styles from "./scss/module.scss";
-
-export namespace ToggleSwitch {
-  @customElementWithCheck("md-toggle-switch")
-  export class ELEMENT extends FocusMixin(LitElement) {
-    @property({ type: String }) htmlId = "";
-    @property({ type: String }) label = "toggle";
-    @property({ type: Boolean }) checked = false;
-    @property({ type: Boolean }) disabled = false;
-    @property({ type: Boolean }) small = false;
-    @property({ type: Boolean }) smaller = false;
-    @property({ type: Boolean, reflect: true }) autofocus = false;
-
-    handleClick() {
-      if (!this.disabled) {
-        this.checked = !this.checked;
-      }
-    }
-
-    get toggleSwitchClassMap() {
-      return {
-        "md-toggle-switch--small": this.small,
-        "md-toggle-switch--smaller": this.smaller
-      };
-    }
-
-    render() {
-      return html`
-        <div
-          class="md-input-container md-toggle-switch  ${classMap(this.toggleSwitchClassMap)}"
-          @click=${this.handleClick}
-        >
-          <input
-            type="checkbox"
-            class="md-toggle-switch__input"
-            aria-label="${this.label}"
-            .id=${this.htmlId}
-            ?checked=${this.checked}
-            ?disabled=${this.disabled}
-            ?autofocus=${this.autofocus}
-            tabindex=${this.disabled ? -1 : 0}
-          />
-          <md-label .htmlFor=${this.htmlId} class="md-toggle-switch__label">
-            <span class="md-toggle-switch__label__container"></span>
-            <slot></slot>
-          </md-label>
-        </div>
-      `;
-    }
-    static get styles() {
-      return [reset, styles];
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-toggle-switch": ToggleSwitch.ELEMENT;
-  }
-}