q2-tecton-elements 1.72.0 → 1.73.0

package/dist/components/q2-date-calendar2.js

@@ -0,0 +1,678 @@
+import { proxyCustomElement as t, HTMLElement as a, createEvent as e, h as r, transformTag as n } from "@stencil/core/internal/client";
+
+import { d as i } from "./index3.js";
+
+import { l as s } from "./index2.js";
+
+import { d as o } from "./q2-btn2.js";
+
+import { d } from "./q2-icon2.js";
+
+import { d as c } from "./q2-loading2.js";
+
+import { d as l } from "./q2-message2.js";
+
+const h = "MM/DD/YYYY", u = [ h, "DD/MM/YYYY", "MM-DD-YYYY", "DD-MM-YYYY", "YYYY-MM-DD" ], p = {
+  "Choose a date": "tecton.element.datePicker.calendarLabel",
+  "Dates are shown in your local time zone.": "tecton.element.datePicker.disclaimer.localTimeZone"
+}, f = /^\d{4}-\d{2}-\d{2}$/, m = /^(\d{4})-(\d{1,2})-(\d{1,2})(?:T.*)?$/, g = /^(\d{1,2})\/(\d{1,2})\/(\d{2}|\d{4})$/;
+
+/** Determines a year for a month and day when typeable input omits the year. */
+function buildInputDate(t, a) {
+  const [e, r, n] = t.split("/");
+  if (!e) return;
+  if (!r) return new Date((new Date).getFullYear(), Number(e) - 1, 1);
+  if (Number(r) <= 0) return;
+  const s = 4 === (null == n ? void 0 : n.length) ? Number(n) : Number(function(t, a, e) {
+    const r = `${t.padStart(2, "0")}/${a.padStart(2, "0")}`, n = new Date, i = `${n.getMonth() + 1}`.padStart(2, "0") + `/${n.getDate()}`.padStart(2, "0");
+    let s = n.getFullYear();
+    "future" === e && i > r && s++;
+    "past" === e && i < r && s--;
+    return `${s}`;
+  }(e, r, a)), o = new Date(s, Number(e) - 1, Number(r));
+  return i.isValid(o) ? o : void 0;
+}
+
+/** Formats a valid date as an ISO calendar date. */ function formatDateISO(t) {
+  if (i.isValid(t)) return i.formatISO(t, {
+    representation: "date"
+  });
+}
+
+/** Formats a date for an accessible day label. */ function formatDateFull(t) {
+  if (i.isValid(t)) return new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    weekday: "long",
+    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+  }).format(t);
+}
+
+/** Returns localized abbreviated day names beginning with Sunday. */
+/** Parses the date picker's public ISO-only value contract. */
+function parseDatePickerValue(t) {
+  if (!t || !f.test(t)) return;
+  const [a, e, r] = t.split("-").map(Number);
+  return dateFromParts(a, e, r);
+}
+
+/** Normalizes a legacy string or Moment-like value for the date picker's ISO-only calendar. */ function normalizeDatePickerValue(t) {
+  if (!t) return;
+  let a;
+  if (t instanceof Date) a = t; else if (function(t) {
+    return "string" != typeof t && "function" == typeof (null == t ? void 0 : t.toDate);
+  }
+  /** Formats a date using one of the date picker's supported numeric display formats. */ (t)) try {
+    a = t.toDate();
+  } catch (t) {
+    return;
+  } else {
+    const e = t.trim();
+    if (!e) return;
+    if (a = parseDatePickerValue(e), !a) {
+      const t = e.match(m), r = e.match(g);
+      if (t) a = dateFromParts(Number(t[1]), Number(t[2]), Number(t[3])); else if (r) {
+        const t = Number(r[3]);
+        a = dateFromParts(t < 100 ? (t >= 69 ? 1900 : 2e3) + t : t, Number(r[1]), Number(r[2]));
+      } else {
+        const t = new Date(e);
+        a = i.isValid(t) ? dateFromParts(t.getFullYear(), t.getMonth() + 1, t.getDate()) : void 0;
+      }
+    }
+  }
+  return formatDateISO(a);
+}
+
+/** Returns the month and year used to initialize the date picker grid. */
+/** Determines whether a date is present in a whitelist. */
+function validateAgainstWhitelist(t, a) {
+  return t.some((t => i.isSameDay(t, a)));
+}
+
+function parseDatePickerValues(t) {
+  return (t || []).map(parseDatePickerValue).filter((t => !!t));
+}
+
+function dateFromParts(t, a, e) {
+  const r = new Date(0);
+  if (r.setFullYear(t, a - 1, e), r.setHours(0, 0, 0, 0), r.getFullYear() === t && r.getMonth() === a - 1 && r.getDate() === e) return r;
+}
+
+function formatDisplayDate(t, a) {
+  const e = a.includes("-") ? "-" : "/", r = `${t.getMonth() + 1}`.padStart(2, "0"), n = `${t.getDate()}`.padStart(2, "0"), i = `${t.getFullYear()}`;
+  return (a.startsWith("YYYY") ? [ i, r, n ] : a.startsWith("DD") ? [ n, r, i ] : [ r, n, i ]).join(e);
+}
+
+/** Formats a date using the legacy Moment-style tokens accepted by q2-calendar. */ function formatLegacyDisplayDate(t, a) {
+  const e = a.replace(/[d]/g, "E").replace(/[D]/g, "d").replace(/[Y]/g, "y").replace(/[l]/g, "P").replace(/[W]/g, "I");
+  return i.format(t, e);
+}
+
+/** Determines whether a date satisfies every configured selection constraint. */ function isDateSelectable(t, a) {
+  const e = new Date(a.cutoffTime || ""), r = 
+  /** Determines whether a date satisfies the configured bounds and cutoff. */
+  function(t, a, e) {
+    const r = i.isAfter(null == t ? void 0 : t.startDate, e), n = i.isBefore(null == t ? void 0 : t.endDate, e), s = i.isSameDay(a, e) && i.isAfter(a, null == t ? void 0 : t.cutOffTime);
+    return !(r || s || n);
+  }
+  /** Determines whether a date's weekday is enabled. */ ({
+    startDate: parseDatePickerValue(a.startDate),
+    endDate: parseDatePickerValue(a.endDate),
+    cutOffTime: i.isValid(e) ? e : void 0
+  }, new Date, t), n = parseDatePickerValues(a.validDates), s = (null == n ? void 0 : n.length) ? validateAgainstWhitelist(n, t) : function(t, a) {
+    return t.includes(a.getDay());
+  }
+  /** Determines whether a date is absent from a blacklist. */ (
+  /** Returns the enabled day indexes represented by a calendar checksum. */
+  function(t = 127) {
+    const a = [];
+    for (let e = 0; e < 7; e++) t & 1 << e && a.push(e);
+    return t > 0 ? a : [];
+  }(a.daysOfWeekChecksum), t);
+  return r && s && function(t, a) {
+    return !validateAgainstWhitelist(t, a);
+  }(parseDatePickerValues(a.invalidDates), t);
+}
+
+/** Determines whether every date in an inclusive range is selectable. */ function isRangeSelectable(t, a, e) {
+  for (let r = t; r.getTime() <= a.getTime(); r = i.addDays(r, 1)) if (!isDateSelectable(r, e)) return !1;
+  return !0;
+}
+
+/** Resolves a date-picker localization key or mapped default string. */ function localizeDatePickerString(t, a = {}) {
+  return t ? s(p[t] || t, a) : "";
+}
+
+/** Returns a supported display format, falling back to the date-picker default. */ function normalizeDisplayFormat(t) {
+  const a = null == t ? void 0 : t.toUpperCase();
+  return u.includes(a) ? a : h;
+}
+
+const v =  t(class extends a {
+  constructor(t) {
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctCalendarCancel = e(this, "tctCalendarCancel", 1), 
+    this.tctCalendarCommit = e(this, "tctCalendarCommit", 1), this.tctCalendarDismiss = e(this, "tctCalendarDismiss", 1), 
+    this.tctCalendarError = e(this, "tctCalendarError", 1), this.tctChange = e(this, "tctChange", 1), 
+    // #region Own Properties
+    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") ], 
+    this.dayStrings = [ 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") ], 
+    this.rangeError = "", 
+    /** Uses the action-sheet calendar presentation. */
+    this.actionSheet = !1, 
+    /** Controls whether navigation appears above or below the date grid. */
+    this.direction = "down", 
+    /** Disables calendar interaction. */
+    this.disabled = !1, 
+    /** Formats calendar and range labels using the provided locale. */
+    this.locale = document.documentElement.lang || "en-US", 
+    /** Selects single-date or range calendar behavior. */
+    this.mode = "single", 
+    /** Indicates that a new calendar session has opened. */
+    this.open = !1, 
+    /** Prevents calendar selection while retaining calendar visibility. */
+    this.readonly = !1, this.onDateHover = t => {
+      const a = t.currentTarget;
+      if (a.disabled || !this.isRangeMode || !this.rangeDraftStart || this.rangeDraftEnd) return;
+      const e = parseDatePickerValue(a.dataset.date);
+      this.rangeHoverDate = i.isValid(e) && this.isDateValid(e) ? e : void 0;
+    }, this.onDateHoverEnd = () => {
+      this.rangeHoverDate = void 0;
+    }, this.onDateKeydown = t => {
+      const a = t.target.closest("button[data-date]");
+      if (!a) return;
+      const e = parseDatePickerValue(a.dataset.date);
+      let r, n;
+      switch (t.key) {
+       case "Escape":
+        return t.preventDefault(), this.resetRangeDraft(), void this.tctCalendarDismiss.emit();
+
+       case "ArrowUp":
+        r = i.addDays(e, -7), n = -1;
+        break;
+
+       case "ArrowDown":
+        r = i.addDays(e, 7), n = 1;
+        break;
+
+       case "ArrowLeft":
+        r = i.addDays(e, -1), n = -1;
+        break;
+
+       case "ArrowRight":
+        r = i.addDays(e, 1), n = 1;
+        break;
+
+       case "Home":
+        r = i.addDays(e, -e.getDay()), n = 1;
+        break;
+
+       case "End":
+        r = i.addDays(e, 6 - e.getDay()), n = -1;
+        break;
+
+       case "PageUp":
+        r = new Date(e.getFullYear() - (t.shiftKey ? 1 : 0), e.getMonth() - (t.shiftKey ? 0 : 1), e.getDate()), 
+        n = -1;
+        break;
+
+       case "PageDown":
+        r = new Date(e.getFullYear() + (t.shiftKey ? 1 : 0), e.getMonth() + (t.shiftKey ? 0 : 1), e.getDate()), 
+        n = 1;
+        break;
+
+       default:
+        return;
+      }
+      t.preventDefault();
+      const s = this.findValidNavigationDate(r, n);
+      s && this.activateDate(s);
+    }, this.onDateSelection = t => {
+      const a = t.target.closest("button[data-date]");
+      !a || a.disabled || this.disabled || this.readonly || this.selectDate(parseDatePickerValue(a.dataset.date));
+    }, this.onRangeCancel = () => {
+      this.resetRangeDraft(), this.tctCalendarCancel.emit();
+    }, this.onRangeCommit = () => {
+      !this.disabled && !this.readonly && this.rangeDraftStart && this.rangeDraftEnd && (this.isRangeValid(this.rangeDraftStart, this.rangeDraftEnd) ? (this.setRangeError(""), 
+      this.emitCommit({
+        rangeStart: formatDateISO(this.rangeDraftStart),
+        rangeEnd: formatDateISO(this.rangeDraftEnd)
+      })) : this.setRangeError(this.rangeValidationError));
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  connectedCallback() {
+    this.resetCalendarSession();
+  }
+  // #endregion
+  // #region Listeners
+  focusHandler(t) {
+    var a;
+    t.target === t.currentTarget && this.focusDate((null === (a = t.detail) || void 0 === a ? void 0 : a.value) || this.rovingDate);
+  }
+  // #endregion
+  // #region Public Methods API
+  /** Moves the visible month to the provided date and focuses that day. */
+  async focusDate(t) {
+    const a = "string" == typeof t ? parseDatePickerValue(t) : t;
+    i.isValid(a) && (this.activeDate = a, this.goToMonthYear(a.getMonth(), a.getFullYear()), 
+    requestAnimationFrame((() => this.focusRenderedDate(a))));
+  }
+  /** Selects the provided date when it satisfies the calendar constraints. */  async setValue(t) {
+    const a = "string" == typeof t ? parseDatePickerValue(t) : t;
+    i.isValid(a) && this.isDateValid(a) && this.selectDate(a);
+  }
+  // #endregion
+  // #region Watchers
+  constraintsChanged() {
+    this.setRangeError("");
+  }
+  modeChanged() {
+    this.resetCalendarSession();
+  }
+  openChanged(t) {
+    t && this.resetCalendarSession();
+  }
+  rangeChanged() {
+    this.isRangeMode && this.resetCalendarSession();
+  }
+  valueChanged() {
+    this.isRangeMode || this.resetCalendarSession();
+  }
+  // #endregion
+  // #region Local Methods
+  get constraints() {
+    return {
+      cutoffTime: this.cutoffTime,
+      daysOfWeekChecksum: this.daysOfWeekChecksum,
+      endDate: this.endDate,
+      invalidDates: this.invalidDates,
+      startDate: this.startDate,
+      validDates: this.validDates
+    };
+  }
+  get currentWeeks() {
+    return this.dateList.reduce(((t, a, e) => {
+      const r = Math.floor(e / 7);
+      return t[r] || (t[r] = []), t[r].push(a), t;
+    }), []);
+  }
+  get dateList() {
+    const {monthIndex: t, selectedYear: a} = this.selectedMonthYear, e = new Date(a, t, 1), r = new Date(a, t + 1, 0).getDate(), n = 7 * Math.ceil((e.getDay() + r) / 7), s = this.actionSheet ? 42 : n, o = new Date(a, t, 1 - e.getDay());
+    return Array.from({
+      length: s
+    }, ((a, e) => {
+      const r = i.addDays(o, e), n = r.getMonth() !== t, s = this.rangeDraftStart, d = this.rangeDraftEnd || this.rangeHoverDate, c = s && d && s.getTime() > d.getTime() ? d : s, l = s && d && s.getTime() > d.getTime() ? s : d, h = this.isRangeMode && !!c && i.isSameDay(r, c), u = this.isRangeMode && !!l && i.isSameDay(r, l), p = this.isRangeMode ? h || u : !!this.selectedDate && i.isSameDay(r, this.selectedDate), f = this.isRangeMode && !!c && !!l && r.getTime() > c.getTime() && r.getTime() < l.getTime(), m = i.isSameDay(r, new Date), g = this.isDateValid(r), v = [ "cal-day" ];
+      return n && v.push("is-outside"), f && v.push("in-range"), p && v.push("is-selected"), 
+      h && v.push("range-start"), (u || h && !l) && v.push("range-end"), m && v.push("is-today"), 
+      g || v.push("is-disabled"), {
+        classList: v.join(" "),
+        date: r,
+        isOutside: n,
+        isSelected: p,
+        isToday: m,
+        isValid: g
+      };
+    }));
+  }
+  get isRangeMode() {
+    return "range" === this.mode || "range-typeable" === this.mode;
+  }
+  get normalizedDisplayFormat() {
+    return normalizeDisplayFormat(this.displayFormat);
+  }
+  get rangeConfirmDisabled() {
+    return !this.rangeDraftStart || !this.rangeDraftEnd;
+  }
+  get rangeEndDate() {
+    const t = parseDatePickerValue(this.rangeEnd);
+    return i.isValid(t) ? t : void 0;
+  }
+  get rangeSummary() {
+    return this.rangeDraftStart && this.rangeDraftEnd ? `${this.formatRangeDate(this.rangeDraftStart)} – ${this.formatRangeDate(this.rangeDraftEnd)}` : this.rangeDraftStart ? `${this.formatRangeDate(this.rangeDraftStart)} – ${localizeDatePickerString("tecton.element.datePicker.range.selectEnd")}` : localizeDatePickerString("tecton.element.datePicker.range.selectStart");
+  }
+  get rangeValidationError() {
+    return localizeDatePickerString("tecton.element.datePicker.validation.rangeUnavailable");
+  }
+  get rovingDate() {
+    const {monthIndex: t, selectedYear: a} = this.selectedMonthYear, e = [ this.activeDate, this.isRangeMode ? this.rangeDraftStart : this.selectedDate ];
+    for (const r of e) if ((null == r ? void 0 : r.getMonth()) === t && (null == r ? void 0 : r.getFullYear()) === a) return r;
+    const r = new Date;
+    return r.getMonth() === t && r.getFullYear() === a ? r : new Date(a, t, 1);
+  }
+  get selectedDate() {
+    const t = parseDatePickerValue(this.isRangeMode ? this.rangeStart : this.value);
+    return i.isValid(t) ? t : void 0;
+  }
+  get title() {
+    const {monthIndex: t, selectedYear: a} = this.selectedMonthYear;
+    return new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric"
+    }).format(new Date(a, t, 1));
+  }
+  activateDate(t) {
+    this.activeDate = t, this.goToMonthYear(t.getMonth(), t.getFullYear()), requestAnimationFrame((() => this.focusRenderedDate(t)));
+  }
+  emitCommit(t) {
+    this.tctCalendarCommit.emit(t), this.tctChange.emit(t);
+  }
+  findValidNavigationDate(t, a) {
+    let e = t;
+    for (let t = 0; t < 366; t++) {
+      if (this.isDateValid(e)) return e;
+      e = i.addDays(e, a);
+    }
+  }
+  focusRenderedDate(t) {
+    var a, e, r;
+    null === (r = null === (e = null === (a = this.hostElement) || void 0 === a ? void 0 : a.shadowRoot) || void 0 === e ? void 0 : e.querySelector(`button[data-date="${formatDateISO(t)}"]`)) || void 0 === r || r.focus();
+  }
+  formatRangeDate(t) {
+    return this.displayFormat ? formatDisplayDate(t, this.normalizedDisplayFormat) : new Intl.DateTimeFormat(this.locale, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(t);
+  }
+  goToMonthYear(t, a) {
+    const e = new Date(a, t, 1);
+    this.selectedMonthYear = {
+      monthIndex: e.getMonth(),
+      selectedYear: e.getFullYear()
+    };
+  }
+  isDateValid(t) {
+    return isDateSelectable(t, this.constraints);
+  }
+  isRangeValid(t, a) {
+    return isRangeSelectable(t, a, this.constraints);
+  }
+  onNavigate(t) {
+    const {monthIndex: a, selectedYear: e} = this.selectedMonthYear, r = {
+      previousYear: [ a, e - 1 ],
+      previousMonth: [ a - 1, e ],
+      nextMonth: [ a + 1, e ],
+      nextYear: [ a, e + 1 ]
+    };
+    this.goToMonthYear(...r[t]);
+  }
+  resetCalendarSession() {
+    const t = this.selectedDate;
+    this.activeDate = t, this.selectedMonthYear = function(t = new Date) {
+      return {
+        monthIndex: t.getMonth(),
+        selectedYear: t.getFullYear()
+      };
+    }(t), this.resetRangeDraft();
+  }
+  resetRangeDraft() {
+    if (this.setRangeError(""), this.rangeHoverDate = void 0, !this.selectedDate || !this.rangeEndDate) return this.rangeDraftStart = void 0, 
+    void (this.rangeDraftEnd = void 0);
+    [this.rangeDraftStart, this.rangeDraftEnd] = [ this.selectedDate, this.rangeEndDate ].sort(((t, a) => t.getTime() - a.getTime()));
+  }
+  selectDate(t) {
+    if (this.isDateValid(t)) {
+      if (this.activeDate = t, this.isRangeMode) return this.setRangeError(""), !this.rangeDraftStart || this.rangeDraftEnd ? (this.rangeDraftStart = t, 
+      this.rangeDraftEnd = void 0) : t.getTime() < this.rangeDraftStart.getTime() ? (this.rangeDraftEnd = this.rangeDraftStart, 
+      this.rangeDraftStart = t) : this.rangeDraftEnd = t, this.rangeHoverDate = void 0, 
+      this.goToMonthYear(t.getMonth(), t.getFullYear()), void requestAnimationFrame((() => this.focusRenderedDate(t)));
+      this.goToMonthYear(t.getMonth(), t.getFullYear()), this.emitCommit({
+        value: formatDateISO(t)
+      });
+    }
+  }
+  setRangeError(t) {
+    this.rangeError !== t && (this.rangeError = t, this.tctCalendarError.emit(t));
+  }
+  // #endregion
+  // #region Render Methods
+  renderNavigation() {
+    return [ r("div", {
+      class: "cal-nav-controls cal-nav-controls-left"
+    }, this.renderNavigationButton("previousYear"), this.renderNavigationButton("previousMonth")), r("div", {
+      class: "cal-nav-title",
+      id: "date-picker-label",
+      "aria-live": "polite"
+    }, this.title), r("div", {
+      class: "cal-nav-controls cal-nav-controls-right"
+    }, this.renderNavigationButton("nextMonth"), this.renderNavigationButton("nextYear")) ];
+  }
+  renderNavigationButton(t) {
+    const a = "previousYear" === t || "nextYear" === t, e = "previousYear" === t || "previousMonth" === t;
+    return r("q2-btn", {
+      class: `cal-nav-btn ${t}`,
+      "hide-label": !0,
+      label: s(`tecton.element.calendar.${t}`),
+      onTctClick: () => this.onNavigate(t),
+      "test-id": `${t}Button`
+    }, r("q2-icon", {
+      type: `chevron-${a ? "double-" : ""}${e ? "left" : "right"}`
+    }));
+  }
+  render() {
+    const t = !this.actionSheet && "up" === this.direction, a = this.rovingDate, e = this.rangeValidationError;
+    return r("div", {
+      key: "84c278bd6817625fcf5f70528000edcc84d116a6",
+      class: `cal-panel direction-${t ? "up" : "down"}${this.actionSheet ? " is-action-sheet" : ""}`,
+      role: this.actionSheet ? void 0 : "dialog",
+      "aria-label": this.actionSheet ? void 0 : localizeDatePickerString(this.accessibleLabel || this.calendarLabel || "Choose a date")
+    }, this.calendarLabel && !this.actionSheet && r("p", {
+      key: "9a466d3509ed7ce45949039cfa11ce8485c4e278",
+      class: "calendar-label"
+    }, localizeDatePickerString(this.calendarLabel)), !t && r("div", {
+      key: "a8c6ef4c4098c81bb79cd2ca450f38c56c99c51d",
+      class: "cal-nav"
+    }, this.renderNavigation()), r("div", {
+      key: "45e7f43ee502ea2c19049112860b3690313f53d5",
+      class: "cal-grid",
+      role: "grid",
+      "aria-labelledby": "date-picker-label"
+    }, r("div", {
+      key: "2a1a4caebfb72b601b9dd282550b519a3f610329",
+      role: "rowgroup"
+    }, r("div", {
+      key: "6187b5b5b7391e389a4af9403a2b8c63f9606e35",
+      class: "cal-row cal-weekdays",
+      role: "row"
+    }, this.dayAbbrStrings.map(((t, a) => r("div", {
+      class: "cal-dow",
+      role: "columnheader",
+      "aria-label": this.dayStrings[a]
+    }, t))))), r("div", {
+      key: "f2c274adc93798dd8c20762a09fcc95bcb77992f",
+      class: "cal-days",
+      role: "rowgroup",
+      onClick: this.onDateSelection,
+      onKeyDown: this.onDateKeydown,
+      onMouseLeave: this.onDateHoverEnd
+    }, this.currentWeeks.map((t => r("div", {
+      class: "cal-row",
+      role: "row"
+    }, t.map((t => r("div", {
+      role: "gridcell",
+      "aria-selected": `${t.isSelected}`
+    }, r("button", {
+      type: "button",
+      class: t.classList,
+      "data-date": formatDateISO(t.date),
+      disabled: !t.isValid,
+      tabindex: i.isSameDay(t.date, a) ? 0 : -1,
+      "aria-disabled": t.isValid ? void 0 : "true",
+      "aria-current": t.isToday ? "date" : void 0,
+      "aria-label": formatDateFull(t.date),
+      onMouseEnter: this.onDateHover
+    }, t.date.getDate()))))))))), t && r("div", {
+      key: "14a8abe8669e403c4745eaf256783f37caf7fc43",
+      class: "cal-nav"
+    }, this.renderNavigation()), this.disclaimer && r("div", {
+      key: "f3ab74f66fca52d2499f52d20fdfd8a86cc154bc",
+      class: "calendar-disclaimer"
+    }, localizeDatePickerString(this.disclaimer)), this.isRangeMode && r("div", {
+      key: "276c870f99275bb582b250ed1a3632f5e95c17c3",
+      class: "cal-footer"
+    }, r("div", {
+      key: "1d753811c31360780fae551cb49c190561e292ed",
+      class: "cal-footer-summary"
+    }, r("q2-message", {
+      key: "9db690009d1efa45b4e852e16a5b47ab0262c751",
+      class: "is-placeholder",
+      appearance: "minimal",
+      type: "error",
+      "aria-hidden": "true"
+    }, e), r("span", {
+      key: "c1b41f3faf70207aa8dc65c8812dc91737cfe590"
+    }, this.rangeSummary)), r("div", {
+      key: "6af2f2741335e07737e61936cd480e90eb38918b",
+      class: "cal-footer-actions"
+    }, r("q2-btn", {
+      key: "62e02cab1e110559304475a1d0c29d1fc65f1d93",
+      intent: "workflow-escape",
+      size: "small",
+      label: localizeDatePickerString("tecton.element.datePicker.action.cancel"),
+      onTctClick: this.onRangeCancel
+    }), r("q2-btn", {
+      key: "14f1286e80e92b42168e3e6abe9718d40b4ded59",
+      intent: "workflow-primary",
+      size: "small",
+      label: localizeDatePickerString("tecton.element.datePicker.action.confirm"),
+      disabled: this.rangeConfirmDisabled,
+      onTctClick: this.onRangeCommit
+    }))));
+  }
+  get hostElement() {
+    return this;
+  }
+  static get watchers() {
+    return {
+      cutoffTime: [ {
+        constraintsChanged: 0
+      } ],
+      daysOfWeekChecksum: [ {
+        constraintsChanged: 0
+      } ],
+      endDate: [ {
+        constraintsChanged: 0
+      } ],
+      invalidDates: [ {
+        constraintsChanged: 0
+      } ],
+      startDate: [ {
+        constraintsChanged: 0
+      } ],
+      validDates: [ {
+        constraintsChanged: 0
+      } ],
+      mode: [ {
+        modeChanged: 0
+      } ],
+      open: [ {
+        openChanged: 0
+      } ],
+      rangeEnd: [ {
+        rangeChanged: 0
+      } ],
+      rangeStart: [ {
+        rangeChanged: 0
+      } ],
+      value: [ {
+        valueChanged: 0
+      } ]
+    };
+  }
+  static get style() {
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{box-sizing:border-box;display:block}:host[hidden]{display:none}.cal-panel{box-sizing:border-box;width:var(--comp-date-calendar-width, var(--tct-date-calendar-width, 360px));min-width:0;padding:var(--tct-date-calendar-padding, var(--app-scale-4x, 20px));border-radius:var(--tct-date-calendar-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-date-calendar-background, var(--t-base, #ffffff));box-shadow:var(--tct-date-calendar-box-shadow, var(--app-shadow-3))}.cal-panel.is-action-sheet{width:100%;padding:0;border-radius:0;background:transparent;box-shadow:none}.calendar-label{margin:0 0 var(--tct-date-calendar-label-margin-bottom, var(--tct-scale-2, var(--app-scale-2x, 10px)));color:var(--tct-date-calendar-label-font-color, var(--tct-text, var(--t-text, #4d4d4d)));font-size:var(--tct-date-calendar-label-font-size, var(--tct-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-date-calendar-label-font-weight, var(--tct-font-weight-semibold, 600))}.cal-nav{display:grid;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);align-items:center;margin-bottom:var(--tct-date-calendar-navigation-margin-bottom, var(--app-scale-3x, 15px))}.cal-nav-controls{display:flex;gap:var(--tct-date-calendar-navigation-gap, 2px)}.cal-nav-controls-left{justify-self:start}.cal-nav-controls-right{justify-self:end}.cal-panel.direction-up .cal-nav{margin-top:var(--tct-date-calendar-navigation-margin-top, var(--app-scale-3x, 15px));margin-bottom:0}.cal-nav-btn{width:var(--tct-date-calendar-navigation-button-width, 40px);height:var(--tct-date-calendar-navigation-button-height, 40px);margin:0;--tct-btn-icon-width:var(--tct-date-calendar-navigation-button-width, 40px);--tct-btn-icon-height:var(--tct-date-calendar-navigation-button-height, 40px);--tct-btn-icon-size:var(--tct-date-calendar-navigation-icon-size, 22px);--tct-btn-icon-border-radius:var(--tct-date-calendar-navigation-button-border-radius, var(--app-border-radius-1, 4px))}.cal-nav-btn q2-icon{width:var(--tct-date-calendar-navigation-icon-size, 22px);min-width:var(--tct-date-calendar-navigation-icon-size, 22px);height:var(--tct-date-calendar-navigation-icon-size, 22px)}.cal-nav-title{overflow:hidden;color:var(--tct-date-calendar-month-font-color, var(--tct-text, var(--t-text, #4d4d4d)));font-size:var(--tct-date-calendar-month-font-size, var(--const-px-15, 15px));font-weight:var(--tct-date-calendar-month-font-weight, 700);text-align:center;text-overflow:ellipsis;white-space:nowrap}.cal-row{display:grid;grid-template-columns:repeat(7, 44px);gap:var(--tct-date-calendar-grid-gap, 2px);justify-content:center}.cal-days{display:flex;flex-direction:column;gap:var(--tct-date-calendar-grid-gap, 2px)}.cal-dow{padding:var(--tct-date-calendar-weekday-padding, 6px 0 10px);color:var(--tct-date-calendar-day-heading-font-color, var(--tct-gray-8, var(--t-gray-8, #747474)));font-size:var(--tct-date-calendar-day-heading-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-date-calendar-day-heading-font-weight, 600);text-align:center}[role=gridcell]{min-width:0}.cal-day{box-sizing:border-box;display:flex;width:100%;height:var(--tct-date-calendar-day-height, 44px);padding:0;align-items:center;justify-content:center;border:0;border-radius:var(--tct-date-calendar-day-border-radius, var(--app-border-radius-2, 8px));background:transparent;color:var(--tct-date-calendar-day-font-color, var(--t-gray-1, #0d0d0d));cursor:pointer;font:inherit;font-size:var(--tct-date-calendar-day-font-size, var(--app-font-size, var(--const-px-14, 14px)))}.cal-day:hover:not(:disabled):not(.is-selected){background:var(--tct-date-calendar-day-hover-background, var(--t-gray-14, #f2f2f2))}.cal-day:focus-visible{background:var(--tct-date-calendar-background, var(--t-base, #ffffff));outline:0;box-shadow:var(--tct-date-calendar-day-focus-ring, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc))}.cal-day.is-outside{color:var(--tct-date-calendar-day-outside-font-color, var(--t-gray-8, #747474))}.cal-day:disabled{color:var(--tct-date-calendar-day-disabled-font-color, var(--t-gray-11, #cccccc));cursor:not-allowed}.cal-day.is-today{color:var(--tct-date-calendar-today-color, var(--t-primary, #6a4a9e));font-weight:var(--tct-date-calendar-today-font-weight, 600);box-shadow:inset 0 0 0 2px var(--tct-date-calendar-today-color, var(--t-primary, #6a4a9e))}.cal-day.is-selected{border-radius:var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-date-calendar-day-selected-background, var(--t-primary, #6a4a9e));color:var(--tct-date-calendar-day-selected-font-color, var(--t-primary-text, #ffffff));font-weight:var(--tct-date-calendar-day-selected-font-weight, 700);box-shadow:none}.cal-day.in-range{border-radius:0;background:var(--tct-date-calendar-range-background, var(--t-primary-t4, #eee8f5));color:var(--tct-date-calendar-range-font-color, var(--t-primary, #6a4a9e))}.cal-day.in-range.is-disabled{background:var(--tct-date-calendar-range-disabled-background, var(--const-stoplight-alert, #d20a0a));color:var(--t-base, #ffffff)}.cal-day.range-start{border-radius:var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) 0 0 var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px))}.cal-day.range-end{border-radius:0 var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) 0}.cal-day.range-start.range-end{border-radius:var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px))}.calendar-disclaimer{margin-top:var(--tct-date-calendar-disclaimer-margin-top, var(--app-scale-3x, 15px));padding-top:var(--tct-date-calendar-disclaimer-padding-top, var(--app-scale-2x, 10px));border-top:1px solid var(--tct-date-calendar-disclaimer-border-color, var(--t-gray-13, #e6e6e6));color:var(--tct-date-calendar-disclaimer-font-color, var(--t-text, #4d4d4d));font-size:var(--tct-date-calendar-disclaimer-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))}.cal-footer{display:grid;gap:var(--tct-date-calendar-footer-gap, var(--app-scale-2x, 10px));margin-top:var(--tct-date-calendar-footer-margin-top, var(--app-scale-3x, 15px));padding-top:var(--tct-date-calendar-footer-padding-top, var(--app-scale-3x, 15px));border-top:1px solid var(--tct-date-calendar-footer-border-color, var(--t-gray-13, #e6e6e6))}.cal-footer-summary{display:grid;color:var(--tct-date-calendar-footer-font-color, var(--t-primary, #6a4a9e));font-size:var(--tct-date-calendar-footer-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-date-calendar-footer-font-weight, 600)}.cal-footer-summary>*{grid-area:1/1}.cal-footer-summary q2-message{color:var(--t-text, #4d4d4d)}.cal-footer-summary>span{display:flex;align-items:center}.cal-footer-summary q2-message.is-placeholder{visibility:hidden;pointer-events:none}.cal-footer-actions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:var(--tct-date-calendar-footer-action-gap, var(--app-scale-1x, 5px));padding:var(--tct-date-calendar-footer-action-padding, var(--app-scale-1x, 5px))}.cal-footer-actions q2-btn{flex:0 0 auto;width:auto}@media (max-width: 768px){:host{max-width:none}.cal-panel{width:var(--comp-date-calendar-width, min(100%, 100vw - var(--tct-date-calendar-mobile-gutter, 24px) - var(--tct-date-calendar-mobile-gutter, 24px), var(--tct-date-calendar-mobile-max-width, 420px)));min-width:0}.cal-row{grid-template-columns:repeat(7, minmax(44px, 1fr))}.cal-day{height:auto;aspect-ratio:1}}@media (max-width: 360px){.cal-nav-btn{height:var(--tct-date-calendar-mobile-navigation-button-height, 32px);--tct-btn-icon-height:var(--tct-date-calendar-mobile-navigation-button-height, 32px)}}';
+  }
+}, [ 1, "q2-date-calendar", {
+  accessibleLabel: [ 1, "accessible-label" ],
+  actionSheet: [ 4, "action-sheet" ],
+  calendarLabel: [ 1, "calendar-label" ],
+  cutoffTime: [ 1, "cutoff-time" ],
+  daysOfWeekChecksum: [ 2, "days-of-week-checksum" ],
+  direction: [ 1 ],
+  disabled: [ 4 ],
+  disclaimer: [ 1 ],
+  displayFormat: [ 1, "display-format" ],
+  endDate: [ 1, "end-date" ],
+  invalidDates: [ 16 ],
+  locale: [ 1 ],
+  mode: [ 1 ],
+  open: [ 4 ],
+  rangeEnd: [ 1, "range-end" ],
+  rangeStart: [ 1, "range-start" ],
+  readonly: [ 4 ],
+  startDate: [ 1, "start-date" ],
+  validDates: [ 16 ],
+  value: [ 1 ],
+  activeDate: [ 32 ],
+  rangeDraftEnd: [ 32 ],
+  rangeDraftStart: [ 32 ],
+  rangeError: [ 32 ],
+  rangeHoverDate: [ 32 ],
+  selectedMonthYear: [ 32 ],
+  focusDate: [ 64 ],
+  setValue: [ 64 ]
+}, [ [ 0, "tctCalendarFocus", "focusHandler" ] ], {
+  cutoffTime: [ {
+    constraintsChanged: 0
+  } ],
+  daysOfWeekChecksum: [ {
+    constraintsChanged: 0
+  } ],
+  endDate: [ {
+    constraintsChanged: 0
+  } ],
+  invalidDates: [ {
+    constraintsChanged: 0
+  } ],
+  startDate: [ {
+    constraintsChanged: 0
+  } ],
+  validDates: [ {
+    constraintsChanged: 0
+  } ],
+  mode: [ {
+    modeChanged: 0
+  } ],
+  open: [ {
+    openChanged: 0
+  } ],
+  rangeEnd: [ {
+    rangeChanged: 0
+  } ],
+  rangeStart: [ {
+    rangeChanged: 0
+  } ],
+  value: [ {
+    valueChanged: 0
+  } ]
+} ]);
+
+function defineCustomElement() {
+  if ("undefined" == typeof customElements) return;
+  [ "q2-date-calendar", "q2-btn", "q2-icon", "q2-loading", "q2-message" ].forEach((t => {
+    switch (t) {
+     case "q2-date-calendar":
+      customElements.get(n(t)) || customElements.define(n(t), v);
+      break;
+
+     case "q2-btn":
+      customElements.get(n(t)) || o();
+      break;
+
+     case "q2-icon":
+      customElements.get(n(t)) || d();
+      break;
+
+     case "q2-loading":
+      customElements.get(n(t)) || c();
+      break;
+
+     case "q2-message":
+      customElements.get(n(t)) || l();
+    }
+  }));
+}
+
+export { v as Q, formatLegacyDisplayDate as a, normalizeDisplayFormat as b, formatDisplayDate as c, defineCustomElement as d, isRangeSelectable as e, formatDateISO as f, buildInputDate as g, isDateSelectable as i, localizeDatePickerString as l, normalizeDatePickerValue as n, parseDatePickerValue as p }