@momentum-ui/web-components 2.14.12 → 2.14.13

package/src/components/datepicker/DatePicker.ts

@@ -0,0 +1,290 @@
+/**
+ * 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

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,179 @@
+/**
+ * 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

@@ -0,0 +1,48 @@
+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;
+  });
+});