@momentum-ui/web-components 2.5.7 → 2.5.8

package/src/components/date-range-picker/DateRangePicker.test.ts

@@ -1,184 +0,0 @@
-import { now } from "@/utils/dateUtils";
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { DateTime } from "luxon";
-import "./DateRangePicker";
-import { DateRangePicker } from "./DateRangePicker";
-
-const fixtureFactory = async (): Promise<DateRangePicker.ELEMENT> => {
-  return await fixture(html`
-    <md-date-range-picker></md-date-range-picker>
-  `);
-};
-
-describe("DatePicker Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render", async () => {
-    const el: DateRangePicker.ELEMENT = await fixtureFactory();
-    expect(el).not.toBeNull();
-  });
-  test("should return a SQL formatted date string", async () => {
-    const el: DateRangePicker.ELEMENT = await fixture(
-      html`
-        <md-date-range-picker></md-date-range-picker>
-      `
-    );
-    const date = now();
-    const formatted = date.toSQLDate();
-    expect(el.dateToSqlTranslate(date)).toEqual(formatted);
-  });
-  test("should format a SQL date string with slashes instead of dashes", async () => {
-    const el: DateRangePicker.ELEMENT = await fixtureFactory();
-    const date = "2021-12-12";
-    const formatted = "2021/12/12";
-    expect(el.sqlDateToSlashes(date)).toEqual(formatted);
-  });
-  test("should handle date selection and value update", async () => {
-    const firstDate = DateTime.fromObject({ month: 11, day: 15 });
-    const secondDate = firstDate.plus({ days: 5 });
-    const el: DateRangePicker.ELEMENT = await fixture(
-      html`
-        <md-date-range-picker></md-date-range-picker>
-      `
-    );
-    const firstSelect = new CustomEvent("day-select", {
-      detail: {
-        date: firstDate
-      }
-    });
-    const secondSelect = new CustomEvent("day-select", {
-      detail: {
-        date: secondDate
-      }
-    });
-    const initialValue = el.value;
-    const selectFunc = jest.spyOn(el, "handleDateSelection");
-    const updateFunc = jest.spyOn(el, "updateValue");
-    el.handleSelect(firstSelect);
-    expect(selectFunc).toHaveBeenCalled();
-    expect(updateFunc).toHaveBeenCalled();
-    el.handleSelect(secondSelect);
-    expect(selectFunc).toHaveBeenCalled();
-    expect(updateFunc).toHaveBeenCalled();
-    expect(el.value?.length).toBeGreaterThan(initialValue!.length);
-  });
-  test("should correctly assign start/end values if use enters in reverse order", async () => {
-    const firstDate = DateTime.fromObject({ month: 11, day: 15 });
-    const secondDate = firstDate.minus({ days: 5 });
-    const el: DateRangePicker.ELEMENT = await fixtureFactory();
-    const firstSelect = new CustomEvent("day-select", {
-      detail: {
-        date: firstDate
-      }
-    });
-    const secondSelect = new CustomEvent("day-select", {
-      detail: {
-        date: secondDate
-      }
-    });
-    el.handleSelect(firstSelect);
-    el.handleSelect(secondSelect);
-    expect(el.startDate).toEqual(secondDate.toSQLDate());
-    expect(el.endDate).toEqual(firstDate.toSQLDate());
-  });
-  describe("should handle range modification scenarios", () => {
-    const startDate = DateTime.fromObject({ month: 11, day: 15 });
-    const endDate = startDate.plus({ days: 5 });
-
-    test("select date outside of and before existing range", async () => {
-      const el = await fixtureFactory();
-      const firstSelect = new CustomEvent("day-select", {
-        detail: {
-          date: startDate
-        }
-      });
-      const secondSelect = new CustomEvent("day-select", {
-        detail: {
-          date: endDate
-        }
-      });
-      const sqlConvertFunc = jest.spyOn(el, "dateToSqlTranslate");
-      el.handleSelect(firstSelect);
-      el.handleSelect(secondSelect);
-      const additionalSelect = new CustomEvent("day-select", {
-        detail: {
-          date: startDate.minus({ days: 1 })
-        }
-      });
-      el.handleSelect(additionalSelect);
-      const dateObj = DateTime.fromSQL(el.startDate!);
-      expect(dateObj.ordinal).toBeLessThan(startDate.ordinal);
-      expect(sqlConvertFunc).toHaveBeenCalled();
-    });
-    test("select date outside of and after existing range", async () => {
-      const el = await fixtureFactory();
-      const firstSelect = new CustomEvent("day-select", {
-        detail: {
-          date: startDate
-        }
-      });
-      const secondSelect = new CustomEvent("day-select", {
-        detail: {
-          date: endDate
-        }
-      });
-      el.handleSelect(firstSelect);
-      el.handleSelect(secondSelect);
-      const additionalSelect = new CustomEvent("day-select", {
-        detail: {
-          date: endDate.plus({ days: 1 })
-        }
-      });
-      el.handleSelect(additionalSelect);
-      const dateObj = DateTime.fromSQL(el.endDate!);
-      expect(dateObj.ordinal).toBeGreaterThan(endDate.ordinal);
-    });
-    test("select date inside of and closer to start date", async () => {
-      const el = await fixtureFactory();
-      const firstSelect = new CustomEvent("day-select", {
-        detail: {
-          date: startDate
-        }
-      });
-      const secondSelect = new CustomEvent("day-select", {
-        detail: {
-          date: endDate
-        }
-      });
-      el.handleSelect(firstSelect);
-      el.handleSelect(secondSelect);
-      const additionalSelect = new CustomEvent("day-select", {
-        detail: {
-          date: startDate.plus({ days: 2 })
-        }
-      });
-      el.handleSelect(additionalSelect);
-      const dateObj = DateTime.fromSQL(el.startDate!);
-      expect(dateObj.ordinal).toBeGreaterThan(startDate.ordinal);
-    });
-    test("select date inside of and closer to end date", async () => {
-      const el = await fixtureFactory();
-      const firstSelect = new CustomEvent("day-select", {
-        detail: {
-          date: startDate
-        }
-      });
-      const secondSelect = new CustomEvent("day-select", {
-        detail: {
-          date: endDate
-        }
-      });
-      el.handleSelect(firstSelect);
-      el.handleSelect(secondSelect);
-      const additionalSelect = new CustomEvent("day-select", {
-        detail: {
-          date: endDate.minus({ days: 2 })
-        }
-      });
-      el.handleSelect(additionalSelect);
-      const dateObj = DateTime.fromSQL(el.endDate!);
-      expect(dateObj.ordinal).toBeLessThan(endDate.ordinal);
-    });
-  });
-});

package/src/components/date-range-picker/DateRangePicker.ts

@@ -1,92 +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 { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { property } from "lit-element";
-import { DateTime } from "luxon";
-import "../datepicker/DatePicker";
-import { DatePicker } from "../datepicker/DatePicker";
-
-export namespace DateRangePicker {
-  @customElementWithCheck("md-date-range-picker")
-  export class ELEMENT extends DatePicker.ELEMENT {
-    @property({ type: String, attribute: "start-date", reflect: true }) startDate: string | undefined = undefined;
-    @property({ type: String, attribute: "end-date", reflect: true }) endDate: string | undefined = undefined;
-
-    connectedCallback() {
-      super.connectedCallback();
-      super.render();
-      this.addEventListener("date-selection-change", e => {
-        return this.handleDateSelection(e as CustomEvent);
-      });
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      this.removeEventListener("date-selection-change", () => {});
-    }
-
-    updateValue = () => {
-      if (this.startDate && this.endDate) {
-        this.value = `${this.sqlDateToSlashes(this.startDate)} - ${this.sqlDateToSlashes(this.endDate)}`;
-      }
-    };
-
-    dateToSqlTranslate(date: DateTime) {
-      return date.toSQLDate();
-    }
-
-    sqlDateToSlashes(date: string) {
-      return date.replace(/-+/g, "/");
-    }
-
-    handleDateSelection = (e: CustomEvent) => {
-      const selection: DateTime = e.detail.data;
-      if (this.startDate && this.endDate) {
-        const startObj = DateTime.fromSQL(this.startDate);
-        const endObj = DateTime.fromSQL(this.endDate);
-        if (selection < startObj || selection > endObj) {
-          if (selection < startObj) {
-            // scenario 1 : date is outside, before current start
-            this.startDate = this.dateToSqlTranslate(selection);
-          } else {
-            // scenario 2 : date is outside, after current end
-            this.endDate = this.dateToSqlTranslate(selection);
-          }
-        } else {
-          // @ts-ignore DateTime allows this comparison operation
-          if (Math.abs(selection - endObj) < Math.abs(selection - startObj)) {
-            // scenario 3 : date is inside, closer to end
-            this.endDate = this.dateToSqlTranslate(selection);
-          } else {
-            // scenario 4 : date is inside, closer to start
-            this.startDate = this.dateToSqlTranslate(selection);
-          }
-        }
-      } else if (this.startDate) {
-        const existing = DateTime.fromSQL(this.startDate);
-        if (selection > existing) {
-          this.endDate = this.dateToSqlTranslate(selection);
-        } else {
-          this.endDate = this.startDate;
-          this.startDate = this.dateToSqlTranslate(selection);
-        }
-      } else {
-        this.startDate = this.dateToSqlTranslate(e.detail.data);
-      }
-      this.updateValue();
-    };
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-date-range-picker": DateRangePicker.ELEMENT;
-  }
-}

package/src/components/date-range-picker/tokens/lm-date-range-picker-tokens.js

@@ -1,26 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const datepicker = {
-  prefix: "lm",
-  component: "datepicker",
-  default: {
-    hover: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  selected: {
-    today: {
-      "text-color": {
-        light: colors.white[100].name,
-        dark: colors.gray["05"].name
-      }
-    }
-  }
-};
-
-module.exports = datepicker;

package/src/components/date-range-picker/tokens/md-date-range-picker-tokens.js

@@ -1,26 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const datepicker = {
-  prefix: "md",
-  component: "datepicker",
-  default: {
-    hover: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  selected: {
-    today: {
-      "text-color": {
-        light: colors.white[100].name,
-        dark: colors.gray["05"].name
-      }
-    }
-  }
-};
-
-module.exports = datepicker;

package/src/components/date-time-picker/DateTimePicker.stories.ts

@@ -1,73 +0,0 @@
-import "@/components/date-time-picker/DateTimePicker";
-import { DatePicker } from "../datepicker/DatePicker"; // Keep type import as a relative path
-import { timeSpecificity } from "../timepicker/TimePicker"; // Keep type import as a relative path
-import { TIME_UNIT } from "@/constants";
-import { now } from "@/utils/dateUtils";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Date Time Picker",
-  component: "md-date-time-picker",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-date-time-picker"
-    }
-  }
-};
-
-export const DateTimePicker = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const weekStart = select("weekStart", DatePicker.weekStartDays, "");
-  const twoDigitAutoTab = boolean("twoDigitAutoTab", false);
-  const twentyFourHourFormat = boolean("twentyFourHourFormat", false);
-  const theTimeSpecificity = select("timeSpecificity", timeSpecificity, TIME_UNIT.SECOND);
-  const locale = text("locale", "en-US");
-  const disabled = boolean("disabled", false);
-
-  const value = text(
-    "value",
-    now()
-      .set({
-        hour: 0,
-        minute: 0,
-        second: 0,
-        millisecond: 0
-      })
-      .toISO({ suppressMilliseconds: true })
-  );
-
-  const minDate = text(
-    "minimum date",
-    now()
-      .minus({ day: 5 })
-      .toISODate()
-  );
-
-  const maxDate = text(
-    "maximum date",
-    now()
-      .plus({ day: 30 })
-      .toISODate()
-  );
-
-  return html`
-    <md-theme class="theme-toggle" id="datetimepicker" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-date-time-picker
-        ?disabled=${disabled}
-        value=${value}
-        minDate=${minDate}
-        maxDate=${maxDate}
-        locale=${locale}
-        weekStart=${weekStart}
-        ?two-digit-auto-tab=${twoDigitAutoTab}
-        ?twenty-four-hour-format=${twentyFourHourFormat}
-        timeSpecificity=${theTimeSpecificity}
-      >
-      </md-date-time-picker>
-    </md-theme>
-  `;
-};

package/src/components/date-time-picker/DateTimePicker.test.ts

@@ -1,43 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { Settings } from "luxon";
-import { DateTimePicker } from "./DateTimePicker";
-import { now } from "@/utils/dateUtils";
-import "./DateTimePicker";
-
-describe("DateTimePicker Component", () => {
-  beforeEach(() => {
-    Settings.defaultLocale = "en-US";
-  });
-
-  afterEach(() => {
-    fixtureCleanup();
-  });
-
-  test("should render", async () => {
-    const el: DateTimePicker.ELEMENT = await fixture(
-      html`
-        <md-date-time-picker></md-date-time-picker>>
-      `
-    );
-
-    expect(el).not.toBeNull();
-  });
-
-  test("should render with default date and time", async () => {
-    const el: DateTimePicker.ELEMENT = await fixture(
-      html`
-        <md-date-time-picker></md-date-time-picker>>
-      `
-    );
-
-    let defaultToday = now();
-    defaultToday = defaultToday.set({
-      hour: 0,
-      minute: 0,
-      second: 0,
-      millisecond: 0
-    });
-
-    expect(el.value).not.toBeNull();
-  });
-});

package/src/components/date-time-picker/DateTimePicker.ts

@@ -1,175 +0,0 @@
-import "@/components/input/Input";
-import "@/components/menu-overlay/MenuOverlay";
-import { TIME_UNIT } from "../../constants"; // Keep type import as a relative path
-import { now } from "@/utils/dateUtils";
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { DateTime } from "luxon";
-import { DatePicker } from "../datepicker/DatePicker";
-import { TimePicker } from "../timepicker/TimePicker";
-import styles from "./scss/module.scss";
-
-export namespace DateTimePicker {
-  export const weekStartDays = ["Sunday", "Monday"];
-
-  @customElementWithCheck("md-date-time-picker")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) maxDate: string | undefined = undefined;
-    @property({ type: String }) minDate: string | undefined = undefined;
-    @property({ type: String }) weekStart: typeof weekStartDays[number] = "Sunday";
-
-    @property({ type: Boolean, attribute: "two-digit-auto-tab" }) twoDigitAutoTab = false;
-    @property({ type: Boolean, attribute: "twenty-four-hour-format" }) twentyFourHourFormat = false;
-    @property({ type: String }) timeSpecificity: TimePicker.TimeSpecificity = TIME_UNIT.SECOND;
-
-    @property({ type: String, attribute: "date-value" }) dateValue: string | undefined = undefined;
-    @property({ type: String, attribute: "time-value" }) timeValue = "00:00:00-08:00"; // ISO FORMAT
-    @property({ type: String, reflect: true }) value: string | undefined = undefined;
-
-    @property({ type: String }) locale = "en-US";
-    @property({ type: Boolean }) disabled = false;
-
-    @internalProperty() fullDateTime: DateTime | undefined = undefined;
-    @internalProperty() selectedTimeObject: DateTime | undefined = undefined;
-    @internalProperty() selectedDateObject: DateTime = now();
-
-    firstCycle = true;
-
-    @query("md-datepicker") datePicker!: DatePicker.ELEMENT;
-    @query("md-timepicker") timePicker!: TimePicker.ELEMENT;
-
-    protected async firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      if (!this.value) {
-        const dateString = this.selectedDateObject?.toISODate();
-        this.combineDateAndTimeValues(dateString, this.timeValue);
-      }
-
-      await new Promise(resolve => setTimeout(resolve, 0));
-
-      if (this.datePicker) {
-        this.datePicker.addEventListener("date-selection-change", this.handleDateChange);
-        this.datePicker.addEventListener("date-input-change", this.handleDateTimeInputChange as EventListener);
-      }
-      if (this.timePicker) {
-        this.timePicker.addEventListener("time-selection-change", this.handleTimeChange);
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-
-      if (this.value && changedProperties.has("value")) {
-        this.parseValueForVisuals(this.value);
-        if (!this.firstCycle) {
-          this.updateDateTimeObject();
-        } else {
-          this.firstCycle = false;
-        }
-      }
-
-      if (
-          this.dateValue &&
-          this.timeValue &&
-          (changedProperties.has("timeValue") || changedProperties.has("dateValue"))
-        ) {
-          this.combineDateAndTimeValues(this.dateValue, this.timeValue);
-        }
-
-      if (this.value && changedProperties.has("locale")) {
-        this.fullDateTime = DateTime.fromISO(this.value, { locale: this.locale });
-      }
-    }
-
-    handleDateChange = (event: any) => {
-      this.selectedDateObject = event?.detail?.data as DateTime;
-      this.dateValue = this.selectedDateObject?.toISODate();
-      this.combineDateAndTimeValues(this.dateValue, this.timeValue);
-    };
-
-    handleTimeChange = (event: any) => {
-      this.selectedTimeObject = event?.detail?.data as DateTime;
-      this.timeValue = this.selectedTimeObject?.startOf('second').toISOTime({ suppressMilliseconds: true });
-      this.combineDateAndTimeValues(this.dateValue, this.timeValue);
-    };
-
-    handleDateTimeInputChange = (event: CustomEvent) => {
-      if (event?.detail?.value) {
-        this.value = event?.detail?.value;
-      }
-    };
-
-    parseValueForVisuals = (value: string) => {
-      if (value) {
-        this.dateValue = value.split("T")[0];
-        this.timeValue = value.split("T")[1];
-      }
-    }
-
-    updateDateTimeObject = () => {
-      if (this.value) {
-        this.fullDateTime = DateTime.fromISO(this.value, { locale: this.locale });
-        this.dispatchEvent(
-          new CustomEvent(`date-time-change`, {
-            bubbles: true,
-            composed: true,
-            detail: {
-              dateTimeString: this.value,
-              dateTime: this.fullDateTime,
-              locale: this.locale,
-              twentyFourHourFormat: this.twentyFourHourFormat
-            }
-          })
-        );
-      }
-    };
-
-    combineDateAndTimeValues = (dateString: string | undefined, timeString: string) => {
-      if (dateString) {
-        if (timeString) {
-          this.value = `${dateString}T${timeString}`;
-        } else {
-          this.value = dateString;
-        }
-      }
-    };
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html`
-        <md-datepicker
-          includes-time
-          ?disabled=${this.disabled}
-          minDate=${ifDefined(this.minDate)}
-          maxDate=${ifDefined(this.maxDate)}
-          value=${ifDefined(this.value)}
-          weekStart=${this.weekStart}
-          placeholder="YYYY-MM-DDTHH:MM:SS-HH:MM"
-          locale=${ifDefined(this.locale)}>
-          <div slot="time-picker" class="included-timepicker-wrapper">
-            <md-timepicker
-              ?two-digit-auto-tab=${this.twoDigitAutoTab}
-              ?twenty-four-hour-format=${this.twentyFourHourFormat}
-              timeSpecificity=${this.timeSpecificity}
-              locale=${this.locale}
-              value=${this.timeValue}>
-            </md-timepicker>
-          </div>
-        </md-datepicker>
-      </div>
-    `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-date-time-picker": DateTimePicker.ELEMENT;
-  }
-}

package/src/components/date-time-picker/scss/date-time-picker.scss

@@ -1,7 +0,0 @@
-.included-timepicker-wrapper {
-  border-top: 1px solid var(--md-primary-seperator-color);
-  display: flex;
-  justify-content: center;
-  padding: $time-picker-vertical-padding 0;
-  white-space: nowrap;
-}

package/src/components/date-time-picker/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 "./date-time-picker.scss"

package/src/components/date-time-picker/scss/settings.scss

@@ -1 +0,0 @@
-$time-picker-vertical-padding: rem-calc(16);