@momentum-ui/web-components 2.16.3 → 2.16.5

package/src/components/datepicker/DatePicker.ts

@@ -1,290 +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 "@/components/menu-overlay/MenuOverlay";
-import { Key } from "@/constants";
-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";
-import { Input } from "../input/Input"; // Keep type import as a relative path
-import { MenuOverlay } from "../menu-overlay/MenuOverlay"; // Keep type import as a relative path
-
-export namespace DatePicker {
-  export const weekStartDays = ["Sunday", "Monday"];
-  const EMPTY_STRING = "";
-
-  @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: String }) htmlId = "";
-    @property({ type: String }) label = "";
-    @property({ type: String }) ariaLabel = "Choose Date";
-    @property({ type: Boolean }) required = false;
-    @property({ type: String, reflect: true }) errorMessage = "";
-    @property({ type: Boolean, attribute: "custom-trigger" }) customTrigger = false;
-    @property({ type: Boolean }) isMenuOverlayOpen = false;
-
-    @internalProperty() selectedDate: DateTime = now();
-    @internalProperty() focusedDate: DateTime = now();
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    @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 === EMPTY_STRING) {
-        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;
-      this.isMenuOverlayOpen = 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;
-      }
-    };
-
-    handleInputKeyDown = (event: KeyboardEvent) => {
-      if (event.code === Key.ArrowDown) {
-        this.setOpen(true);
-      }
-    };
-
-    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 = () => {
-      if (!this.value && this.value !== EMPTY_STRING) return true;
-      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 is-date-picker 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"
-                  role="combobox"
-                  placeholder=${this.placeholder ? this.placeholder : "YYYY-MM-DD"}
-                  value=${ifDefined(this.value)}
-                  htmlId=${this.htmlId}
-                  label=${this.label}
-                  ariaLabel=${this.ariaLabel + this.chosenDateLabel()}
-                  ariaExpanded=${this.isMenuOverlayOpen ? "true" : "false"}
-                  ariaControls="date-overlay-content"
-                  auxiliaryContentPosition="before"
-                  ?required=${this.required}
-                  @keydown=${(event: KeyboardEvent) => this.handleInputKeyDown(event)}
-                  @input-change="${(e: CustomEvent) => this.handleDateInputChange(e)}"
-                  ?disabled=${this.disabled}
-                  hide-message=${!this.errorMessage && this.isValueValid()}
-                  ariaInvalid=${!!this.errorMessage || !this.isValueValid()}
-                  .messageArr=${this.errorMessage
-                    ? [{ message: this.errorMessage, type: "error" }]
-                    : [{ message: "", type: this.isValueValid() ? "" : "error" } as Input.Message]}
-                >
-                  <md-icon slot="input-section" name="calendar-month-bold" size="16" iconSet="momentumDesign"></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,70 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import { DateTime } from "luxon";
-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);
-  });
-
-  test("should generate correct day names in header", async () => {
-    const el: DatePickerCalendar.ELEMENT = await fixture(html` <md-datepicker-calendar></md-datepicker-calendar> `);
-
-    // Set the viewAnchorDate and weekStart
-    el.viewAnchorDate = DateTime.now();
-    el.datePickerProps = {
-      weekStart: "Monday",
-      locale: "en-US",
-      selected: DateTime.now(),
-      focused: DateTime.now()
-    };
-
-    const header = el.header();
-
-    const dayNames = header.map((dayTemplate) => dayTemplate.values[0]);
-
-    expect(dayNames).toHaveLength(7);
-    expect(dayNames[0]).toContain("M");
-    expect(dayNames[1]).toContain("T");
-    expect(dayNames[2]).toContain("W");
-    expect(dayNames[3]).toContain("T");
-    expect(dayNames[4]).toContain("F");
-    expect(dayNames[5]).toContain("S");
-    expect(dayNames[6]).toContain("S");
-  });
-});

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

@@ -1,179 +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 reset from "@/wc_scss/reset.scss";
-import { LitElement, PropertyValues, TemplateResult, html, internalProperty, property } from "lit-element";
-import { DateTime } from "luxon";
-import { DatePickerProps, DayFilters } from "../../../utils/dateUtils"; // Keep type import as a relative path
-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;
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    @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")) {
-        if (this.datePickerProps?.selected.invalidReason === null) {
-          this.viewAnchorDate = this.datePickerProps.selected || now();
-        }
-        this.localeMonth = localizeDate(this.viewAnchorDate, this.datePickerProps?.locale || "en").toFormat(
-          this.monthFormat
-        );
-      }
-      if (changedProperties.has("viewAnchorDate")) {
-        this.localeMonth = localizeDate(this.viewAnchorDate, this.datePickerProps?.locale || "en").toFormat(
-          this.monthFormat
-        );
-      }
-    }
-
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    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
-          variant="ghost"
-          circle
-          size="28"
-          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-bold" size="16" iconSet="momentumDesign"></md-icon>
-        </md-button>
-      `;
-    };
-    renderNextMonthButton = () => {
-      const allNextDaysDisabled =
-        this.filterParams?.maxDate && shouldNextMonthDisable(this.viewAnchorDate, this.filterParams?.maxDate);
-      return html`
-        <md-button
-          variant="ghost"
-          circle
-          size="28"
-          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-bold" size="16" iconSet="momentumDesign"></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;
-  }
-}

package/src/components/datepicker/datepicker-day/DatePickerDay.test.ts

@@ -1,48 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./DatePickerDay";
-import { DatePickerDay } from "./DatePickerDay";
-
-describe("DatePickerDay Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should apply a modifier, when the date does not belong to current month", async () => {
-    const el: DatePickerDay.ELEMENT = await fixture(html` <md-datepicker-day></md-datepicker-day> `);
-    expect(el).not.toBeNull();
-  });
-  test("should apply selected attribute class modifier", async () => {
-    const el: DatePickerDay.ELEMENT = await fixture(html` <md-datepicker-day selected></md-datepicker-day> `);
-    expect(el.selected).toBeTruthy;
-  });
-  test("should apply disabled attribute class modifier", async () => {
-    const el: DatePickerDay.ELEMENT = await fixture(html` <md-datepicker-day disabled></md-datepicker-day> `);
-    expect(el.disabled).toBeTruthy;
-    expect(el.shadowRoot?.querySelector("md-button")?.classList.contains("--disabled")).toBeTruthy;
-  });
-  test("should apply focused attribute class modifier", async () => {
-    const el: DatePickerDay.ELEMENT = await fixture(html` <md-datepicker-day focused></md-datepicker-day> `);
-    expect(el.focused).toBeTruthy;
-  });
-  test("should apply a modifier when the date is today`s date", async () => {
-    const el: DatePickerDay.ELEMENT = await fixture(html` <md-datepicker-day></md-datepicker-day> `);
-
-    expect(el.shadowRoot?.querySelector("md-button")?.classList.contains("--today")).not.toBeNull();
-  });
-
-  test("onclick of Day should handle action", async () => {
-    const el = await fixture<DatePickerDay.ELEMENT>(html` <md-datepicker-day></md-datepicker-day> `);
-    const userEvent = jest.spyOn(el, "handleClick");
-    const event = new MouseEvent("click");
-    el.dispatchEvent(event);
-    await el.updateComplete;
-    expect(userEvent).toHaveBeenCalled;
-  });
-  test("onkeydown of Day should handle action", async () => {
-    const el: DatePickerDay.ELEMENT = await fixture(html` <md-datepicker-day></md-datepicker-day> `);
-    const userEvent = jest.spyOn(el, "handleKeyDown");
-    const event = new KeyboardEvent("keydown", { code: "Space" });
-    el.dispatchEvent(event);
-    await el.updateComplete;
-    expect(userEvent).toHaveBeenCalled;
-  });
-});