@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.1

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

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

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

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

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

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

@@ -1,138 +0,0 @@
-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.
-   * @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

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

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