@momentum-ui/web-components 2.16.8 → 2.16.9

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

@@ -1,173 +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/button/Button";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { getDate, isDayDisabled, isSameDay, localizeDate, now } from "@/utils/dateUtils";
-import { closestElement } from "@/utils/helpers";
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property, PropertyValues, query } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { DateTime } from "luxon";
-import { DatePickerProps, DayFilters } from "../../../utils/dateUtils"; // Keep type import as a relative path
-import { DateRangePicker } from "../../date-range-picker/DateRangePicker"; // Keep type import as a relative path
-import styles from "../scss/module.scss";
-
-export namespace DatePickerDay {
-  @customElementWithCheck("md-datepicker-day")
-  export class ELEMENT extends LitElement {
-    @property({ type: Boolean, reflect: true }) focused = false;
-    @property({ type: Boolean, reflect: true }) selected = false;
-    @property({ type: Boolean, reflect: true }) disabled = false;
-    @property({ attribute: false }) day: DateTime = now();
-    @property({ attribute: false }) viewAnchorMonth: number | undefined = undefined;
-    @property({ attribute: false }) filterParams: DayFilters | undefined = undefined;
-    @property({ attribute: false }) datePickerProps: DatePickerProps | undefined = undefined;
-
-    @internalProperty() protected isOutsideMonth = false;
-    @internalProperty() protected isToday = false;
-    @internalProperty() protected parentRangePicker: DateRangePicker.ELEMENT | null = null;
-    @internalProperty() protected dateIsInRange = false;
-
-    @query("md-button") button!: HTMLButtonElement;
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.disabled = (this.filterParams && isDayDisabled(this.day, this.filterParams)) || false;
-      this.isOutsideMonth = this.day.month !== this.viewAnchorMonth;
-      this.isToday = isSameDay(this.day, now());
-      this.selected = (this.datePickerProps && isSameDay(this.datePickerProps.selected, this.day)) || false;
-      this.focused = (this.datePickerProps && isSameDay(this.datePickerProps.focused, this.day)) || false;
-      this.parentRangePicker = closestElement("md-date-range-picker", this) as DateRangePicker.ELEMENT;
-    }
-
-    updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      this.disabled = (this.filterParams && isDayDisabled(this.day, this.filterParams)) || false;
-      this.isOutsideMonth = this.day.month !== this.viewAnchorMonth;
-      this.isToday = isSameDay(this.day, now());
-      this.selected = (this.datePickerProps && isSameDay(this.datePickerProps.selected, this.day)) || false;
-      this.focused = (this.datePickerProps && isSameDay(this.datePickerProps.focused, this.day)) || false;
-      this.focused && this.button && this.button.shadowRoot?.querySelector("button")?.focus();
-      this.parentRangePicker && (this.dateIsInRange = this.isDateInRange());
-    }
-
-    handleClick = (e: MouseEvent) => {
-      this.dispatchEvent(
-        new CustomEvent("day-select", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            date: this.day,
-            sourceEvent: e
-          }
-        })
-      );
-    };
-
-    isDateInRange = () => {
-      const rangePicker = this.parentRangePicker;
-      const startDate = rangePicker?.startDate;
-      const endDate = rangePicker?.endDate;
-
-      if (!startDate || !endDate) {
-        return false;
-      }
-
-      const daySQLDate = this.day.toSQLDate();
-
-      const isBetweenDates = daySQLDate > startDate && daySQLDate < endDate;
-      const isStartDate = daySQLDate === startDate;
-      const isEndDate = daySQLDate === endDate;
-
-      return !this.isPrimarySelection() && (isBetweenDates || isStartDate || isEndDate);
-    };
-
-    isPrimarySelection() {
-      return this.parentRangePicker?.startDate && this.parentRangePicker.endDate === undefined;
-    }
-
-    isLeadingRangeEdge() {
-      return this === this.parentNode?.firstElementChild;
-    }
-    isEndingRangeEdge() {
-      return this === this.parentNode?.lastElementChild;
-    }
-    isStartDate() {
-      return this.parentRangePicker?.startDate === this.day.toSQLDate() && !this.isPrimarySelection();
-    }
-    isEndDate() {
-      return this.parentRangePicker?.endDate === this.day.toSQLDate();
-    }
-
-    handleKeyDown = (e: KeyboardEvent) => {
-      this.dispatchEvent(
-        new CustomEvent("day-key-event", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            date: this.day,
-            sourceEvent: e
-          }
-        })
-      );
-    };
-
-    get getDayClassMap() {
-      return {
-        "md-datepicker__day--selected": this.selected,
-        "md-datepicker__day--focus": this.focused,
-        "md-datepicker__day--today": this.isToday,
-        "md-datepicker__day--outside-month": this.isOutsideMonth,
-        "md-datepicker__day--in-range": this.dateIsInRange,
-        "md-datepicker__day--week-first": this.isLeadingRangeEdge(),
-        "md-datepicker__day--week-last": this.isEndingRangeEdge(),
-        "md-datepicker__day--start-date": this.isStartDate(),
-        "md-datepicker__day--end-date": this.isEndDate()
-      };
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      const localisedDateFormat = localizeDate(this.day, this.datePickerProps?.locale || "en").toFormat(
-        "D, dd MMMM yyyy"
-      );
-      return html`
-        <md-button
-          circle
-          size=${28}
-          color=${"color-none"}
-          ?disabled=${this.disabled}
-          class="md-datepicker__day ${classMap(this.getDayClassMap)}"
-          @click=${(e: MouseEvent) => {
-            if (!this.disabled) {
-              this.handleClick(e);
-            }
-          }}
-          @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
-          ariaLabel=${`${localisedDateFormat}`}
-          title=${`${localisedDateFormat}`}
-          aria-selected=${ifDefined(this.selected)}
-          tab-index=${this.focused ? "0" : "-1"}
-        >
-          ${this.day && getDate(this.day)}
-        </md-button>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-datepicker-day": DatePickerDay.ELEMENT;
-  }
-}

package/src/components/datepicker/datepicker-month/DatePickerMonth.test.ts

@@ -1,13 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./DatePickerMonth";
-import { DatePickerMonth } from "./DatePickerMonth";
-
-describe("DatePickerMonth Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render", async () => {
-    const el: DatePickerMonth.ELEMENT = await fixture(html` <md-datepicker-month></md-datepicker-month> `);
-    expect(el).not.toBeNull();
-  });
-});

package/src/components/datepicker/datepicker-month/DatePickerMonth.ts

@@ -1,60 +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-week/DatePickerWeek";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { addWeeks, getMonth, getStartOfMonth, getStartOfWeek, isSameMonth, now } from "@/utils/dateUtils";
-import reset from "@/wc_scss/reset.scss";
-import { html, LitElement, 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 DatePickerMonth {
-  @customElementWithCheck("md-datepicker-month")
-  export class ELEMENT extends LitElement {
-    @property({ attribute: false }) day: DateTime = now();
-    @property({ attribute: false }) filterParams: DayFilters | undefined = undefined;
-    @property({ attribute: false }) datePickerProps: DatePickerProps | undefined = undefined;
-
-    renderWeeks = () => {
-      let startOfWeekDay = getStartOfWeek(getStartOfMonth(this.day), this.datePickerProps?.weekStart);
-
-      const weeks = [];
-      const viewAnchorMonth = getMonth(this.day);
-
-      do {
-        weeks.push(html`
-          <md-datepicker-week
-            .viewAnchorMonth=${viewAnchorMonth}
-            .startOfWeekDay=${startOfWeekDay}
-            .filterParams=${this.filterParams}
-            .datePickerProps=${this.datePickerProps}
-          ></md-datepicker-week>
-        `);
-        startOfWeekDay = addWeeks(startOfWeekDay, 1);
-      } while (isSameMonth(startOfWeekDay, this.day));
-
-      return weeks;
-    };
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html` <div class="md-datepicker__month">${this.renderWeeks()}</div> `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-datepicker-month": DatePickerMonth.ELEMENT;
-  }
-}

package/src/components/datepicker/datepicker-week/DatePickerWeek.test.ts

@@ -1,13 +0,0 @@
-import { fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./DatePickerWeek";
-import { DatePickerWeek } from "./DatePickerWeek";
-
-describe("DatePickerWeek Component", () => {
-  afterEach(() => {
-    fixtureCleanup();
-  });
-  test("should render", async () => {
-    const el: DatePickerWeek.ELEMENT = await fixture(html` <md-datepicker-week></md-datepicker-week> `);
-    expect(el).not.toBeNull();
-  });
-});

package/src/components/datepicker/datepicker-week/DatePickerWeek.ts

@@ -1,56 +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-day/DatePickerDay";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { addDays, now } 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, LitElement, property } from "lit-element";
-import { DateTime } from "luxon";
-import styles from "../scss/module.scss";
-
-export namespace DatePickerWeek {
-  @customElementWithCheck("md-datepicker-week")
-  export class ELEMENT extends LitElement {
-    @property({ attribute: false }) startOfWeekDay: DateTime = now();
-    @property({ attribute: false }) viewAnchorMonth: number = now().month;
-    @property({ attribute: false }) filterParams: DayFilters | undefined = undefined;
-    @property({ attribute: false }) datePickerProps: DatePickerProps | undefined = undefined;
-
-    renderDays = () => {
-      const days = [0, 1, 2, 3, 4, 5, 6].map((offset) => {
-        const offsetDay = addDays(this.startOfWeekDay, offset);
-        return html`
-          <md-datepicker-day
-            .viewAnchorMonth=${this.viewAnchorMonth}
-            .day=${offsetDay}
-            .filterParams=${this.filterParams}
-            .datePickerProps=${this.datePickerProps}
-          ></md-datepicker-day>
-        `;
-      });
-
-      return days;
-    };
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html` <div class="md-datepicker__week">${this.renderDays()}</div> `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-datepicker-week": DatePickerWeek.ELEMENT;
-  }
-}

package/src/components/datepicker/scss/datepicker.scss

@@ -1,263 +0,0 @@
-.md-datepicker {
-  overflow: visible;
-  &__month-container {
-    display: flex;
-    flex-direction: column;
-    height: $calendar-height;
-    justify-content: space-between;
-    padding: $calendar-padding;
-  }
-
-  &__navigation--buttons {
-    align-items: center;
-    color: var(--datepicker-default-navigation-button, var(--md-primary-text-color, inherit));
-    display: flex;
-    justify-content: space-between;
-    line-height: normal;
-    width: $month-nav-button-width;
-
-    md-button[disabled]::part(button) {
-      background-color: none;
-      color: var(--md-disabled-text-color, inherit);
-    }
-  }
-
-  &__month {
-    width: auto;
-  }
-
-  &__week {
-    height: $week-height;    
-  }
-
-  &__navigation--current-month {
-    font-size: rem-calc(16);
-    font-weight: 700;
-    text-transform: capitalize;
-    color: var(--datepicker-default-navigation-label, inherit);
-  }
-
-  &__navigation {
-    display: flex;
-    justify-content: space-between;
-    padding: $calendar-heading-padding;
-  }
-
-  &__day--names {
-    display: flex;    
-  }
-
-  &__day {
-    color: var(--datepicker-default-number-color, inherit);
-    
-    border-radius: 100%;
-    display: inline-block;
-    height: $day-button-height;
-    width: $day-button-height;
-    font-weight: 400;
-
-    &--names {
-      color: var(--datepicker-default-days, var(--md-secondary-text-color));
-      display: flex;
-      font-size: $day-name-font-size;
-      font-family: var(--brand-font-bold);
-      justify-content: space-around;
-      line-height: $day-name-line-height;
-      margin: $day-name-margin;
-      text-transform: capitalize;
-    }
-
-    &::part(button) {
-      &:hover {
-        background: var(--datepicker-default-hover-bg-color);
-      }
-    }
-
-    &[disabled]::part(button) {
-      background: none;
-      color: var(--md-disabled-text-color, inherit);
-    }
-
-    &--today::part(button) {
-      font-weight: 700;
-
-      &::after {
-        border: var(--datepicker-selected-today-border, 1px solid var(--datepicker-range-text-color));
-        height: 1.8rem;
-        left: 7%;
-        position: absolute;
-        top: 4%;
-        width: 1.8rem;
-      }
-    }
-
-    &--focus::part(button) {
-      background: var(--datepicker-range-hover-bg-color);
-    }
-
-    &--selected::part(button) {
-      background: var(--datepicker-selected-bg-color, var(--md-primary-text-color));
-      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
-    }
-
-    &--selected::part(button):hover {
-      background: var(--datepicker-selected-hover-bg-color);
-      color: var(--datepicker-selected-text-color);
-    }
-
-    &--selected::part(button):active {
-      background: var(--datepicker-selected-pressed-bg-color);
-      color: var(--datepicker-selected-text-color);
-    }
-
-
-    &--outside-month {
-      color: var(--datepicker-invalid-text-color, var(--md-disabled-text-color, inherit));
-    }
-
-    // BELOW STYLES ENABLE DATE-RANGE-PICKER
-    // The code uses radial-gradients on pseudo elements to create an overlap effect for selected/hovered dates on top of the range-selected bar.
-    // They create a hoop with an open center on ::after to allow the content below to be seen.
-    // The ::before element has a fine-tuned gradient to fill in the hoop but keep the outside edges matching the range-selected bar.
-
-    &--in-range::part(button) {
-      color: var(--datepicker-range-text-color);
-      z-index: 10;
-
-      &::before {
-        background: var(--datepicker-range-bg-color);
-        content: "";
-        display: block;
-        height: 1.75rem;
-        position: absolute;
-        top: 0;
-        width: 2.25rem;
-        z-index: -1;
-      }
-
-      &:hover {
-        color: var(--datepicker-range-text-color);
-      }
-
-      &:active {
-        color: var(--datepicker-pressed-text-color);
-      }
-
-      &:focus {
-        z-index: 12;
-        color: var(--datepicker-range-text-color);
-
-        &::before {
-          background: radial-gradient(
-            circle at 43% center,
-            var(--datepicker-range-hover-bg-color) 60%,
-            rgba(0, 0, 0, 0) 60%,
-            var(--datepicker-range-bg-color) 60%,
-            var(--datepicker-range-bg-color) 60%
-          );
-        }
-
-        &::after {
-          background: radial-gradient(
-            circle at 50% center,
-            rgba(0, 0, 0, 0) 50%,
-            var(--datepicker-range-hover-bg-color) 51%,
-            var(--datepicker-range-hover-bg-color) 100%,
-            rgba(0, 0, 0, 0) 100%
-          );
-          content: "";
-        }
-      }
-    }
-
-    &--week-first::part(button) {
-      &::before {
-        border-bottom-left-radius: 1rem;
-        border-top-left-radius: 1rem;
-      }
-    }
-
-    &--week-last::part(button) {
-      &::before {
-        border-bottom-right-radius: 1rem;
-        border-top-right-radius: 1rem;
-        width: calc(2rem - 2px);
-      }
-    }
-
-    &--start-date::part(button) {
-      font-family: var(--brand-font-bold);
-      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
-      z-index: 11 ;
-
-      &:hover {
-        color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
-      }
-
-      &:focus {
-        color: var(--datepicker-range-text-color);
-      }
-
-      &::before {
-        background: radial-gradient(
-          circle at 50% center,
-          var(--datepicker-selected-bg-color) 58%,
-          transparent 50%,
-          var(--datepicker-range-bg-color) 50%,
-          var(--datepicker-range-bg-color) 50%
-        );
-        border-bottom-left-radius: 1rem;
-        border-top-left-radius: 1rem;
-        width: 100%;
-      }
-
-      &::after {
-        background: radial-gradient(
-          circle at 50% center,
-          transparent 40%,
-          var(--datepicker-range-edge-bg-color) 55%,
-          var(--datepicker-range-edge-bg-color) 100%,
-          transparent 100%
-        );
-        content: "";
-      }
-    }
-
-    &--end-date::part(button) {      
-      font-family: var(--brand-font-bold);
-      color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
-
-      &:hover {
-        color: var(--datepicker-selected-text-color, var(--md-secondary-bg-color));
-      }
-
-      &:focus {
-        color: var(--datepicker-range-text-color);
-      }
-
-      &::before {
-        background: radial-gradient(
-          circle at 50% center,
-          var(--datepicker-selected-bg-color) 58%,
-          rgba(0, 0, 0, 0) 50%,
-          var(--datepicker-range-bg-color) 50%,
-          var(--datepicker-range-bg-color) 50%
-        );
-        border-bottom-right-radius: 1rem;
-        border-top-right-radius: 1rem;
-        width: 100%;
-      }
-
-      &::after {
-        background: radial-gradient(
-          circle at 50% center,
-          rgba(0, 0, 0, 0) 40%,
-          var(--datepicker-range-edge-bg-color) 51%,
-          var(--datepicker-range-edge-bg-color) 100%,
-          rgba(0, 0, 0, 0) 100%
-        );
-        content: "";
-      }
-    }
-  }
-}

package/src/components/datepicker/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 "./datepicker"

package/src/components/datepicker/scss/settings.scss

@@ -1,9 +0,0 @@
-$week-height: rem-calc(34);
-$month-nav-button-width: rem-calc(44);
-$calendar-height: rem-calc(280);
-$calendar-padding: 12px 10px 12px;
-$calendar-heading-padding: 0 6px;
-$day-button-height: rem-calc(28);
-$day-name-font-size: rem(10);
-$day-name-line-height: rem(14);
-$day-name-margin: 12px 0 8px;

package/src/components/datepicker/tokens/lm-datepicker-tokens.js

@@ -1,68 +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
-      }
-    },
-    "text-color": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[100].name
-    },
-    "bg-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[95].name,
-        dark: colors.gray[10].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[90].name,
-        dark: colors.gray[10].name
-      }
-    }
-  },
-  range: {
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[60].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[30].name,
-        dark: colors.gray[70].name
-      }
-    },
-    edge: {
-      "bg-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray["05"].name
-      }
-    }
-  }
-};
-
-module.exports = datepicker;