q2-tecton-elements 1.51.0 → 1.52.0

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

@@ -0,0 +1,1313 @@
+import { r as e, c as t, h as a, g as i } from "./index-7a5365e2.js";
+
+import { d as n } from "./index-3184c760.js";
+
+import { l as s, a as r, o, i as d, w as l, j as c } from "./index-d18e2a20.js";
+
+function formatDateISO(e) {
+  const t = new Date(e);
+  if (!n.isValid(t)) return;
+  return n.formatISO(t, {
+    representation: "date"
+  });
+}
+
+let h;
+
+function formatDateShort(e) {
+  const t = new Date(e);
+  if (!n.isValid(t)) return;
+  const a = t.toISOString();
+  if (!h) {
+    h = new Intl.DateTimeFormat("en-US", {
+      month: "2-digit",
+      day: "2-digit",
+      year: "numeric",
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+    });
+  }
+  return h.format(new Date(a));
+}
+
+let u;
+
+function formatDateLong(e) {
+  const t = new Date(e);
+  if (!n.isValid(t)) return;
+  if (!u) {
+    u = new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  }
+  return u.format(t);
+}
+
+let f;
+
+function formatDateFull(e) {
+  if (!e) return;
+  const t = new Date(e);
+  if (!n.isValid(t)) return;
+  if (!f) {
+    f = new Intl.DateTimeFormat("en-US", {
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+      weekday: "long",
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+    });
+  }
+  return f.format(t);
+}
+
+function convertMomentFormat(e) {
+  return e.replace(/[d]/g, "E").replace(/[D]/g, "d").replace(/[Y]/g, "y").replace(/[l]/g, "P").replace(/[W]/g, "I");
+}
+
+function stringToDate(e) {
+  const t = typeof e === "string";
+  if (!t && e && n.isValid(new Date(e || undefined))) {
+    e = formatDateISO(e);
+  } else if (!e || !n.isValid(new Date(e))) {
+    return undefined;
+  }
+  let a;
+  const i = 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;
+  if (s) {
+    e = e.split("T")[0];
+    a = new Date(e);
+  } else if (r) {
+    const t = e.includes("/") && i[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])));
+  } else if (o) {
+    const e = new Date;
+    let t;
+    let n;
+    let s;
+    switch (i.length) {
+     case 1:
+      t = e.getFullYear();
+      n = i[0];
+      s = "01";
+      break;
+
+     case 2:
+      t = e.getFullYear();
+      n = i[0];
+      s = i[1];
+      break;
+    }
+    a = new Date(`${t}-${n}-${s}`);
+  }
+  if (!n.isValid(a)) return undefined;
+  // result = setHours(result, 0);
+    a = removeTimezoneOffset(a);
+  return n.isValid(a) ? a : undefined;
+}
+
+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(e, t + Math.abs(t % 60));
+}
+
+function stringArrayToDate(e) {
+  if (!Array.isArray(e) || e.length === 0) {
+    return [];
+  }
+  return e.map((e => stringToDate(e)));
+}
+
+function setupMonthYear(e = new Date) {
+  return {
+    monthIndex: e.getMonth(),
+    selectedYear: e.getFullYear()
+  };
+}
+
+function validateInput(e = "", t = [], a = [], // white list
+i = [], // black list
+r, o, d = "mm/dd/yyyy", l) {
+  let c = true;
+  let h = false;
+  let u = "info";
+  let f = `${s("tecton.element.calendar.hint.format")}: ${d}`;
+  if (!e) {
+    return {
+      isValid: c,
+      inputDate: new Date(""),
+      isAvailable: h,
+      messageType: u,
+      message: f
+    };
+  }
+  const v = buildInputDate(e, l);
+  const p = v.getMonth() + 1;
+  const m = v.getDate();
+  const y = v.getFullYear();
+  const b = [ p, m, y ];
+  if (n.isValid(v)) {
+    const n = getMonths()[v.getMonth()];
+    if (e.length === 10) {
+      c = true;
+      u = null;
+      f = null;
+    }
+    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 n = r && r > l;
+      const s = o && o < l;
+      if (e || t || n || s) {
+        h = false;
+      }
+    }
+    if (e.length >= 5 && !h) {
+      c = false;
+      u = "error";
+      const e = !n || !m || !y;
+      f = e ? `${s("tecton.element.calendar.hint.invalidDate")}: ${d}` : s("tecton.element.calendar.hint.notAvailableDate", [ formatDateLong(v) ]);
+    }
+  } else {
+    c = false;
+    u = "error";
+    f = `${s("tecton.element.calendar.hint.invalidDate")}: ${d}`;
+  }
+  return {
+    isValid: c,
+    messageType: u,
+    message: f,
+    inputDate: v,
+    isAvailable: h,
+    calendarPosition: b
+  };
+}
+
+function buildInputDate(e, t) {
+  const a = new Date;
+  // eslint-disable-next-line prefer-const
+    let [i, n, s] = e.split("/");
+  if (i === "0") i = "01";
+  if (n === "0") n = "01";
+  if (e.length === 10) {
+    return new Date(e);
+  } else if (i && 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()}`);
+  }
+}
+
+function assumeYear(e, t, a) {
+  const i = `${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) {
+    d = n.getFullYear() + 1;
+  } else if (a === "past" && o.slice(0, 5) < i) {
+    d = n.getFullYear() - 1;
+  }
+  return d.toString();
+}
+
+function handleMissingZeros(e) {
+  if (!e) {
+    return "";
+  }
+  if (e.match(/^[1-9]\/$/)) {
+    return `0${e}/`;
+  } else if (e.match(/^[0-9]{2}\/[1-9]{1}\/$/)) {
+    const t = e.split("/");
+    return `${t[0]}/0${t[1]}/`;
+  }
+  return e;
+}
+
+function reorderDateString(e) {
+  const t = (e || "").split("-");
+  if (t.length !== 3) return "";
+  return `${t[1]}/${t[2]}/${t[0]}`;
+}
+
+function firstDayOfWeekInMonth(e, t) {
+  return new Date(t, e, 1, 1, 1, 1, 1).getDay();
+}
+
+function getDays() {
+  return [ 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") ];
+}
+
+function getDaysOfWeek() {
+  return [ s("tecton.element.calendar.days.Sunday"), s("tecton.element.calendar.days.Monday"), s("tecton.element.calendar.days.Tuesday"), s("tecton.element.calendar.days.Wednesday"), s("tecton.element.calendar.days.Thursday"), s("tecton.element.calendar.days.Friday"), s("tecton.element.calendar.days.Saturday") ];
+}
+
+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 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;
+  }), []);
+}
+
+function getValidDaysOfWeek(e = 127) {
+  /* tslint:disable:no-bitwise */
+  const t = e & 1;
+  const a = e & 2;
+  const i = e & 4;
+  const n = e & 8;
+  const s = e & 16;
+  const r = e & 32;
+  const o = e & 64;
+  /* 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 (n) d.push(3);
+  if (s) d.push(4);
+  if (r) d.push(5);
+  if (o) d.push(6);
+  return d;
+}
+
+function validateAgainstChecksum(e, t) {
+  return e.includes(t.getDay());
+}
+
+function validateAgainstBlacklist(e, t) {
+  return !validateAgainstWhitelist(e, t);
+}
+
+function validateAgainstWhitelist(e, t) {
+  return e.some((e => n.isSameDay(e, t)));
+}
+
+function buildDates(e, t, a, i, 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);
+}
+
+function generateDateList({monthIndex: e, selectedYear: t}, a, i, 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 d = generateClassesForCalDay(Object.assign(Object.assign({}, r), {
+      isInvalid: n,
+      isIncompleteDate: o
+    }));
+    return Object.assign(Object.assign({}, r), {
+      isValid: !n,
+      date: e,
+      integer: t + 1,
+      isEmpty: false,
+      isActivity: false,
+      classList: d
+    });
+  }));
+  const l = addEmptiesMonthStart(firstDayOfWeekInMonth(e, t));
+  const c = addEmptiesMonthEnd((l.length + d.length) % 7);
+  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 getDayState(e, t, a) {
+  if (!a) a = new Date;
+  const i = a && n.isSameDay(a, 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,
+    isToday: s,
+    isStartDate: r,
+    isEndDate: o
+  };
+}
+
+function generateClassesForCalDay({isInvalid: e, isSelected: t, isEndDate: a, isStartDate: i, 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 (n) r.push("is-today");
+  if (t && e && !s) r.push("is-unavailable");
+  return r.join(" ");
+}
+
+function addEmptiesMonthStart(e) {
+  return addEmptyDates(0, e);
+}
+
+function addEmptiesMonthEnd(e) {
+  if (e === 0) return [];
+  return addEmptyDates(e, 7);
+}
+
+const v = {
+  date: null,
+  integer: null,
+  isActivity: false,
+  isEmpty: true,
+  isValid: false,
+  isToday: false,
+  isSelected: false,
+  isStartDate: false,
+  isEndDate: false,
+  classList: ""
+};
+
+function addEmptyDates(e, t) {
+  if (e === 7) e = 0;
+  return [ ...Array(t - e).keys() ].map((() => Object.assign({}, v)));
+}
+
+const p = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer}q2-popover{--comp-min-tappable-size:44px;--comp-table-border-spacing:2px;--comp-min-tappable-size-and-spacing:calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));--comp-popover-padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));--comp-min-table-width:calc(var(--comp-min-tappable-size-and-spacing) * 7);--comp-table-container-border-spacing:calc(var(--comp-table-border-spacing) * 2);--comp-popover-total-padding:calc(var(--comp-popover-padding) * 2);--tct-popover-min-width:calc(\n      var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding)\n  )}.calendar-field-popup{padding:var(--comp-popover-padding)}.calendar-label{--comp-label-padding:var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--comp-label-padding)}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));text-align:center}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center;border-spacing:var(--comp-table-border-spacing)}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:var(--comp-min-tappable-size);cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}td[aria-selected]:focus{box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), 0 0 0 4px var(--const-focus-color, #0066cc)}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-style:solid;border-width:var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));border-color:var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}";
+
+const m = p;
+
+const y = class {
+  constructor(a) {
+    e(this, a);
+    this.change = t(this, "change", 7);
+    this.error = t(this, "error", 7);
+    this.success = t(this, "success", 7);
+    this.dayAbbrStrings = getDays();
+    this.dayStrings = getDaysOfWeek();
+    this.defaultFormatString = "mm/dd/yyyy";
+    this.formatModifier = "M/D/YYYY";
+ // To allow missing leading zero, 4/3/2021 => converts into 04/03/2021
+        this.internalError = "";
+    this.monthStrings = getMonths();
+    this.scheduledAfterRender = [];
+    this.closeCalendar = () => {
+      if (!this.open) return;
+      this.open = false;
+      this.focusInput();
+    };
+    this.goToMonthYear = (e, t) => {
+      if (e < 0) {
+        e = 11;
+        t--;
+      } else if (e > 11) {
+        e = 0;
+        t++;
+      }
+      this.selectedMonthYear = {
+        monthIndex: e,
+        selectedYear: t
+      };
+      this.dateList = this.buildDateList(this.selectedMonthYear);
+      this.scheduledAfterRender.push((() => this.checkActiveCellForBlankness()));
+    };
+    this.onClickElsewhere = e => {
+      const t = e.target;
+      if (t.localName === "click-elsewhere") {
+        e.stopPropagation();
+        this.closeCalendar();
+      }
+    };
+    this.onDateKeydown = e => {
+      const {monthIndex: t, selectedYear: a} = this.selectedMonthYear;
+      const i = parseInt(e.target.dataset.day);
+      const s = this.generateDateFromDay(i);
+      switch (e.key) {
+       case "ArrowUp":
+        e.preventDefault();
+        this.activateDay(n.addDays(s, -7));
+        break;
+
+       case "ArrowDown":
+        e.preventDefault();
+        this.activateDay(n.addDays(s, 7));
+        break;
+
+       case "ArrowRight":
+        e.preventDefault();
+        this.activateDay(n.addDays(s, 1));
+        break;
+
+       case "ArrowLeft":
+        e.preventDefault();
+        this.activateDay(n.addDays(s, -1));
+        break;
+
+       case "PageUp":
+        e.preventDefault();
+        if (e.shiftKey) this.goToMonthYear(t, a - 1); else this.goToMonthYear(t - 1, a);
+        break;
+
+       case "PageDown":
+        e.preventDefault();
+        if (e.shiftKey) this.goToMonthYear(t, a + 1); else this.goToMonthYear(t + 1, a);
+        break;
+
+       case "Home":
+        e.preventDefault();
+        this.activateDay(n.addDays(s, -s.getDay()));
+        break;
+
+       case "End":
+        e.preventDefault();
+        this.activateDay(n.addDays(s, 6 - s.getDay()));
+        break;
+
+       case "Escape":
+        e.preventDefault();
+        this.closeCalendar();
+        this.focusInput();
+        break;
+
+       case "Enter":
+        e.preventDefault();
+        if (!this.dateList.find((({date: e}) => n.isSameDay(e, s))).isValid) return;
+        this.selectDate(s);
+        this.closeCalendar();
+        this.focusInput();
+        break;
+
+       case " ":
+        e.preventDefault();
+        if (!this.dateList.find((({date: e}) => n.isSameDay(e, s))).isValid) return;
+        this.selectDate(s);
+        this.closeCalendar();
+        this.focusInput();
+        break;
+      }
+    };
+    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 = 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) {
+        e.preventDefault();
+        this.activateDay(a);
+      }
+    };
+    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") {
+        // 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 (this.value) {
+        this.valueOnBlur = this.value;
+        this.value = null;
+        this.change.emit({
+          value: null
+        });
+        this.typedValue = t;
+      }
+    };
+    this.onInputChange = e => {
+      e.stopPropagation();
+    };
+    this.onInputClick = () => {
+      if (this.disabled) return;
+      this.toggleCalendar();
+    };
+    this.onInputFocus = e => {
+      if (!this.isTypeable) return;
+      if (e.target === this.controlElement) {
+        if (this.valueOnBlur && !this.value) {
+          const e = this.typedValue;
+          this.value = this.valueOnBlur;
+          this.typedValue = e;
+          this.valueOnBlur = null;
+        }
+        this.closeCalendar();
+      }
+    };
+    this.onInputInput = ({detail: {value: e}}) => {
+      this.typedValue = e;
+    };
+    this.onInputKeydown = e => {
+      const {dateValue: t} = this;
+      switch (e.key) {
+       case "ArrowDown":
+        e.preventDefault();
+        this.openCalendar();
+        this.activateDay(t || new Date);
+        break;
+
+       case "Enter":
+       case " ":
+        if (this.typeable) break;
+        e.preventDefault();
+        if (this.open) {
+          this.closeCalendar();
+        } else {
+          this.openCalendar();
+          this.activateDay(t || new Date);
+        }
+        break;
+      }
+    };
+    this.onInputKeyup = e => {
+      if (this.disabled) {
+        return;
+      }
+      switch (e.key) {
+       case "Escape":
+        this.onInputBlur();
+        this.closeCalendar();
+        break;
+      }
+      if (!this.isTypeable) return;
+      // 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);
+      if (l) {
+        const [e, t, a] = l;
+        const i = new Date(a, e - 1, t);
+        if (n.isValid(i)) {
+          this.selectedMonthYear = setupMonthYear(i);
+          this.dateList = this.buildDateList(this.selectedMonthYear);
+          this.validateDate();
+        }
+      }
+      if (e.key === "Enter") {
+        if (i || t && t.length > 4 && // at least mm/dd provided
+        o && n.isValid(o) && d) {
+          this.setCompleteInput(o);
+        } else if (this.value) {
+          this.value = null;
+          this.change.emit({
+            value: null
+          });
+          this.typedValue = t;
+        }
+        if (this.keyboardSelection) {
+          this.keyboardSelection = false;
+          this.closeCalendar();
+        } else {
+          this.toggleCalendar();
+        }
+      } else {
+        this.setHints({
+          isValid: i,
+          message: s,
+          messageType: r
+        });
+      }
+    };
+    this.onPopupKeyup = e => {
+      if (e.key === "Escape" || e.key === "Esc") {
+        this.onInputBlur();
+        this.closeCalendar();
+      }
+    };
+    this.onRefocus = () => {
+      var e;
+      (e = this.btnPrevMonth) === null || e === void 0 ? void 0 : e.dispatchEvent(new FocusEvent("focus"));
+    };
+    this.openCalendar = () => {
+      if (this.readonly || this.open) return;
+      this.selectedMonthYear = setupMonthYear(this.dateValue);
+      this.dateList = this.buildDateList(this.selectedMonthYear);
+      this.open = true;
+    };
+    this.selectDate = e => {
+      const {isValid: t} = this.dateList.find((({date: t}) => n.isSameDay(t, e)));
+      if (!t) return;
+      this.change.emit({
+        value: formatDateISO(e)
+      });
+      this.typedValue = formatDateShort(e);
+      this.invalid = false;
+      this.success.emit({
+        value: formatDateISO(e)
+      });
+    };
+    this.toggleCalendar = () => {
+      if (this.readonly) return;
+      if (this.open) {
+        this.closeCalendar();
+      } else {
+        this.openCalendar();
+      }
+    };
+    this.controlElement = undefined;
+    this.dateList = undefined;
+    this.hintMessage = this.defaultHintMessage;
+    this.hintMessageType = "info";
+    this.keyboardSelection = false;
+    this.typedValue = "";
+    this.ariaLabel = undefined;
+    this.assume = "current";
+    this.buttonLabel = undefined;
+    this.calendarLabel = undefined;
+    this.clearable = undefined;
+    this.cutoffTime = undefined;
+    this.daysOfWeekChecksum = undefined;
+    this.disabled = undefined;
+    this.disabledMsg = undefined;
+    this.disclaimer = undefined;
+    this.displayFormat = undefined;
+    this.endDate = undefined;
+    this.errors = undefined;
+    this.hideLabel = undefined;
+    this.hints = undefined;
+    this.invalid = undefined;
+    this.invalidDates = undefined;
+    this.label = undefined;
+    this.onsuccess = undefined;
+    this.open = undefined;
+    this.optional = undefined;
+    this.placeholder = undefined;
+    this.popDirection = undefined;
+    this.popoverAlignment = undefined;
+    this.popoverDirection = undefined;
+    this.popoverMinHeight = 355;
+    this.popoverMode = null;
+    this.readonly = undefined;
+    this.startDate = undefined;
+    this.typeable = undefined;
+    this.validDates = undefined;
+    this.value = undefined;
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  connectedCallback() {
+    this.selectedMonthYear = setupMonthYear(this.dateValue);
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    if (this.value && this.isTypeable && !this.typedValue) {
+      this.typedValue = reorderDateString(this.value);
+    }
+    this.validateDate();
+  }
+  componentWillLoad() {
+    this.popDirectionHandler();
+    r(this);
+  }
+  componentDidLoad() {
+    o(this.hostElement);
+  }
+  componentDidRender() {
+    setTimeout((() => {
+      this.scheduledAfterRender.forEach((e => e()));
+      this.scheduledAfterRender = [];
+    }), 25);
+  }
+  // #endregion
+  // #region Listeners
+  defaultChangeHandler(e) {
+    if (e.target === this.hostElement && !this.hostElement.onchange && !!e.detail) {
+      this.value = e.detail.value;
+    }
+  }
+  handleClear() {
+    this.change.emit({
+      value: null
+    });
+    this.value = null;
+    this.typedValue = "";
+  }
+  defaultErrorHandler(e) {
+    if (e.target === this.hostElement && !this.hostElement.onerror) {
+      if (this.hintMessageType === "error" && this.hintMessage) {
+        this.internalError = this.hintMessage;
+      } else {
+        this.internalError = s("tecton.element.calendar.hint.invalidDate");
+      }
+    }
+  }
+  delegateFocus(e) {
+    if (!d(e, this.hostElement)) return;
+    this.controlElement.shadowRoot.querySelector(".input-field").focus();
+  }
+  popoverStateHandler({detail: {open: e}}) {
+    if (this.open !== e) this.open = e;
+  }
+  defaultSuccessHandler(e) {
+    if (e.target !== this.hostElement) {
+      return;
+    }
+    if (typeof this.onsuccess === "function") {
+      this.onsuccess(e);
+    } else {
+      this.internalError = "";
+      if (this.hintMessageType === "error" && this.hintMessage) {
+        this.hintMessage = null;
+        this.hintMessageType = null;
+        this.invalid = false;
+      }
+    }
+  }
+  // #endregion
+  // #region Public Methods API
+  /**
+     * Emulates clicking the `<input>` to hide the popover if it is visible.
+     *
+     * @testOnly
+     */
+  async closePopover() {
+    if (!this.open) return;
+    this._togglePopover();
+  }
+  /**
+     * Emulates clicking the `<input>` to display the popover if it is hidden.
+     *
+     * @testOnly
+     */  async openPopover() {
+    if (this.open) return;
+    this._togglePopover();
+  }
+  /**
+     * Emulates clicking the `<input>` to display the popover, moving to the correct month and year, and clicking the
+     * provided date.
+     *
+     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+     * will not select the date.
+     *
+     * @testOnly
+     */  async setValue(e) {
+    var t;
+    const a = typeof e === "string" ? stringToDate(e) : e;
+    if (!n.isValid(a)) return;
+    await this.openPopover();
+    await l();
+    this.goToMonthYear(a.getMonth(), a.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();
+  }
+  /**
+     * Emulates focusing the `<input>`, entering the provided value, and emitting an `input` event.
+     *
+     * While a `string` value can be passed, we recommended passing a `Date` object. If the value is invalid, the method
+     * will not select the date.
+     *
+     * @warning
+     * Only applicable when the input is typeable.
+     *
+     * @testOnly
+     */  async typeValue(e) {
+    if (!this.typeable) return;
+    const t = typeof e === "string" ? stringToDate(e) : e;
+    const a = 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"));
+    s.dispatchEvent(new KeyboardEvent("keyup"));
+  }
+  // #endregion
+  // #region Watchers
+  ariaLabelObserver() {
+    r(this);
+  }
+  cutoffTimeObserver() {
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.validateDate();
+  }
+  daysOfWeekChecksumObserver() {
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.validateDate();
+  }
+  endDateObserver() {
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.validateDate();
+  }
+  invalidDatesObserver() {
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.validateDate();
+  }
+  popDirectionHandler() {
+    c(this, "popDirection", "popoverDirection");
+  }
+  startDateObserver() {
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.validateDate();
+  }
+  typeableChanged() {
+    this.valueObserver(this.value);
+  }
+  validDatesObserver() {
+    this.dateList = this.buildDateList(this.selectedMonthYear);
+    this.validateDate();
+  }
+  valueObserver(e) {
+    // resetting by empty string
+    if (e === "") {
+      this.value = undefined;
+      this.setHints({
+        isValid: true,
+        message: this.defaultHintMessage,
+        messageType: "info"
+      });
+      return;
+    }
+    const t = e && typeof e !== "string" && "toDate" in e;
+    const a = t ? e.toDate() : stringToDate(e);
+    const i = formatDateShort(a);
+    if (this.isTypeable) {
+      this.typedValue = i;
+    } else {
+      this.controlElement.value = i;
+      this.selectedMonthYear = setupMonthYear(a);
+      this.dateList = this.buildDateList(this.selectedMonthYear);
+      this.validateDate();
+    }
+    // reset hint when value is cleared
+        if (this.invalid) return;
+    if (i) {
+      this.setHints({
+        isValid: true,
+        message: null,
+        messageType: null
+      });
+    } else {
+      this.setHints({
+        isValid: true,
+        message: this.defaultHintMessage,
+        messageType: "info"
+      });
+    }
+  }
+  // #endregion
+  // #region Local Methods
+  get canClear() {
+    if (this.isTypeable) {
+      return this.clearable && !!this.typedValue;
+    } else {
+      return this.clearable && !!this.value;
+    }
+  }
+  get computedPlaceholder() {
+    if (this.disabled && this.disabledMsg) {
+      return s(this.disabledMsg);
+    }
+    if (this.buttonLabel && (this.disabled || this.placeholder)) {
+      return s(this.buttonLabel);
+    }
+    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] = [];
+      }
+      e[i].push(t);
+      return e;
+    }), []);
+    return e;
+  }
+  get dateValidators() {
+    const e = new Date(this.cutoffTime || "");
+ // should fallback to InvalidDate
+        return {
+      startDate: stringToDate(this.startDate),
+      endDate: stringToDate(this.endDate),
+      cutOffTime: n.isValid(e) ? e : undefined
+    };
+  }
+  get dateValue() {
+    if (this.isTypeable) {
+      return stringToDate(this.typedValue);
+    } else {
+      let {value: e} = this;
+      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) {
+        e = formatDateISO(e);
+      }
+      return 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: e, internalError: t, invalid: a} = this;
+    let i = [];
+    if (t) {
+      i = [ t ];
+    }
+    if (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: e, dateValue: t, displayFormat: a, isTypeable: i} = this;
+    if (i) return e;
+    if (t === undefined) return "";
+    if (a) return n.format(t, convertMomentFormat(a));
+    return new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+    }).format(t);
+  }
+  get hintList() {
+    const {hints: e, hintMessageType: t, hintMessage: a} = this;
+    if (Array.isArray(e) && e.length) return e.filter((e => !!e)).map((e => s(e)));
+    if (t === "info" && a) return [ a ];
+    return [];
+  }
+  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");
+  }
+  get isTypeable() {
+    return this.typeable;
+  }
+  get selectedDate() {
+    var e;
+    const t = (e = this.calendarBody) === null || e === void 0 ? void 0 : e.querySelector('[aria-selected="true"]');
+    return t ? removeTimezoneOffset(new Date(t.dataset.date)) : null;
+  }
+  _togglePopover() {
+    const e = this.typeable ? this.btnCalendarToggle : this.innerInputField;
+    e === null || e === void 0 ? void 0 : e.click();
+    e === null || e === void 0 ? void 0 : e.focus();
+    e.dispatchEvent(new FocusEvent("focus"));
+  }
+  activateDay(e) {
+    this.goToMonthYear(e.getMonth(), e.getFullYear());
+    this.scheduledAfterRender.push((() => this.focusDay(e)));
+  }
+  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);
+  }
+  calendarDays() {
+    return a("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", {
+      scope: "col",
+      "aria-label": this.dayStrings[e]
+    }, this.dayAbbrStrings[e]))))), a("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 => {
+      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", {
+        class: e.classList,
+        "aria-hidden": e.isEmpty ? "true" : undefined,
+        tabindex: e.isSelected ? 0 : -1,
+        role: e.isSelected ? "gridcell" : undefined,
+        "aria-selected": e.isSelected ? "true" : undefined,
+        "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", {
+        class: "today-decorator",
+        "aria-hidden": "true"
+      }, s("tecton.element.calendar.today")), a("div", {
+        "aria-label": i
+      }, (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", {
+      class: "calendar-field-popup",
+      onKeyUp: this.onPopupKeyup
+    }, this.calendarLabel && a("p", {
+      class: "calendar-label"
+    }, s(this.calendarLabel)), a("div", {
+      class: "cal-month-heading"
+    }, a("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", {
+      type: "chevron-left"
+    })), a("span", {
+      class: "cal-month-text"
+    }, this.monthStrings[e]), a("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", {
+      type: "chevron-right"
+    })), a("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", {
+      type: "chevron-left"
+    })), a("span", {
+      class: "cal-year-text"
+    }, this.selectedMonthYear.selectedYear), a("q2-btn", {
+      label: s("tecton.element.calendar.nextYear"),
+      "hide-label": true,
+      class: "cal-nav-btn next-year",
+      ref: e => this.btnNextYear = e,
+      "test-id": "nextYearButton",
+      onClick: () => this.goToMonthYear(e, t + 1),
+      onKeyDown: this.onHeaderControlKeydown
+    }, a("q2-icon", {
+      type: "chevron-right"
+    }))), a("div", {
+      class: "sr",
+      "aria-live": "polite",
+      id: "table-label"
+    }, `${this.monthStrings[e]} ${t}`), this.calendarDays(), this.disclaimer && a("div", {
+      class: "calendar-disclaimer"
+    }, s(this.disclaimer)), a("q2-btn", {
+      class: "sr refocus-popup",
+      onFocus: this.onRefocus
+    }));
+  }
+  renderHintField() {
+    if (!this.hintMessage) return;
+    return a("q2-message", {
+      class: "calendar-hint sr",
+      ref: e => this.hintMessageElement = e,
+      type: this.hintMessageType
+    }, this.hintMessage);
+  }
+  renderInputField() {
+    const {isTypeable: e} = this;
+    return a("q2-input", {
+      ref: e => this.controlElement = e,
+      class: "calendar-input-field",
+      value: this.formattedValue,
+      label: s(this.label),
+      hideLabel: this.hideLabel,
+      disabled: !!this.disabled,
+      readonly: !!this.readonly,
+      clearable: this.canClear,
+      placeholder: this.computedPlaceholder,
+      optional: !!this.optional,
+      ariaExpanded: `${!!this.open}`,
+      hints: this.hintList,
+      errors: this.errorList,
+      onClick: e ? undefined : this.onInputClick,
+      onChange: this.onInputChange,
+      onInput: this.onInputInput,
+      onKeyDown: this.onInputKeydown,
+      onKeyUp: this.onInputKeyup,
+      onBlur: this.onInputBlur,
+      onFocus: this.onInputFocus,
+      "icon-right": e ? undefined : "calendar",
+      "format-modifier": e ? this.formatModifier : this.displayFormat || this.formatModifier,
+      type: "date",
+      "hide-messages": !e,
+      "test-id": "inputAndCalendarToggle",
+      _role: "combobox",
+      _preventEntry: !e
+    }, e && a("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", {
+      type: "calendar"
+    })));
+  }
+  render() {
+    return a("click-elsewhere", {
+      key: "9b9a4058ca1f6fd2e613804f19817f7a670a016f",
+      class: this.open ? "dropdown-open" : undefined,
+      onChange: this.onClickElsewhere
+    }, this.renderInputField(), a("q2-popover", {
+      key: "7f729ebe0684463c3d19e732973708347a900040",
+      ref: e => this.popoverElement = e,
+      controlElement: this.controlElement,
+      open: this.open,
+      direction: this.popoverDirection,
+      minHeight: this.popoverMinHeight,
+      align: this.popoverAlignment,
+      mode: this.popoverMode || undefined,
+      block: true
+    }, this.renderHintField(), this.renderCalendarPopover()));
+  }
+  get hostElement() {
+    return i(this);
+  }
+  static get watchers() {
+    return {
+      ariaLabel: [ "ariaLabelObserver" ],
+      cutoffTime: [ "cutoffTimeObserver" ],
+      daysOfWeekChecksum: [ "daysOfWeekChecksumObserver" ],
+      endDate: [ "endDateObserver" ],
+      invalidDates: [ "invalidDatesObserver" ],
+      popDirection: [ "popDirectionHandler" ],
+      startDate: [ "startDateObserver" ],
+      typeable: [ "typeableChanged" ],
+      validDates: [ "validDatesObserver" ],
+      value: [ "valueObserver" ]
+    };
+  }
+};
+
+y.style = m;
+
+export { y as q2_calendar };
+//# sourceMappingURL=q2-calendar.entry.js.map