@momentum-ui/web-components 2.5.7 → 2.5.8

package/src/components/datepicker/DatePicker.stories.ts

@@ -1,56 +0,0 @@
-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";
-import { DatePicker as DP } from "./DatePicker"; // Keep type import as a relative path
-
-export default {
-  title: "Components/Date Picker",
-  component: "md-datepicker",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-datepicker"
-    }
-  }
-};
-
-export const DatePicker = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const shouldCloseOnSelect = boolean("shouldCloseOnSelect", false);
-  const weekStart = select("weekStart", DP.weekStartDays, "");
-  const locale = text("locale", "en-US");
-  const disabled = boolean("disabled", false);
-
-  const minDate = text(
-    "minimum date",
-    now()
-      .minus({ day: 5 })
-      .toISODate()
-  );
-
-  const maxDate = text(
-    "maximum date",
-    now()
-      .plus({ day: 30 })
-      .toISODate()
-  );
-
-  const value = text("value", now().toISODate());
-
-  return html`
-    <md-theme class="theme-toggle" id="datepicker" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-datepicker
-        ?disabled=${disabled}
-        ?should-close-on-select=${shouldCloseOnSelect}
-        value=${value}
-        weekStart=${weekStart}
-        locale=${locale}
-        minDate=${minDate}
-        maxDate=${maxDate}
-      >
-      </md-datepicker>
-    </md-theme>
-  `;
-};

package/src/components/datepicker/DatePicker.test.ts

@@ -1,101 +0,0 @@
-import { now } from "@/utils/dateUtils";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { DateTime } from "luxon";
-import "./DatePicker";
-import { DatePicker } from "./DatePicker";
-import "../button/Button"
-
-const keyNavEvent = (key: KeyboardEvent["code"], date: DateTime): CustomEvent => {
-  return new CustomEvent("day-key-event", {
-    detail: {
-      date: date,
-      sourceEvent: new KeyboardEvent("keydown", { code: key })
-    }
-  });
-};
-
-describe("DatePicker Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render", async () => {
-    const el: DatePicker.ELEMENT = await fixture(
-      html`
-        <md-datepicker></md-datepicker>
-      `
-    );
-    expect(el).not.toBeNull();
-  });
-  test("should handle date selection update", async () => {
-    const firstDate = DateTime.fromObject({ month: 11, day: 15 });
-    const secondDate = firstDate.plus({ days: 2 });
-    const el: DatePicker.ELEMENT = await fixture(
-      html`
-        <md-datepicker .selectedDate=${firstDate}></md-datepicker>
-      `
-    );
-    const event = new CustomEvent("day-select", {
-      detail: {
-        date: secondDate
-      }
-    });
-    const selectFunc = jest.spyOn(el, "handleSelect");
-    el.handleSelect(event);
-    expect(selectFunc).toHaveBeenCalled();
-    expect(el.selectedDate).toEqual(secondDate);
-  });
-
-  test("should navigate focus with keydown events", async () => {
-    const startDate = now();
-    const el: DatePicker.ELEMENT = await fixture(
-      html`
-        <md-datepicker .focusedDate=${startDate}></md-datepicker>
-      `
-    );
-    const selectionFunc = jest.spyOn(el, "handleSelect");
-    const navLeft = keyNavEvent("ArrowLeft", startDate);
-    el.handleKeyDown(navLeft);
-    await elementUpdated(el);
-    expect(el.focusedDate.ordinal).toEqual(startDate.ordinal - 1);
-    const navRight = keyNavEvent("ArrowRight", startDate);
-    el.handleKeyDown(navRight);
-    await elementUpdated(el);
-    expect(el.focusedDate.ordinal).toEqual(startDate.ordinal);
-    const navUp = keyNavEvent("ArrowUp", startDate);
-    el.handleKeyDown(navUp);
-    await elementUpdated(el);
-    expect(el.focusedDate.ordinal).toEqual(startDate.ordinal - 7);
-    const navDown = keyNavEvent("ArrowDown", startDate);
-    el.handleKeyDown(navDown);
-    await elementUpdated(el);
-    expect(el.focusedDate.ordinal).toEqual(startDate.ordinal);
-  });
-  test("should select date with keydown events", async () => {
-    const startDate = now();
-    const el: DatePicker.ELEMENT = await fixture(
-      html`
-        <md-datepicker .focusedDate=${startDate}></md-datepicker>
-      `
-    );
-    const selectionFunc = jest.spyOn(el, "handleSelect");
-    const enterSelect = keyNavEvent("Enter", startDate);
-    el.handleKeyDown(enterSelect);
-    await el.updateComplete;
-    expect(selectionFunc).toHaveBeenCalled();
-    const spaceSelect = keyNavEvent("Space", startDate);
-    el.handleKeyDown(spaceSelect);
-    await el.updateComplete;
-    expect(selectionFunc).toHaveBeenCalled();
-  });
-
-  test("should render with custom date trigger", async () => {
-    const el: DatePicker.ELEMENT = await fixture(
-      html`
-        <md-datepicker custom-trigger>
-          <md-button slot="date-trigger" variant="primary">Date Trigger</md-button>
-        </md-datepicker>
-      `
-    );
-    expect(el).not.toBeNull();
-  });
-});

package/src/components/datepicker/DatePicker.ts

@@ -1,263 +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/datepicker/datepicker-calendar/DatePickerCalendar";
-import "@/components/input/Input";
-import { Input } from "../input/Input"; // Keep type import as a relative path
-import "@/components/menu-overlay/MenuOverlay";
-import { MenuOverlay } from "../menu-overlay/MenuOverlay"; // Keep type import as a relative path
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { addDays, addWeeks, DayFilters, isDayDisabled, now, subtractDays, subtractWeeks } from "@/utils/dateUtils";
-import { closestElement } from "@/utils/helpers";
-import { ValidationRegex } from "@/utils/validations";
-import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { DateTime } from "luxon";
-import { DateRangePicker } from "../date-range-picker/DateRangePicker";
-
-export namespace DatePicker {
-  export const weekStartDays = ["Sunday", "Monday"];
-
-  @customElementWithCheck("md-datepicker")
-  export class ELEMENT extends LitElement {
-    @property({ type: Boolean, attribute: "should-close-on-select" }) shouldCloseOnSelect = false;
-    @property({ type: String }) maxDate: string | undefined = undefined;
-    @property({ type: String }) minDate: string | undefined = undefined;
-    @property({ type: String, reflect: true }) value: string | undefined = undefined;
-    @property({ type: String }) weekStart: typeof weekStartDays[number] = "Sunday";
-    @property({ type: String, reflect: true }) placeholder: string | undefined = undefined;
-    @property({ type: String }) locale = "en-US";
-    @property({ type: Boolean, reflect: true, attribute: "includes-time" }) includesTime = false;
-    @property({ type: Boolean }) disabled = false;
-    @property({ type: Boolean, attribute: "custom-trigger" }) customTrigger = false;
-
-    @internalProperty() selectedDate: DateTime = now();
-    @internalProperty() focusedDate: DateTime = now();
-    @internalProperty() filterDate: Function | undefined = undefined;
-    @internalProperty() maxDateData: DateTime | undefined = undefined;
-    @internalProperty() minDateData: DateTime | undefined = undefined;
-
-    @query("md-menu-overlay") menuOverlay!: MenuOverlay.ELEMENT;
-
-    connectedCallback() {
-      super.connectedCallback();
-      if (this.minDate) {
-        this.minDateData = DateTime.fromISO(this.minDate, { locale: this.locale });
-      }
-      if (this.maxDate) {
-        this.maxDateData = DateTime.fromISO(this.maxDate, { locale: this.locale });
-      }
-    }
-
-    async firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-
-      if (!this.value) {
-        this.value = this.includesTime
-          ? this.selectedDate?.startOf("second").toISO({ suppressMilliseconds: true })
-          : this.selectedDate?.toISODate();
-      }
-    }
-
-    updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (this.value && changedProperties.has("value")) {
-        if (closestElement("md-date-range-picker", this)) {
-          return;
-        }
-        this.selectedDate = DateTime.fromISO(this.value, { locale: this.locale });
-        this.setPreSelection(this.selectedDate);
-      }
-      if (changedProperties.has("locale")) {
-        this.render();
-      }
-      if (this.minDate && changedProperties.has("minDate")) {
-        this.minDateData = DateTime.fromISO(this.minDate, { locale: this.locale });
-      }
-      if (this.maxDate && changedProperties.has("maxDate")) {
-        this.maxDateData = DateTime.fromISO(this.maxDate, { locale: this.locale });
-      }
-    }
-
-    handleDateInputChange = (event: CustomEvent) => {
-      if (event?.detail?.value) {
-        this.value = event?.detail?.value;
-      }
-
-      this.dispatchEvent(
-        new CustomEvent("date-input-change", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            sourceEvent: event,
-            value: this.value
-          }
-        })
-      );
-    };
-
-    setOpen = (open: boolean) => {
-      this.menuOverlay.isOpen = open;
-    };
-
-    handleSelect = (e: CustomEvent) => {
-      const date = e.detail.date;
-      const event = e.detail.sourceEvent;
-      this.setPreSelection(date);
-      this.setSelected(date, event);
-      this.shouldCloseOnSelect && this.setOpen(false);
-    };
-
-    setSelected = (date: DateTime, event: Event) => {
-      const filters: DayFilters = { maxDate: this.maxDateData, minDate: this.minDateData, filterDate: this.filterDate };
-      if (!isDayDisabled(date, filters)) {
-        const dateString = this.includesTime
-          ? date.startOf("second").toISO({ suppressMilliseconds: true })
-          : date.toISODate();
-        this.selectedDate = date;
-        this.value = dateString;
-      }
-      this.dispatchEvent(
-        new CustomEvent("date-selection-change", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            sourceEvent: event,
-            data: date
-          }
-        })
-      );
-    };
-
-    setPreSelection = (date: DateTime) => {
-      const filters: DayFilters = { maxDate: this.maxDateData, minDate: this.minDateData, filterDate: this.filterDate };
-      if (!isDayDisabled(date, filters)) {
-        this.focusedDate = date;
-      }
-    };
-
-    handleKeyDown = (e: CustomEvent) => {
-      const event = e.detail.sourceEvent;
-      let flag = false;
-      const copy = this.focusedDate;
-
-      switch (!event.shiftKey && event.code) {
-        case "Space":
-        case "Enter":
-          this.handleSelect(e);
-          flag = true;
-          break;
-
-        case "Escape":
-          this.setOpen(false);
-          break;
-        case "ArrowUp":
-          this.setPreSelection(subtractWeeks(copy, 1));
-          flag = true;
-          break;
-        case "ArrowLeft":
-          this.setPreSelection(subtractDays(copy, 1));
-          flag = true;
-          break;
-
-        case "ArrowRight":
-          this.setPreSelection(addDays(copy, 1));
-          flag = true;
-          break;
-
-        case "ArrowDown":
-          this.setPreSelection(addWeeks(copy, 1));
-          flag = true;
-          break;
-
-        default:
-          break;
-      }
-
-      if (flag) {
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    };
-
-    chosenDateLabel = () => {
-      return this.selectedDate
-        ? `, Selected date is ${this.selectedDate.weekdayLong} ${this.selectedDate.monthLong} ${this.selectedDate.day}, ${this.selectedDate.year}`
-        : undefined;
-    };
-
-    isValueValid = () => {
-      const dateRangePicker = closestElement("md-date-range-picker", this) as DateRangePicker.ELEMENT;
-      const regexString =
-        dateRangePicker && dateRangePicker.startDate && dateRangePicker.endDate
-          ? ValidationRegex.dateRangeString
-          : this.includesTime
-          ? ValidationRegex.ISOString
-          : ValidationRegex.ISODateString;
-      const regex = RegExp(regexString);
-
-      const filters: DayFilters = { maxDate: this.maxDateData, minDate: this.minDateData, filterDate: this.filterDate };
-      const isValid =
-        this.value &&
-        regex.test(this.value) &&
-        !isDayDisabled(DateTime.fromISO(this.value, { locale: this.locale }), filters);
-
-      return isValid;
-    };
-
-    render() {
-      return html`
-        <md-menu-overlay custom-width="248px" ?disabled=${this.disabled}>
-          ${this.customTrigger
-            ? html`
-                <span slot="menu-trigger">
-                  <slot name="date-trigger"></slot>
-                </span>
-              `
-            : html`
-                <md-input
-                  class="date-input"
-                  slot="menu-trigger"
-                  placeholder=${this.includesTime ? ifDefined(this.placeholder) : "YYYY-MM-DD"}
-                  value=${ifDefined(this.value)}
-                  aria-label=${`Choose Date` + this.chosenDateLabel()}
-                  auxiliaryContentPosition="before"
-                  @input-change="${(e: CustomEvent) => this.handleDateInputChange(e)}"
-                  hide-message
-                  ?disabled=${this.disabled}
-                  .messageArr=${[{ message: "", type: this.isValueValid() ? "" : "error" } as Input.Message]}
-                >
-                  <md-icon slot="input-section" name="calendar-month_16"></md-icon>
-                </md-input>
-              `}
-
-          <div class="date-overlay-content">
-            <md-datepicker-calendar
-              @day-select=${(e: CustomEvent) => this.handleSelect(e)}
-              @day-key-event=${(e: CustomEvent) => this.handleKeyDown(e)}
-              .datePickerProps=${{
-                locale: this.locale,
-                selected: this.selectedDate,
-                focused: this.focusedDate,
-                weekStart: this.weekStart
-              }}
-              .filterParams=${{ minDate: this.minDateData, maxDate: this.maxDateData, filterDate: this.filterDate }}
-            ></md-datepicker-calendar>
-            <slot name="time-picker"></slot>
-          </div>
-        </md-menu-overlay>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-datepicker": DatePicker.ELEMENT;
-  }
-}

package/src/components/datepicker/datepicker-calendar/DatePickerCalendar.test.ts

@@ -1,51 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./DatePickerCalendar";
-import { DatePickerCalendar } from "./DatePickerCalendar";
-
-describe("DatePickerCalendar Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render", async () => {
-    const el: DatePickerCalendar.ELEMENT = await fixture(
-      html`
-        <md-datepicker-calendar></md-datepicker-calendar>
-      `
-    );
-    expect(el).not.toBeNull();
-  });
-  // test("should handle date selection update", async () => {
-  //   const firstDate = now();
-  //   const secondDate = now().plus({ days: 2 });
-  //   const el: DatePickerCalendar = await fixture(
-  //     html`
-  //       <md-datepicker-calendar .selected=${firstDate}></md-datepicker-calendar>
-  //     `
-  //   );
-  //   const event = new CustomEvent("day-select", {
-  //     detail: {
-  //       date: secondDate
-  //     }
-  //   });
-  //   const selectFunc = jest.spyOn(el, "handleDaySelect");
-  //   el.handleDaySelect(event);
-  //   expect(selectFunc).toHaveBeenCalled();
-  //   expect(el.selected).toEqual(secondDate);
-  // });
-  test("should update view anchor date when changing months", async () => {
-    const el: DatePickerCalendar.ELEMENT = await fixture(
-      html`
-        <md-datepicker-calendar></md-datepicker-calendar>
-      `
-    );
-    const event = new MouseEvent("click");
-    const setDateFunc = jest.spyOn(el, "setDate");
-
-    const nextMonthButton = el.shadowRoot?.querySelector("[aria-label^='next month']");
-    const prevMonthButton = el.shadowRoot?.querySelector("[aria-label^='previous month']");
-    nextMonthButton?.dispatchEvent(event);
-    prevMonthButton?.dispatchEvent(event);
-
-    expect(setDateFunc).toHaveBeenCalledTimes(2);
-  });
-});

package/src/components/datepicker/datepicker-calendar/DatePickerCalendar.ts

@@ -1,175 +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/datepicker/datepicker-month/DatePickerMonth";
-import "@/components/icon/Icon";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import {
-  addDays,
-  addMonths,
-  getLocaleData,
-  getStartOfWeek,
-  getWeekdayNameInLocale,
-  localizeDate,
-  now,
-  shouldNextMonthDisable,
-  shouldPrevMonthDisable,
-  subtractMonths
-} from "@/utils/dateUtils";
-import { DatePickerProps, DayFilters } from "../../../utils/dateUtils"; // Keep type import as a relative path
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property, PropertyValues, TemplateResult } from "lit-element";
-import { DateTime } from "luxon";
-import styles from "../scss/module.scss";
-
-export namespace DatePickerCalendar {
-  @customElementWithCheck("md-datepicker-calendar")
-  export class ELEMENT extends LitElement {
-    @property({ attribute: false }) monthFormat = "MMMM yyyy";
-    @property({ attribute: false }) filterParams: DayFilters | undefined = undefined;
-    @property({ attribute: false }) handleMonthChange: Function | undefined = undefined;
-    @property({ attribute: false }) datePickerProps: DatePickerProps | undefined = undefined;
-
-    @internalProperty() viewAnchorDate: DateTime = now();
-    @internalProperty() localeMonth: string | undefined = undefined;
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.viewAnchorDate = this.datePickerProps?.focused || this.datePickerProps?.selected || now();
-      this.localeMonth = localizeDate(this.viewAnchorDate, this.datePickerProps?.locale || "en").toFormat(
-        this.monthFormat
-      );
-    }
-
-    updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("datePickerProps") || changedProperties.has("viewAnchorDate")) {
-        this.localeMonth = localizeDate(this.viewAnchorDate, this.datePickerProps?.locale || "en").toFormat(
-          this.monthFormat
-        );
-      }
-    }
-
-    setDate = (date: DateTime, cb?: Function) => {
-      this.viewAnchorDate = date;
-      cb && cb();
-    };
-
-    increaseMonth = (event: MouseEvent) => {
-      const { handleMonthChange } = this;
-      const { viewAnchorDate: date } = this;
-      this.setDate(addMonths(date, 1), () => handleMonthChange && handleMonthChange(event, this.viewAnchorDate));
-    };
-
-    decreaseMonth = (event: MouseEvent) => {
-      const { handleMonthChange } = this;
-      const { viewAnchorDate: date } = this;
-      this.setDate(subtractMonths(date, 1), () => handleMonthChange && handleMonthChange(event, this.viewAnchorDate));
-    };
-
-    renderMonthName = () => {
-      return html`
-        <div class="md-datepicker__navigation--current-month" aria-live="polite">
-          ${this.localeMonth}
-        </div>
-      `;
-    };
-
-    renderPreviousMonthButton = () => {
-      const allPrevDaysDisabled =
-        this.filterParams?.minDate && shouldPrevMonthDisable(this.viewAnchorDate, this.filterParams?.minDate);
-      return html`
-        <md-button
-          aria-controls="Datepicker-Calendar"
-          aria-label=${`previous month`}
-          title=${`previous month`}
-          ?disabled=${allPrevDaysDisabled}
-          @click=${!allPrevDaysDisabled && this.decreaseMonth}
-          tabindex="-1"
-          hasRemoveStyle
-        >
-          <md-icon name="arrow-left_16"></md-icon>
-        </md-button>
-      `;
-    };
-    renderNextMonthButton = () => {
-      const allNextDaysDisabled =
-        this.filterParams?.maxDate && shouldNextMonthDisable(this.viewAnchorDate, this.filterParams?.maxDate);
-      return html`
-        <md-button
-          aria-controls="Datepicker-Calendar"
-          aria-label=${`next month`}
-          title=${`next month`}
-          ?disabled=${allNextDaysDisabled}
-          @click=${!allNextDaysDisabled && this.increaseMonth}
-          tabindex="-1"
-          hasRemoveStyle
-          ><md-icon name="arrow-right_16"></md-icon>
-        </md-button>
-      `;
-    };
-
-    header = () => {
-      const startOfWeek = getStartOfWeek(this.viewAnchorDate, this.datePickerProps?.weekStart);
-      const dayNames: TemplateResult[] = [];
-      return dayNames.concat(
-        [0, 1, 2, 3, 4, 5, 6].map(offset => {
-          const day = addDays(localizeDate(startOfWeek, this.datePickerProps?.locale || "en"), offset);
-          const localeData = getLocaleData(day);
-          const weekDayName = getWeekdayNameInLocale(localeData, day);
-          return html`
-            <div class="md-datepicker__day--name">
-              ${weekDayName}
-            </div>
-          `;
-        })
-      );
-    };
-
-    renderMonth = () => {
-      return html`
-        <div class="md-datepicker__month-container">
-          <div class="md-datepicker__header">
-            <div class="md-datepicker__navigation">
-              ${this.renderMonthName()}
-              <div class="md-datepicker__navigation--buttons">
-                ${this.renderPreviousMonthButton()} ${this.renderNextMonthButton()}
-              </div>
-            </div>
-            <div class="md-datepicker__day--names">
-              ${this.header()}
-            </div>
-          </div>
-          <md-datepicker-month
-            .day=${this.viewAnchorDate}
-            .filterParams=${this.filterParams}
-            .datePickerProps=${this.datePickerProps}
-          ></md-datepicker-month>
-        </div>
-      `;
-    };
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html`
-        <div class="md-datepicker__calendar" id="Datepicker-Calendar">
-          ${this.viewAnchorDate && this.renderMonth()}
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-datepicker-calendar": DatePickerCalendar.ELEMENT;
-  }
-}