@aurodesignsystem/auro-formkit 2.0.0-beta.5 → 2.0.0-beta.50

package/components/datepicker/src/auro-calendar-month.js

@@ -1,128 +0,0 @@
-import styleCss from "./styles/style-auro-calendar-month-css.js";
-import colorCss from "./styles/color-month-css.js";
-import tokensCss from "./styles/tokens-css.js";
-
-import { html } from 'lit';
-
-import { RangeDatepickerCalendar } from './vendor/wc-range-datepicker/range-datepicker-calendar.js';
-import './auro-calendar-cell.js';
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-
-/* eslint-disable no-magic-numbers, dot-location */
-
-export class AuroCalendarMonth extends RangeDatepickerCalendar {
-  static get styles() {
-    return [
-      // ...super.styles,
-      styleCss,
-      colorCss,
-      tokensCss
-    ];
-  }
-
-  async firstUpdated() {
-    this.monthsList = [
-      '01',
-      '02',
-      '03',
-      '04',
-      '05',
-      '06',
-      '07',
-      '08',
-      '09',
-      '10',
-      '11',
-      '12',
-    ];
-    setTimeout(() => {
-      this.setYears(1930, 2100);
-    });
-
-    await this.updateComplete;
-  }
-
-  /**
-   * Determines the current month name based on locale.
-   * This is a rewrite of the function used in the class RangeDatepickerCalendar and should not be removed from here.
-   * @private
-   * @returns {void}
-   */
-  localeChanged() {
-    const dayNamesOfTheWeek = [];
-    for (let int = 0; int < 7; int += 1) {
-      dayNamesOfTheWeek.push(this.locale.localize.day(int, { width: 'narrow' }));
-    }
-    const firstDayOfWeek = this.locale.options.weekStartsOn
-      ? this.locale.options.weekStartsOn
-      : 0;
-    const tmp = dayNamesOfTheWeek.slice().splice(0, firstDayOfWeek);
-    const newDayNamesOfTheWeek = dayNamesOfTheWeek
-      .slice()
-      .splice(firstDayOfWeek, dayNamesOfTheWeek.length)
-      .concat(tmp);
-    this.dayNamesOfTheWeek = newDayNamesOfTheWeek;
-  }
-
-  renderDay(day) {
-    return html`
-      <div class="td ${this.tdIsEnabled(day)}">
-        ${day
-          ? html`
-              <auro-calendar-cell
-                .disabledDays="${this.disabledDays}"
-                .min="${this.min}"
-                .max="${this.max}"
-                .month="${this.month}"
-                .hoveredDate="${this.hoveredDate}"
-                .dateTo="${this.dateTo}"
-                .dateFrom="${this.dateFrom}"
-                .locale="${this.locale}"
-                .day="${day}"
-                ?isCurrentDate="${this.isCurrentDate(day)}"
-                @date-is-selected="${this.handleDateSelected}"
-                @date-is-hovered="${this.handleDateHovered}"
-              >
-              </auro-calendar-cell>
-          `
-          : null}
-      </div>
-    `;
-  }
-
-  /* Disabling linter for render as this code is directly from range-datepicker-calendar */
-  /* eslint-disable */
-  render() {
-    var _a, _b;
-    
-    return html `
-      <div>
-        <div class="header">
-          ${this.renderPrevButton()}
-          <div class="headerTitle">
-            <div>${this.computeCurrentMonthName(this.month, this.year)}</div>
-            <div>${this.renderYear()}</div>
-          </div>
-          ${this.renderNextButton()}
-        </div>
-
-        <div class="table">
-          <div class="thead">
-            <div class="tr">
-              ${(_a = this.dayNamesOfTheWeek) === null || _a === void 0 ? void 0 : _a.map(dayNameOfWeek => this.renderDayOfWeek(dayNameOfWeek))}
-            </div>
-          </div>
-          <div class="tbody">
-            ${(_b = this.daysOfMonth) === null || _b === void 0 ? void 0 : _b.map(week => this.renderWeek(week))}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  /* eslint-enable */
-}
-
-if (!customElements.get('auro-calendar-month')) {
-  customElements.define('auro-calendar-month', AuroCalendarMonth);
-}

package/components/datepicker/src/auro-calendar.js

@@ -1,329 +0,0 @@
-import { html } from 'lit';
-
-import styleCss from './styles/style-auro-calendar-css.js';
-import colorCss from './styles/color-calendar-css.js';
-import tokensCss from './styles/tokens-css.js';
-
-import './auro-calendar-month.js';
-import { RangeDatepicker } from './vendor/wc-range-datepicker/range-datepicker.js';
-import chevronLeft from '@alaskaairux/icons/dist/icons/interface/chevron-left.mjs';
-import chevronRight from '@alaskaairux/icons/dist/icons/interface/chevron-right.mjs';
-
-import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
-
-import { AuroDatepickerUtilities } from './utilities.js';
-import { CalendarUtilities } from './utilitiesCalendar.js';
-import { UtilitiesCalendarRender } from './utilitiesCalendarRender.js';
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * @prop {Object} firstDayOfWeek - Weekday that will be displayed in first column of month grid.
- * 0: sunday, 1: monday, 2: tuesday, 3: wednesday , 4: thursday, 5: friday, 6: saturday
- * Default is 0.
- * @prop {Date | null} focusedDate - The currently focused date (if any).
- * @prop {Date} maxDate - Maximum date. All dates after will be disabled.
- * @prop {Date} minDate - Minimum date. All dates before will be disabled.
- * @prop {Date | undefined} selectedDate - The selected date, usually synchronized with datepicker-input.
- * Not to be confused with the focused date (therefore not necessarily in active month view).
- * @prop {string} weekdayHeaderNotation - Weekday header notation, based on Intl DatetimeFormat:
- * @prop {Boolean} visible - Flag indicating if the calendar is visible.
- * - 'short' (e.g., Thu)
- * - 'narrow' (e.g., T).
- * Default is 'short'.
- * @event auroCalendar-dateSelected - Notifies that a date has been selected in the calendar.
- * @event auroCalendar-monthChanged - Notifies that the visible calendar month(s) have changed.
- */
-
-/* eslint-disable no-magic-numbers, no-undef-init, max-lines */
-
-// class AuroCalendar extends LitElement {
-export class AuroCalendar extends RangeDatepicker {
-  constructor() {
-    super();
-
-    /**
-     * @private
-     */
-    this.util = new AuroDatepickerUtilities();
-
-    /**
-     * @private
-     */
-    this.utilCal = new CalendarUtilities();
-
-    /**
-     * @private
-     */
-    this.utilCalRender = new UtilitiesCalendarRender();
-
-    this.calendarStartDate = undefined;
-    this.calendarEndDate = undefined;
-    this.centralDate = undefined;
-    this.showPrevMonthBtn = true;
-    this.showNextMonthBtn = true;
-
-    /**
-     * @private
-     */
-    this.firstMonthRenderable = undefined;
-
-    /**
-     * @private
-     */
-    this.calendarRangeMonths = null;
-
-    /**
-     * @private
-     */
-    this.numCalendars = undefined;
-
-
-    this.visible = false;
-
-
-    /**
-     * @private
-     */
-    this.slots = {};
-  }
-
-  static get styles() {
-    return [
-      styleCss,
-      colorCss,
-      tokensCss
-    ];
-  }
-
-  static get properties() {
-    return {
-      numCalendars: {
-        type: Number
-      },
-      dateFrom: {
-        type: String
-      },
-      dateTo: {
-        type: String
-      },
-      maxDate: {
-        type: String,
-        reflect: true
-      },
-      minDate: {
-        type: String,
-        reflect: true
-      },
-      calendarStartMonth: {
-        type: String,
-        reflect: true
-      },
-      calendarEndMonth: {
-        type: String,
-        reflect: true
-      },
-      centralDate: {
-        type: String,
-        reflect: true
-      },
-      visible: {
-        type: Boolean,
-        reflect: false
-      }
-    };
-  }
-
-  /**
-   * Updates the month and year when the user navigates to the previous calendar month.
-   * @private
-   * @returns {void}
-   */
-  handlePrevMonth() {
-    this.utilCal.handleMonthChange(this, 'prev');
-  }
-
-  /**
-   * Updates the month and year when the user navigates to the next calendar month.
-   * @private
-   * @returns {void}
-   */
-  handleNextMonth() {
-    this.utilCal.handleMonthChange(this, 'next');
-  }
-
-  /**
-   * Renders all of the auro-calendar-months HTML.
-   * @private
-   * @returns {Object} Returns the auro-calendar-months HTML.
-   */
-  renderAllCalendars() {
-    let renderedHtml = undefined;
-    if (this.visible) {
-      this.utilCalRender.setFirstRenderableMonthDate(this);
-      this.utilCal.assessNavigationButtonVisibility(this);
-
-      const dropdown = AuroLibraryRuntimeUtils.prototype.closestElement('auro-dropdown, [auro-dropdown]', this);
-      const dropdownbib = dropdown ? dropdown.bibContent : AuroLibraryRuntimeUtils.prototype.closestElement('auro-dropdownbib', this);
-      const mobileLayout = dropdownbib.hasAttribute('isfullscreen');
-      this.utilCalRender.determineNumCalendarsToRender(this, mobileLayout);
-
-
-      // Determine which month to render first
-      let dateMatches = undefined;
-
-      if (!mobileLayout && this.centralDate) {
-        // On Desktop start the calendar at the central date if it exists, then minDate and finally the current date.
-        if (this.centralDate) {
-          dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.centralDate));
-
-          if (!dateMatches) {
-            this.firstRenderedMonth = this.util.convertDateToFirstOfMonth(this.centralDate);
-          }
-        } else if (this.minDate) {
-          dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(this.minDate));
-
-          if (!dateMatches) {
-            this.firstRenderedMonth = this.util.convertDateToFirstOfMonth(this.minDate);
-          }
-        } else {
-          const now = new Date();
-
-          dateMatches = this.util.datesMatch(this.firstRenderedMonth, this.util.convertDateToFirstOfMonth(now));
-
-          if (!dateMatches) {
-            this.firstRenderedMonth = this.util.convertDateToFirstOfMonth(now);
-          }
-        }
-      } else {
-        // On mobile start the calendar at the previously determined first renderable month.
-        this.firstRenderedMonth = this.firstMonthRenderable;
-      }
-
-      // Add the first calendar to the HTML
-      const firstMonth = this.firstRenderedMonth.getMonth() + 1;
-      const firstYear = this.firstRenderedMonth.getFullYear();
-
-      renderedHtml = html`${renderedHtml}${this.utilCalRender.renderCalendar(this, firstMonth, firstYear)}`;
-
-      // Loop through the number of remaining calendars to render and add the HTML
-      let newMonthDate = undefined;
-
-      for (let cal = 0; cal < this.numCalendars - 1; cal += 1) {
-
-        const date = newMonthDate || this.firstRenderedMonth;
-
-        const oldMonth = date.getMonth() + 1;
-        const oldYear = date.getFullYear();
-
-        let newMonth = undefined;
-        let newYear = undefined;
-
-        if (oldMonth === 12) {
-          newMonth = 1;
-          newYear = oldYear + 1;
-        } else {
-          newMonth = oldMonth + 1;
-          newYear = oldYear;
-        }
-
-        const newMonthDateStr = `${newMonth}/1/${newYear}`;
-        newMonthDate = new Date(newMonthDateStr);
-
-        renderedHtml = html`${renderedHtml}${this.utilCalRender.renderCalendar(this, newMonth, newYear)}`;
-      }
-    }
-    return renderedHtml;
-  }
-
-  /**
-   * Request the calendar be scrolled to a given date.
-   * @param {String} date - The date to scroll into view.
-   * @returns {void}
-   */
-  scrollMonthIntoView(date) {
-    this.utilCal.scrollMonthIntoView(this, date);
-  }
-
-  firstUpdated() {
-    this.addEventListener('date-from-changed', () => {
-      this.dispatchEvent(new CustomEvent('auroCalendar-dateSelected', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    });
-
-    this.addEventListener('date-to-changed', () => {
-      if (this.dateTo === null) {
-        this.dateTo = undefined;
-      }
-      this.dispatchEvent(new CustomEvent('auroCalendar-dateSelected', {
-        bubbles: true,
-        cancelable: false,
-        composed: true,
-      }));
-    });
-  }
-
-  injectSlot(slotName, nodes) {
-    this.slots[slotName] = nodes;
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('noRange')) {
-      this.noRangeChanged(this.noRange, changedProperties.get('noRange'));
-    }
-
-    if (changedProperties.has('narrow')) {
-      this.dispatchEvent(new CustomEvent('narrow-changedProperties', { detail: { value: this.narrow } }));
-    }
-
-    if (changedProperties.has('locale')) {
-      this.localeChanged();
-    }
-
-    if (changedProperties.has('centralDate')) {
-      this.utilCal.centralDateChanged(this);
-    }
-
-    if (changedProperties.has('visible')) {
-      setTimeout(() => this.requestUpdate());
-    }
-  }
-
-  render() {
-    return html`
-      <div class="calendarWrapper">
-        <div class="mobileHeader">
-          <div class="headerDateFrom">
-            <span class="mobileDateLabel">${this.slots.mobileDateLabel}</span>
-            <slot name="mobileDateFromStr"></slot>
-          </div>
-          <div class="headerDateTo"><slot name="mobileDateToStr"></slot></div>
-        </div>
-        <div class="calendars">
-          ${this.renderAllCalendars()}
-        </div>
-        <div class="mobileFooter">
-          <div class="mobileFooterActions">
-            <auro-button fluid @click="${this.utilCal.requestDismiss}">Done</auro-button>
-          </div>
-        </div>
-        ${this.showPrevMonthBtn ? html`
-          <button class="calendarNavBtn prevMonth" @click="${this.handlePrevMonth}">
-            ${this.util.generateIconHtml(chevronLeft)}
-          </button>
-        ` : undefined}
-        ${this.showNextMonthBtn ? html`
-          <button class="calendarNavBtn nextMonth" @click="${this.handleNextMonth}">
-            ${this.util.generateIconHtml(chevronRight)}
-          </button>
-        ` : undefined}
-      </div>
-    `;
-  }
-}
-
-if (!customElements.get('auro-calendar')) {
-  customElements.define('auro-calendar', AuroCalendar);
-}