q2-tecton-elements 1.69.1 → 1.70.0

package/dist/components/q2-calendar.js

@@ -1,4 +1,4 @@
-import { proxyCustomElement as t, HTMLElement as e, createEvent as a, h as i, transformTag as r } from "@stencil/core/internal/client";
+import { proxyCustomElement as e, HTMLElement as t, createEvent as a, h as i, transformTag as r } from "@stencil/core/internal/client";
 
 import { d as n } from "./index3.js";
 
@@ -22,19 +22,19 @@ import { d as D } from "./q2-message2.js";
 
 import { d as w } from "./q2-popover2.js";
 
-function formatDateISO(t) {
-  const e = new Date(t);
-  if (n.isValid(e)) return n.formatISO(e, {
+function formatDateISO(e) {
+  const t = new Date(e);
+  if (n.isValid(t)) return n.formatISO(t, {
     representation: "date"
   });
 }
 
 let k, x, T;
 
-function formatDateShort(t) {
-  const e = new Date(t);
-  if (!n.isValid(e)) return;
-  const a = e.toISOString();
+function formatDateShort(e) {
+  const t = new Date(e);
+  if (!n.isValid(t)) return;
+  const a = t.toISOString();
   return k || (k = new Intl.DateTimeFormat("en-US", {
     month: "2-digit",
     day: "2-digit",
@@ -43,97 +43,97 @@ function formatDateShort(t) {
   })), k.format(new Date(a));
 }
 
-function formatDateLong(t) {
-  const e = new Date(t);
-  if (n.isValid(e)) return x || (x = new Intl.DateTimeFormat("en-US", {
+function formatDateLong(e) {
+  const t = new Date(e);
+  if (n.isValid(t)) return x || (x = new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
-  })), x.format(e);
+  })), x.format(t);
 }
 
-function stringToDate(t) {
-  const e = "string" == typeof t;
-  if (!e && t && n.isValid(new Date(t || void 0))) t = formatDateISO(t); else if (!t || !n.isValid(new Date(t))) return;
+function stringToDate(e) {
+  const t = "string" == typeof e;
+  if (!t && e && n.isValid(new Date(e || void 0))) e = formatDateISO(e); else if (!e || !n.isValid(new Date(e))) return;
   let a;
-  const i = t.split(/[\/\-]/).map((t => t.padStart(2, "0"))), r = e && t.length >= 24 && "T" === t[10], s = 3 === i.length, o = i.length < 3;
-  if (r) t = t.split("T")[0], a = new Date(t); else if (s) {
+  const i = e.split(/[\/\-]/).map((e => e.padStart(2, "0"))), r = t && e.length >= 24 && "T" === e[10], s = 3 === i.length, o = i.length < 3;
+  if (r) e = e.split("T")[0], a = new Date(e); else if (s) {
     // Reorder mm/dd/yyyy dates for ISO formatting
     // [mm, dd, yyyy] -> [yyyy, mm, dd]
-    t.includes("/") && 4 === i[2].length && i.unshift(i.pop()), a = new Date(Date.UTC(parseInt(i[0]), parseInt(i[1]) - 1, parseInt(i[2])));
+    e.includes("/") && 4 === i[2].length && i.unshift(i.pop()), a = new Date(Date.UTC(parseInt(i[0]), parseInt(i[1]) - 1, parseInt(i[2])));
   } else if (o) {
-    const t = new Date;
-    let e, r, n;
+    const e = new Date;
+    let t, r, n;
     switch (i.length) {
      case 1:
-      e = t.getFullYear(), r = i[0], n = "01";
+      t = e.getFullYear(), r = i[0], n = "01";
       break;
 
      case 2:
-      e = t.getFullYear(), r = i[0], n = i[1];
+      t = e.getFullYear(), r = i[0], n = i[1];
     }
-    a = new Date(`${e}-${r}-${n}`);
+    a = new Date(`${t}-${r}-${n}`);
   }
   if (n.isValid(a)) 
   // result = setHours(result, 0);
   return a = removeTimezoneOffset(a), n.isValid(a) ? a : void 0;
 }
 
-function removeTimezoneOffset(t) {
-  const e = t.getTimezoneOffset();
+function removeTimezoneOffset(e) {
+  const t = e.getTimezoneOffset();
   // Minutes compensation for some timezones like India, Central Australia and etc use  GMT+5:30, GMT+9:30
-    return n.setMinutes(t, e + Math.abs(e % 60));
+    return n.setMinutes(e, t + Math.abs(t % 60));
 }
 
-function stringArrayToDate(t) {
-  return Array.isArray(t) && 0 !== t.length ? t.map((t => stringToDate(t))) : [];
+function stringArrayToDate(e) {
+  return Array.isArray(e) && 0 !== e.length ? e.map((e => stringToDate(e))) : [];
 }
 
-function setupMonthYear(t = new Date) {
+function setupMonthYear(e = new Date) {
   return {
-    monthIndex: t.getMonth(),
-    selectedYear: t.getFullYear()
+    monthIndex: e.getMonth(),
+    selectedYear: e.getFullYear()
   };
 }
 
-function validateInput(t = "", e = [], a = [], // white list
+function validateInput(e = "", t = [], a = [], // white list
 i = [], // black list
 r, o, l = "mm/dd/yyyy", d) {
   let c = !1, h = !1, u = "info", p = `${s("tecton.element.calendar.hint.format")}: ${l}`;
-  if (!t) return {
+  if (!e) return {
     isValid: c,
     inputDate: new Date(""),
     isAvailable: h,
     messageType: u,
     message: p
   };
-  const v = function(t, e) {
+  const v = function(e, t) {
     const a = new Date;
     // eslint-disable-next-line prefer-const
-        let [i, r, n] = t.split("/");
+        let [i, r, n] = e.split("/");
     "0" === i && (i = "01");
     "0" === r && (r = "01");
-    if (10 === t.length) return new Date(t);
+    if (10 === e.length) return new Date(e);
     if (i && r && Number(r) > 0) {
-      const t = Number(r) < 10 ? "0" + Number(r) : r, a = !n || n.length < 4 ? function(t, e, a) {
-        const i = `${t}/${e}`, r = new Date, n = r.getMonth() < 9 ? "0" + (r.getMonth() + 1) : "" + (r.getMonth() + 1), s = r.getDate() < 10 ? "0" + r.getDate() : "" + r.getDate(), o = `${n}/${s}/${r.getFullYear()}`;
+      const e = Number(r) < 10 ? "0" + Number(r) : r, a = !n || n.length < 4 ? function(e, t, a) {
+        const i = `${e}/${t}`, r = new Date, n = r.getMonth() < 9 ? "0" + (r.getMonth() + 1) : "" + (r.getMonth() + 1), s = r.getDate() < 10 ? "0" + r.getDate() : "" + r.getDate(), o = `${n}/${s}/${r.getFullYear()}`;
         let l = r.getFullYear();
         "future" === a && o.slice(0, 5) > i ? l = r.getFullYear() + 1 : "past" === a && o.slice(0, 5) < i && (l = r.getFullYear() - 1);
         return l.toString();
-      }(i, r, e) : n;
-      return new Date(`${i}/${t}/${a}`);
+      }(i, r, t) : n;
+      return new Date(`${i}/${e}/${a}`);
     }
     if (i) return new Date(`${i}/01/${a.getFullYear()}`);
-  }(t, d), m = v.getMonth() + 1, f = v.getDate(), b = v.getFullYear(), g = [ m, f, b ];
+  }(e, d), m = v.getMonth() + 1, f = v.getDate(), b = v.getFullYear(), g = [ m, f, b ];
   if (n.isValid(v)) {
     const n = getMonths()[v.getMonth()];
-    10 === t.length && (c = !0, u = null, p = null), h = e.includes(v.getDay());
+    10 === e.length && (c = !0, u = null, p = null), h = t.includes(v.getDay());
     const d = formatDateISO(v);
     if (h) {
-      const t = a.length && !a.includes(d), e = i.length && i.includes(d);
-      (t || e || r && r > d || o && o < d) && (h = !1);
+      const e = a.length && !a.includes(d), t = i.length && i.includes(d);
+      (e || t || r && r > d || o && o < d) && (h = !1);
     }
-    if (t.length >= 5 && !h) {
+    if (e.length >= 5 && !h) {
       c = !1, u = "error";
       p = !n || !f || !b ? `${s("tecton.element.calendar.hint.invalidDate")}: ${l}` : s("tecton.element.calendar.hint.notAvailableDate", [ formatDateLong(v) ]);
     } else c = !0;
@@ -152,51 +152,51 @@ function getMonths() {
   return [ s("tecton.element.calendar.months.January"), s("tecton.element.calendar.months.February"), s("tecton.element.calendar.months.March"), s("tecton.element.calendar.months.April"), s("tecton.element.calendar.months.May"), s("tecton.element.calendar.months.June"), s("tecton.element.calendar.months.July"), s("tecton.element.calendar.months.August"), s("tecton.element.calendar.months.September"), s("tecton.element.calendar.months.October"), s("tecton.element.calendar.months.November"), s("tecton.element.calendar.months.December") ];
 }
 
-function getValidDaysOfWeek(t = 127) {
+function getValidDaysOfWeek(e = 127) {
   /* tslint:disable:no-bitwise */
-  const e = 2 & t, a = 4 & t, i = 8 & t, r = 16 & t, n = 32 & t, s = 64 & t, o = [];
-  return t <= 0 || (1 & t && o.push(0), e && o.push(1), a && o.push(2), i && o.push(3), 
+  const t = 2 & e, a = 4 & e, i = 8 & e, r = 16 & e, n = 32 & e, s = 64 & e, o = [];
+  return e <= 0 || (1 & e && o.push(0), t && o.push(1), a && o.push(2), i && o.push(3), 
   r && o.push(4), n && o.push(5), s && o.push(6)), o;
 }
 
-function validateAgainstChecksum(t, e) {
-  return t.includes(e.getDay());
+function validateAgainstChecksum(e, t) {
+  return e.includes(t.getDay());
 }
 
-function validateAgainstBlacklist(t, e) {
-  return !validateAgainstWhitelist(t, e);
+function validateAgainstBlacklist(e, t) {
+  return !validateAgainstWhitelist(e, t);
 }
 
-function validateAgainstWhitelist(t, e) {
-  return t.some((t => n.isSameDay(t, e)));
+function validateAgainstWhitelist(e, t) {
+  return e.some((e => n.isSameDay(e, t)));
 }
 
-function buildDates(t, e, a, i, r, s, o) {
+function buildDates(e, t, a, i, r, s, o) {
   const l = [ baseValidation.bind(null, s, new Date) ];
-  return (null == e ? void 0 : e.length) ? l.push(validateAgainstWhitelist.bind(null, e)) : l.push(validateAgainstChecksum.bind(null, t)), 
-  l.push(validateAgainstBlacklist.bind(null, a)), function({monthIndex: t, selectedYear: e}, a, i, r, s) {
-    const o = !n.isValid(new Date(s)), l = function(t, e) {
-      const a = n.getDaysInMonth(new Date(e, t));
-      return [ ...Array(a).keys() ].reduce(((a, i) => (a.push(new Date(e, t, i + 1)), 
+  return (null == t ? void 0 : t.length) ? l.push(validateAgainstWhitelist.bind(null, t)) : l.push(validateAgainstChecksum.bind(null, e)), 
+  l.push(validateAgainstBlacklist.bind(null, a)), function({monthIndex: e, selectedYear: t}, a, i, r, s) {
+    const o = !n.isValid(new Date(s)), l = function(e, t) {
+      const a = n.getDaysInMonth(new Date(t, e));
+      return [ ...Array(a).keys() ].reduce(((a, i) => (a.push(new Date(t, e, i + 1)), 
       a)), []);
-    }(t, e).map(((t, e) => {
-      const s = r.some((e => !e(t))), l = function(t, e, a) {
+    }(e, t).map(((e, t) => {
+      const s = r.some((t => !t(e))), l = function(e, t, a) {
         a || (a = new Date);
-        const i = a && n.isSameDay(a, t), r = n.isSameDay(t, new Date), s = n.isSameDay(t, null == e ? void 0 : e.startDate), o = n.isSameDay(t, null == e ? void 0 : e.endDate);
+        const i = a && n.isSameDay(a, e), r = n.isSameDay(e, new Date), s = n.isSameDay(e, null == t ? void 0 : t.startDate), o = n.isSameDay(e, null == t ? void 0 : t.endDate);
         return {
           isSelected: i,
           isToday: r,
           isStartDate: s,
           isEndDate: o
         };
-      }(t, i, a), d = function({isInvalid: t, isSelected: e, isEndDate: a, isStartDate: i, isToday: r, isIncompleteDate: n}) {
+      }(e, i, a), d = function({isInvalid: e, isSelected: t, isEndDate: a, isStartDate: i, isToday: r, isIncompleteDate: n}) {
         const s = [];
-        t || s.push("is-valid");
-        e && s.push("is-selected");
+        e || s.push("is-valid");
+        t && s.push("is-selected");
         a && s.push("is-end-date");
         i && s.push("is-start-date");
         r && s.push("is-today");
-        e && t && !n && s.push("is-unavailable");
+        t && e && !n && s.push("is-unavailable");
         return s.join(" ");
       }({
         ...l,
@@ -206,25 +206,25 @@ function buildDates(t, e, a, i, r, s, o) {
       return {
         ...l,
         isValid: !s,
-        date: t,
-        integer: e + 1,
+        date: e,
+        integer: t + 1,
         isEmpty: !1,
         isActivity: !1,
         classList: d
       };
-    })), d = function(t) {
-      return addEmptyDates(0, t);
-    }(function(t, e) {
-      return new Date(e, t, 1, 1, 1, 1, 1).getDay();
-    }(t, e)), c = function(t) {
-      return 0 === t ? [] : addEmptyDates(t, 7);
+    })), d = function(e) {
+      return addEmptyDates(0, e);
+    }(function(e, t) {
+      return new Date(t, e, 1, 1, 1, 1, 1).getDay();
+    }(e, t)), c = function(e) {
+      return 0 === e ? [] : addEmptyDates(e, 7);
     }((d.length + l.length) % 7);
     return [ ...d, ...l, ...c ];
   }(i, r, s, l, o);
 }
 
-function baseValidation(t, e, a) {
-  const i = n.isAfter(null == t ? void 0 : t.startDate, a), r = n.isBefore(null == t ? void 0 : t.endDate, a), s = n.isSameDay(e, a) && n.isAfter(e, null == t ? void 0 : t.cutOffTime);
+function baseValidation(e, t, a) {
+  const i = n.isAfter(null == e ? void 0 : e.startDate, a), r = n.isBefore(null == e ? void 0 : e.endDate, a), s = n.isSameDay(t, a) && n.isAfter(t, null == e ? void 0 : e.cutOffTime);
   return !(i || s || r);
 }
 
@@ -241,15 +241,15 @@ const I = {
   classList: ""
 };
 
-function addEmptyDates(t, e) {
-  return 7 === t && (t = 0), [ ...Array(e - t).keys() ].map((() => ({
+function addEmptyDates(e, t) {
+  return 7 === e && (e = 0), [ ...Array(t - e).keys() ].map((() => ({
     ...I
   })));
 }
 
-const O =  t(class extends e {
-  constructor(t) {
-    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = a(this, "change", 7), 
+const O =  e(class extends t {
+  constructor(e) {
+    super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.change = a(this, "change", 7), 
     this.error = a(this, "error", 7), this.success = a(this, "success", 7), this.tctChange = a(this, "tctChange", 7), 
     this.tctError = a(this, "tctError", 7), this.tctSuccess = a(this, "tctSuccess", 7), 
     this.dayAbbrStrings = [ s("tecton.element.calendar.days.short.Sunday"), s("tecton.element.calendar.days.short.Monday"), s("tecton.element.calendar.days.short.Tuesday"), s("tecton.element.calendar.days.short.Wednesday"), s("tecton.element.calendar.days.short.Thursday"), s("tecton.element.calendar.days.short.Friday"), s("tecton.element.calendar.days.short.Saturday") ], 
@@ -275,76 +275,78 @@ const O =  t(class extends e {
          * when nested inside of elements with transform properties. This will be removed once the popover API is available
          * for use.
          */
-    this.popoverMode = null, this.closeCalendar = () => {
+    this.popoverMode = null, 
+    /** Show success styles when the calendar is in a valid state. The error state takes precedence when both are set. */
+    this.valid = !1, this.closeCalendar = () => {
       this.open && (this.open = !1, this.focusInput());
-    }, this.goToMonthYear = (t, e) => {
-      t < 0 ? (t = 11, e--) : t > 11 && (t = 0, e++), this.selectedMonthYear = {
-        monthIndex: t,
-        selectedYear: e
+    }, this.goToMonthYear = (e, t) => {
+      e < 0 ? (e = 11, t--) : e > 11 && (e = 0, t++), this.selectedMonthYear = {
+        monthIndex: e,
+        selectedYear: t
       }, this.dateList = this.buildDateList(this.selectedMonthYear), this.scheduledAfterRender.push((() => this.checkActiveCellForBlankness()));
-    }, this.onClickElsewhere = t => {
-      "click-elsewhere" === t.target.localName && (t.stopPropagation(), this.closeCalendar());
-    }, this.onDateKeydown = t => {
-      const {monthIndex: e, selectedYear: a} = this.selectedMonthYear, i = parseInt(t.target.dataset.day), r = this.generateDateFromDay(i);
-      switch (t.key) {
+    }, this.onClickElsewhere = e => {
+      "click-elsewhere" === e.target.localName && (e.stopPropagation(), this.closeCalendar());
+    }, this.onDateKeydown = e => {
+      const {monthIndex: t, selectedYear: a} = this.selectedMonthYear, i = parseInt(e.target.dataset.day), r = this.generateDateFromDay(i);
+      switch (e.key) {
        case "ArrowUp":
-        t.preventDefault(), this.activateDay(n.addDays(r, -7));
+        e.preventDefault(), this.activateDay(n.addDays(r, -7));
         break;
 
        case "ArrowDown":
-        t.preventDefault(), this.activateDay(n.addDays(r, 7));
+        e.preventDefault(), this.activateDay(n.addDays(r, 7));
         break;
 
        case "ArrowRight":
-        t.preventDefault(), this.activateDay(n.addDays(r, 1));
+        e.preventDefault(), this.activateDay(n.addDays(r, 1));
         break;
 
        case "ArrowLeft":
-        t.preventDefault(), this.activateDay(n.addDays(r, -1));
+        e.preventDefault(), this.activateDay(n.addDays(r, -1));
         break;
 
        case "PageUp":
-        t.preventDefault(), t.shiftKey ? this.goToMonthYear(e, a - 1) : this.goToMonthYear(e - 1, a);
+        e.preventDefault(), e.shiftKey ? this.goToMonthYear(t, a - 1) : this.goToMonthYear(t - 1, a);
         break;
 
        case "PageDown":
-        t.preventDefault(), t.shiftKey ? this.goToMonthYear(e, a + 1) : this.goToMonthYear(e + 1, a);
+        e.preventDefault(), e.shiftKey ? this.goToMonthYear(t, a + 1) : this.goToMonthYear(t + 1, a);
         break;
 
        case "Home":
-        t.preventDefault(), this.activateDay(n.addDays(r, -r.getDay()));
+        e.preventDefault(), this.activateDay(n.addDays(r, -r.getDay()));
         break;
 
        case "End":
-        t.preventDefault(), this.activateDay(n.addDays(r, 6 - r.getDay()));
+        e.preventDefault(), this.activateDay(n.addDays(r, 6 - r.getDay()));
         break;
 
        case "Escape":
-        t.preventDefault(), this.closeCalendar(), this.focusInput();
+        e.preventDefault(), this.closeCalendar(), this.focusInput();
         break;
 
        case "Enter":
        case " ":
-        if (t.preventDefault(), !this.dateList.find((({date: t}) => n.isSameDay(t, r))).isValid) return;
+        if (e.preventDefault(), !this.dateList.find((({date: e}) => n.isSameDay(e, r))).isValid) return;
         this.selectDate(r), this.closeCalendar(), this.focusInput();
       }
-    }, this.onDateSelection = t => {
-      const e = t.target.closest("td:not([aria-hidden])");
-      if (!e) return;
-      const a = removeTimezoneOffset(new Date(e.dataset.date));
+    }, this.onDateSelection = e => {
+      const t = e.target.closest("td:not([aria-hidden])");
+      if (!t) return;
+      const a = removeTimezoneOffset(new Date(t.dataset.date));
       this.selectDate(a), this.closeCalendar();
-    }, this.onHeaderControlKeydown = t => {
-      var e;
-      const a = this.generateDateFromDay(1), i = null === (e = this.calendarBody) || void 0 === e ? void 0 : e.querySelector('[aria-selected="true"]');
-      "Tab" !== t.key || i || (t.preventDefault(), this.activateDay(a));
+    }, this.onHeaderControlKeydown = e => {
+      var t;
+      const a = this.generateDateFromDay(1), i = null === (t = this.calendarBody) || void 0 === t ? void 0 : t.querySelector('[aria-selected="true"]');
+      "Tab" !== e.key || i || (e.preventDefault(), this.activateDay(a));
     }, this.onInputBlur = () => {
       if (!this.isTypeable) return;
-      const t = getValidDaysOfWeek(this.daysOfWeekChecksum), {typedValue: e} = this, {isValid: a, inputDate: i, isAvailable: r} = validateInput(this.typedValue, t, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
-      e || "Invalid Date" !== (null == i ? void 0 : i.toString()) ? a || e && e.length > 4 && // at least mm/dd provided
+      const e = getValidDaysOfWeek(this.daysOfWeekChecksum), {typedValue: t} = this, {isValid: a, inputDate: i, isAvailable: r} = validateInput(this.typedValue, e, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
+      t || "Invalid Date" !== (null == i ? void 0 : i.toString()) ? a || t && t.length > 4 && // at least mm/dd provided
       i && n.isValid(i) && r ? this.setCompleteInput(i) : this.value && (this.valueOnBlur = this.value, 
       this.value = null, p(this, [ "change", "tctChange" ], {
         value: null
-      }), this.typedValue = e) : 
+      }), this.typedValue = t) : 
       // initial/clear state
       this.setHints({
         isValid: !0,
@@ -353,72 +355,72 @@ const O =  t(class extends e {
       });
     }, this.onInputClick = () => {
       this.disabled || this.toggleCalendar();
-    }, this.onInputFocus = t => {
-      if (this.isTypeable && t.target === this.controlElement) {
+    }, this.onInputFocus = e => {
+      if (this.isTypeable && e.target === this.controlElement) {
         if (this.valueOnBlur && !this.value) {
-          const t = this.typedValue;
-          this.value = this.valueOnBlur, this.typedValue = t, this.valueOnBlur = null;
+          const e = this.typedValue;
+          this.value = this.valueOnBlur, this.typedValue = e, this.valueOnBlur = null;
         }
         this.closeCalendar();
       }
-    }, this.onInputInput = ({detail: {value: t}}) => {
-      this.typedValue = t;
-    }, this.onInputKeydown = t => {
-      const {dateValue: e} = this;
-      if (!this.disabled) switch (t.key) {
+    }, this.onInputInput = ({detail: {value: e}}) => {
+      this.typedValue = e;
+    }, this.onInputKeydown = e => {
+      const {dateValue: t} = this;
+      if (!this.disabled) switch (e.key) {
        case "ArrowDown":
-        t.preventDefault(), this.openCalendar(), this.activateDay(e || new Date);
+        e.preventDefault(), this.openCalendar(), this.activateDay(t || new Date);
         break;
 
        case "Enter":
        case " ":
         if (this.typeable) break;
-        t.preventDefault(), this.open ? this.closeCalendar() : (this.openCalendar(), this.activateDay(e || new Date));
+        e.preventDefault(), this.open ? this.closeCalendar() : (this.openCalendar(), this.activateDay(t || new Date));
       }
-    }, this.onInputKeyup = t => {
+    }, this.onInputKeyup = e => {
       if (this.disabled) return;
-      if ("Escape" === t.key) this.onInputBlur(), this.closeCalendar();
+      if ("Escape" === e.key) this.onInputBlur(), this.closeCalendar();
       if (!this.isTypeable) return;
       // handle missing zero in month and date
-            this.typedValue = function(t) {
-        if (!t) return "";
-        if (t.match(/^[1-9]\/$/)) return `0${t}/`;
-        if (t.match(/^[0-9]{2}\/[1-9]{1}\/$/)) {
-          const e = t.split("/");
-          return `${e[0]}/0${e[1]}/`;
+            this.typedValue = function(e) {
+        if (!e) return "";
+        if (e.match(/^[1-9]\/$/)) return `0${e}/`;
+        if (e.match(/^[0-9]{2}\/[1-9]{1}\/$/)) {
+          const t = e.split("/");
+          return `${t[0]}/0${t[1]}/`;
         }
-        return t;
+        return e;
       }(this.typedValue);
-      const {typedValue: e} = this, a = getValidDaysOfWeek(this.daysOfWeekChecksum), {isValid: i, message: r, messageType: s, inputDate: o, isAvailable: l, calendarPosition: d} = validateInput(e, a, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
+      const {typedValue: t} = this, a = getValidDaysOfWeek(this.daysOfWeekChecksum), {isValid: i, message: r, messageType: s, inputDate: o, isAvailable: l, calendarPosition: d} = validateInput(t, a, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
       if (d) {
-        const [t, e, a] = d, i = new Date(a, t - 1, e);
+        const [e, t, a] = d, i = new Date(a, e - 1, t);
         n.isValid(i) && (this.selectedMonthYear = setupMonthYear(i), this.dateList = this.buildDateList(this.selectedMonthYear), 
         this.validateDate());
       }
-      "Enter" === t.key ? (i || e && e.length > 4 && // at least mm/dd provided
+      "Enter" === e.key ? (i || t && t.length > 4 && // at least mm/dd provided
       o && n.isValid(o) && l ? this.setCompleteInput(o) : this.value && (this.value = null, 
       p(this, [ "change", "tctChange" ], {
         value: null
-      }), this.typedValue = e), this.keyboardSelection ? (this.keyboardSelection = !1, 
+      }), this.typedValue = t), this.keyboardSelection ? (this.keyboardSelection = !1, 
       this.closeCalendar()) : this.toggleCalendar()) : this.setHints({
         isValid: i,
         message: r,
         messageType: s
       });
-    }, this.onPopupKeyup = t => {
-      "Escape" !== t.key && "Esc" !== t.key || (this.onInputBlur(), this.closeCalendar());
+    }, this.onPopupKeyup = e => {
+      "Escape" !== e.key && "Esc" !== e.key || (this.onInputBlur(), this.closeCalendar());
     }, this.onRefocus = () => {
-      var t;
-      null === (t = this.btnPrevMonth) || void 0 === t || t.dispatchEvent(new FocusEvent("focus"));
+      var e;
+      null === (e = this.btnPrevMonth) || void 0 === e || e.dispatchEvent(new FocusEvent("focus"));
     }, this.openCalendar = () => {
       this.readonly || this.open || (this.selectedMonthYear = setupMonthYear(this.dateValue), 
       this.dateList = this.buildDateList(this.selectedMonthYear), this.open = !0);
-    }, this.selectDate = t => {
-      const {isValid: e} = this.dateList.find((({date: e}) => n.isSameDay(e, t)));
-      e && (p(this, [ "change", "tctChange" ], {
-        value: formatDateISO(t)
-      }), this.typedValue = formatDateShort(t), this.invalid = !1, p(this, [ "success", "tctSuccess" ], {
-        value: formatDateISO(t)
+    }, this.selectDate = e => {
+      const {isValid: t} = this.dateList.find((({date: t}) => n.isSameDay(t, e)));
+      t && (p(this, [ "change", "tctChange" ], {
+        value: formatDateISO(e)
+      }), this.typedValue = formatDateShort(e), this.invalid = !1, p(this, [ "success", "tctSuccess" ], {
+        value: formatDateISO(e)
       }));
     }, this.toggleCalendar = () => {
       this.readonly || (this.open ? this.closeCalendar() : this.openCalendar());
@@ -428,9 +430,9 @@ const O =  t(class extends e {
   // #region Component Lifecycle Events
   connectedCallback() {
     this.selectedMonthYear = setupMonthYear(this.dateValue), this.dateList = this.buildDateList(this.selectedMonthYear), 
-    this.value && this.isTypeable && !this.typedValue && (this.typedValue = function(t) {
-      const e = (t || "").split("-");
-      return 3 !== e.length ? "" : `${e[1]}/${e[2]}/${e[0]}`;
+    this.value && this.isTypeable && !this.typedValue && (this.typedValue = function(e) {
+      const t = (e || "").split("-");
+      return 3 !== t.length ? "" : `${t[1]}/${t[2]}/${t[0]}`;
     }(this.value)), this.validateDate();
   }
   componentWillLoad() {
@@ -441,30 +443,30 @@ const O =  t(class extends e {
   }
   componentDidRender() {
     setTimeout((() => {
-      this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [];
+      this.scheduledAfterRender.forEach((e => e())), this.scheduledAfterRender = [];
     }), 25);
   }
   // #endregion
   // #region Listeners
-  defaultChangeHandler(t) {
-    t.target === this.hostElement && !this.hostElement.onchange && t.detail && null !== t.detail.value && (this.value = t.detail.value);
+  defaultChangeHandler(e) {
+    e.target === this.hostElement && !this.hostElement.onchange && e.detail && null !== e.detail.value && (this.value = e.detail.value);
   }
   handleClear() {
     p(this, [ "change", "tctChange" ], {
       value: null
     }), this.value = null, this.typedValue = "";
   }
-  defaultErrorHandler(t) {
-    t.target !== this.hostElement || this.hostElement.onerror || ("error" === this.hintMessageType && this.hintMessage ? this.internalError = this.hintMessage : this.internalError = s("tecton.element.calendar.hint.invalidDate"));
+  defaultErrorHandler(e) {
+    e.target !== this.hostElement || this.hostElement.onerror || ("error" === this.hintMessageType && this.hintMessage ? this.internalError = this.hintMessage : this.internalError = s("tecton.element.calendar.hint.invalidDate"));
   }
-  delegateFocus(t) {
-    c(t, this.hostElement) && this.controlElement.shadowRoot.querySelector(".input-field").focus();
+  delegateFocus(e) {
+    c(e, this.hostElement) && this.controlElement.shadowRoot.querySelector(".input-field").focus();
   }
-  popoverStateHandler({detail: {open: t}}) {
-    this.open !== t && (this.open = t);
+  popoverStateHandler({detail: {open: e}}) {
+    this.open !== e && (this.open = e);
   }
-  defaultSuccessHandler(t) {
-    t.target === this.hostElement && ("function" == typeof this.onsuccess ? this.onsuccess(t) : (this.internalError = "", 
+  defaultSuccessHandler(e) {
+    e.target === this.hostElement && ("function" == typeof this.onsuccess ? this.onsuccess(e) : (this.internalError = "", 
     "error" === this.hintMessageType && this.hintMessage && (this.hintMessage = null, 
     this.hintMessageType = null, this.invalid = !1)));
   }
@@ -493,13 +495,13 @@ const O =  t(class extends e {
      * will not select the date.
      *
      * @testOnly
-     */  async setValue(t) {
-    var e;
-    const a = "string" == typeof t ? stringToDate(t) : t;
+     */  async setValue(e) {
+    var t;
+    const a = "string" == typeof e ? stringToDate(e) : e;
     if (!n.isValid(a)) return;
     await this.openPopover(), await h(), this.goToMonthYear(a.getMonth(), a.getFullYear()), 
     await h();
-    const i = null === (e = this.calendarTable) || void 0 === e ? void 0 : e.querySelector(`td[data-date="${formatDateISO(a)}"]`);
+    const i = null === (t = this.calendarTable) || void 0 === t ? void 0 : t.querySelector(`td[data-date="${formatDateISO(a)}"]`);
     null == i || i.click();
   }
   /**
@@ -512,10 +514,10 @@ const O =  t(class extends e {
      * Only applicable when the input is typeable.
      *
      * @testOnly
-     */  async typeValue(t) {
+     */  async typeValue(e) {
     if (!this.typeable) return;
-    const e = "string" == typeof t ? stringToDate(t) : t, a = formatDateShort(e);
-    if (!n.isValid(e)) return;
+    const t = "string" == typeof e ? stringToDate(e) : e, a = formatDateShort(t);
+    if (!n.isValid(t)) return;
     const {innerInputField: i, controlElement: r} = this;
     i.focus(), i.dispatchEvent(new FocusEvent("focus")), i.value = a, i.dispatchEvent(new InputEvent("input")), 
     r.dispatchEvent(new KeyboardEvent("keyup"));
@@ -549,15 +551,15 @@ const O =  t(class extends e {
   validDatesObserver() {
     this.dateList = this.buildDateList(this.selectedMonthYear), this.validateDate();
   }
-  valueObserver(t) {
+  valueObserver(e) {
     // resetting by empty string
-    if ("" === t) return this.value = void 0, void this.setHints({
+    if ("" === e) return this.value = void 0, void this.setHints({
       isValid: !0,
       message: this.defaultHintMessage,
       messageType: "info"
     });
-    const e = t && "string" != typeof t && "toDate" in t ? t.toDate() : stringToDate(t), a = formatDateShort(e);
-    this.isTypeable ? this.typedValue = a : (this.selectedMonthYear = setupMonthYear(e), 
+    const t = e && "string" != typeof e && "toDate" in e ? e.toDate() : stringToDate(e), a = formatDateShort(t);
+    this.isTypeable ? this.typedValue = a : (this.selectedMonthYear = setupMonthYear(t), 
     this.dateList = this.buildDateList(this.selectedMonthYear), this.validateDate(), 
     this.controlElement ? this.controlElement.value = a : this.scheduledAfterRender.push((() => {
       this.controlElement && (this.controlElement.value = a);
@@ -582,61 +584,61 @@ const O =  t(class extends e {
     return this.disabled && this.disabledMsg ? s(this.disabledMsg) : this.buttonLabel && (this.disabled || this.placeholder) ? s(this.buttonLabel) : this.placeholder && s(this.placeholder) || "";
   }
   get currentWeeks() {
-    return this.dateList.reduce(((t, e, a) => {
+    return this.dateList.reduce(((e, t, a) => {
       const i = Math.floor(a / 7);
-      return t[i] || (t[i] = []), t[i].push(e), t;
+      return e[i] || (e[i] = []), e[i].push(t), e;
     }), []);
   }
   get dateValidators() {
-    const t = new Date(this.cutoffTime || "");
+    const e = new Date(this.cutoffTime || "");
  // should fallback to InvalidDate
         return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: n.isValid(t) ? t : void 0
+      cutOffTime: n.isValid(e) ? e : void 0
     };
   }
   get dateValue() {
     if (this.isTypeable) return stringToDate(this.typedValue);
     {
-      let {value: t} = this;
-      if (t && "string" != typeof t && "toDate" in t) return t.toDate();
+      let {value: e} = this;
+      if (e && "string" != typeof e && "toDate" in e) return e.toDate();
       // stringified moment value assigned in html template e.g.) handlebar
-            return "string" == typeof t && 6 === t.split(" ").length && /GMT-\d{4}/g.test(t) && (t = formatDateISO(t)), 
-      stringToDate(t);
+            return "string" == typeof e && 6 === e.split(" ").length && /GMT-\d{4}/g.test(e) && (e = formatDateISO(e)), 
+      stringToDate(e);
     }
   }
   get defaultHintMessage() {
     return this.typeable ? s("tecton.element.calendar.hint.format") + ": " + this.defaultFormatString : s("tecton.element.calendar.hint.select");
   }
   get errorList() {
-    const {errors: t, internalError: e, invalid: a} = this;
+    const {errors: e, internalError: t, invalid: a} = this;
     let i = [];
-    if (e && (i = [ e ]), Array.isArray(t) && t.length) i = t.filter((t => !!t)).map((t => s(t))).concat(i); else if (!e && a) return [ "tecton.element.calendar.invalid" ];
+    if (t && (i = [ t ]), Array.isArray(e) && e.length) i = e.filter((e => !!e)).map((e => s(e))).concat(i); else if (!t && a) return [ "tecton.element.calendar.invalid" ];
     return i;
   }
   get formattedValue() {
-    const {typedValue: t, dateValue: e, displayFormat: a, isTypeable: i} = this;
-    return i ? t : void 0 === e ? "" : a ? n.format(e, function(t) {
-      return t.replace(/[d]/g, "E").replace(/[D]/g, "d").replace(/[Y]/g, "y").replace(/[l]/g, "P").replace(/[W]/g, "I");
+    const {typedValue: e, dateValue: t, displayFormat: a, isTypeable: i} = this;
+    return i ? e : void 0 === t ? "" : a ? n.format(t, function(e) {
+      return e.replace(/[d]/g, "E").replace(/[D]/g, "d").replace(/[Y]/g, "y").replace(/[l]/g, "P").replace(/[W]/g, "I");
     }(a)) : new Intl.DateTimeFormat("en-US", {
       year: "numeric",
       month: "2-digit",
       day: "2-digit",
       timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-    }).format(e);
+    }).format(t);
   }
   get hintList() {
-    const {hints: t, hintMessageType: e, hintMessage: a} = this;
-    return Array.isArray(t) && t.length ? t.filter((t => !!t)).map((t => s(t))) : "info" === e && a ? [ a ] : [];
+    const {hints: e, hintMessageType: t, hintMessage: a} = this;
+    return Array.isArray(e) && e.length ? e.filter((e => !!e)).map((e => s(e))) : "info" === t && a ? [ a ] : [];
   }
   get innerInputContainer() {
-    var t, e;
-    return null === (e = null === (t = this.controlElement) || void 0 === t ? void 0 : t.shadowRoot) || void 0 === e ? void 0 : e.querySelector(".input-container");
+    var e, t;
+    return null === (t = null === (e = this.controlElement) || void 0 === e ? void 0 : e.shadowRoot) || void 0 === t ? void 0 : t.querySelector(".input-container");
   }
   get innerInputField() {
-    var t, e;
-    return null === (e = null === (t = this.controlElement) || void 0 === t ? void 0 : t.shadowRoot) || void 0 === e ? void 0 : e.querySelector(".input-field");
+    var e, t;
+    return null === (t = null === (e = this.controlElement) || void 0 === e ? void 0 : e.shadowRoot) || void 0 === t ? void 0 : t.querySelector(".input-field");
   }
   get inputId() {
     return "calendar-guid-" + this.guid;
@@ -645,78 +647,78 @@ const O =  t(class extends e {
     return this.typeable;
   }
   get selectedDate() {
-    var t;
-    const e = null === (t = this.calendarBody) || void 0 === t ? void 0 : t.querySelector('[aria-selected="true"]');
-    return e ? removeTimezoneOffset(new Date(e.dataset.date)) : null;
+    var e;
+    const t = null === (e = this.calendarBody) || void 0 === e ? void 0 : e.querySelector('[aria-selected="true"]');
+    return t ? removeTimezoneOffset(new Date(t.dataset.date)) : null;
   }
   _togglePopover() {
-    const t = this.typeable ? this.btnCalendarToggle : this.innerInputField;
-    null == t || t.click(), null == t || t.focus(), t.dispatchEvent(new FocusEvent("focus"));
+    const e = this.typeable ? this.btnCalendarToggle : this.innerInputField;
+    null == e || e.click(), null == e || e.focus(), e.dispatchEvent(new FocusEvent("focus"));
   }
-  activateDay(t) {
-    this.goToMonthYear(t.getMonth(), t.getFullYear()), this.scheduledAfterRender.push((() => this.focusDay(t)));
+  activateDay(e) {
+    this.goToMonthYear(e.getMonth(), e.getFullYear()), this.scheduledAfterRender.push((() => this.focusDay(e)));
   }
-  buildDateList(t) {
-    const e = stringArrayToDate(this.invalidDates);
-    return buildDates(getValidDaysOfWeek(this.daysOfWeekChecksum), stringArrayToDate(this.validDates), e, t, this.dateValue, this.dateValidators, this.typedValue);
+  buildDateList(e) {
+    const t = stringArrayToDate(this.invalidDates);
+    return buildDates(getValidDaysOfWeek(this.daysOfWeekChecksum), stringArrayToDate(this.validDates), t, e, this.dateValue, this.dateValidators, this.typedValue);
   }
   checkActiveCellForBlankness() {
-    const t = this.hostElement.shadowRoot.activeElement;
-    if (!t || "TD" !== t.tagName || !t.hasAttribute("aria-hidden")) return;
-    const {calendarBody: e} = this, a = Array.from(e.querySelectorAll("td")), i = Array.from(a).indexOf(t) < 15 ? 1 : a.filter((t => !t.hasAttribute("aria-hidden"))).length;
+    const e = this.hostElement.shadowRoot.activeElement;
+    if (!e || "TD" !== e.tagName || !e.hasAttribute("aria-hidden")) return;
+    const {calendarBody: t} = this, a = Array.from(t.querySelectorAll("td")), i = Array.from(a).indexOf(e) < 15 ? 1 : a.filter((e => !e.hasAttribute("aria-hidden"))).length;
     this.focusDay(this.generateDateFromDay(i));
   }
-  async focusDay(t) {
-    var e;
-    t && (await h(), null === (e = this.calendarBody.querySelector(`td[data-day="${t.getDate()}"]`)) || void 0 === e || e.focus());
+  async focusDay(e) {
+    var t;
+    e && (await h(), null === (t = this.calendarBody.querySelector(`td[data-day="${e.getDate()}"]`)) || void 0 === t || t.focus());
   }
   focusInput() {
-    var t;
-    null === (t = this.controlElement) || void 0 === t || t.focus();
+    var e;
+    null === (e = this.controlElement) || void 0 === e || e.focus();
   }
-  generateDateFromDay(t) {
-    const {monthIndex: e, selectedYear: a} = this.selectedMonthYear;
-    return new Date(a, e, t);
+  generateDateFromDay(e) {
+    const {monthIndex: t, selectedYear: a} = this.selectedMonthYear;
+    return new Date(a, t, e);
   }
-  setCompleteInput(t) {
-    const e = formatDateShort(t);
+  setCompleteInput(e) {
+    const t = formatDateShort(e);
     p(this, [ "change", "tctChange" ], {
-      value: formatDateISO(t)
-    }), this.typedValue = e, this.internalError = null, this.setHints({
+      value: formatDateISO(e)
+    }), this.typedValue = t, this.internalError = null, this.setHints({
       isValid: !0,
       message: null,
       messageType: null
     });
   }
   setCustomLabel() {
-    var t;
-    const e = this.hostElement.querySelector('[slot="label"]');
-    e && (null === (t = this.controlElement) || void 0 === t || t.appendChild(e.cloneNode(!0)), 
-    this.hostElement.removeChild(e));
+    var e;
+    const t = this.hostElement.querySelector('[slot="label"]');
+    t && (null === (e = this.controlElement) || void 0 === e || e.appendChild(t.cloneNode(!0)), 
+    this.hostElement.removeChild(t));
   }
-  setHints({isValid: t, message: e, messageType: a}) {
+  setHints({isValid: e, message: t, messageType: a}) {
     var i;
-    if (e === this.hintMessage) return null === (i = this.hintMessageElement) || void 0 === i ? void 0 : i.present();
-    this.invalid = !t, this.hintMessage = e, this.hintMessageType = a, "error" === a && e && (this.internalError = e, 
+    if (t === this.hintMessage) return null === (i = this.hintMessageElement) || void 0 === i ? void 0 : i.present();
+    this.invalid = !e, this.hintMessage = t, this.hintMessageType = a, "error" === a && t && (this.internalError = t, 
     p(this, [ "error", "tctError" ], {
       errors: [ {
-        message: e,
+        message: t,
         errorCode: "generalInvalid"
       } ]
     }));
   }
   validateDate() {
-    var t, e, a;
+    var e, t, a;
     try {
       if (this.value) {
-        const {dateValue: i} = this, r = null !== (t = null == i ? void 0 : i.getMonth()) && void 0 !== t ? t : void 0, n = null !== (e = null == i ? void 0 : i.getFullYear()) && void 0 !== e ? e : void 0, {monthIndex: s, selectedYear: o} = this.selectedMonthYear;
+        const {dateValue: i} = this, r = null !== (e = null == i ? void 0 : i.getMonth()) && void 0 !== e ? e : void 0, n = null !== (t = null == i ? void 0 : i.getFullYear()) && void 0 !== t ? t : void 0, {monthIndex: s, selectedYear: o} = this.selectedMonthYear;
         let l = [];
         l = i ? r === s && n === o ? this.dateList : this.buildDateList({
           monthIndex: r,
           selectedYear: n
         }) : [];
         const d = null !== (a = null == i ? void 0 : i.getDate()) && void 0 !== a ? a : void 0;
-        !d || !l.find((({integer: t}) => t === d)).isValid ? p(this, [ "error", "tctError" ], {
+        !d || !l.find((({integer: e}) => e === d)).isValid ? p(this, [ "error", "tctError" ], {
           errors: [ {
             message: `Value passed is invalid: The date ${this.value} is not valid`,
             errorCode: "generalInvalid"
@@ -725,7 +727,7 @@ const O =  t(class extends e {
           value: formatDateISO(i)
         });
       }
-    } catch (t) {
+    } catch (e) {
       console.warn("Invalid moment value ", this.dateValue);
     }
   }
@@ -735,50 +737,50 @@ const O =  t(class extends e {
     return i("table", {
       role: "grid",
       "aria-labelledby": "table-label",
-      ref: t => this.calendarTable = t
-    }, i("thead", null, i("tr", null, [ ...[ , , , , , , ,  ].keys() ].map((t => i("th", {
+      ref: e => this.calendarTable = e
+    }, i("thead", null, i("tr", null, [ ...[ , , , , , , ,  ].keys() ].map((e => i("th", {
       scope: "col",
-      "aria-label": this.dayStrings[t]
-    }, this.dayAbbrStrings[t]))))), i("tbody", {
+      "aria-label": this.dayStrings[e]
+    }, this.dayAbbrStrings[e]))))), i("tbody", {
       onClick: this.onDateSelection,
       onKeyDown: this.onDateKeydown,
-      ref: t => this.calendarBody = t,
+      ref: e => this.calendarBody = e,
       "test-id": "calendarTableBody"
-    }, this.currentWeeks.map((t => i("tr", null, t.map((t => {
-      var e;
+    }, this.currentWeeks.map((e => i("tr", null, e.map((e => {
+      var t;
       let a = "";
-      return t.isToday && (a = s("tecton.element.calendar.today") + ", "), a += function(t) {
-        if (!t) return;
-        const e = new Date(t);
-        return n.isValid(e) ? (T || (T = new Intl.DateTimeFormat("en-US", {
+      return e.isToday && (a = s("tecton.element.calendar.today") + ", "), a += function(e) {
+        if (!e) return;
+        const t = new Date(e);
+        return n.isValid(t) ? (T || (T = new Intl.DateTimeFormat("en-US", {
           month: "long",
           day: "numeric",
           year: "numeric",
           weekday: "long",
           timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-        })), T.format(e)) : void 0;
-      }(t.date), t.isSelected && (a += ` (${s("tecton.element.calendar.selected")})`), 
+        })), T.format(t)) : void 0;
+      }(e.date), e.isSelected && (a += ` (${s("tecton.element.calendar.selected")})`), 
       i("td", {
-        class: t.classList,
-        "aria-hidden": t.isEmpty ? "true" : void 0,
-        tabindex: t.isSelected ? 0 : -1,
-        role: t.isSelected ? "gridcell" : void 0,
-        "aria-selected": "" + t.isSelected,
-        "aria-disabled": t.isValid ? void 0 : "true",
-        "data-day": t.integer || void 0,
-        "data-date": t.date ? formatDateISO(t.date) : void 0
-      }, (null == t ? void 0 : t.isToday) && i("div", {
+        class: e.classList,
+        "aria-hidden": e.isEmpty ? "true" : void 0,
+        tabindex: e.isSelected ? 0 : -1,
+        role: e.isSelected ? "gridcell" : void 0,
+        "aria-selected": "" + e.isSelected,
+        "aria-disabled": e.isValid ? void 0 : "true",
+        "data-day": e.integer || void 0,
+        "data-date": e.date ? formatDateISO(e.date) : void 0
+      }, (null == e ? void 0 : e.isToday) && i("div", {
         class: "today-decorator",
         "aria-hidden": "true"
       }, s("tecton.element.calendar.today")), i("div", {
         class: "day-integer",
         "aria-label": a,
         role: "text"
-      }, null !== (e = null == t ? void 0 : t.integer) && void 0 !== e ? e : ""));
+      }, null !== (t = null == e ? void 0 : e.integer) && void 0 !== t ? t : ""));
     })))))));
   }
   renderCalendarPopover() {
-    const {monthIndex: t, selectedYear: e} = this.selectedMonthYear;
+    const {monthIndex: e, selectedYear: t} = this.selectedMonthYear;
     return i("div", {
       class: "calendar-field-popup",
       onKeyUp: this.onPopupKeyup
@@ -789,30 +791,30 @@ const O =  t(class extends e {
     }, i("q2-btn", {
       label: s("tecton.element.calendar.previousMonth"),
       "hide-label": !0,
-      ref: t => this.btnPrevMonth = t,
+      ref: e => this.btnPrevMonth = e,
       class: "cal-nav-btn prev-month",
       "test-id": "previousMonthButton",
-      onTctClick: () => this.goToMonthYear(t - 1, e)
+      onTctClick: () => this.goToMonthYear(e - 1, t)
     }, i("q2-icon", {
       type: "chevron-left"
     })), i("span", {
       class: "cal-month-text"
-    }, this.monthStrings[t]), i("q2-btn", {
+    }, this.monthStrings[e]), i("q2-btn", {
       label: s("tecton.element.calendar.nextMonth"),
       "hide-label": !0,
       class: "cal-nav-btn next-month",
-      ref: t => this.btnNextMonth = t,
+      ref: e => this.btnNextMonth = e,
       "test-id": "nextMonthButton",
-      onTctClick: () => this.goToMonthYear(t + 1, e)
+      onTctClick: () => this.goToMonthYear(e + 1, t)
     }, i("q2-icon", {
       type: "chevron-right"
     })), i("q2-btn", {
       label: s("tecton.element.calendar.previousYear"),
       "hide-label": !0,
       class: "cal-nav-btn prev-year",
-      ref: t => this.btnPrevYear = t,
+      ref: e => this.btnPrevYear = e,
       "test-id": "previousYearButton",
-      onTctClick: () => this.goToMonthYear(t, e - 1)
+      onTctClick: () => this.goToMonthYear(e, t - 1)
     }, i("q2-icon", {
       type: "chevron-left"
     })), i("span", {
@@ -821,9 +823,9 @@ const O =  t(class extends e {
       label: s("tecton.element.calendar.nextYear"),
       "hide-label": !0,
       class: "cal-nav-btn next-year",
-      ref: t => this.btnNextYear = t,
+      ref: e => this.btnNextYear = e,
       "test-id": "nextYearButton",
-      onTctClick: () => this.goToMonthYear(t, e + 1),
+      onTctClick: () => this.goToMonthYear(e, t + 1),
       onKeyDown: this.onHeaderControlKeydown
     }, i("q2-icon", {
       type: "chevron-right"
@@ -831,7 +833,7 @@ const O =  t(class extends e {
       class: "sr",
       "aria-live": "polite",
       id: "table-label"
-    }, `${this.monthStrings[t]} ${e}`), this.renderCalendarDays(), this.disclaimer && i("div", {
+    }, `${this.monthStrings[e]} ${t}`), this.renderCalendarDays(), this.disclaimer && i("div", {
       class: "calendar-disclaimer"
     }, s(this.disclaimer)), i("div", {
       tabindex: "0",
@@ -842,14 +844,14 @@ const O =  t(class extends e {
   renderHintField() {
     if (this.hintMessage) return i("q2-message", {
       class: "calendar-hint sr",
-      ref: t => this.hintMessageElement = t,
+      ref: e => this.hintMessageElement = e,
       type: this.hintMessageType
     }, this.hintMessage);
   }
   renderInputField() {
-    const {isTypeable: t} = this;
+    const {isTypeable: e} = this;
     return i("q2-input", {
-      ref: t => this.controlElement = t,
+      ref: e => this.controlElement = e,
       class: "calendar-input-field",
       value: this.formattedValue,
       label: s(this.label),
@@ -859,28 +861,29 @@ const O =  t(class extends e {
       clearable: this.canClear,
       placeholder: this.computedPlaceholder,
       optional: !!this.optional,
+      valid: this.valid,
       "aria-expanded": "" + !!this.open,
       "aria-controls": "calendar-popover",
       hints: this.hintList,
       errors: this.errorList,
-      onClick: t ? void 0 : this.onInputClick,
-      onChange: t => t.stopImmediatePropagation(),
-      onTctChange: t => t.stopImmediatePropagation(),
-      onInput: t => t.stopImmediatePropagation(),
+      onClick: e ? void 0 : this.onInputClick,
+      onChange: e => e.stopImmediatePropagation(),
+      onTctChange: e => e.stopImmediatePropagation(),
+      onInput: e => e.stopImmediatePropagation(),
       onTctInput: this.onInputInput,
       onKeyDown: this.onInputKeydown,
       onKeyUp: this.onInputKeyup,
       onBlur: this.onInputBlur,
       onFocus: this.onInputFocus,
-      "icon-right": t ? void 0 : "calendar",
-      "format-modifier": t ? this.formatModifier : this.displayFormat || this.formatModifier,
+      "icon-right": e ? void 0 : "calendar",
+      "format-modifier": e ? this.formatModifier : this.displayFormat || this.formatModifier,
       type: "date",
-      "hide-messages": !t,
+      "hide-messages": !e,
       "test-id": "inputAndCalendarToggle",
       _role: "combobox",
-      _preventEntry: !t
-    }, t && i("q2-btn", {
-      ref: t => this.btnCalendarToggle = t,
+      _preventEntry: !e
+    }, e && i("q2-btn", {
+      ref: e => this.btnCalendarToggle = e,
       slot: "input-right",
       onClick: this.onInputClick,
       "test-id": "calendarToggle",
@@ -892,12 +895,12 @@ const O =  t(class extends e {
   }
   render() {
     return i("click-elsewhere", {
-      key: "55a24cc7138b3477aced736ad4a8ad9cae84e3cc",
+      key: "b13259be3c0d64bff32654faf0c738a7a7450c4e",
       class: this.open ? "dropdown-open" : void 0,
       onChange: this.onClickElsewhere
     }, this.renderInputField(), i("q2-popover", {
-      key: "15637835c0cc04486398dc86dd589f492f487488",
-      ref: t => this.popoverElement = t,
+      key: "2e183cd962e7abc4186b93da7edd835e0db5504a",
+      ref: e => this.popoverElement = e,
       id: "calendar-popover",
       controlElement: this.innerInputContainer,
       open: this.open,
@@ -979,6 +982,7 @@ const O =  t(class extends e {
   readonly: [ 516 ],
   startDate: [ 513, "start-date" ],
   typeable: [ 516 ],
+  valid: [ 516 ],
   validDates: [ 16 ],
   value: [ 1537 ],
   dateList: [ 32 ],
@@ -1025,42 +1029,42 @@ const O =  t(class extends e {
 
 const C = O, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
-  [ "q2-calendar", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-message", "q2-popover" ].forEach((t => {
-    switch (t) {
+  [ "q2-calendar", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-message", "q2-popover" ].forEach((e => {
+    switch (e) {
      case "q2-calendar":
-      customElements.get(r(t)) || customElements.define(r(t), O);
+      customElements.get(r(e)) || customElements.define(r(e), O);
       break;
 
      case "click-elsewhere":
-      customElements.get(r(t)) || v();
+      customElements.get(r(e)) || v();
       break;
 
      case "q2-badge":
-      customElements.get(r(t)) || m();
+      customElements.get(r(e)) || m();
       break;
 
      case "q2-btn":
-      customElements.get(r(t)) || f();
+      customElements.get(r(e)) || f();
       break;
 
      case "q2-icon":
-      customElements.get(r(t)) || b();
+      customElements.get(r(e)) || b();
       break;
 
      case "q2-input":
-      customElements.get(r(t)) || g();
+      customElements.get(r(e)) || g();
       break;
 
      case "q2-loading":
-      customElements.get(r(t)) || y();
+      customElements.get(r(e)) || y();
       break;
 
      case "q2-message":
-      customElements.get(r(t)) || D();
+      customElements.get(r(e)) || D();
       break;
 
      case "q2-popover":
-      customElements.get(r(t)) || w();
+      customElements.get(r(e)) || w();
     }
   }));
 };