@aurodesignsystem/auro-formkit 1.6.0-beta.4

package/components/datepicker/src/styles/style.scss

@@ -0,0 +1,107 @@
+// Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */
+
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
+@import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
+
+[auro-input] {
+  &::part(iconContainer) {
+    top: 0;
+
+    display: flex;
+    height: 100%;
+
+    align-items: center;
+  }
+
+  &::part(accentIcon) {
+    transition: all .3s cubic-bezier(.215, .61, .355, 1);
+  }
+
+  &::part(helpText) {
+    display: none;
+  }
+
+  &::part(wrapper) {
+    border-width: 0 !important;
+  }
+}
+
+.outerWrapper {
+  position: relative;
+}
+
+.datepickerElement-helpText {
+  margin: var(--ds-size-50, $ds-size-50) 0;
+  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
+  line-height: 1rem;
+}
+
+.dpTriggerContent {
+  display: flex;
+  flex-direction: row;
+
+  [auro-input] {
+    flex: 1;
+
+    &:first-of-type {
+      margin-right: var(--ds-size-150, $ds-size-150);
+    }
+
+    &:nth-child(2) {
+      margin-left: var(--ds-size-150, $ds-size-150);
+
+      &::part(accentIcon) {
+        display: none;
+      }
+
+      &::part(label) {
+        left: 0;
+        width: 100%;
+      }
+
+      &::part(input) {
+        padding-left: 0;
+      }
+
+      &:before {
+        position: absolute;
+        top: 13px;
+        left: calc(var(--ds-size-150, $ds-size-150) * -1);
+        display: block;
+        width: 1px;
+        height: 2rem;
+        content: '';
+      }
+    }
+  }
+}
+
+:host([range]) {
+  [auro-input] {
+    max-width: 50%;
+  }
+}
+
+@include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
+  ::part(popover) {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    margin-bottom: var(--ds-size-200, $ds-size-200);
+    transform: unset !important;
+  }
+
+  .calendarWrapper {
+    display: flex;
+    height: 100dvh;
+    flex-direction: row;
+    justify-content: center;
+  }
+}

package/components/datepicker/src/styles/tokens-css.js

@@ -0,0 +1,2 @@
+import { css } from 'lit';
+export default css`:host{--ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);--ds-auro-calendar-mobile-footer-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-calendar-nav-btn-border-color: transparent;--ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);--ds-auro-calendar-nav-btn-container-color: transparent;--ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-border-color: transparent;--ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-calendar-cell-container-color: transparent;--ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;

package/components/datepicker/src/styles/tokens.css

@@ -0,0 +1,22 @@
+/* stylelint-disable color-function-notation */
+:host {
+  --ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #525252);
+  --ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #585e67);
+  --ds-auro-calendar-mobile-footer-container-color: var(--ds-color-container-primary-default, #ffffff);
+  --ds-auro-calendar-mobile-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));
+  --ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #ffffff);
+  --ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));
+  --ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #525252);
+  --ds-auro-calendar-nav-btn-border-color: transparent;
+  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #2c67b5);
+  --ds-auro-calendar-nav-btn-container-color: transparent;
+  --ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #ffffff);
+  --ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));
+  --ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #2a2a2a);
+  --ds-auro-calendar-cell-border-color: transparent;
+  --ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));
+  --ds-auro-calendar-cell-container-color: transparent;
+  --ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #f7f7f7);
+  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #2a2a2a);
+  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a);
+}

package/components/datepicker/src/styles/tokens.scss

@@ -0,0 +1,25 @@
+/* stylelint-disable color-function-notation */
+
+@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
+
+:host {
+  --ds-auro-datepicker-placeholder-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-datepicker-range-input-divider-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default});
+  --ds-auro-calendar-mobile-footer-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-calendar-mobile-header-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
+  --ds-auro-calendar-mobile-header-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-calendar-mobile-header-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-calendar-mobile-header-text-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default});
+  --ds-auro-calendar-nav-btn-border-color: transparent;
+  --ds-auro-calendar-nav-btn-chevron-color: var(--ds-color-icon-ui-primary-default-default, #{$ds-color-icon-ui-primary-default-default});
+  --ds-auro-calendar-nav-btn-container-color: transparent;
+  --ds-auro-calendar-month-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
+  --ds-auro-calendar-month-divider-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default});
+  --ds-auro-calendar-month-header-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-calendar-cell-border-color: transparent;
+  --ds-auro-calendar-cell-boxshadow-color: var(--ds-elevation-200, #{$ds-elevation-200});
+  --ds-auro-calendar-cell-container-color: transparent;
+  --ds-auro-calendar-cell-in-range-color: var(--ds-color-container-secondary-default, #{$ds-color-container-secondary-default});
+  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+}

package/components/datepicker/src/utilities.js

@@ -0,0 +1,87 @@
+export class AuroDatepickerUtilities {
+
+  /**
+   * Returns true if value passed in is a valid date.
+   * @private
+   * @param {String} date - Date to validate.
+   * @returns {Boolean}
+   */
+  validDateStr(date) {
+    const dateStrLength = 10;
+
+    if (date.length === dateStrLength && Date.parse(date)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Converts any date object to a date object representing the first day of the month.
+   * @param {Object} date - Date to convert to the first day of the month.
+   * @returns {Object} Returns the auro-calendar-months HTML.
+   */
+  convertDateToFirstOfMonth(date) {
+    const dateObj = new Date(date);
+
+    return new Date(dateObj.getFullYear(), dateObj.getMonth(), 1);
+  }
+
+  /**
+   * Calculate the number of months between two dates.
+   * @param {Object} date1 - First date to compare.
+   * @param {Object} date2 - Second date to compare.
+   * @returns {Number} Returns the number of months between the two dates.
+   */
+  monthDiff(date1, date2) {
+    let months = 0;
+    months = (date2.getFullYear() - date1.getFullYear()) * 12; // eslint-disable-line no-magic-numbers
+    months -= date1.getMonth();
+    months += date2.getMonth();
+    months += 1;
+
+    return months <= 0 ? 0 : months;
+  }
+
+  /**
+   * Convert a date object to string format.
+   * @private
+   * @param {Object} date - Date to convert to string.
+   * @returns {Object} Returns the date as a string.
+   */
+  getDateAsString(date) {
+    const year = new Date(date).getFullYear();
+    const month = new Date(date).getMonth() + 1;
+    const day = new Date(date).getDate();
+
+    const dateStr = `${month}/${day}/${year}`;
+
+    return dateStr;
+  }
+
+  /**
+   * Function to generate checkmark svg.
+   * @private
+   * @param {Object} icon - Icon object containing the SVG.
+   * @returns {Object} Returns the svg portion of the icon object.
+   */
+  generateIconHtml(icon) {
+    this.dom = new DOMParser().parseFromString(icon.svg, 'text/html');
+    this.svg = this.dom.body.firstChild;
+
+    return this.svg;
+  }
+
+  /**
+   * Compares two dates to see if they match.
+   * @private
+   * @param {Object} date1 - First date to compare.
+   * @param {Object} date2 - Second date to compare.
+   * @returns {Boolean} Returns true if the dates match.
+   */
+  datesMatch(date1, date2) {
+    const match = new Date(date1).getTime() === new Date(date2).getTime();
+
+    return match;
+  }
+}

package/components/datepicker/src/utilitiesCalendar.js

@@ -0,0 +1,139 @@
+import { AuroDatepickerUtilities } from './utilities.js';
+
+export class CalendarUtilities {
+  constructor() {
+    this.util = new AuroDatepickerUtilities();
+  }
+
+
+  /**
+   * Scroll the calendar month list to a given valid date if in mobile view.
+   * @param {Object} elem - The calendar element.
+   * @param {String} date - The date to scroll into view.
+   * @returns {void}
+   */
+  scrollMonthIntoView(elem, date) {
+    const mobileLayout = window.innerWidth < elem.mobileBreakpoint;
+
+    if (this.util.validDateStr(date) && mobileLayout) {
+      const month = new Date(date).getMonth() + 1;
+      const year = new Date(date).getFullYear();
+      const selector = `#month-${month}-${year}`;
+      const monthElem = elem.shadowRoot.querySelector(selector);
+
+      monthElem.scrollIntoView();
+    }
+  }
+
+  /**
+   * Sends an event requesting the dropdown bib be closed.
+   * @private
+   * @returns {void}
+   */
+  requestDismiss() {
+    this.dispatchEvent(new CustomEvent('auroCalendar-dismissRequest', {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+    }));
+  }
+
+  /**
+   * Handles the visibility of the previous and next month buttons.
+   * @private
+   * @param {Object} elem - The auro-calendar element.
+   * @returns {void}
+   */
+  assessNavigationButtonVisibility(elem) {
+
+    /**
+     * Hide/show the previous month button.
+     */
+
+    // 1. Compare the first rendered month to the earliest renderable month to determine if the previous month button should be hidden or shown
+    if (!elem.hasAttribute('calendarStartDate') && !elem.hasAttribute('minDate')) {
+      elem.showPrevMonthBtn = true;
+    } else if (this.util.convertDateToFirstOfMonth(new Date(elem.centralDate)) <= elem.firstMonthRenderable) {
+      elem.showPrevMonthBtn = false;
+    } else {
+      elem.showPrevMonthBtn = true;
+    }
+
+    /**
+     * Hide/show the next month button.
+     */
+
+    // 1. Determine the last month that can possibly be rendered into the DOM.
+    let lastRenderableMonth = undefined; // eslint-disable-line no-undef-init
+
+    if (elem.hasAttribute('calendarEndDate')) {
+      lastRenderableMonth = new Date(elem.getAttribute('calendarEndDate'));
+    } else if (elem.hasAttribute('maxDate')) {
+      lastRenderableMonth = new Date(elem.getAttribute('maxDate'));
+    }
+
+    if (lastRenderableMonth) {
+      lastRenderableMonth = this.util.convertDateToFirstOfMonth(lastRenderableMonth);
+    }
+
+    // 2. Determine the last month currently rendered into the DOM.
+    let lastRenderedMonth = new Date(elem.centralDate);
+
+    if (!elem.noRange) {
+      lastRenderedMonth = new Date(lastRenderedMonth.setMonth(lastRenderedMonth.getMonth() + 1));
+    }
+
+    lastRenderedMonth = this.util.convertDateToFirstOfMonth(lastRenderedMonth);
+
+    // 3. Compare the two and choose to show or hide the next month button
+    if (lastRenderedMonth >= lastRenderableMonth) {
+      elem.showNextMonthBtn = false;
+    } else {
+      elem.showNextMonthBtn = true;
+    }
+
+    // Request an update to the component needed to actually show/hide the buttons in the DOM
+    elem.requestUpdate();
+  }
+
+  /**
+   * Handles the change of the centralDate property.
+   * @param {Object} elem - The auro-calendar element.
+   * @private
+   * @returns {void}
+   */
+  centralDateChanged(elem) {
+    this.assessNavigationButtonVisibility(elem);
+
+    elem.dispatchEvent(new CustomEvent('auroCalendar-centralDateChanged', {
+      detail: {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+        date: elem.centralDate
+      }
+    }));
+  }
+
+  /**
+   * Updates the month and year when the user navigates to a different calendar month.
+   * @param {Object} elem - The auro-calendar element.
+   * @param {String} direction - The direction the user is navigating.
+   * @returns {void}
+   */
+  handleMonthChange(elem, direction) {
+    // Determine if the month number is going to be incremented or decremented
+    let increment = 0;
+
+    if (direction === 'next') {
+      increment = 1;
+    } else if (direction === 'prev') {
+      increment = -1; // eslint-disable-line no-magic-numbers
+    }
+
+    // calculate the new central date
+    const newCentralDate = new Date(elem.centralDate).setMonth(new Date(elem.centralDate).getMonth() + increment);
+    // set the new central date to the first day of the month
+    elem.centralDate = this.util.convertDateToFirstOfMonth(newCentralDate);
+  }
+}

package/components/datepicker/src/utilitiesCalendarRender.js

@@ -0,0 +1,156 @@
+import { html } from 'lit';
+import { AuroDatepickerUtilities } from './utilities.js';
+
+export class UtilitiesCalendarRender {
+  constructor() {
+    this.util = new AuroDatepickerUtilities();
+  }
+
+  /**
+   * Attempt to update the central date but only if the date is a valid date.
+   * @param {Object} elem - The element to set the centralDate on.
+   * @param {String} date - The date to set the centralDate to.
+   * @private
+   */
+  updateCentralDate(elem, date) {
+    const dateObj = new Date(date);
+
+    if (!isNaN(dateObj)) {
+      elem.centralDate = dateObj;
+    }
+  }
+
+  /**
+   * Determine how many months to render based on the defined calendar range.
+   * @param {Object} elem - The auro-calendar element.
+   * @private
+   * @returns {Number} Returns the number of months between the calendarStartDate and the calendarEndDate.
+   */
+  determineDefinedCalendarRange(elem) {
+    if (elem.getAttribute('calendarStartDate') && elem.getAttribute('calendarEndDate')) {
+      // if we have a defined range of months, use that
+      elem.calendarRangeMonths = elem.util.monthDiff(new Date(elem.getAttribute('calendarStartDate')), new Date(elem.getAttribute('calendarEndDate')));
+    } else {
+      // if we don't have a defined range of months, use undefined
+      elem.calendarRangeMonths = undefined;
+    }
+
+    return elem.calendarRangeMonths;
+  }
+
+  /**
+   * Determines how many calendar months can be rendered based on the screen size and defined range.
+   * @param {Object} elem - The auro-calendar element.
+   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @private
+   * @returns {Number} Returns the maximum number of months that can be rendered.
+   */
+  maximumRenderableMonths(elem, isMobile) {
+    const definedRangeMonths = this.determineDefinedCalendarRange(elem);
+
+    // number of calendars that could be rendered at a time
+    let numCalendars = 1;
+
+    // range supported calendars use two viewable months in desktop view
+    if (!elem.noRange) {
+      numCalendars = 2; // eslint-disable-line no-magic-numbers
+    }
+
+    // change the max calendar number when viewed on mobile
+    if (isMobile) {
+      // use definedRangeMonths if we have it otherwise default to 12
+      numCalendars = definedRangeMonths || 12; // eslint-disable-line no-magic-numbers
+    }
+
+    // If we have a defined range of months and it's less than the numCalendars, use the defined range.
+    // This covers the scenario where the datepicker has "range" but the available months are less than 2.
+    if (definedRangeMonths && definedRangeMonths < numCalendars) {
+      numCalendars = definedRangeMonths;
+    }
+
+    return numCalendars;
+  }
+
+
+  /**
+   * Determines the number of months rendered inside the calendar.
+   * @param {Object} elem - The auro-calendar element.
+   * @param {Boolean} isMobile - true if it's to render for mobile view
+   * @private
+   * @returns {void}
+   */
+  determineNumCalendarsToRender(elem, isMobile) {
+    // 1. Determine the maximum number of months that can be rendered.
+    //    This is based on the screen size and the defined range of months.
+    const maxRenderableMonths = this.maximumRenderableMonths(elem, isMobile);
+
+    // 2. Start by assuming we can render the max number of months.
+    let calendarCount = maxRenderableMonths;
+
+    // 3. If we didn't get a count early, restrict based on min/max date.
+    if (!calendarCount && elem.minDate && elem.maxDate) {
+      const monthsInRange = this.util.monthDiff(new Date(elem.minDate), new Date(elem.maxDate));
+
+      if (monthsInRange < maxRenderableMonths) {
+        calendarCount = monthsInRange;
+      }
+    }
+
+    if (elem.numCalendars !== calendarCount) {
+      elem.numCalendars = calendarCount;
+      elem.requestUpdate();
+    }
+  }
+
+  /**
+   * Determine which month is to be rendered first.
+   * @param {Object} elem - The auro-calendar element.
+   * @private
+   * @returns {void}
+   */
+  setFirstRenderableMonthDate(elem) {
+    const start = elem.getAttribute('calendarStartDate');
+    const min = elem.getAttribute('minDate');
+
+    let firstMonthDate = new Date();
+
+    if (start) {
+      firstMonthDate = new Date(start);
+    } else if (min) {
+      firstMonthDate = new Date(min);
+    }
+
+    // sets to the first day of the month
+    elem.firstMonthRenderable = elem.util.convertDateToFirstOfMonth(firstMonthDate);
+  }
+
+  /**
+   * Renders one auro-calendar-month HTML for the given month/date combination.
+   * @private
+   * @param {Object} elem - The auro-calendar element.
+   * @param {Number} month - Month the calendar displays.
+   * @param {Number} year - Year the calendar displays.
+   * @returns {Object} Returns the auro-calendar-month HTML.
+   */
+  renderCalendar(elem, month, year) {
+    return html`
+      <auro-calendar-month
+        id="${`month-${month}-${year}`}"
+        .disabledDays="${elem.disabledDays}"
+        .min="${elem.min}"
+        .max="${elem.max}"
+        ?noRange="${elem.noRange}"
+        .hoveredDate="${elem.hoveredDate}"
+        .dateTo="${elem.dateTo}"
+        .dateFrom="${elem.dateFrom}"
+        .locale="${elem.locale}"
+        month="${month}"
+        year="${year}"
+        @hovered-date-changed="${elem.hoveredDateChanged}"
+        @date-from-changed="${elem.dateFromChanged}"
+        @date-to-changed="${elem.dateToChanged}"
+      >
+      </auro-calendar-month>
+    `;
+  }
+}

package/components/datepicker/src/vendor/wc-range-datepicker/day.js

@@ -0,0 +1,8 @@
+import { format } from 'date-fns';
+
+export class Day {
+  constructor(date) {
+    this.date = parseInt(format(date, 't'), 10);
+    this.title = parseInt(format(date, 'd'), 10);
+  }
+}