@aurodesignsystem/auro-formkit 2.0.0-beta.41 → 2.0.0-beta.43

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

@@ -1,131 +0,0 @@
-/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */
-.util_displayInline {
-  display: inline;
-}
-
-.util_displayInlineBlock {
-  display: inline-block;
-}
-
-.util_displayBlock {
-  display: block;
-}
-
-.util_displayFlex {
-  display: flex;
-}
-
-.util_displayHidden {
-  display: none;
-}
-
-.util_displayHiddenVisually {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-}
-
-[auro-input]::part(iconContainer) {
-  top: 0;
-  display: flex;
-  height: 100%;
-  align-items: center;
-}
-[auro-input]::part(accentIcon) {
-  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-[auro-input]::part(helpText) {
-  display: none;
-}
-[auro-input]::part(wrapper) {
-  border-width: 0 !important;
-}
-[auro-input]:not(:first-child)::part(wrapper) {
-  /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
-}
-[auro-input]:not(:first-child)::part(wrapper)::after {
-  position: absolute;
-  left: 50%;
-  width: 95%;
-  height: 1px;
-  background-color: var(--ds-auro-datepicker-range-input-divider-color);
-  content: "";
-  transform: translateX(-50%);
-}
-
-.outerWrapper {
-  position: relative;
-  container: outerwrapper/inline-size;
-}
-
-.dpTriggerContent {
-  display: flex;
-  flex-direction: column;
-}
-.dpTriggerContent [auro-input] {
-  flex: 1;
-}
-
-/* This value is per design but relates to 
-   https://github.com/AlaskaAirlines/AuroDesignTokens/issues/206
-*/
-@container outerwrapper (min-width: 390px) {
-  .dpTriggerContent {
-    flex-direction: row;
-  }
-  [auro-input]:first-of-type {
-    margin-right: var(--ds-size-150, 0.75rem);
-  }
-  [auro-input]:nth-child(2) {
-    margin-left: var(--ds-size-150, 0.75rem);
-  }
-  [auro-input]:nth-child(2)::part(accentIcon) {
-    display: none;
-  }
-  [auro-input]:nth-child(2)::part(label) {
-    left: 0;
-    width: 100%;
-  }
-  [auro-input]:nth-child(2)::part(input) {
-    padding-left: 0;
-  }
-  [auro-input]:nth-child(2):before {
-    position: absolute;
-    top: 13px;
-    left: calc(var(--ds-size-150, 0.75rem) * -1);
-    display: block;
-    width: 1px;
-    height: 2rem;
-    content: "";
-  }
-  [auro-input]:not(:first-child) {
-    /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
-  }
-  [auro-input]:not(:first-child)::part(wrapper):after {
-    content: none;
-  }
-  :host([range]) [auro-input] {
-    max-width: 50%;
-  }
-}
-@media screen and (max-width: 576px) {
-  ::part(popover) {
-    position: fixed !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100vw !important;
-    height: 100vh !important;
-    margin-bottom: var(--ds-size-200, 1rem);
-    transform: unset !important;
-  }
-  .calendarWrapper {
-    display: flex;
-    height: 100dvh;
-    flex-direction: row;
-    justify-content: center;
-  }
-}

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

@@ -1,139 +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;
-  }
-
-  // Horizontal ruler
-  &:not(:first-child) {
-    &::part(wrapper) {
-      /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
-      &::after {
-        position: absolute;
-        left: 50%;
-        width: 95%;
-        height: 1px;
-        background-color: var(--ds-auro-datepicker-range-input-divider-color);
-        content: '';
-        transform: translateX(-50%);
-      }
-    }
-  }
-}
-
-.outerWrapper {
-  position: relative;
-  container: outerwrapper / inline-size;
-}
-
-.dpTriggerContent {
-  display: flex;
-  flex-direction: column;
-
-  [auro-input] {
-    flex: 1;
-  }
-}
-
-// Container queries
-
-/* This value is per design but relates to 
-   https://github.com/AlaskaAirlines/AuroDesignTokens/issues/206
-*/
-@container outerwrapper (min-width: 390px) {
-  .dpTriggerContent {
-    flex-direction: row;
-  }
-
-  [auro-input] {
-    &: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: '';
-      }
-    }
-
-    // Hide horizontal ruler
-    &:not(:first-child) {
-      /* stylelint-disable-next-line selector-pseudo-element-colon-notation */
-      &::part(wrapper) {
-        &:after {
-          content: none;
-        }
-      }
-    }
-  }
-
-  :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);
-  }
-}