q2-tecton-elements 1.71.4 → 1.73.0

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

@@ -0,0 +1,875 @@
+import { proxyCustomElement as t, HTMLElement as e, createEvent as i, h as s, transformTag as a } from "@stencil/core/internal/client";
+
+import { d as r } from "./index3.js";
+
+import { f as n, o as h, i as o, w as d, l, b as c } from "./index2.js";
+
+import { s as p } from "./action-sheet.js";
+
+import { m as u } from "./mirror-emit.js";
+
+import { f as m, p as g, n as v, a as f, b, c as C, i as y, e as D, l as w, g as k, d as E } from "./q2-date-calendar2.js";
+
+import { d as T } from "./click-elsewhere2.js";
+
+import { d as q } from "./q2-badge2.js";
+
+import { d as x } from "./q2-btn2.js";
+
+import { d as S } from "./q2-icon2.js";
+
+import { d as $ } from "./q2-input2.js";
+
+import { d as V } from "./q2-loading2.js";
+
+import { d as F } from "./q2-message2.js";
+
+import { d as P } from "./q2-popover2.js";
+
+const j =  t(class extends e {
+  constructor(t) {
+    var e;
+    super(), !1 !== t && this.__registerHost(), this.__attachShadow(), 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 === (e = window.Tecton) || void 0 === e ? void 0 : e.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: e, rangeStart: i, rangeEnd: s} = t.detail;
+      if (this.isRangeMode) {
+        if (!i || !s) return;
+        return this.rangeStart = i, this.rangeEnd = s, u(this, [ "change", "tctChange" ], {
+          rangeStart: i,
+          rangeEnd: s
+        }), void this.closeCalendar(!0, !0);
+      }
+      e && (this.commitSingleValue(e), 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 e = m(t);
+        return void this.commitSingleValue(e);
+      }
+      const [e, i] = this.typeableValue.split(" - "), s = this.parseTypeableDate(e), a = this.parseTypeableDate(i);
+      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 n = m(s), h = m(a);
+      this.rangeStart = n, this.rangeEnd = h, u(this, [ "change", "tctChange" ], {
+        rangeStart: n,
+        rangeEnd: h
+      });
+    }, this.onTypeableInput = t => {
+      var e;
+      if (t.stopImmediatePropagation(), this.disabled || this.readonly) return;
+      const i = this.isRangeTypeable ? 16 : 8, s = String((null === (e = t.detail) || void 0 === e ? void 0 : e.value) || "").replace(/\D/g, "").slice(0, i);
+      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 && n(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 e;
+    o(t, this.hostElement) && (null === (e = this.controlElement) || void 0 === e || e.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 e;
+    r.isValid(t) && (await d(), await (null === (e = this.calendarElement) || void 0 === e ? void 0 : e.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 d();
+    const e = this.acceptsTypeableInput ? null === (t = this.controlElement) || void 0 === t ? void 0 : t.querySelector('[test-id="datePickerCalendarToggle"]') : this.controlElement;
+    null == e || e.focus(), null == e || e.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 e;
+    const i = g(v(t));
+    this.disabled || this.readonly || this.isRangeTypeable || !r.isValid(i) || !this.isDateValid(i) || (this._actionSheet || (this.setActivePopoverDirection(), 
+    this.open = !0, await d()), await (null === (e = this.calendarElement) || void 0 === e ? void 0 : e.setValue(i)));
+  }
+  /**
+     * 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 e;
+    if (!this.isSingleTypeable) return;
+    const i = g(v(t));
+    r.isValid(i) && await (null === (e = this.controlElement) || void 0 === e ? void 0 : e.setValue(this.formatDateWithModifier(i)));
+  }
+  // #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 && n(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 e = v(t);
+    e && t !== e ? this.value = e : 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, e;
+    const {top: i = 0, bottom: s = 0} = (null === (e = null === (t = this.controlElement) || void 0 === t ? void 0 : t.getBoundingClientRect) || void 0 === e ? void 0 : e.call(t)) || {};
+    return i > window.innerHeight - s ? "up" : "down";
+  }
+  get canClear() {
+    return this.clearable && (this.isRangeMode ? !!this.rangeStart || !!this.rangeEnd : !!this.normalizedValue);
+  }
+  get computedErrors() {
+    const t = [ ...this.errors || [] ], e = this.typeableError || this.calendarError;
+    return e && t.push(e), !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 = g(v(this.rangeEnd));
+    return r.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 = g(this.isRangeMode ? v(this.rangeStart) : this.normalizedValue);
+    return r.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, e = !1) {
+    var i;
+    this.open && (this.open = !1, e && this.tctClose.emit(), t && (null === (i = this.controlElement) || void 0 === i || i.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 e;
+    null === (e = this.calendarElement) || void 0 === e || e.dispatchEvent(new CustomEvent("tctCalendarFocus", {
+      detail: {
+        value: t
+      }
+    }));
+  }
+  formatDateWithModifier(t) {
+    return C(t, this.normalizedDisplayFormat);
+  }
+  formatLongDate(t) {
+    return new Intl.DateTimeFormat(this.locale, {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(t);
+  }
+  formatTypeableDate(t) {
+    const e = 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(e);
+  }
+  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, e) {
+    return D(t, e, {
+      cutoffTime: this.cutoffTime,
+      daysOfWeekChecksum: this.daysOfWeekChecksum,
+      endDate: v(this.endDate),
+      invalidDates: this.normalizedInvalidDates,
+      startDate: v(this.startDate),
+      validDates: this.normalizedValidDates
+    });
+  }
+  isTypeableDatePrefixInvalid(t) {
+    const e = this.normalizedDisplayFormat.startsWith("YYYY"), i = this.normalizedDisplayFormat.startsWith("DD"), s = e ? t.slice(0, 4) : t.slice(0, 2), a = e ? t.slice(4, 6) : t.slice(2, 4), r = e || i ? a : s, n = e ? t.slice(6, 8) : i ? s : a, isSegmentInvalid = (t, e) => {
+      if (!t) return !1;
+      if (1 === t.length) return Number(t) > Math.floor(e / 10);
+      const i = Number(t);
+      return i < 1 || i > e;
+    };
+    return !(!isSegmentInvalid(r, 12) && !isSegmentInvalid(n, 31)) || !(r.length < 2 || n.length < 2) && Number(n) > new Date(2e3, Number(r), 0).getDate();
+  }
+  localizeForLocale(t, e = {}) {
+    return w(t, e);
+  }
+  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 e;
+    const i = this.normalizedDisplayFormat.includes("-") ? "-" : "/", s = "-" === i ? "\\-" : "/", 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(i), [n, h, o] = a ? r : this.normalizedDisplayFormat.startsWith("DD") ? [ r[2], r[1], r[0] ] : [ r[2], r[0], r[1] ], d = Number(h), l = Number(o), c = n ? Number(n) : null === (e = k(`${d}/${l}`, this.assume)) || void 0 === e ? void 0 : e.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, e] = this.typeableValue.split(" - "), i = this.parseTypeableDate(t), s = this.parseTypeableDate(e);
+    i && s && (this.typeableError = this.typeableRangeError(i, s));
+  }
+  async scrollDownCalendarToTop() {
+    var t;
+    this.open && this.isRangeMode && "down" === this.activePopoverDirection && (await d(), 
+    await d(), 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 d(), await d(), 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, e;
+    const i = await (null === (t = window.TectonElements) || void 0 === t ? void 0 : t.showActionSheet(this.actionSheetData));
+    if (null === (e = this.controlElement) || void 0 === e || e.focus(), null == i ? void 0 : i.error) return this.calendarError = i.error, 
+    void this.tctClose.emit({
+      error: i.error
+    });
+    if (i && "cancel" !== i.type) {
+      if (this.isRangeMode) {
+        const {rangeStart: t, rangeEnd: e} = i;
+        if (!t || !e) return;
+        return this.rangeStart = t, this.rangeEnd = e, u(this, [ "change", "tctChange" ], {
+          rangeStart: t,
+          rangeEnd: e
+        }), void this.tctClose.emit();
+      }
+      i.value && (this.commitSingleValue(i.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, e) {
+    return t.getTime() > e.getTime() ? this.rangeOrderValidationError : this.isRangeValid(t, e) ? "" : this.rangeValidationError;
+  }
+  validateCurrentValue(t = this.value) {
+    if (!t || this.isRangeMode) return;
+    const e = v(t), i = g(e);
+    e && r.isValid(i) && this.isDateValid(i) ? this.emitValidationSuccess(e) : 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 e = (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 e = this.parseTypeableDate(this.formatTypeableDate(t));
+      return !e || !this.isDateValid(e);
+    }));
+    this.setTypeableError(e ? this.isRangeTypeable ? this.rangeFormatValidationError : this.dateFormatValidationError : "");
+  }
+  // #endregion
+  // #region Render Methods
+  renderCalendar() {
+    return s("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() : s("click-elsewhere", {
+      class: this.open ? "dropdown-open" : void 0,
+      onChange: this.onClickElsewhere
+    }, s("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: l(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
+    }, c(this.hostElement, "label") && s("slot", {
+      name: "label",
+      slot: "label"
+    }), this.acceptsTypeableInput && s("q2-btn", {
+      slot: "input-right",
+      "hide-label": !0,
+      disabled: this.disabled || this.readonly,
+      label: "tecton.element.calendar.toggleAriaLabel",
+      onClick: this.onCalendarToggleClick,
+      "test-id": "datePickerCalendarToggle"
+    }, s("q2-icon", {
+      type: "calendar"
+    }))), s("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 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
+      } ]
+    };
+  }
+  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{--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))     )}}';
+  }
+}, [ 257, "q2-date-picker", {
+  _actionSheet: [ 4, "_action-sheet" ],
+  assume: [ 513 ],
+  calendarLabel: [ 513, "calendar-label" ],
+  clearable: [ 516 ],
+  closeDelay: [ 514, "close-delay" ],
+  cutoffTime: [ 513, "cutoff-time" ],
+  daysOfWeekChecksum: [ 514, "days-of-week-checksum" ],
+  disabled: [ 516 ],
+  disabledMsg: [ 513, "disabled-msg" ],
+  disclaimer: [ 513 ],
+  displayFormat: [ 513, "display-format" ],
+  endDate: [ 513, "end-date" ],
+  errors: [ 1040 ],
+  hideLabel: [ 1540, "hide-label" ],
+  hints: [ 1040 ],
+  hoist: [ 4 ],
+  invalid: [ 1540 ],
+  invalidDates: [ 16 ],
+  label: [ 1537 ],
+  locale: [ 513 ],
+  mode: [ 513 ],
+  open: [ 1540 ],
+  optional: [ 516 ],
+  placeholder: [ 513 ],
+  popDirection: [ 513, "pop-direction" ],
+  popoverAlignment: [ 513, "popover-alignment" ],
+  popoverDirection: [ 513, "popover-direction" ],
+  popoverMinHeight: [ 2, "popover-min-height" ],
+  popoverMode: [ 1025, "popover-mode" ],
+  rangeEnd: [ 1537, "range-end" ],
+  rangeStart: [ 1537, "range-start" ],
+  readonly: [ 516 ],
+  startDate: [ 513, "start-date" ],
+  typeable: [ 516 ],
+  valid: [ 516 ],
+  validDates: [ 16 ],
+  value: [ 1537 ],
+  activePopoverDirection: [ 32 ],
+  calendarError: [ 32 ],
+  typeableError: [ 32 ],
+  typeableValue: [ 32 ],
+  closePopover: [ 64 ],
+  focusDate: [ 64 ],
+  openPopover: [ 64 ],
+  reset: [ 64 ],
+  setValue: [ 64 ],
+  typeValue: [ 64 ]
+}, [ [ 0, "beforeinput", "beforeInputHandler" ], [ 0, "focus", "delegateFocus" ], [ 0, "popoverStateChanged", "popoverStateHandler" ] ], {
+  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
+  } ]
+} ]);
+
+function defineCustomElement() {
+  if ("undefined" == typeof customElements) return;
+  [ "q2-date-picker", "click-elsewhere", "q2-badge", "q2-btn", "q2-date-calendar", "q2-icon", "q2-input", "q2-loading", "q2-message", "q2-popover" ].forEach((t => {
+    switch (t) {
+     case "q2-date-picker":
+      customElements.get(a(t)) || customElements.define(a(t), j);
+      break;
+
+     case "click-elsewhere":
+      customElements.get(a(t)) || T();
+      break;
+
+     case "q2-badge":
+      customElements.get(a(t)) || q();
+      break;
+
+     case "q2-btn":
+      customElements.get(a(t)) || x();
+      break;
+
+     case "q2-date-calendar":
+      customElements.get(a(t)) || E();
+      break;
+
+     case "q2-icon":
+      customElements.get(a(t)) || S();
+      break;
+
+     case "q2-input":
+      customElements.get(a(t)) || $();
+      break;
+
+     case "q2-loading":
+      customElements.get(a(t)) || V();
+      break;
+
+     case "q2-message":
+      customElements.get(a(t)) || F();
+      break;
+
+     case "q2-popover":
+      customElements.get(a(t)) || P();
+    }
+  }));
+}
+
+export { j as Q, defineCustomElement as d }