q2-tecton-elements 1.72.0 → 1.73.0

package/dist/q2-tecton-elements/q2-date-picker_2.entry.js

@@ -0,0 +1,792 @@
+import { r as t, c as i, h as e, g as s } from "./index-Cqkz7Bnm.js";
+
+import { d as a } from "./index-O1A-ZSZs.js";
+
+import { q as r, o as h, i as n, w as o, l as d, h as l, c } from "./index-CP8pXJ-l.js";
+
+import { s as p } from "./action-sheet-DuQ7VZ08.js";
+
+import { m as u } from "./mirror-emit-DUjY_ucm.js";
+
+import { f as g, p as m, e as v, h as f, n as b, b as w, i as y, c as C, l as D, j as x } from "./date-picker-helpers-D8QnN_AS.js";
+
+import { b as k } from "./component-DaQM9u3s.js";
+
+const T = class {
+  constructor(e) {
+    var s;
+    t(this, e), this.change = i(this, "change", 7), this.error = i(this, "error", 7), 
+    this.success = i(this, "success", 7), this.tctCancel = i(this, "tctCancel", 7), 
+    this.tctChange = i(this, "tctChange", 7), this.tctClose = i(this, "tctClose", 7), 
+    this.tctError = i(this, "tctError", 7), this.tctSuccess = i(this, "tctSuccess", 7), 
+    this.committingValue = !1, this.normalizedDateLists = new WeakMap, 
+    // #endregion
+    // #region State Properties
+    this.activePopoverDirection = "down", this.typeableValue = "", 
+    // #endregion
+    // #region Public Property API
+    /**
+         * Renders the calendar panel inline with behavior specific to being hosted by `q2-action-sheet`.
+         * @private
+         */
+    this._actionSheet = !1, 
+    /**
+         * Determines the year for a committed month/day typeable date with no year.
+         * `future` selects the next year for dates before today, while `past` selects the prior year for dates after today.
+         * Only applies to `single-typeable` mode with a month-first or day-first display format.
+         */
+    this.assume = "current", 
+    /** Displays a button in the input field allowing the user to clear the selected date or range. */
+    this.clearable = !1, 
+    /** Delay in milliseconds before the popover closes after selection. Explicitly undefined or non-positive values close immediately. */
+    this.closeDelay = 400, 
+    /** Indicates the date picker cannot be focused or interacted with. */
+    this.disabled = !1, 
+    /**
+         * Hides the input field's visible label while retaining its accessible name.
+         * @warning
+         * Hides the label visually. `label` text is still required for screenreader compliance.
+         */
+    this.hideLabel = !1, 
+    /**
+         * Instructs the component to use the action sheet workflow for displaying its calendar.
+         *
+         * For more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/).
+         */
+    this.hoist = !!(null === (s = window.Tecton) || void 0 === s ? void 0 : s.useActionSheets) || void 0, 
+    /** Shows the input field's error visual state. */
+    this.invalid = !1, 
+    /** Formats selected dates using the provided locale. Accepts multiple locales in an array as sequential fallbacks. */
+    this.locale = document.documentElement.lang || "en-US", 
+    /**
+         * Selects calendar or typeable behavior for a single date or date range.
+         * Enabling the legacy `typeable` prop uses `single-typeable` when `mode` is left at its default; an explicit mode takes precedence.
+         */
+    this.mode = "single", 
+    /** Controls whether the date picker popover is open or closed. */
+    this.open = !1, 
+    /** Appends "(optional)" to the input label and marks the field as not required. */
+    this.optional = !1, 
+    /** Aligns the calendar popover to the left or right side of the input field. */
+    this.popoverAlignment = "left", 
+    /** @deprecated Retained for compatibility with `q2-date-picker`. */
+    this.popoverMinHeight = 355, 
+    /**
+         * Uses absolute positioning for the popover when set to `legacy`.
+         *
+         * This compatibility option supports layouts where transformed ancestors interfere with fixed positioning.
+         */
+    this.popoverMode = null, 
+    /**
+         * The field's content is not editable, but the field remains focusable.
+         *
+         * Appends "(read only)" to the field label.
+         */
+    this.readonly = !1, 
+    /** Enables the legacy single-date typeable input behavior. */
+    this.typeable = !1, 
+    /** Shows the input field's success visual state when no errors are active. */
+    this.valid = !1, this.onCalendarCancel = t => {
+      t.stopPropagation(), this.calendarError = "", this._actionSheet ? this.tctCancel.emit() : this.closeCalendar();
+    }, this.onCalendarCommit = t => {
+      if (t.stopPropagation(), this.disabled || this.readonly) return;
+      if (!t.detail) return;
+      this.calendarError = "";
+      const {value: i, rangeStart: e, rangeEnd: s} = t.detail;
+      if (this.isRangeMode) {
+        if (!e || !s) return;
+        return this.rangeStart = e, this.rangeEnd = s, u(this, [ "change", "tctChange" ], {
+          rangeStart: e,
+          rangeEnd: s
+        }), void this.closeCalendar(!0, !0);
+      }
+      i && (this.commitSingleValue(i), this.closeAfterSelection());
+    }, this.onCalendarDismiss = t => {
+      t.stopPropagation(), this.calendarError = "", this._actionSheet ? this.tctCancel.emit() : this.closeCalendar();
+    }, this.onCalendarError = t => {
+      t.stopPropagation(), this.calendarError = t.detail, this._actionSheet ? this.tctClose.emit({
+        error: t.detail
+      }) : this.closeCalendar(!0, !0);
+    }, this.onCalendarToggleClick = t => {
+      t.stopPropagation(), this.toggleCalendar();
+    }, this.onClear = () => {
+      if (this.calendarError = "", this.typeableError = "", this.typeableValue = "", this.isRangeMode) return this.rangeStart = void 0, 
+      this.rangeEnd = void 0, void u(this, [ "change", "tctChange" ], {
+        rangeStart: null,
+        rangeEnd: null
+      });
+      this.value = void 0, u(this, [ "change", "tctChange" ], {
+        value: null
+      });
+    }, this.onClickElsewhere = t => {
+      "click-elsewhere" === t.target.localName && (t.stopPropagation(), this.closeCalendar(!1));
+    }, this.onInputClick = () => {
+      this.acceptsTypeableInput || this.toggleCalendar();
+    }, this.onInputKeydown = t => {
+      if (!this.disabled && !this.readonly) {
+        if (!this.acceptsTypeableInput) return p({
+          hoist: this.hoist
+        }, t) ? (t.preventDefault(), void this.showActionSheet()) : "Escape" === t.key && this.open ? (t.preventDefault(), 
+        void this.closeCalendar()) : void ([ "Enter", " ", "ArrowDown" ].includes(t.key) && !this.open && (t.preventDefault(), 
+        this.setActivePopoverDirection(), this.open = !0, requestAnimationFrame((() => this.focusRenderedDate()))));
+        if (t.metaKey || t.ctrlKey || t.altKey || 1 !== t.key.length) return;
+        this.typeableAllowedCharacters.test(t.key) || t.preventDefault();
+      }
+    }, this.onTypeableChange = t => {
+      if (t.stopImmediatePropagation(), this.disabled || this.readonly) return;
+      if (this.isSingleTypeable) {
+        const t = this.parseTypeableDate(this.typeableValue);
+        if (!t || !this.isDateValid(t)) return void this.setTypeableError(this.dateFormatValidationError);
+        this.setTypeableError("");
+        const i = g(t);
+        return void this.commitSingleValue(i);
+      }
+      const [i, e] = this.typeableValue.split(" - "), s = this.parseTypeableDate(i), a = this.parseTypeableDate(e);
+      if (!s || !a) return void this.setTypeableError(this.rangeFormatValidationError);
+      const r = this.typeableRangeError(s, a);
+      if (r) return void this.setTypeableError(r);
+      this.setTypeableError("");
+      const h = g(s), n = g(a);
+      this.rangeStart = h, this.rangeEnd = n, u(this, [ "change", "tctChange" ], {
+        rangeStart: h,
+        rangeEnd: n
+      });
+    }, this.onTypeableInput = t => {
+      var i;
+      if (t.stopImmediatePropagation(), this.disabled || this.readonly) return;
+      const e = this.isRangeTypeable ? 16 : 8, s = String((null === (i = t.detail) || void 0 === i ? void 0 : i.value) || "").replace(/\D/g, "").slice(0, e);
+      this.typeableValue = this.isRangeTypeable && s.length > 8 ? `${this.formatTypeableDate(s.slice(0, 8))} - ${this.formatTypeableDate(s.slice(8))}` : this.formatTypeableDate(s), 
+      this.validateTypeableValue();
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  connectedCallback() {
+    const t = this.normalizedValue;
+    t && this.value !== t && (this.value = t), this.activePopoverDirection = this.effectivePopoverDirection || "down", 
+    this.typeableValue = this.formattedTypeableValue, this.validateCurrentValue();
+  }
+  disconnectedCallback() {
+    clearTimeout(this.closeTimeout);
+  }
+  componentWillLoad() {
+    this.popDirection && r(this, "popDirection", "prop");
+  }
+  componentDidLoad() {
+    h(this.hostElement);
+  }
+  componentDidRender() {
+    this.open && "up" === this.activePopoverDirection && this.scrollUpCalendarToBottom();
+  }
+  // #endregion
+  // #region Listeners
+  beforeInputHandler(t) {
+    this.acceptsTypeableInput && t.data && !this.typeableAllowedCharacters.test(t.data) && t.preventDefault();
+  }
+  delegateFocus(t) {
+    var i;
+    n(t, this.hostElement) && (null === (i = this.controlElement) || void 0 === i || i.focus());
+  }
+  popoverStateHandler({detail: {open: t}}) {
+    this.open !== t && (this.open = t);
+  }
+  // #endregion
+  // #region Public Methods API
+  /** Closes the calendar popover if it is open. */
+  async closePopover() {
+    this.closeCalendar();
+  }
+  /** Moves the visible month to the provided date and focuses that day. */  async focusDate(t) {
+    var i;
+    a.isValid(t) && (await o(), await (null === (i = this.calendarElement) || void 0 === i ? void 0 : i.focusDate(t)));
+  }
+  /** Opens the calendar popover if it is closed. */  async openPopover() {
+    var t;
+    if (this.open || this.disabled || this.readonly || this._actionSheet) return;
+    this.setActivePopoverDirection(), this.open = !0, await o();
+    const i = this.acceptsTypeableInput ? null === (t = this.controlElement) || void 0 === t ? void 0 : t.querySelector('[test-id="datePickerCalendarToggle"]') : this.controlElement;
+    null == i || i.focus(), null == i || i.dispatchEvent(new FocusEvent("focus"));
+  }
+  /** Clears selected values, uncommitted typeable input, and error state without changing configuration props. */  async reset() {
+    clearTimeout(this.closeTimeout), this.value = void 0, this.rangeStart = void 0, 
+    this.rangeEnd = void 0, this.errors = void 0, this.invalid = !1, this.calendarError = "", 
+    this.typeableError = "", this.typeableValue = "";
+  }
+  /** Opens the calendar and selects the provided date when it is valid. */  async setValue(t) {
+    var i;
+    const e = m(v(t));
+    this.disabled || this.readonly || this.isRangeTypeable || !a.isValid(e) || !this.isDateValid(e) || (this._actionSheet || (this.setActivePopoverDirection(), 
+    this.open = !0, await o()), await (null === (i = this.calendarElement) || void 0 === i ? void 0 : i.setValue(e)));
+  }
+  /**
+     * Focuses the single typeable input and stages a valid date without committing it.
+     *
+     * @warning
+     * Only applicable when the effective mode is `single-typeable`.
+     */  async typeValue(t) {
+    var i;
+    if (!this.isSingleTypeable) return;
+    const e = m(v(t));
+    a.isValid(e) && await (null === (i = this.controlElement) || void 0 === i ? void 0 : i.setValue(this.formatDateWithModifier(e)));
+  }
+  // #endregion
+  // #region Watchers
+  constraintsChanged() {
+    this.committingValue || (this.acceptsTypeableInput && this.revalidateTypeableValue(), 
+    this.typeableError || this.validateCurrentValue());
+  }
+  disabledChanged(t) {
+    t && this.closeCalendar(!1);
+  }
+  displayFormatChanged() {
+    this.calendarError = "", this.typeableError = "", this.typeableValue = this.formattedTypeableValue;
+  }
+  modeChanged() {
+    this.open = !1, this.calendarError = "", this.typeableError = "", this.typeableValue = this.formattedTypeableValue;
+  }
+  openChanged(t) {
+    t && (this.setActivePopoverDirection(), this.isRangeMode && "down" === this.activePopoverDirection && this.scrollDownCalendarToTop());
+  }
+  popDirectionChanged() {
+    this.popDirection && r(this, "popDirection", "prop"), this.setActivePopoverDirection();
+  }
+  popoverDirectionChanged() {
+    this.setActivePopoverDirection();
+  }
+  rangeEndChanged() {
+    this.isRangeMode && (this.calendarError = "", this.isRangeTypeable && this.syncTypeableValue());
+  }
+  rangeStartChanged() {
+    this.isRangeMode && (this.calendarError = "", this.isRangeTypeable && this.syncTypeableValue());
+  }
+  readonlyChanged(t) {
+    t && this.closeCalendar(!1);
+  }
+  valueChanged(t) {
+    const i = v(t);
+    i && t !== i ? this.value = i : this.isRangeMode || this.committingValue || (this.calendarError = "", 
+    this.isSingleTypeable && this.syncTypeableValue(), this.validateCurrentValue());
+  }
+  // #endregion
+  // #region Local Methods
+  get acceptsTypeableInput() {
+    return this.isRangeTypeable || this.isSingleTypeable;
+  }
+  get actionSheetData() {
+    return {
+      appearance: "date-picker",
+      title: this.localizeForLocale(this.calendarLabel || "Choose a date"),
+      datePickerProps: {
+        calendarLabel: this.calendarLabel,
+        closeDelay: this.closeDelay,
+        cutoffTime: this.cutoffTime,
+        daysOfWeekChecksum: this.daysOfWeekChecksum,
+        disclaimer: this.disclaimer,
+        endDate: v(this.endDate),
+        displayFormat: this.normalizedDisplayFormat,
+        invalidDates: this.normalizedInvalidDates,
+        locale: this.locale,
+        mode: this.isRangeMode ? "range" : "single",
+        rangeEnd: v(this.rangeEnd),
+        rangeStart: v(this.rangeStart),
+        startDate: v(this.startDate),
+        validDates: this.normalizedValidDates,
+        value: this.normalizedValue
+      }
+    };
+  }
+  get automaticPopoverDirection() {
+    var t, i;
+    const {top: e = 0, bottom: s = 0} = (null === (i = null === (t = this.controlElement) || void 0 === t ? void 0 : t.getBoundingClientRect) || void 0 === i ? void 0 : i.call(t)) || {};
+    return e > window.innerHeight - s ? "up" : "down";
+  }
+  get canClear() {
+    return this.clearable && (this.isRangeMode ? !!this.rangeStart || !!this.rangeEnd : !!this.normalizedValue);
+  }
+  get computedErrors() {
+    const t = [ ...this.errors || [] ], i = this.typeableError || this.calendarError;
+    return i && t.push(i), !t.length && this.invalid && t.push("tecton.element.calendar.invalid"), 
+    t.length ? [ t[0] ] : void 0;
+  }
+  get computedPlaceholder() {
+    return this.disabled && this.disabledMsg ? this.localizeForLocale(this.disabledMsg) : this.localizeForLocale(this.placeholder);
+  }
+  get dateFormatValidationError() {
+    return this.localizeForLocale("tecton.element.datePicker.validation.dateFormat", {
+      format: this.normalizedDisplayFormat
+    });
+  }
+  get effectiveMode() {
+    return "single" !== this.mode ? this.mode : this.typeable ? "single-typeable" : "single";
+  }
+  get effectivePopoverDirection() {
+    return this.popoverDirection || this.popDirection;
+  }
+  get formattedTypeableValue() {
+    return this.selectedDate ? this.isRangeTypeable ? this.rangeEndDate ? `${this.formatDateWithModifier(this.selectedDate)} - ${this.formatDateWithModifier(this.rangeEndDate)}` : "" : this.formatDateWithModifier(this.selectedDate) : "";
+  }
+  get formattedValue() {
+    if (!this.selectedDate) return "";
+    const formatDate = t => this.displayFormat ? f(t, this.displayFormat) : this.formatLongDate(t);
+    return "range" === this.effectiveMode && this.rangeEndDate ? `${formatDate(this.selectedDate)} – ${formatDate(this.rangeEndDate)}` : formatDate(this.selectedDate);
+  }
+  get isRangeMode() {
+    return "range" === this.effectiveMode || this.isRangeTypeable;
+  }
+  get isRangeTypeable() {
+    return "range-typeable" === this.effectiveMode;
+  }
+  get isSingleTypeable() {
+    return "single-typeable" === this.effectiveMode;
+  }
+  get normalizedDisplayFormat() {
+    return b(this.displayFormat);
+  }
+  get normalizedInvalidDates() {
+    return this.normalizeDateList(this.invalidDates);
+  }
+  get normalizedValidDates() {
+    return this.normalizeDateList(this.validDates);
+  }
+  get normalizedValue() {
+    return v(this.value);
+  }
+  get rangeEndDate() {
+    const t = m(v(this.rangeEnd));
+    return a.isValid(t) ? t : void 0;
+  }
+  get rangeFormatValidationError() {
+    return this.localizeForLocale("tecton.element.datePicker.validation.rangeFormat", {
+      format: this.rangeTypeableFormat
+    });
+  }
+  get rangeOrderValidationError() {
+    return this.localizeForLocale("tecton.element.datePicker.validation.rangeOrder");
+  }
+  get rangeTypeableFormat() {
+    return `${this.normalizedDisplayFormat} - ${this.normalizedDisplayFormat}`;
+  }
+  get rangeValidationError() {
+    return this.localizeForLocale("tecton.element.datePicker.validation.rangeUnavailable");
+  }
+  get selectedDate() {
+    const t = m(this.isRangeMode ? v(this.rangeStart) : this.normalizedValue);
+    return a.isValid(t) ? t : void 0;
+  }
+  get typeableAllowedCharacters() {
+    const t = `${this.normalizedDisplayFormat.replace(/[MDY]/g, "")}${this.isRangeTypeable ? " -" : ""}`.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return new RegExp(`^[0-9${t}]+$`);
+  }
+  closeAfterSelection() {
+    clearTimeout(this.closeTimeout);
+    const t = Number(this.closeDelay);
+    !t || t <= 0 ? this.closeCalendar(!0, !0) : this.closeTimeout = setTimeout((() => this.closeCalendar(!0, !0)), t);
+  }
+  closeCalendar(t = !0, i = !1) {
+    var e;
+    this.open && (this.open = !1, i && this.tctClose.emit(), t && (null === (e = this.controlElement) || void 0 === e || e.focus()));
+  }
+  commitSingleValue(t) {
+    if (!this.committingValue) {
+      // Watchers and consumer change handlers may update constraints during either event alias.
+      this.committingValue = !0;
+      try {
+        this.value = t, u(this, [ "change", "tctChange" ], {
+          value: t
+        });
+      } finally {
+        this.committingValue = !1;
+      }
+      this.isSingleTypeable && this.syncTypeableValue(), this.typeableError || this.validateCurrentValue();
+    }
+  }
+  emitValidationError(t) {
+    this.isRangeMode || u(this, [ "error", "tctError" ], {
+      errors: [ {
+        message: t,
+        errorCode: "generalInvalid"
+      } ]
+    });
+  }
+  emitValidationSuccess(t) {
+    this.isRangeMode || u(this, [ "success", "tctSuccess" ], {
+      value: t
+    });
+  }
+  focusRenderedDate(t) {
+    var i;
+    null === (i = this.calendarElement) || void 0 === i || i.dispatchEvent(new CustomEvent("tctCalendarFocus", {
+      detail: {
+        value: t
+      }
+    }));
+  }
+  formatDateWithModifier(t) {
+    return w(t, this.normalizedDisplayFormat);
+  }
+  formatLongDate(t) {
+    return new Intl.DateTimeFormat(this.locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(t);
+  }
+  formatTypeableDate(t) {
+    const i = this.normalizedDisplayFormat.includes("-") ? "-" : "/";
+    return (this.normalizedDisplayFormat.startsWith("YYYY") ? [ t.slice(0, 4), t.slice(4, 6), t.slice(6, 8) ] : [ t.slice(0, 2), t.slice(2, 4), t.slice(4, 8) ]).filter(Boolean).join(i);
+  }
+  isDateValid(t) {
+    return y(t, {
+      cutoffTime: this.cutoffTime,
+      daysOfWeekChecksum: this.daysOfWeekChecksum,
+      endDate: v(this.endDate),
+      invalidDates: this.normalizedInvalidDates,
+      startDate: v(this.startDate),
+      validDates: this.normalizedValidDates
+    });
+  }
+  isRangeValid(t, i) {
+    return C(t, i, {
+      cutoffTime: this.cutoffTime,
+      daysOfWeekChecksum: this.daysOfWeekChecksum,
+      endDate: v(this.endDate),
+      invalidDates: this.normalizedInvalidDates,
+      startDate: v(this.startDate),
+      validDates: this.normalizedValidDates
+    });
+  }
+  isTypeableDatePrefixInvalid(t) {
+    const i = this.normalizedDisplayFormat.startsWith("YYYY"), e = this.normalizedDisplayFormat.startsWith("DD"), s = i ? t.slice(0, 4) : t.slice(0, 2), a = i ? t.slice(4, 6) : t.slice(2, 4), r = i || e ? a : s, h = i ? t.slice(6, 8) : e ? s : a, isSegmentInvalid = (t, i) => {
+      if (!t) return !1;
+      if (1 === t.length) return Number(t) > Math.floor(i / 10);
+      const e = Number(t);
+      return e < 1 || e > i;
+    };
+    return !(!isSegmentInvalid(r, 12) && !isSegmentInvalid(h, 31)) || !(r.length < 2 || h.length < 2) && Number(h) > new Date(2e3, Number(r), 0).getDate();
+  }
+  localizeForLocale(t, i = {}) {
+    return D(t, i);
+  }
+  normalizeDateList(t) {
+    if (t) 
+    // Stable references prevent child constraint watchers from clearing errors on unrelated renders.
+    return this.normalizedDateLists.has(t) || this.normalizedDateLists.set(t, t.map((t => v(t))).filter((t => !!t))), 
+    this.normalizedDateLists.get(t);
+  }
+  parseTypeableDate(t) {
+    var i;
+    const e = this.normalizedDisplayFormat.includes("-") ? "-" : "/", s = "-" === e ? "\\-" : "/", a = this.normalizedDisplayFormat.startsWith("YYYY");
+    if (!new RegExp(a ? `^\\d{4}${s}\\d{2}${s}\\d{2}$` : `^\\d{2}${s}\\d{2}(?:${s}\\d{4})?$`).test(t || "")) return;
+    const r = t.split(e), [h, n, o] = a ? r : this.normalizedDisplayFormat.startsWith("DD") ? [ r[2], r[1], r[0] ] : [ r[2], r[0], r[1] ], d = Number(n), l = Number(o), c = h ? Number(h) : null === (i = x(`${d}/${l}`, this.assume)) || void 0 === i ? void 0 : i.getFullYear();
+    if (!c) return;
+    const p = new Date(c, d - 1, l);
+    return p.getFullYear() === c && p.getMonth() === d - 1 && p.getDate() === l ? p : void 0;
+  }
+  /**
+     * Recomputes the typeable error from the current `typeableValue`, applying the same range checks the commit path
+     * uses so a stale error cannot outlive the text that produced it.
+     */  revalidateTypeableValue() {
+    if (this.validateTypeableValue(), this.typeableError || !this.isRangeTypeable) return;
+    const [t, i] = this.typeableValue.split(" - "), e = this.parseTypeableDate(t), s = this.parseTypeableDate(i);
+    e && s && (this.typeableError = this.typeableRangeError(e, s));
+  }
+  async scrollDownCalendarToTop() {
+    var t;
+    this.open && this.isRangeMode && "down" === this.activePopoverDirection && (await o(), 
+    await o(), this.open && this.isRangeMode && "down" === this.activePopoverDirection && await (null === (t = this.popoverElement) || void 0 === t ? void 0 : t.scrollContainerTo({
+      top: 0
+    })));
+  }
+  async scrollUpCalendarToBottom() {
+    var t;
+    this.open && "up" === this.activePopoverDirection && (await o(), await o(), this.open && "up" === this.activePopoverDirection && await (null === (t = this.popoverElement) || void 0 === t ? void 0 : t.scrollContainerTo({
+      top: Number.MAX_SAFE_INTEGER
+    })));
+  }
+  setActivePopoverDirection() {
+    this.activePopoverDirection = this.effectivePopoverDirection || this.automaticPopoverDirection;
+  }
+  setTypeableError(t) {
+    this.typeableError !== t && (this.typeableError = t, t && this.emitValidationError(t));
+  }
+  async showActionSheet() {
+    var t, i;
+    const e = await (null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet(this.actionSheetData));
+    if (null === (i = this.controlElement) || void 0 === i || i.focus(), null == e ? void 0 : e.error) return this.calendarError = e.error, 
+    void this.tctClose.emit({
+      error: e.error
+    });
+    if (e && "cancel" !== e.type) {
+      if (this.isRangeMode) {
+        const {rangeStart: t, rangeEnd: i} = e;
+        if (!t || !i) return;
+        return this.rangeStart = t, this.rangeEnd = i, u(this, [ "change", "tctChange" ], {
+          rangeStart: t,
+          rangeEnd: i
+        }), void this.tctClose.emit();
+      }
+      e.value && (this.commitSingleValue(e.value), this.tctClose.emit());
+    }
+  }
+  syncTypeableValue() {
+    this.typeableValue = this.formattedTypeableValue, this.revalidateTypeableValue();
+  }
+  toggleCalendar() {
+    this.disabled || this.readonly || (p({
+      hoist: this.hoist
+    }) ? this.showActionSheet() : (this.open || this.setActivePopoverDirection(), this.open = !this.open));
+  }
+  typeableRangeError(t, i) {
+    return t.getTime() > i.getTime() ? this.rangeOrderValidationError : this.isRangeValid(t, i) ? "" : this.rangeValidationError;
+  }
+  validateCurrentValue(t = this.value) {
+    if (!t || this.isRangeMode) return;
+    const i = v(t), e = m(i);
+    i && a.isValid(e) && this.isDateValid(e) ? this.emitValidationSuccess(i) : this.emitValidationError(`Value passed is invalid: The date ${t} is not valid`);
+  }
+  validateTypeableValue() {
+    const t = this.typeableValue.replace(/\D/g, "");
+    if (!t) return void this.setTypeableError("");
+    const i = (this.isRangeTypeable ? [ t.slice(0, 8), t.slice(8) ] : [ t ]).some((t => {
+      if (this.isTypeableDatePrefixInvalid(t)) return !0;
+      if (8 !== t.length) return !1;
+      const i = this.parseTypeableDate(this.formatTypeableDate(t));
+      return !i || !this.isDateValid(i);
+    }));
+    this.setTypeableError(i ? this.isRangeTypeable ? this.rangeFormatValidationError : this.dateFormatValidationError : "");
+  }
+  // #endregion
+  // #region Render Methods
+  renderCalendar() {
+    return e("q2-date-calendar", {
+      ref: t => this.calendarElement = t,
+      class: this._actionSheet ? "is-action-sheet" : void 0,
+      accessibleLabel: this.calendarLabel || "Choose a date",
+      actionSheet: this._actionSheet,
+      calendarLabel: this.calendarLabel,
+      cutoffTime: this.cutoffTime,
+      daysOfWeekChecksum: this.daysOfWeekChecksum,
+      direction: this.activePopoverDirection,
+      disabled: this.disabled,
+      disclaimer: this.disclaimer,
+      displayFormat: this.normalizedDisplayFormat,
+      endDate: v(this.endDate),
+      invalidDates: this.normalizedInvalidDates,
+      locale: this.locale,
+      mode: this.effectiveMode,
+      open: this.open,
+      rangeEnd: v(this.rangeEnd),
+      rangeStart: v(this.rangeStart),
+      readonly: this.readonly,
+      startDate: v(this.startDate),
+      validDates: this.normalizedValidDates,
+      value: this.normalizedValue,
+      onTctCalendarCancel: this.onCalendarCancel,
+      onTctCalendarCommit: this.onCalendarCommit,
+      onTctCalendarDismiss: this.onCalendarDismiss,
+      onTctCalendarError: this.onCalendarError
+    });
+  }
+  render() {
+    return this._actionSheet ? this.renderCalendar() : e("click-elsewhere", {
+      class: this.open ? "dropdown-open" : void 0,
+      onChange: this.onClickElsewhere
+    }, e("q2-input", {
+      ref: t => this.controlElement = t,
+      class: "date-picker-input",
+      clearable: this.canClear,
+      disabled: this.disabled,
+      errors: this.computedErrors,
+      hideLabel: this.hideLabel,
+      hints: this.hints,
+      readonly: this.readonly,
+      optional: this.optional,
+      valid: this.valid,
+      value: this.acceptsTypeableInput ? this.typeableValue : this.formattedValue,
+      label: d(this.label),
+      placeholder: this.computedPlaceholder,
+      "icon-right": this.acceptsTypeableInput ? void 0 : "calendar",
+      autocomplete: "off",
+      maxlength: this.isRangeTypeable ? 23 : this.isSingleTypeable ? 10 : void 0,
+      "aria-haspopup": "dialog",
+      "aria-expanded": `${this.open}`,
+      "aria-controls": "date-picker-popover",
+      onClick: this.acceptsTypeableInput ? void 0 : this.onInputClick,
+      onChange: t => t.stopImmediatePropagation(),
+      onTctChange: this.acceptsTypeableInput ? this.onTypeableChange : t => t.stopImmediatePropagation(),
+      onInput: t => t.stopImmediatePropagation(),
+      onTctInput: this.acceptsTypeableInput ? this.onTypeableInput : t => t.stopImmediatePropagation(),
+      onTctClear: this.onClear,
+      onKeyDown: this.onInputKeydown,
+      "test-id": "datePickerToggle",
+      _preventEntry: !this.acceptsTypeableInput
+    }, l(this.hostElement, "label") && e("slot", {
+      name: "label",
+      slot: "label"
+    }), this.acceptsTypeableInput && e("q2-btn", {
+      slot: "input-right",
+      "hide-label": !0,
+      disabled: this.disabled || this.readonly,
+      label: "tecton.element.calendar.toggleAriaLabel",
+      onClick: this.onCalendarToggleClick,
+      "test-id": "datePickerCalendarToggle"
+    }, e("q2-icon", {
+      type: "calendar"
+    }))), e("q2-popover", {
+      ref: t => this.popoverElement = t,
+      id: "date-picker-popover",
+      controlElement: this.controlElement,
+      open: this.open,
+      direction: this.effectivePopoverDirection,
+      align: this.popoverAlignment,
+      minHeight: this.popoverMinHeight,
+      mode: this.popoverMode || void 0
+    }, this.renderCalendar()));
+  }
+  get hostElement() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      cutoffTime: [ {
+        constraintsChanged: 0
+      } ],
+      assume: [ {
+        constraintsChanged: 0
+      } ],
+      daysOfWeekChecksum: [ {
+        constraintsChanged: 0
+      } ],
+      endDate: [ {
+        constraintsChanged: 0
+      } ],
+      invalidDates: [ {
+        constraintsChanged: 0
+      } ],
+      startDate: [ {
+        constraintsChanged: 0
+      } ],
+      validDates: [ {
+        constraintsChanged: 0
+      } ],
+      disabled: [ {
+        disabledChanged: 0
+      } ],
+      displayFormat: [ {
+        displayFormatChanged: 0
+      } ],
+      mode: [ {
+        modeChanged: 0
+      } ],
+      typeable: [ {
+        modeChanged: 0
+      } ],
+      open: [ {
+        openChanged: 0
+      } ],
+      popDirection: [ {
+        popDirectionChanged: 0
+      } ],
+      popoverDirection: [ {
+        popoverDirectionChanged: 0
+      } ],
+      rangeEnd: [ {
+        rangeEndChanged: 0
+      } ],
+      rangeStart: [ {
+        rangeStartChanged: 0
+      } ],
+      readonly: [ {
+        readonlyChanged: 0
+      } ],
+      value: [ {
+        valueChanged: 0
+      } ]
+    };
+  }
+};
+
+T.style = '*{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{--comp-date-picker-width:var(--tct-date-picker-width, var(--tct-date-calendar-width, 360px));box-sizing:border-box;display:block}:host[hidden]{display:none}click-elsewhere,.date-picker-input{display:block;width:100%}q2-date-calendar{--comp-date-calendar-width:var(--comp-date-picker-width);display:block;width:var(--comp-date-picker-width)}q2-date-calendar.is-action-sheet{--comp-date-calendar-width:100%;width:100%}q2-popover{--tct-popover-width:var(--comp-date-picker-width);--tct-popover-border-radius:var(--tct-date-picker-border-radius, var(--tct-date-calendar-border-radius, var(--app-border-radius-1, 4px)))}@media (max-width: 768px){:host{--comp-date-picker-width:min(         100%,         calc(             100vw - var(--tct-date-picker-mobile-gutter, var(--tct-date-calendar-mobile-gutter, 24px)) - var(--tct-date-picker-mobile-gutter, var(--tct-date-calendar-mobile-gutter, 24px))         ),         var(--tct-date-picker-mobile-max-width, var(--tct-date-calendar-mobile-max-width, 420px))     )}}';
+
+const E = class {
+  constructor(i) {
+    t(this, i), 
+    // #region Own Properties
+    this.guid = c(), 
+    // #endregion
+    // #region State Properties
+    this.hidden = !1, 
+    // #endregion
+    // #region Public Property API
+    /** Determines whether all nested options are disabled. */
+    this.disabled = !1, this.setHidden = () => {
+      this.hidden = this.options.every((t => t.hidden || t._multiSelectHidden));
+    };
+  }
+  // #endregion
+  // #region Component Lifecycle Events
+  disconnectedCallback() {
+    var t;
+    null === (t = this.mutationObserver) || void 0 === t || t.disconnect(), this.mutationObserver = null;
+  }
+  componentWillLoad() {
+    k(this.hostElement, "q2-option-list, q2-select, q2-dropdown, q2-pill");
+    const t = new MutationObserver(this.setHidden);
+    t.observe(this.hostElement, {
+      childList: !0,
+      attributes: !0,
+      subtree: !0
+    }), this.mutationObserver = t, 
+    // set initially
+    this.setHidden(), this.disabledWatcher(this.disabled);
+  }
+  // #endregion
+  // #region Watchers
+  disabledWatcher(t) {
+    this.options.forEach((i => {
+      i.disabledGroup = !!t;
+    }));
+  }
+  // #endregion
+  // #region Local Methods
+  get headerId() {
+    return `q2-optgroup-header-${this.guid}`;
+  }
+  get options() {
+    return Array.from(this.hostElement.querySelectorAll("q2-option"));
+  }
+  // #endregion
+  // #region Render Methods
+  render() {
+    return e("div", {
+      key: "829ae5ebec150734128c98343ddb8112de0ee21e",
+      class: "q2-optgroup-container",
+      hidden: this.hidden,
+      "aria-labelledby": this.headerId,
+      role: "group"
+    }, e("div", {
+      key: "6683155f922a2d15349f885aabac0bf9ee6a4575",
+      class: "q2-optgroup-header",
+      id: this.headerId
+    }, this.label && d(this.label) || ""), e("div", {
+      key: "b974da306256b13283183fa03e4dc8bcc8be3f44",
+      class: "q2-optgroup-options"
+    }, e("slot", {
+      key: "2f0035aad12309be2c5c4ea3125077cc704e65e4"
+    })));
+  }
+  get hostElement() {
+    return s(this);
+  }
+  static get watchers() {
+    return {
+      disabled: [ {
+        disabledWatcher: 0
+      } ]
+    };
+  }
+};
+
+E.style = '*{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{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, var(--const-px-14, 14px));font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}';
+
+export { T as q2_date_picker, E as q2_optgroup }