q2-tecton-elements 1.18.0 → 1.19.1

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

@@ -1,19 +1,13 @@
-import { Component, Prop, Element, State, Event, Listen, Watch, h, } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { addDays, isSameDay, format, isValid as isValidDate } from 'date-fns';
 import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString, } from './helpers';
 import { buildDates, getValidDaysOfWeek } from './validation';
 import { handleAriaLabel, loc, setPopProperties, overrideFocus, isEventFromElement } from 'src/utils';
 export class Q2Calendar {
   constructor() {
-    this.assume = 'current';
-    this.dropdownOpen = false;
-    this.keyboardSelection = false;
-    this.typedValue = '';
     this.formatModifier = 'M/D/YYYY'; // To allow missing leading zero, 4/3/2021 => converts into 04/03/2021
     this.defaultFormatString = 'mm/dd/yyyy';
     this.defaultHintMessage = loc('tecton.element.calendar.hint.format') + ': ' + this.defaultFormatString;
-    this.hintMessage = this.defaultHintMessage;
-    this.hintMessageType = 'info';
     this.scheduledAfterRender = [];
     this.dayAbbrStrings = getDays();
     this.dayStrings = getDaysOfWeek();
@@ -188,7 +182,15 @@ export class Q2Calendar {
       const dateCell = event.target.closest('td:not([aria-hidden])');
       if (!dateCell)
         return;
-      this.selectDate(removeTimezoneOffset(new Date(dateCell.dataset.date)));
+      const clickedDate = removeTimezoneOffset(new Date(dateCell.dataset.date));
+      this.selectDate(clickedDate);
+      if (this.isTypeable) {
+        this.setHints({
+          isValid: true,
+          message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(clickedDate)}`,
+          messageType: 'success',
+        });
+      }
       this.closeCalendar();
     };
     this.onDateKeydown = (event) => {
@@ -256,6 +258,37 @@ export class Q2Calendar {
           break;
       }
     };
+    this.value = undefined;
+    this.label = undefined;
+    this.hideLabel = undefined;
+    this.ariaLabel = undefined;
+    this.optional = undefined;
+    this.disabled = undefined;
+    this.readonly = undefined;
+    this.invalid = undefined;
+    this.typeable = undefined;
+    this.placeholder = undefined;
+    this.buttonLabel = undefined;
+    this.disabledMsg = undefined;
+    this.calendarLabel = undefined;
+    this.disclaimer = undefined;
+    this.displayFormat = undefined;
+    this.startDate = undefined;
+    this.endDate = undefined;
+    this.cutoffTime = undefined;
+    this.daysOfWeekChecksum = undefined;
+    this.popDirection = undefined;
+    this.assume = 'current';
+    this.errors = undefined;
+    this.invalidDates = undefined;
+    this.validDates = undefined;
+    this.onsuccess = undefined;
+    this.dropdownOpen = false;
+    this.keyboardSelection = false;
+    this.typedValue = '';
+    this.dateList = undefined;
+    this.hintMessage = this.defaultHintMessage;
+    this.hintMessageType = 'info';
   }
   resizeIframe() {
     return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
@@ -394,6 +427,10 @@ export class Q2Calendar {
         ? formatDateShort(newValue.toDate())
         : newValue;
       this.typedValue = newValueAsString;
+      // reset hint when value is cleared
+      if (!newValueAsString && !this.invalid) {
+        this.setHints({ isValid: true, message: this.defaultHintMessage, messageType: 'info' });
+      }
     }
     else {
       const dateValue = isMoment ? newValue.toDate() : stringToDate(newValue);
@@ -506,11 +543,7 @@ export class Q2Calendar {
     (_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), "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())));
+    return (h("click-elsewhere", { class: `calendar-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere }, this.calendarField(), 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())));
   }
   hintField() {
     return (h("q2-message", { type: this.hintMessageType, class: "calendar-hint" }, this.hintMessage));
@@ -540,578 +573,571 @@ export class Q2Calendar {
   }
   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.goToMonthYear(monthIndex - 1, selectedYear) },
-          h("q2-icon", { type: "chevron-left" })),
-        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.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.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 })));
+    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.goToMonthYear(monthIndex - 1, selectedYear) }, h("q2-icon", { type: "chevron-left" })), 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.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.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() {
     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 : '')));
-      })))))));
+    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"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string | { toDate(): Date }",
-        "resolved": "string | { toDate(): Date; }",
-        "references": {
-          "Date": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | { toDate(): Date }",
+          "resolved": "string | { toDate(): Date; }",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": true
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "hide-label",
-      "reflect": true
-    },
-    "ariaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "aria-label",
-      "reflect": true
-    },
-    "optional": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "optional",
-      "reflect": true
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true
       },
-      "attribute": "disabled",
-      "reflect": true
-    },
-    "readonly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "hideLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hide-label",
+        "reflect": true
       },
-      "attribute": "readonly",
-      "reflect": true
-    },
-    "invalid": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "aria-label",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "optional": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "optional",
+        "reflect": true
       },
-      "attribute": "invalid",
-      "reflect": true
-    },
-    "typeable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true
       },
-      "attribute": "typeable",
-      "reflect": true
-    },
-    "placeholder": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "invalid": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "invalid",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "typeable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "typeable",
+        "reflect": true
       },
-      "attribute": "placeholder",
-      "reflect": true
-    },
-    "buttonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "button-label",
+        "reflect": true
       },
-      "attribute": "button-label",
-      "reflect": true
-    },
-    "disabledMsg": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "disabledMsg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled-msg",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "calendarLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "calendar-label",
+        "reflect": true
       },
-      "attribute": "disabled-msg",
-      "reflect": true
-    },
-    "calendarLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "disclaimer": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disclaimer",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "displayFormat": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display-format",
+        "reflect": true
       },
-      "attribute": "calendar-label",
-      "reflect": true
-    },
-    "disclaimer": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "startDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "start-date",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "endDate": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "end-date",
+        "reflect": true
       },
-      "attribute": "disclaimer",
-      "reflect": true
-    },
-    "displayFormat": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "cutoffTime": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "cutoff-time",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "daysOfWeekChecksum": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "days-of-week-checksum",
+        "reflect": true
       },
-      "attribute": "display-format",
-      "reflect": true
-    },
-    "startDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "popDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pop-direction",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "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'"
       },
-      "attribute": "start-date",
-      "reflect": true
-    },
-    "endDate": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "end-date",
-      "reflect": true
-    },
-    "cutoffTime": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "cutoff-time",
-      "reflect": true
-    },
-    "daysOfWeekChecksum": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "days-of-week-checksum",
-      "reflect": true
-    },
-    "popDirection": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'up' | 'down'",
-        "resolved": "\"down\" | \"up\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "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,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "errors": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "invalidDates": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "invalidDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "validDates": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+      "validDates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "onsuccess": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "(e: CustomEvent) => void",
-        "resolved": "(e: CustomEvent<any>) => void",
-        "references": {
-          "CustomEvent": {
-            "location": "global"
+      "onsuccess": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(e: CustomEvent) => void",
+          "resolved": "(e: CustomEvent<any>) => void",
+          "references": {
+            "CustomEvent": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
       }
-    }
-  }; }
-  static get states() { return {
-    "dropdownOpen": {},
-    "keyboardSelection": {},
-    "typedValue": {},
-    "dateList": {},
-    "hintMessage": {},
-    "hintMessageType": {}
-  }; }
-  static get events() { return [{
-      "method": "change",
-      "name": "change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "error",
-      "name": "error",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }, {
-      "method": "success",
-      "name": "success",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownOpen": {},
+      "keyboardSelection": {},
+      "typedValue": {},
+      "dateList": {},
+      "hintMessage": {},
+      "hintMessageType": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "change",
+        "name": "change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "error",
+        "name": "error",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "success",
+        "name": "success",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "hostElement"; }
-  static get watchers() { return [{
-      "propName": "ariaLabel",
-      "methodName": "ariaLabelObserver"
-    }, {
-      "propName": "value",
-      "methodName": "valueObserver"
-    }, {
-      "propName": "daysOfWeekChecksum",
-      "methodName": "daysOfWeekChecksumObserver"
-    }, {
-      "propName": "validDates",
-      "methodName": "validDatesObserver"
-    }, {
-      "propName": "invalidDates",
-      "methodName": "invalidDatesObserver"
-    }, {
-      "propName": "startDate",
-      "methodName": "startDateObserver"
-    }, {
-      "propName": "endDate",
-      "methodName": "endDateObserver"
-    }, {
-      "propName": "cutoffTime",
-      "methodName": "cutoffTimeObserver"
-    }]; }
-  static get listeners() { return [{
-      "name": "change",
-      "method": "defaultChangeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "error",
-      "method": "defaultErrorHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "success",
-      "method": "defaultSuccessHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "delegateFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "ariaLabel",
+        "methodName": "ariaLabelObserver"
+      }, {
+        "propName": "value",
+        "methodName": "valueObserver"
+      }, {
+        "propName": "daysOfWeekChecksum",
+        "methodName": "daysOfWeekChecksumObserver"
+      }, {
+        "propName": "validDates",
+        "methodName": "validDatesObserver"
+      }, {
+        "propName": "invalidDates",
+        "methodName": "invalidDatesObserver"
+      }, {
+        "propName": "startDate",
+        "methodName": "startDateObserver"
+      }, {
+        "propName": "endDate",
+        "methodName": "endDateObserver"
+      }, {
+        "propName": "cutoffTime",
+        "methodName": "cutoffTimeObserver"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "change",
+        "method": "defaultChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "error",
+        "method": "defaultErrorHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "success",
+        "method": "defaultSuccessHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focus",
+        "method": "delegateFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }