q2-tecton-elements 1.52.0 → 1.52.2

package/dist/q2-tecton-elements/q2-calendar.entry.js

@@ -1,4 +1,4 @@
-import { r as e, c as t, h as a, g as i } from "./index-7a5365e2.js";
+import { r as e, c as t, h as i, g as a } from "./index-7a5365e2.js";
 
 import { d as n } from "./index-3184c760.js";
 
@@ -17,7 +17,7 @@ let h;
 function formatDateShort(e) {
   const t = new Date(e);
   if (!n.isValid(t)) return;
-  const a = t.toISOString();
+  const i = t.toISOString();
   if (!h) {
     h = new Intl.DateTimeFormat("en-US", {
       month: "2-digit",
@@ -26,7 +26,7 @@ function formatDateShort(e) {
       timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
     });
   }
-  return h.format(new Date(a));
+  return h.format(new Date(i));
 }
 
 let u;
@@ -73,44 +73,44 @@ function stringToDate(e) {
   } else if (!e || !n.isValid(new Date(e))) {
     return undefined;
   }
-  let a;
-  const i = e.split(/[\/\-]/).map((e => e.padStart(2, "0")));
+  let i;
+  const a = e.split(/[\/\-]/).map((e => e.padStart(2, "0")));
   const s = t && e.length >= 24 && e[10] === "T";
-  const r = i.length === 3;
-  const o = i.length < 3;
+  const r = a.length === 3;
+  const o = a.length < 3;
   if (s) {
     e = e.split("T")[0];
-    a = new Date(e);
+    i = new Date(e);
   } else if (r) {
-    const t = e.includes("/") && i[2].length === 4;
+    const t = e.includes("/") && a[2].length === 4;
     // Reorder mm/dd/yyyy dates for ISO formatting
     // [mm, dd, yyyy] -> [yyyy, mm, dd]
-        if (t) i.unshift(i.pop());
-    a = new Date(Date.UTC(parseInt(i[0]), parseInt(i[1]) - 1, parseInt(i[2])));
+        if (t) a.unshift(a.pop());
+    i = new Date(Date.UTC(parseInt(a[0]), parseInt(a[1]) - 1, parseInt(a[2])));
   } else if (o) {
     const e = new Date;
     let t;
     let n;
     let s;
-    switch (i.length) {
+    switch (a.length) {
      case 1:
       t = e.getFullYear();
-      n = i[0];
+      n = a[0];
       s = "01";
       break;
 
      case 2:
       t = e.getFullYear();
-      n = i[0];
-      s = i[1];
+      n = a[0];
+      s = a[1];
       break;
     }
-    a = new Date(`${t}-${n}-${s}`);
+    i = new Date(`${t}-${n}-${s}`);
   }
-  if (!n.isValid(a)) return undefined;
+  if (!n.isValid(i)) return undefined;
   // result = setHours(result, 0);
-    a = removeTimezoneOffset(a);
-  return n.isValid(a) ? a : undefined;
+    i = removeTimezoneOffset(i);
+  return n.isValid(i) ? i : undefined;
 }
 
 function removeTimezoneOffset(e) {
@@ -133,8 +133,8 @@ function setupMonthYear(e = new Date) {
   };
 }
 
-function validateInput(e = "", t = [], a = [], // white list
-i = [], // black list
+function validateInput(e = "", t = [], i = [], // white list
+a = [], // black list
 r, o, d = "mm/dd/yyyy", l) {
   let c = true;
   let h = false;
@@ -164,8 +164,8 @@ r, o, d = "mm/dd/yyyy", l) {
     h = t.includes(v.getDay());
     const l = formatDateISO(v);
     if (h) {
-      const e = a.length && !a.includes(l);
-      const t = i.length && i.includes(l);
+      const e = i.length && !i.includes(l);
+      const t = a.length && a.includes(l);
       const n = r && r > l;
       const s = o && o < l;
       if (e || t || n || s) {
@@ -194,32 +194,32 @@ r, o, d = "mm/dd/yyyy", l) {
 }
 
 function buildInputDate(e, t) {
-  const a = new Date;
+  const i = new Date;
   // eslint-disable-next-line prefer-const
-    let [i, n, s] = e.split("/");
-  if (i === "0") i = "01";
+    let [a, n, s] = e.split("/");
+  if (a === "0") a = "01";
   if (n === "0") n = "01";
   if (e.length === 10) {
     return new Date(e);
-  } else if (i && n && Number(n) > 0) {
+  } else if (a && n && Number(n) > 0) {
     const e = Number(n) < 10 ? `0${Number(n)}` : n;
-    const a = !s || s.length < 4 ? assumeYear(i, n, t) : s;
-    return new Date(`${i}/${e}/${a}`);
-  } else if (i) {
-    return new Date(`${i}/01/${a.getFullYear()}`);
+    const i = !s || s.length < 4 ? assumeYear(a, n, t) : s;
+    return new Date(`${a}/${e}/${i}`);
+  } else if (a) {
+    return new Date(`${a}/01/${i.getFullYear()}`);
   }
 }
 
-function assumeYear(e, t, a) {
-  const i = `${e}/${t}`;
+function assumeYear(e, t, i) {
+  const a = `${e}/${t}`;
   const n = new Date;
   const s = n.getMonth() < 9 ? `0${n.getMonth() + 1}` : `${n.getMonth() + 1}`;
   const r = n.getDate() < 10 ? `0${n.getDate()}` : `${n.getDate()}`;
   const o = `${s}/${r}/${n.getFullYear()}`;
   let d = n.getFullYear();
-  if (a === "future" && o.slice(0, 5) > i) {
+  if (i === "future" && o.slice(0, 5) > a) {
     d = n.getFullYear() + 1;
-  } else if (a === "past" && o.slice(0, 5) < i) {
+  } else if (i === "past" && o.slice(0, 5) < a) {
     d = n.getFullYear() - 1;
   }
   return d.toString();
@@ -261,18 +261,18 @@ function getMonths() {
 }
 
 function generateDatesFromMonthYear(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));
-    return a;
+  const i = n.getDaysInMonth(new Date(t, e));
+  return [ ...Array(i).keys() ].reduce(((i, a) => {
+    i.push(new Date(t, e, a + 1));
+    return i;
   }), []);
 }
 
 function getValidDaysOfWeek(e = 127) {
   /* tslint:disable:no-bitwise */
   const t = e & 1;
-  const a = e & 2;
-  const i = e & 4;
+  const i = e & 2;
+  const a = e & 4;
   const n = e & 8;
   const s = e & 16;
   const r = e & 32;
@@ -280,8 +280,8 @@ function getValidDaysOfWeek(e = 127) {
   /* tslint:enable:no-bitwise */  const d = [];
   if (e <= 0) return d;
   if (t) d.push(0);
-  if (a) d.push(1);
-  if (i) d.push(2);
+  if (i) d.push(1);
+  if (a) d.push(2);
   if (n) d.push(3);
   if (s) d.push(4);
   if (r) d.push(5);
@@ -301,22 +301,22 @@ function validateAgainstWhitelist(e, t) {
   return e.some((e => n.isSameDay(e, t)));
 }
 
-function buildDates(e, t, a, i, n, s, r) {
+function buildDates(e, t, i, a, n, s, r) {
   const o = [ baseValidation.bind(null, s, new Date) ];
   if (t === null || t === void 0 ? void 0 : t.length) {
     o.push(validateAgainstWhitelist.bind(null, t));
   } else {
     o.push(validateAgainstChecksum.bind(null, e));
   }
-  o.push(validateAgainstBlacklist.bind(null, a));
-  return generateDateList(i, n, s, o, r);
+  o.push(validateAgainstBlacklist.bind(null, i));
+  return generateDateList(a, n, s, o, r);
 }
 
-function generateDateList({monthIndex: e, selectedYear: t}, a, i, s, r) {
+function generateDateList({monthIndex: e, selectedYear: t}, i, a, s, r) {
   const o = !n.isValid(new Date(r));
   const d = generateDatesFromMonthYear(e, t).map(((e, t) => {
     const n = s.some((t => !t(e)));
-    const r = getDayState(e, i, a);
+    const r = getDayState(e, a, i);
     const d = generateClassesForCalDay(Object.assign(Object.assign({}, r), {
       isInvalid: n,
       isIncompleteDate: o
@@ -335,33 +335,33 @@ function generateDateList({monthIndex: e, selectedYear: t}, a, i, s, r) {
   return [ ...l, ...d, ...c ];
 }
 
-function baseValidation(e, t, a) {
-  const i = n.isAfter(e === null || e === void 0 ? void 0 : e.startDate, a);
-  const s = n.isBefore(e === null || e === void 0 ? void 0 : e.endDate, a);
-  const r = n.isSameDay(t, a) && n.isAfter(t, e === null || e === void 0 ? void 0 : e.cutOffTime);
-  return !(i || r || s);
+function baseValidation(e, t, i) {
+  const a = n.isAfter(e === null || e === void 0 ? void 0 : e.startDate, i);
+  const s = n.isBefore(e === null || e === void 0 ? void 0 : e.endDate, i);
+  const r = n.isSameDay(t, i) && n.isAfter(t, e === null || e === void 0 ? void 0 : e.cutOffTime);
+  return !(a || r || s);
 }
 
-function getDayState(e, t, a) {
-  if (!a) a = new Date;
-  const i = a && n.isSameDay(a, e);
+function getDayState(e, t, i) {
+  if (!i) i = new Date;
+  const a = i && n.isSameDay(i, e);
   const s = n.isSameDay(e, new Date);
   const r = n.isSameDay(e, t === null || t === void 0 ? void 0 : t.startDate);
   const o = n.isSameDay(e, t === null || t === void 0 ? void 0 : t.endDate);
   return {
-    isSelected: i,
+    isSelected: a,
     isToday: s,
     isStartDate: r,
     isEndDate: o
   };
 }
 
-function generateClassesForCalDay({isInvalid: e, isSelected: t, isEndDate: a, isStartDate: i, isToday: n, isIncompleteDate: s}) {
+function generateClassesForCalDay({isInvalid: e, isSelected: t, isEndDate: i, isStartDate: a, isToday: n, isIncompleteDate: s}) {
   const r = [];
   if (!e) r.push("is-valid");
   if (t) r.push("is-selected");
-  if (a) r.push("is-end-date");
-  if (i) r.push("is-start-date");
+  if (i) r.push("is-end-date");
+  if (a) r.push("is-start-date");
   if (n) r.push("is-today");
   if (t && e && !s) r.push("is-unavailable");
   return r.join(" ");
@@ -399,8 +399,8 @@ const p = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;bo
 const m = p;
 
 const y = class {
-  constructor(a) {
-    e(this, a);
+  constructor(i) {
+    e(this, i);
     this.change = t(this, "change", 7);
     this.error = t(this, "error", 7);
     this.success = t(this, "success", 7);
@@ -440,9 +440,9 @@ const y = class {
       }
     };
     this.onDateKeydown = e => {
-      const {monthIndex: t, selectedYear: a} = this.selectedMonthYear;
-      const i = parseInt(e.target.dataset.day);
-      const s = this.generateDateFromDay(i);
+      const {monthIndex: t, selectedYear: i} = this.selectedMonthYear;
+      const a = parseInt(e.target.dataset.day);
+      const s = this.generateDateFromDay(a);
       switch (e.key) {
        case "ArrowUp":
         e.preventDefault();
@@ -466,12 +466,12 @@ const y = class {
 
        case "PageUp":
         e.preventDefault();
-        if (e.shiftKey) this.goToMonthYear(t, a - 1); else this.goToMonthYear(t - 1, a);
+        if (e.shiftKey) this.goToMonthYear(t, i - 1); else this.goToMonthYear(t - 1, i);
         break;
 
        case "PageDown":
         e.preventDefault();
-        if (e.shiftKey) this.goToMonthYear(t, a + 1); else this.goToMonthYear(t + 1, a);
+        if (e.shiftKey) this.goToMonthYear(t, i + 1); else this.goToMonthYear(t + 1, i);
         break;
 
        case "Home":
@@ -510,34 +510,34 @@ const y = class {
     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);
+      const i = removeTimezoneOffset(new Date(t.dataset.date));
+      this.selectDate(i);
       this.closeCalendar();
     };
     this.onHeaderControlKeydown = e => {
       var t;
-      const a = this.generateDateFromDay(1);
-      const i = (t = this.calendarBody) === null || t === void 0 ? void 0 : t.querySelector('[aria-selected="true"]');
-      if (e.key === "Tab" && !i) {
+      const i = this.generateDateFromDay(1);
+      const a = (t = this.calendarBody) === null || t === void 0 ? void 0 : t.querySelector('[aria-selected="true"]');
+      if (e.key === "Tab" && !a) {
         e.preventDefault();
-        this.activateDay(a);
+        this.activateDay(i);
       }
     };
     this.onInputBlur = () => {
       if (!this.isTypeable) return;
       const e = getValidDaysOfWeek(this.daysOfWeekChecksum);
       const {typedValue: t} = this;
-      const {isValid: a, inputDate: i, isAvailable: s} = validateInput(this.typedValue, e, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
-      if (!t && (i === null || i === void 0 ? void 0 : i.toString()) === "Invalid Date") {
+      const {isValid: i, inputDate: a, isAvailable: s} = validateInput(this.typedValue, e, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
+      if (!t && (a === null || a === void 0 ? void 0 : a.toString()) === "Invalid Date") {
         // initial/clear state
         this.setHints({
           isValid: true,
           message: this.defaultHintMessage,
           messageType: "info"
         });
-      } else if (a || t && t.length > 4 && // at least mm/dd provided
-      i && n.isValid(i) && s) {
-        this.setCompleteInput(i);
+      } else if (i || t && t.length > 4 && // at least mm/dd provided
+      a && n.isValid(a) && s) {
+        this.setCompleteInput(a);
       } else if (this.value) {
         this.valueOnBlur = this.value;
         this.value = null;
@@ -605,19 +605,19 @@ const y = class {
       // handle missing zero in month and date
             this.typedValue = handleMissingZeros(this.typedValue);
       const {typedValue: t} = this;
-      const a = getValidDaysOfWeek(this.daysOfWeekChecksum);
-      const {isValid: i, message: s, messageType: r, inputDate: o, isAvailable: d, calendarPosition: l} = validateInput(t, a, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
+      const i = getValidDaysOfWeek(this.daysOfWeekChecksum);
+      const {isValid: a, message: s, messageType: r, inputDate: o, isAvailable: d, calendarPosition: l} = validateInput(t, i, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
       if (l) {
-        const [e, t, a] = l;
-        const i = new Date(a, e - 1, t);
-        if (n.isValid(i)) {
-          this.selectedMonthYear = setupMonthYear(i);
+        const [e, t, i] = l;
+        const a = new Date(i, e - 1, t);
+        if (n.isValid(a)) {
+          this.selectedMonthYear = setupMonthYear(a);
           this.dateList = this.buildDateList(this.selectedMonthYear);
           this.validateDate();
         }
       }
       if (e.key === "Enter") {
-        if (i || t && t.length > 4 && // at least mm/dd provided
+        if (a || t && t.length > 4 && // at least mm/dd provided
         o && n.isValid(o) && d) {
           this.setCompleteInput(o);
         } else if (this.value) {
@@ -635,7 +635,7 @@ const y = class {
         }
       } else {
         this.setHints({
-          isValid: i,
+          isValid: a,
           message: s,
           messageType: r
         });
@@ -677,7 +677,6 @@ const y = class {
         this.openCalendar();
       }
     };
-    this.controlElement = undefined;
     this.dateList = undefined;
     this.hintMessage = this.defaultHintMessage;
     this.hintMessageType = "info";
@@ -813,14 +812,14 @@ const y = class {
      * @testOnly
      */  async setValue(e) {
     var t;
-    const a = typeof e === "string" ? stringToDate(e) : e;
-    if (!n.isValid(a)) return;
+    const i = typeof e === "string" ? stringToDate(e) : e;
+    if (!n.isValid(i)) return;
     await this.openPopover();
     await l();
-    this.goToMonthYear(a.getMonth(), a.getFullYear());
+    this.goToMonthYear(i.getMonth(), i.getFullYear());
     await l();
-    const i = (t = this.calendarTable) === null || t === void 0 ? void 0 : t.querySelector(`td[data-date="${formatDateISO(a)}"]`);
-    i === null || i === void 0 ? void 0 : i.click();
+    const a = (t = this.calendarTable) === null || t === void 0 ? void 0 : t.querySelector(`td[data-date="${formatDateISO(i)}"]`);
+    a === null || a === void 0 ? void 0 : a.click();
   }
   /**
      * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
@@ -835,13 +834,13 @@ const y = class {
      */  async typeValue(e) {
     if (!this.typeable) return;
     const t = typeof e === "string" ? stringToDate(e) : e;
-    const a = formatDateShort(t);
+    const i = formatDateShort(t);
     if (!n.isValid(t)) return;
-    const {innerInputField: i, controlElement: s} = this;
-    i.focus();
-    i.dispatchEvent(new FocusEvent("focus"));
-    i.value = a;
-    i.dispatchEvent(new InputEvent("input"));
+    const {innerInputField: a, controlElement: s} = this;
+    a.focus();
+    a.dispatchEvent(new FocusEvent("focus"));
+    a.value = i;
+    a.dispatchEvent(new InputEvent("input"));
     s.dispatchEvent(new KeyboardEvent("keyup"));
   }
   // #endregion
@@ -891,19 +890,19 @@ const y = class {
       return;
     }
     const t = e && typeof e !== "string" && "toDate" in e;
-    const a = t ? e.toDate() : stringToDate(e);
-    const i = formatDateShort(a);
+    const i = t ? e.toDate() : stringToDate(e);
+    const a = formatDateShort(i);
     if (this.isTypeable) {
-      this.typedValue = i;
+      this.typedValue = a;
     } else {
-      this.controlElement.value = i;
-      this.selectedMonthYear = setupMonthYear(a);
+      this.controlElement.value = a;
+      this.selectedMonthYear = setupMonthYear(i);
       this.dateList = this.buildDateList(this.selectedMonthYear);
       this.validateDate();
     }
     // reset hint when value is cleared
         if (this.invalid) return;
-    if (i) {
+    if (a) {
       this.setHints({
         isValid: true,
         message: null,
@@ -936,12 +935,12 @@ const y = class {
     return this.placeholder && s(this.placeholder) || "";
   }
   get currentWeeks() {
-    const e = this.dateList.reduce(((e, t, a) => {
-      const i = Math.floor(a / 7);
-      if (!e[i]) {
-        e[i] = [];
+    const e = this.dateList.reduce(((e, t, i) => {
+      const a = Math.floor(i / 7);
+      if (!e[a]) {
+        e[a] = [];
       }
-      e[i].push(t);
+      e[a].push(t);
       return e;
     }), []);
     return e;
@@ -963,8 +962,8 @@ const y = class {
       const t = e && typeof e !== "string" && "toDate" in e;
       if (t) return e.toDate();
       // stringified moment value assigned in html template e.g.) handlebar
-            const a = typeof e === "string" && e.split(" ").length === 6 && /GMT-\d{4}/g.test(e);
-      if (a) {
+            const i = typeof e === "string" && e.split(" ").length === 6 && /GMT-\d{4}/g.test(e);
+      if (i) {
         e = formatDateISO(e);
       }
       return stringToDate(e);
@@ -974,23 +973,23 @@ const y = class {
     return this.typeable ? s("tecton.element.calendar.hint.format") + ": " + this.defaultFormatString : s("tecton.element.calendar.hint.select");
   }
   get errorList() {
-    const {errors: e, internalError: t, invalid: a} = this;
-    let i = [];
+    const {errors: e, internalError: t, invalid: i} = this;
+    let a = [];
     if (t) {
-      i = [ t ];
+      a = [ t ];
     }
     if (Array.isArray(e) && e.length) {
-      i = e.filter((e => !!e)).map((e => s(e))).concat(i);
-    } else if (!t && a) {
+      a = e.filter((e => !!e)).map((e => s(e))).concat(a);
+    } else if (!t && i) {
       return [ "tecton.element.calendar.invalid" ];
     }
-    return i;
+    return a;
   }
   get formattedValue() {
-    const {typedValue: e, dateValue: t, displayFormat: a, isTypeable: i} = this;
-    if (i) return e;
+    const {typedValue: e, dateValue: t, displayFormat: i, isTypeable: a} = this;
+    if (a) return e;
     if (t === undefined) return "";
-    if (a) return n.format(t, convertMomentFormat(a));
+    if (i) return n.format(t, convertMomentFormat(i));
     return new Intl.DateTimeFormat("en-US", {
       year: "numeric",
       month: "2-digit",
@@ -999,11 +998,15 @@ const y = class {
     }).format(t);
   }
   get hintList() {
-    const {hints: e, hintMessageType: t, hintMessage: a} = this;
+    const {hints: e, hintMessageType: t, hintMessage: i} = this;
     if (Array.isArray(e) && e.length) return e.filter((e => !!e)).map((e => s(e)));
-    if (t === "info" && a) return [ a ];
+    if (t === "info" && i) return [ i ];
     return [];
   }
+  get innerInputContainer() {
+    var e, t;
+    return (t = (e = this.controlElement) === null || e === void 0 ? void 0 : e.shadowRoot) === null || t === void 0 ? void 0 : t.querySelector(".input-container");
+  }
   get innerInputField() {
     var e, t;
     return (t = (e = this.controlElement) === null || e === void 0 ? void 0 : e.shadowRoot) === null || t === void 0 ? void 0 : t.querySelector(".input-field");
@@ -1028,30 +1031,30 @@ const y = class {
   }
   buildDateList(e) {
     const t = stringArrayToDate(this.invalidDates);
-    const a = getValidDaysOfWeek(this.daysOfWeekChecksum);
-    const i = stringArrayToDate(this.validDates);
-    return buildDates(a, i, t, e, this.dateValue, this.dateValidators, this.typedValue);
+    const i = getValidDaysOfWeek(this.daysOfWeekChecksum);
+    const a = stringArrayToDate(this.validDates);
+    return buildDates(i, a, t, e, this.dateValue, this.dateValidators, this.typedValue);
   }
   calendarDays() {
-    return a("table", {
+    return i("table", {
       role: "grid",
       "aria-labelledby": "table-label",
       ref: e => this.calendarTable = e
-    }, a("thead", null, a("tr", null, [ ...Array(7).keys() ].map((e => a("th", {
+    }, i("thead", null, i("tr", null, [ ...Array(7).keys() ].map((e => i("th", {
       scope: "col",
       "aria-label": this.dayStrings[e]
-    }, this.dayAbbrStrings[e]))))), a("tbody", {
+    }, this.dayAbbrStrings[e]))))), i("tbody", {
       onClick: this.onDateSelection,
       onKeyDown: this.onDateKeydown,
       ref: e => this.calendarBody = e,
       "test-id": "calendarTableBody"
-    }, this.currentWeeks.map((e => a("tr", null, e.map((e => {
+    }, this.currentWeeks.map((e => i("tr", null, e.map((e => {
       var t;
-      let i = "";
-      if (e.isToday) i = `${s("tecton.element.calendar.today")}, `;
-      i += formatDateFull(e.date);
-      if (e.isSelected) i += ` (${s("tecton.element.calendar.selected")})`;
-      return a("td", {
+      let a = "";
+      if (e.isToday) a = `${s("tecton.element.calendar.today")}, `;
+      a += formatDateFull(e.date);
+      if (e.isSelected) a += ` (${s("tecton.element.calendar.selected")})`;
+      return i("td", {
         class: e.classList,
         "aria-hidden": e.isEmpty ? "true" : undefined,
         tabindex: e.isSelected ? 0 : -1,
@@ -1060,148 +1063,55 @@ const y = class {
         "aria-disabled": e.isValid ? undefined : "true",
         "data-day": e.integer || undefined,
         "data-date": e.date ? formatDateISO(e.date) : undefined
-      }, (e === null || e === void 0 ? void 0 : e.isToday) && a("div", {
+      }, (e === null || e === void 0 ? void 0 : e.isToday) && i("div", {
         class: "today-decorator",
         "aria-hidden": "true"
-      }, s("tecton.element.calendar.today")), a("div", {
-        "aria-label": i
+      }, s("tecton.element.calendar.today")), i("div", {
+        "aria-label": a
       }, (t = e === null || e === void 0 ? void 0 : e.integer) !== null && t !== void 0 ? t : ""));
     })))))));
   }
-  checkActiveCellForBlankness() {
-    const e = this.hostElement.shadowRoot.activeElement;
-    if (!e || e.tagName !== "TD" || !e.hasAttribute("aria-hidden")) return;
-    const {calendarBody: t} = this;
-    const a = Array.from(t.querySelectorAll("td"));
-    const i = Array.from(a).indexOf(e);
-    const n = i < 15 ? 1 : a.filter((e => !e.hasAttribute("aria-hidden"))).length;
-    this.focusDay(this.generateDateFromDay(n));
-  }
-  async focusDay(e) {
-    var t;
-    if (!e) return;
-    await l();
-    (t = this.calendarBody.querySelector(`td[data-day="${e.getDate()}"]`)) === null || t === void 0 ? void 0 : t.focus();
-  }
-  focusInput() {
-    var e;
-    (e = this.controlElement) === null || e === void 0 ? void 0 : e.focus();
-  }
-  generateDateFromDay(e) {
-    const {monthIndex: t, selectedYear: a} = this.selectedMonthYear;
-    return new Date(a, t, e);
-  }
-  setCompleteInput(e) {
-    const t = formatDateShort(e);
-    this.change.emit({
-      value: formatDateISO(e)
-    });
-    this.typedValue = t;
-    this.internalError = null;
-    this.setHints({
-      isValid: true,
-      message: null,
-      messageType: null
-    });
-  }
-  setHints({isValid: e, message: t, messageType: a}) {
-    var i;
-    if (t === this.hintMessage) return (i = this.hintMessageElement) === null || i === void 0 ? void 0 : i.present();
-    this.invalid = !e;
-    this.hintMessage = t;
-    this.hintMessageType = a;
-    if (a === "error" && t) {
-      this.internalError = t;
-      this.error.emit({
-        errors: [ {
-          message: t,
-          errorCode: "generalInvalid"
-        } ]
-      });
-    }
-  }
-  validateDate() {
-    var e, t, a;
-    try {
-      if (!!this.value) {
-        const {dateValue: i} = this;
-        const n = (e = i === null || i === void 0 ? void 0 : i.getMonth()) !== null && e !== void 0 ? e : undefined;
-        const s = (t = i === null || i === void 0 ? void 0 : i.getFullYear()) !== null && t !== void 0 ? t : undefined;
-        const {monthIndex: r, selectedYear: o} = this.selectedMonthYear;
-        const d = n === r && s === o;
-        let l = [];
-        if (!i) {
-          l = [];
-        } else if (d) {
-          l = this.dateList;
-        } else {
-          l = this.buildDateList({
-            monthIndex: n,
-            selectedYear: s
-          });
-        }
-        const c = (a = i === null || i === void 0 ? void 0 : i.getDate()) !== null && a !== void 0 ? a : undefined;
-        const h = c ? !l.find((({integer: e}) => e === c)).isValid : true;
-        if (h) {
-          this.error.emit({
-            errors: [ {
-              message: `Value passed is invalid: The date ${this.value} is not valid`,
-              errorCode: "generalInvalid"
-            } ]
-          });
-        } else {
-          this.success.emit({
-            value: formatDateISO(i)
-          });
-        }
-      }
-    } catch (e) {
-      console.warn("Invalid moment value ", this.dateValue);
-    }
-  }
-  // #endregion
-  // #region Render Methods
   renderCalendarPopover() {
     const {monthIndex: e, selectedYear: t} = this.selectedMonthYear;
-    return a("div", {
+    return i("div", {
       class: "calendar-field-popup",
       onKeyUp: this.onPopupKeyup
-    }, this.calendarLabel && a("p", {
+    }, this.calendarLabel && i("p", {
       class: "calendar-label"
-    }, s(this.calendarLabel)), a("div", {
+    }, s(this.calendarLabel)), i("div", {
       class: "cal-month-heading"
-    }, a("q2-btn", {
+    }, i("q2-btn", {
       label: s("tecton.element.calendar.previousMonth"),
       "hide-label": true,
       ref: e => this.btnPrevMonth = e,
       class: "cal-nav-btn prev-month",
       "test-id": "previousMonthButton",
       onClick: () => this.goToMonthYear(e - 1, t)
-    }, a("q2-icon", {
+    }, i("q2-icon", {
       type: "chevron-left"
-    })), a("span", {
+    })), i("span", {
       class: "cal-month-text"
-    }, this.monthStrings[e]), a("q2-btn", {
+    }, this.monthStrings[e]), i("q2-btn", {
       label: s("tecton.element.calendar.nextMonth"),
       "hide-label": true,
       class: "cal-nav-btn next-month",
       ref: e => this.btnNextMonth = e,
       "test-id": "nextMonthButton",
       onClick: () => this.goToMonthYear(e + 1, t)
-    }, a("q2-icon", {
+    }, i("q2-icon", {
       type: "chevron-right"
-    })), a("q2-btn", {
+    })), i("q2-btn", {
       label: s("tecton.element.calendar.previousYear"),
       "hide-label": true,
       class: "cal-nav-btn prev-year",
       ref: e => this.btnPrevYear = e,
       "test-id": "previousYearButton",
       onClick: () => this.goToMonthYear(e, t - 1)
-    }, a("q2-icon", {
+    }, i("q2-icon", {
       type: "chevron-left"
-    })), a("span", {
+    })), i("span", {
       class: "cal-year-text"
-    }, this.selectedMonthYear.selectedYear), a("q2-btn", {
+    }, this.selectedMonthYear.selectedYear), i("q2-btn", {
       label: s("tecton.element.calendar.nextYear"),
       "hide-label": true,
       class: "cal-nav-btn next-year",
@@ -1209,22 +1119,45 @@ const y = class {
       "test-id": "nextYearButton",
       onClick: () => this.goToMonthYear(e, t + 1),
       onKeyDown: this.onHeaderControlKeydown
-    }, a("q2-icon", {
+    }, i("q2-icon", {
       type: "chevron-right"
-    }))), a("div", {
+    }))), i("div", {
       class: "sr",
       "aria-live": "polite",
       id: "table-label"
-    }, `${this.monthStrings[e]} ${t}`), this.calendarDays(), this.disclaimer && a("div", {
+    }, `${this.monthStrings[e]} ${t}`), this.calendarDays(), this.disclaimer && i("div", {
       class: "calendar-disclaimer"
-    }, s(this.disclaimer)), a("q2-btn", {
+    }, s(this.disclaimer)), i("q2-btn", {
       class: "sr refocus-popup",
       onFocus: this.onRefocus
     }));
   }
+  checkActiveCellForBlankness() {
+    const e = this.hostElement.shadowRoot.activeElement;
+    if (!e || e.tagName !== "TD" || !e.hasAttribute("aria-hidden")) return;
+    const {calendarBody: t} = this;
+    const i = Array.from(t.querySelectorAll("td"));
+    const a = Array.from(i).indexOf(e);
+    const n = a < 15 ? 1 : i.filter((e => !e.hasAttribute("aria-hidden"))).length;
+    this.focusDay(this.generateDateFromDay(n));
+  }
+  async focusDay(e) {
+    var t;
+    if (!e) return;
+    await l();
+    (t = this.calendarBody.querySelector(`td[data-day="${e.getDate()}"]`)) === null || t === void 0 ? void 0 : t.focus();
+  }
+  focusInput() {
+    var e;
+    (e = this.controlElement) === null || e === void 0 ? void 0 : e.focus();
+  }
+  generateDateFromDay(e) {
+    const {monthIndex: t, selectedYear: i} = this.selectedMonthYear;
+    return new Date(i, t, e);
+  }
   renderHintField() {
     if (!this.hintMessage) return;
-    return a("q2-message", {
+    return i("q2-message", {
       class: "calendar-hint sr",
       ref: e => this.hintMessageElement = e,
       type: this.hintMessageType
@@ -1232,7 +1165,7 @@ const y = class {
   }
   renderInputField() {
     const {isTypeable: e} = this;
-    return a("q2-input", {
+    return i("q2-input", {
       ref: e => this.controlElement = e,
       class: "calendar-input-field",
       value: this.formattedValue,
@@ -1260,26 +1193,96 @@ const y = class {
       "test-id": "inputAndCalendarToggle",
       _role: "combobox",
       _preventEntry: !e
-    }, e && a("q2-btn", {
+    }, e && i("q2-btn", {
       ref: e => this.btnCalendarToggle = e,
       slot: "input-right",
       onClick: this.onInputClick,
       "test-id": "calendarToggle",
       label: "tecton.element.calendar.toggleAriaLabel",
       "hide-label": true
-    }, a("q2-icon", {
+    }, i("q2-icon", {
       type: "calendar"
     })));
   }
+  setCompleteInput(e) {
+    const t = formatDateShort(e);
+    this.change.emit({
+      value: formatDateISO(e)
+    });
+    this.typedValue = t;
+    this.internalError = null;
+    this.setHints({
+      isValid: true,
+      message: null,
+      messageType: null
+    });
+  }
+  setHints({isValid: e, message: t, messageType: i}) {
+    var a;
+    if (t === this.hintMessage) return (a = this.hintMessageElement) === null || a === void 0 ? void 0 : a.present();
+    this.invalid = !e;
+    this.hintMessage = t;
+    this.hintMessageType = i;
+    if (i === "error" && t) {
+      this.internalError = t;
+      this.error.emit({
+        errors: [ {
+          message: t,
+          errorCode: "generalInvalid"
+        } ]
+      });
+    }
+  }
+  validateDate() {
+    var e, t, i;
+    try {
+      if (!!this.value) {
+        const {dateValue: a} = this;
+        const n = (e = a === null || a === void 0 ? void 0 : a.getMonth()) !== null && e !== void 0 ? e : undefined;
+        const s = (t = a === null || a === void 0 ? void 0 : a.getFullYear()) !== null && t !== void 0 ? t : undefined;
+        const {monthIndex: r, selectedYear: o} = this.selectedMonthYear;
+        const d = n === r && s === o;
+        let l = [];
+        if (!a) {
+          l = [];
+        } else if (d) {
+          l = this.dateList;
+        } else {
+          l = this.buildDateList({
+            monthIndex: n,
+            selectedYear: s
+          });
+        }
+        const c = (i = a === null || a === void 0 ? void 0 : a.getDate()) !== null && i !== void 0 ? i : undefined;
+        const h = c ? !l.find((({integer: e}) => e === c)).isValid : true;
+        if (h) {
+          this.error.emit({
+            errors: [ {
+              message: `Value passed is invalid: The date ${this.value} is not valid`,
+              errorCode: "generalInvalid"
+            } ]
+          });
+        } else {
+          this.success.emit({
+            value: formatDateISO(a)
+          });
+        }
+      }
+    } catch (e) {
+      console.warn("Invalid moment value ", this.dateValue);
+    }
+  }
+  // #endregion
+  // #region Render Methods
   render() {
-    return a("click-elsewhere", {
-      key: "9b9a4058ca1f6fd2e613804f19817f7a670a016f",
+    return i("click-elsewhere", {
+      key: "76bda9101bf99ae49ab8f04be2d5743dc6b110a8",
       class: this.open ? "dropdown-open" : undefined,
       onChange: this.onClickElsewhere
-    }, this.renderInputField(), a("q2-popover", {
-      key: "7f729ebe0684463c3d19e732973708347a900040",
+    }, this.renderInputField(), i("q2-popover", {
+      key: "4e556602957d99a9e48127e647923f3e5719e950",
       ref: e => this.popoverElement = e,
-      controlElement: this.controlElement,
+      controlElement: this.innerInputContainer,
       open: this.open,
       direction: this.popoverDirection,
       minHeight: this.popoverMinHeight,
@@ -1289,7 +1292,7 @@ const y = class {
     }, this.renderHintField(), this.renderCalendarPopover()));
   }
   get hostElement() {
-    return i(this);
+    return a(this);
   }
   static get watchers() {
     return {