q2-tecton-elements 1.10.4 → 1.10.7

package/dist/collection/components/q2-calendar/index.js

@@ -1,20 +1,11 @@
-var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
 import { Component, Prop, Element, State, Event, Listen, Watch, h } from '@stencil/core';
-import { stringToMoment, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToMoment, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, isValidDate } from './helpers';
+import { addDays, isSameDay, format, isValid as isValidDate } from 'date-fns';
+import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset } from './helpers';
 import { buildDates, getValidDaysOfWeek } from './validation';
-import { handleAriaLabel, loc, setPopProperties } from 'src/utils';
+import { handleAriaLabel, loc, setPopProperties, overrideFocus, isEventFromElement } from 'src/utils';
 export class Q2Calendar {
   constructor() {
+    this.assume = 'current';
     this.dropdownOpen = false;
     this.keyboardSelection = false;
     this.typedValue = '';
@@ -23,8 +14,10 @@ export class Q2Calendar {
     this.defaultHintMessage = loc('tecton.element.calendar.hint.format') + ': ' + this.defaultFormatString;
     this.hintMessage = this.defaultHintMessage;
     this.hintMessageType = 'info';
-    this.valueIsInvalid = false;
     this.scheduledAfterRender = [];
+    this.dayAbbrStrings = getDays();
+    this.dayStrings = getDaysOfWeek();
+    this.monthStrings = getMonths();
     this.closeCalendar = () => {
       if (this.dropdownOpen) {
         this.dropdownOpen = false;
@@ -34,7 +27,7 @@ export class Q2Calendar {
     };
     this.openCalendar = () => {
       if (!this.dropdownOpen) {
-        this.selectedMonthYear = setupMonthYear(this.momentValue.toDate(), this.monthStrings);
+        this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
         this.dropdownOpen = true;
         this.focusInput();
@@ -42,11 +35,10 @@ export class Q2Calendar {
       }
     };
     this.toggleCalendar = () => {
-      var _a;
       this.dropdownOpen = !this.dropdownOpen;
       this.scheduledAfterRender.push(this.resizeIframe);
       if (this.dropdownOpen) {
-        this.selectedMonthYear = setupMonthYear((_a = this.momentValue) === null || _a === void 0 ? void 0 : _a.toDate(), this.monthStrings);
+        this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
       }
       else {
@@ -62,18 +54,29 @@ export class Q2Calendar {
     };
     this.onPopupKeyup = (event) => {
       if (event.key === 'Escape' || event.key === 'Esc') {
+        this.onInputBlur();
         this.closeCalendar();
-        return;
       }
     };
     this.onInputInput = ({ detail: { value } }) => {
       this.typedValue = value;
     };
+    this.onInputKeydown = (event) => {
+      const { dateValue } = this;
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          this.openCalendar();
+          this.activateDay(dateValue || new Date());
+          break;
+      }
+    };
     this.onInputKeyup = (event) => {
       if (this.disabled) {
         return;
       }
       if (event.key === 'Escape' || event.key === 'Esc') {
+        this.onInputBlur();
         this.closeCalendar();
         return;
       }
@@ -83,12 +86,12 @@ export class Q2Calendar {
       this.typedValue = handleMissingZeros(this.typedValue);
       const { typedValue } = this;
       const validDays = getValidDaysOfWeek(this.daysOfWeekChecksum);
-      const { isValid, message, messageType, inputDate, isAvailable, calendarPosition } = validateInput(typedValue, validDays, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString);
+      const { isValid, message, messageType, inputDate, isAvailable, calendarPosition } = validateInput(typedValue, validDays, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
       if (calendarPosition) {
         const [mm, dd, yyyy] = calendarPosition;
         const date = new Date(`${yyyy}-${mm}-${dd}`);
         if (isValidDate(date)) {
-          this.selectedMonthYear = setupMonthYear(date, this.monthStrings);
+          this.selectedMonthYear = setupMonthYear(date);
           this.dateList = this.buildDateList(this.selectedMonthYear);
           this.validateDate();
         }
@@ -129,7 +132,7 @@ export class Q2Calendar {
         return;
       const validDays = getValidDaysOfWeek(this.daysOfWeekChecksum);
       const { typedValue } = this;
-      const { isValid, inputDate, isAvailable } = validateInput(this.typedValue, validDays, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString);
+      const { isValid, inputDate, isAvailable } = validateInput(this.typedValue, validDays, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
       if (isValid ||
         (typedValue &&
           typedValue.length > 4 && // at least mm/dd provided
@@ -155,100 +158,94 @@ export class Q2Calendar {
       var _a;
       (_a = this.btnPrevMonth) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
     };
-    this.onNextMonthClick = () => {
-      const { monthIndex: currentMonthIndex, selectedYear: currentSelectedYear } = this.selectedMonthYear;
-      let monthIndex;
-      let selectedYear = currentSelectedYear;
-      if (currentMonthIndex === 11) {
-        monthIndex = 0;
-        selectedYear += 1;
-      }
-      else {
-        monthIndex = currentMonthIndex + 1;
-      }
-      this.selectedMonthYear = {
-        monthIndex,
-        selectedMonth: this.monthStrings[monthIndex],
-        selectedYear
-      };
-      this.dateList = this.buildDateList(this.selectedMonthYear);
-    };
-    this.onPreviousMonthClick = () => {
-      const { monthIndex: currentMonthIndex, selectedYear: currentSelectedYear } = this.selectedMonthYear;
-      let monthIndex;
-      let selectedYear = currentSelectedYear;
-      if (currentMonthIndex === 0) {
-        monthIndex = 11;
-        selectedYear = selectedYear - 1;
-      }
-      else {
-        monthIndex = currentMonthIndex - 1;
-      }
+    this.goToMonthYear = (monthIndex, year) => {
+      const newYear = removeTimezoneOffset(new Date(year, monthIndex));
       this.selectedMonthYear = {
-        monthIndex,
-        selectedMonth: this.monthStrings[monthIndex],
-        selectedYear
+        monthIndex: newYear.getMonth(),
+        selectedYear: newYear.getFullYear()
       };
       this.dateList = this.buildDateList(this.selectedMonthYear);
+      this.scheduledAfterRender.push(() => this.checkActiveCellForBlankness());
     };
-    this.onNextYearClick = () => {
-      const _a = this.selectedMonthYear, { selectedYear } = _a, current = __rest(_a, ["selectedYear"]);
-      this.selectedMonthYear = Object.assign(Object.assign({}, current), { selectedYear: selectedYear + 1 });
-      this.dateList = this.buildDateList(this.selectedMonthYear);
-    };
-    this.onPreviousYearClick = () => {
-      const _a = this.selectedMonthYear, { selectedYear } = _a, current = __rest(_a, ["selectedYear"]);
-      this.selectedMonthYear = Object.assign(Object.assign({}, current), { selectedYear: selectedYear - 1 });
-      this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.selectDate = (newDate) => {
+      const { isValid } = this.dateList.find(({ date }) => isSameDay(date, newDate));
+      if (!isValid)
+        return;
+      this.change.emit({ value: formatDateISO(newDate) });
+      this.typedValue = formatDateShort(newDate);
+      this.invalid = false;
     };
     this.onDateSelection = (event) => {
-      const dateBtn = event.target.closest('q2-btn');
-      if (!dateBtn)
+      const dateCell = event.target.closest('td:not([aria-hidden])');
+      if (!dateCell)
         return;
-      const value = dateBtn.dataset.date;
-      const formattedDate = formatDateShort(value);
-      this.change.emit({ value: formatDateISO(value) });
-      this.typedValue = formattedDate;
-      this.invalid = false;
-      if (this.keyboardSelection) {
-        this.focusInput();
-      }
-      else {
-        this.closeCalendar();
-      }
+      const day = parseInt(dateCell.dataset.day);
+      this.selectDate(this.generateDateFromDay(day));
+      this.closeCalendar();
     };
     this.onDateKeydown = (event) => {
-      const movementKeys = [
-        'ArrowRight',
-        'Right',
-        'ArrowLeft',
-        'Left',
-        'ArrowDown',
-        'Down',
-        'ArrowUp',
-        'Up'
-      ];
-      movementKeys.includes(event.key) && event.preventDefault();
-      const focusedValue = event.target.dataset.date;
-      if (event.key === 'ArrowRight' || event.key === 'Right') {
-        this.focusNextDay(focusedValue);
-        return;
-      }
-      if (event.key === 'ArrowLeft' || event.key === 'Left') {
-        this.focusPreviousDay(focusedValue);
-        return;
-      }
-      if (event.key === 'ArrowDown' || event.key === 'Down') {
-        this.focusDayNextWeek(focusedValue);
-        return;
-      }
-      if (event.key === 'ArrowUp' || event.key === 'Up') {
-        this.focusDayLastWeek(focusedValue);
-        return;
-      }
-      if (event.key === 'Enter') {
-        this.keyboardSelection = true;
-        return;
+      const { monthIndex, selectedYear } = this.selectedMonthYear;
+      const currentDay = parseInt(event.target.dataset.day);
+      const currentDate = this.generateDateFromDay(currentDay);
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          this.activateDay(addDays(currentDate, -7));
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          this.activateDay(addDays(currentDate, 7));
+          break;
+        case 'ArrowRight':
+          event.preventDefault();
+          this.activateDay(addDays(currentDate, 1));
+          break;
+        case 'ArrowLeft':
+          event.preventDefault();
+          this.activateDay(addDays(currentDate, -1));
+          break;
+        case 'PageUp':
+          event.preventDefault();
+          if (event.shiftKey)
+            this.goToMonthYear(monthIndex, selectedYear - 1);
+          else
+            this.goToMonthYear(monthIndex - 1, selectedYear);
+          break;
+        case 'PageDown':
+          event.preventDefault();
+          if (event.shiftKey)
+            this.goToMonthYear(monthIndex, selectedYear + 1);
+          else
+            this.goToMonthYear(monthIndex + 1, selectedYear);
+          break;
+        case 'Home':
+          event.preventDefault();
+          this.activateDay(addDays(currentDate, -currentDate.getDay()));
+          break;
+        case 'End':
+          event.preventDefault();
+          this.activateDay(addDays(currentDate, 6 - currentDate.getDay()));
+          break;
+        case 'Escape':
+          event.preventDefault();
+          this.closeCalendar();
+          this.focusInput();
+          break;
+        case 'Enter':
+          event.preventDefault();
+          if (!this.dateList.find(({ date }) => isSameDay(date, currentDate)).isValid)
+            return;
+          this.selectDate(currentDate);
+          this.closeCalendar();
+          this.focusInput();
+          break;
+        case ' ':
+          event.preventDefault();
+          if (!this.dateList.find(({ date }) => isSameDay(date, currentDate)).isValid)
+            return;
+          this.selectDate(currentDate);
+          this.focusInput();
+          break;
       }
     };
   }
@@ -258,8 +255,7 @@ export class Q2Calendar {
       window.TectonElements.resizeIframe());
   }
   connectedCallback() {
-    var _a;
-    this.selectedMonthYear = setupMonthYear((_a = this.momentValue) === null || _a === void 0 ? void 0 : _a.toDate(), this.monthStrings);
+    this.selectedMonthYear = setupMonthYear(this.dateValue);
     this.dateList = this.buildDateList(this.selectedMonthYear);
     this.validateDate();
   }
@@ -272,14 +268,19 @@ export class Q2Calendar {
       this.scheduledAfterRender = [];
     }, 25);
   }
-  get dayAbbrStrings() {
-    return getDays();
+  componentDidLoad() {
+    overrideFocus(this.hostElement);
   }
-  get dayStrings() {
-    return getDaysOfWeek();
-  }
-  get monthStrings() {
-    return getMonths();
+  get currentWeeks() {
+    const weeks = this.dateList.reduce((accum, item, index) => {
+      const chunkIndex = Math.floor(index / 7);
+      if (!accum[chunkIndex]) {
+        accum[chunkIndex] = [];
+      }
+      accum[chunkIndex].push(item);
+      return accum;
+    }, []);
+    return weeks;
   }
   get localizedErrors() {
     return ((Array.isArray(this.errors) &&
@@ -289,17 +290,19 @@ export class Q2Calendar {
       []);
   }
   get formattedValue() {
-    if (this.isTypeable) {
-      return this.typedValue;
-    }
-    else {
-      const momentValue = this.momentValue;
-      if (momentValue === undefined) {
-        return '';
-      }
-      const displayFormat = this.displayFormat || 'MM/DD/YYYY';
-      return momentValue.format(displayFormat);
-    }
+    const { typedValue, dateValue, displayFormat, isTypeable } = this;
+    if (isTypeable)
+      return typedValue;
+    if (dateValue === undefined)
+      return '';
+    if (displayFormat)
+      return format(dateValue, convertMomentFormat(displayFormat));
+    return new Intl.DateTimeFormat('default', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      timeZone: 'UTC'
+    }).format(dateValue);
   }
   get computedPlaceholder() {
     if (this.disabled && this.disabledMsg) {
@@ -310,25 +313,30 @@ export class Q2Calendar {
     }
     return (this.placeholder && loc(this.placeholder)) || '';
   }
-  get momentValue() {
+  get dateValue() {
     if (this.isTypeable) {
-      return stringToMoment(this.typedValue);
+      return stringToDate(this.typedValue);
     }
     else {
       let { value } = this;
       const isMoment = value && typeof value !== 'string' && 'toDate' in value;
+      if (isMoment)
+        return value.toDate();
       // stringified moment value assigned in html template e.g.) handlebar
-      if (!isMoment && typeof value === 'string') {
+      const isMomentString = typeof value === 'string' &&
+        value.split(' ').length === 6 &&
+        /GMT-\d{4}/g.test(value);
+      if (isMomentString) {
         value = formatDateISO(value);
       }
-      return isMoment ? value : stringToMoment(value);
+      return stringToDate(value);
     }
   }
   get dateValidators() {
     return {
-      startDate: stringToMoment(this.startDate),
-      endDate: stringToMoment(this.endDate),
-      cutOffTime: stringToMoment(this.cutoffTime)
+      startDate: stringToDate(this.startDate),
+      endDate: stringToDate(this.endDate),
+      cutOffTime: stringToDate(this.cutoffTime)
     };
   }
   get isTypeable() {
@@ -366,6 +374,11 @@ export class Q2Calendar {
       }
     }
   }
+  delegateFocus(event) {
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    this.inputField.shadowRoot.querySelector('.input-field').focus();
+  }
   //////// Observers //////////
   ariaLabelObserver() {
     handleAriaLabel(this);
@@ -379,12 +392,11 @@ export class Q2Calendar {
       this.typedValue = newValueAsString;
     }
     else {
-      const momentValue = isMoment
-        ? newValue
-        : stringToMoment(newValue);
-      const newValueAsDate = momentValue === null || momentValue === void 0 ? void 0 : momentValue.toDate();
-      this.inputField.value = formatDateShort(newValueAsDate);
-      this.selectedMonthYear = setupMonthYear(newValueAsDate, this.monthStrings);
+      const dateValue = isMoment
+        ? newValue.toDate()
+        : stringToDate(newValue);
+      this.inputField.value = formatDateShort(dateValue);
+      this.selectedMonthYear = setupMonthYear(dateValue);
       this.dateList = this.buildDateList(this.selectedMonthYear);
       this.validateDate();
     }
@@ -415,27 +427,39 @@ export class Q2Calendar {
   }
   ///// Actions ////////
   buildDateList(monthYear) {
-    const invalidDates = stringArrayToMoment(this.invalidDates, true);
+    const invalidDates = stringArrayToDate(this.invalidDates);
     const validDaysOfWeek = getValidDaysOfWeek(this.daysOfWeekChecksum);
-    const validDates = stringArrayToMoment(this.validDates, true);
-    return buildDates(validDaysOfWeek, validDates, invalidDates, monthYear, this.momentValue, this.dayStrings, this.dateValidators, this.typedValue);
+    const validDates = stringArrayToDate(this.validDates);
+    return buildDates(validDaysOfWeek, validDates, invalidDates, monthYear, this.dateValue, this.dateValidators, this.typedValue);
   }
   validateDate() {
+    var _a, _b, _c;
     try {
       if (!!this.value) {
-        const momentValue = this.momentValue;
-        const momentMonth = momentValue.month();
-        const momentYear = momentValue.year();
-        const calculationDateList = momentMonth === this.selectedMonthYear.monthIndex &&
-          momentYear === this.selectedMonthYear.selectedYear
-          ? this.dateList
-          : this.buildDateList({
-            monthIndex: momentMonth,
-            selectedMonth: this.monthStrings[momentMonth],
-            selectedYear: momentYear
+        const { dateValue } = this;
+        const month = (_a = dateValue === null || dateValue === void 0 ? void 0 : dateValue.getMonth()) !== null && _a !== void 0 ? _a : undefined;
+        const year = (_b = dateValue === null || dateValue === void 0 ? void 0 : dateValue.getFullYear()) !== null && _b !== void 0 ? _b : undefined;
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        const isSelectedMonthAndYear = month === monthIndex && year === selectedYear;
+        let calculationDateList = [];
+        if (!dateValue) {
+          calculationDateList = [];
+        }
+        else if (isSelectedMonthAndYear) {
+          calculationDateList = this.dateList;
+        }
+        else {
+          calculationDateList = this.buildDateList({
+            monthIndex: month,
+            selectedYear: year
           });
-        this.valueIsInvalid = !calculationDateList.find(dateObj => dateObj.dateString === momentValue.format('YYYY-MM-DD')).isValid;
-        if (this.valueIsInvalid) {
+        }
+        const dateValueDayOfMonth = (_c = dateValue === null || dateValue === void 0 ? void 0 : dateValue.getDate()) !== null && _c !== void 0 ? _c : undefined;
+        const isDateValueInvalid = dateValueDayOfMonth
+          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth)
+            .isValid
+          : true;
+        if (isDateValueInvalid) {
           this.error.emit({
             errors: [
               {
@@ -446,47 +470,48 @@ export class Q2Calendar {
           });
         }
         else {
-          this.success.emit({ value: momentValue.format('YYYY-MM-DD') });
+          this.success.emit({ value: formatDateISO(dateValue) });
         }
       }
     }
     catch (error) {
-      console.log('Invalid moment value ', this.momentValue);
+      console.log('Invalid moment value ', this.dateValue);
     }
   }
   focusInput() {
     var _a;
     (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
   }
-  focusDate(target) {
-    const formattedDate = formatDateISO(target);
-    const validDate = this.daysContainer.querySelector(`.cal-day.is-valid[data-date="${formattedDate}"]`);
-    validDate === null || validDate === void 0 ? void 0 : validDate.dispatchEvent(new FocusEvent('focus'));
-  }
-  focusNextDay(focusedValue) {
-    const focusedDate = new Date(focusedValue);
-    focusedDate.setDate(focusedDate.getDate() + 1);
-    this.focusDate(focusedDate);
+  checkActiveCellForBlankness() {
+    const activeElement = this.hostElement.shadowRoot.activeElement;
+    if (!activeElement ||
+      activeElement.tagName !== 'TD' ||
+      !activeElement.hasAttribute('aria-hidden'))
+      return;
+    const { calendarBody } = this;
+    const calendarCells = Array.from(calendarBody.querySelectorAll('td'));
+    const indexOfCell = Array.from(calendarCells).indexOf(activeElement);
+    const dayToFocus = indexOfCell < 15
+      ? 1
+      : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
+    this.focusDay(this.generateDateFromDay(dayToFocus));
   }
-  focusPreviousDay(focusedValue) {
-    const focusedDate = new Date(focusedValue);
-    focusedDate.setDate(focusedDate.getDate() - 1);
-    this.focusDate(focusedDate);
+  generateDateFromDay(day) {
+    const { monthIndex, selectedYear } = this.selectedMonthYear;
+    return removeTimezoneOffset(new Date(selectedYear, monthIndex, day));
   }
-  focusDayNextWeek(focusedValue) {
-    const focusedDate = new Date(focusedValue);
-    focusedDate.setDate(focusedDate.getDate() + 7);
-    this.focusDate(focusedDate);
+  activateDay(date) {
+    this.goToMonthYear(date.getMonth(), date.getFullYear());
+    this.scheduledAfterRender.push(() => this.focusDay(date));
   }
-  focusDayLastWeek(focusedValue) {
-    const focusedDate = new Date(focusedValue);
-    focusedDate.setDate(focusedDate.getDate() - 7);
-    this.focusDate(focusedDate);
+  focusDay(date) {
+    var _a;
+    (_a = this.calendarBody.querySelector(`td[data-day="${date.getDate()}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
     return (h("click-elsewhere", { class: `calendar-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere },
       this.calendarField(),
-      h("div", { ref: el => (this.dropdownContainer = el), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}` },
+      h("div", { ref: el => (this.dropdownContainer = el), "aria-modal": "true", role: "dialog", "aria-label": loc('tecton.element.calendar.dialogLabel'), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}` },
         this.isTypeable && this.hintField(),
         this.calendarPopUp())));
   }
@@ -514,39 +539,42 @@ export class Q2Calendar {
   calendarField() {
     return (h("q2-input", { ref: el => (this.inputField = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
         (this.invalid && ['tecton.element.calendar.invalid']) ||
-        [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
+        [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
   }
   calendarPopUp() {
+    const { monthIndex, selectedYear } = this.selectedMonthYear;
     return (h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup },
       this.calendarLabel && h("p", { class: "calendar-label" }, loc(this.calendarLabel)),
       h("div", { class: "cal-month-heading" },
-        h("q2-btn", { label: loc('tecton.element.calendar.previousMonth'), "hide-label": true, ref: elm => (this.btnPrevMonth = elm), class: "cal-nav-btn prev-month", "test-id": "previousMonthButton", onClick: this.onPreviousMonthClick },
+        h("q2-btn", { label: loc('tecton.element.calendar.previousMonth'), "hide-label": true, ref: elm => (this.btnPrevMonth = elm), class: "cal-nav-btn prev-month", "test-id": "previousMonthButton", onClick: () => this.goToMonthYear(monthIndex - 1, selectedYear) },
           h("q2-icon", { type: "chevron-left" })),
-        h("span", { class: "cal-month-text" }, this.selectedMonthYear.selectedMonth),
-        h("q2-btn", { label: loc('tecton.element.calendar.nextMonth'), "hide-label": true, class: "cal-nav-btn next-month", ref: elm => (this.btnNextMonth = elm), "test-id": "nextMonthButton", onClick: this.onNextMonthClick },
+        h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]),
+        h("q2-btn", { label: loc('tecton.element.calendar.nextMonth'), "hide-label": true, class: "cal-nav-btn next-month", ref: elm => (this.btnNextMonth = elm), "test-id": "nextMonthButton", onClick: () => this.goToMonthYear(monthIndex + 1, selectedYear) },
           h("q2-icon", { type: "chevron-right" })),
-        h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", ref: elm => (this.btnPrevYear = elm), "test-id": "previousYearButton", onClick: this.onPreviousYearClick },
+        h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", ref: elm => (this.btnPrevYear = elm), "test-id": "previousYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear - 1) },
           h("q2-icon", { type: "chevron-left" })),
         h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear),
-        h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", ref: elm => (this.btnNextYear = elm), "test-id": "nextYearButton", onClick: this.onNextYearClick },
+        h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", ref: elm => (this.btnNextYear = elm), "test-id": "nextYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear + 1) },
           h("q2-icon", { type: "chevron-right" }))),
+      h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`),
       this.calendarDays(),
       this.disclaimer && h("div", { class: "calendar-disclaimer" }, loc(this.disclaimer)),
       h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
   }
   calendarDays() {
-    return (h("div", { class: "cal-days", ref: elm => (this.daysContainer = elm), onClick: this.onDateSelection, onKeyDown: this.onDateKeydown },
-      this.dayAbbrStrings.map(day => {
-        return h("div", { class: "cal-day-heading" }, day);
-      }),
-      this.dateList.map(date => this.generateDateDOM(date))));
-  }
-  generateDateDOM(date) {
-    return date.isEmpty ? (h("div", null)) : (h("q2-btn", { label: `${date.isToday ? `${loc('tecton.element.calendar.today')}, ` : ''}${date.dayOfWeek}, ${date.dateString}`, "hide-label": true, ariaSelected: date.isSelected, disabled: !date.isValid, class: `cal-day${date.classList}`, "data-date": date.dateString, "test-id": "dateButton" },
-      h("div", { class: "date-details" },
-        date.isToday && (h("span", { class: "today-decorator" }, loc('tecton.element.calendar.today'))),
-        h("span", null, date.integer),
-        date.isActivityDate && h("div", { class: "activity-decorator" }))));
+    const monthName = this.monthStrings[this.selectedMonthYear.monthIndex];
+    return (h("table", { role: "grid", "aria-labelledby": "table-label" },
+      h("thead", null,
+        h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", abbr: this.dayStrings[index] }, this.dayAbbrStrings[index]))))),
+      h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm) }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
+        var _a;
+        let ariaLabel = `${monthName} ${day.integer}`;
+        if (day.isSelected)
+          ariaLabel += ` (${loc('tecton.element.calendar.selected')})`;
+        return (h("td", { class: day.classList, "aria-hidden": day.isEmpty ? 'true' : undefined, tabindex: day.isSelected ? 0 : -1, role: day.isSelected ? 'gridcell' : undefined, "aria-selected": day.isSelected ? 'true' : undefined, "aria-disabled": day.isValid ? undefined : 'true', "data-day": day.integer || undefined, "data-date": day.date ? formatDateISO(day.date) : undefined },
+          (day === null || day === void 0 ? void 0 : day.isToday) && (h("div", { class: "today-decorator" }, loc('tecton.element.calendar.today'))),
+          h("div", { "aria-label": ariaLabel }, (_a = day === null || day === void 0 ? void 0 : day.integer) !== null && _a !== void 0 ? _a : '')));
+      })))))));
   }
   static get is() { return "q2-calendar"; }
   static get encapsulation() { return "shadow"; }
@@ -884,6 +912,24 @@ export class Q2Calendar {
       "attribute": "pop-direction",
       "reflect": true
     },
+    "assume": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'current' | 'future' | 'past'",
+        "resolved": "\"current\" | \"future\" | \"past\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "assume",
+      "reflect": true,
+      "defaultValue": "'current'"
+    },
     "errors": {
       "type": "unknown",
       "mutable": true,
@@ -1047,5 +1093,11 @@ export class Q2Calendar {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "focus",
+      "method": "delegateFocus",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }