q2-tecton-elements 1.72.0 → 1.73.0

package/dist/collection/components/q2-date-picker/q2-date-picker.js

@@ -0,0 +1,2010 @@
+import { h, } from "@stencil/core";
+import { isValid as isValidDate } from "date-fns";
+import { handleDeprecationWarning, hasSlotContent, isEventFromElement, loc, overrideFocus, waitForNextPaint, } from "../../utils";
+import { shouldShowActionSheet } from "../../utils/action-sheet";
+import mirrorEmit from "../../utils/mirror-emit";
+import { buildInputDate, formatDisplayDate, formatDateISO, formatLegacyDisplayDate, isDateSelectable, isRangeSelectable, localizeDatePickerString, normalizeDatePickerValue, normalizeDisplayFormat, parseDatePickerValue, } from "../../utils/date-picker/date-picker-helpers";
+/**
+ * @name Date Picker
+ * @category Forms
+ * @summary Use for selecting a date or date range with an input and calendar popup.
+ * @slot label - Custom content for the input label.
+ */
+export class Q2DatePicker {
+    constructor() {
+        var _a;
+        this.committingValue = false;
+        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 = false;
+        /**
+         * 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 = false;
+        /** 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 = false;
+        /**
+         * 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 = false;
+        /**
+         * 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 = ((_a = window.Tecton) === null || _a === void 0 ? void 0 : _a.useActionSheets) ? true : undefined;
+        /** Shows the input field's error visual state. */
+        this.invalid = false;
+        /** 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 = false;
+        /** Appends "(optional)" to the input label and marks the field as not required. */
+        this.optional = false;
+        /** 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 = false;
+        /** Enables the legacy single-date typeable input behavior. */
+        this.typeable = false;
+        /** Shows the input field's success visual state when no errors are active. */
+        this.valid = false;
+        this.onCalendarCancel = (event) => {
+            event.stopPropagation();
+            this.calendarError = '';
+            if (this._actionSheet) {
+                this.tctCancel.emit();
+                return;
+            }
+            this.closeCalendar();
+        };
+        this.onCalendarCommit = (event) => {
+            event.stopPropagation();
+            if (this.disabled || this.readonly)
+                return;
+            if (!event.detail)
+                return;
+            this.calendarError = '';
+            const { value, rangeStart, rangeEnd } = event.detail;
+            if (this.isRangeMode) {
+                if (!rangeStart || !rangeEnd)
+                    return;
+                this.rangeStart = rangeStart;
+                this.rangeEnd = rangeEnd;
+                mirrorEmit(this, ['change', 'tctChange'], { rangeStart, rangeEnd });
+                this.closeCalendar(true, true);
+                return;
+            }
+            if (!value)
+                return;
+            this.commitSingleValue(value);
+            this.closeAfterSelection();
+        };
+        this.onCalendarDismiss = (event) => {
+            event.stopPropagation();
+            this.calendarError = '';
+            if (this._actionSheet) {
+                this.tctCancel.emit();
+                return;
+            }
+            this.closeCalendar();
+        };
+        this.onCalendarError = (event) => {
+            event.stopPropagation();
+            this.calendarError = event.detail;
+            if (this._actionSheet) {
+                this.tctClose.emit({ error: event.detail });
+                return;
+            }
+            this.closeCalendar(true, true);
+        };
+        this.onCalendarToggleClick = (event) => {
+            event.stopPropagation();
+            this.toggleCalendar();
+        };
+        this.onClear = () => {
+            this.calendarError = '';
+            this.typeableError = '';
+            this.typeableValue = '';
+            if (this.isRangeMode) {
+                this.rangeStart = undefined;
+                this.rangeEnd = undefined;
+                mirrorEmit(this, ['change', 'tctChange'], { rangeStart: null, rangeEnd: null });
+                return;
+            }
+            this.value = undefined;
+            mirrorEmit(this, ['change', 'tctChange'], { value: null });
+        };
+        this.onClickElsewhere = (event) => {
+            if (event.target.localName !== 'click-elsewhere')
+                return;
+            event.stopPropagation();
+            this.closeCalendar(false);
+        };
+        this.onInputClick = () => {
+            if (this.acceptsTypeableInput)
+                return;
+            this.toggleCalendar();
+        };
+        this.onInputKeydown = (event) => {
+            if (this.disabled || this.readonly)
+                return;
+            if (this.acceptsTypeableInput) {
+                if (event.metaKey || event.ctrlKey || event.altKey || event.key.length !== 1)
+                    return;
+                if (!this.typeableAllowedCharacters.test(event.key))
+                    event.preventDefault();
+                return;
+            }
+            if (shouldShowActionSheet({ hoist: this.hoist }, event)) {
+                event.preventDefault();
+                this.showActionSheet();
+                return;
+            }
+            if (event.key === 'Escape' && this.open) {
+                event.preventDefault();
+                this.closeCalendar();
+                return;
+            }
+            if (!['Enter', ' ', 'ArrowDown'].includes(event.key) || this.open)
+                return;
+            event.preventDefault();
+            this.setActivePopoverDirection();
+            this.open = true;
+            requestAnimationFrame(() => this.focusRenderedDate());
+        };
+        this.onTypeableChange = (event) => {
+            event.stopImmediatePropagation();
+            if (this.disabled || this.readonly)
+                return;
+            if (this.isSingleTypeable) {
+                const date = this.parseTypeableDate(this.typeableValue);
+                if (!date || !this.isDateValid(date)) {
+                    this.setTypeableError(this.dateFormatValidationError);
+                    return;
+                }
+                this.setTypeableError('');
+                const value = formatDateISO(date);
+                this.commitSingleValue(value);
+                return;
+            }
+            const [startValue, endValue] = this.typeableValue.split(' - ');
+            const start = this.parseTypeableDate(startValue);
+            const end = this.parseTypeableDate(endValue);
+            if (!start || !end) {
+                this.setTypeableError(this.rangeFormatValidationError);
+                return;
+            }
+            const rangeError = this.typeableRangeError(start, end);
+            if (rangeError) {
+                this.setTypeableError(rangeError);
+                return;
+            }
+            this.setTypeableError('');
+            const rangeStart = formatDateISO(start);
+            const rangeEnd = formatDateISO(end);
+            this.rangeStart = rangeStart;
+            this.rangeEnd = rangeEnd;
+            mirrorEmit(this, ['change', 'tctChange'], { rangeStart, rangeEnd });
+        };
+        this.onTypeableInput = (event) => {
+            var _a;
+            event.stopImmediatePropagation();
+            if (this.disabled || this.readonly)
+                return;
+            const maxDigits = this.isRangeTypeable ? 16 : 8;
+            const digits = String(((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) || '')
+                .replace(/\D/g, '')
+                .slice(0, maxDigits);
+            this.typeableValue =
+                this.isRangeTypeable && digits.length > 8
+                    ? `${this.formatTypeableDate(digits.slice(0, 8))} - ${this.formatTypeableDate(digits.slice(8))}`
+                    : this.formatTypeableDate(digits);
+            this.validateTypeableValue();
+        };
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    connectedCallback() {
+        const normalizedValue = this.normalizedValue;
+        if (normalizedValue && this.value !== normalizedValue)
+            this.value = normalizedValue;
+        this.activePopoverDirection = this.effectivePopoverDirection || 'down';
+        this.typeableValue = this.formattedTypeableValue;
+        this.validateCurrentValue();
+    }
+    disconnectedCallback() {
+        clearTimeout(this.closeTimeout);
+    }
+    componentWillLoad() {
+        if (this.popDirection)
+            handleDeprecationWarning(this, 'popDirection', 'prop');
+    }
+    componentDidLoad() {
+        overrideFocus(this.hostElement);
+    }
+    componentDidRender() {
+        if (this.open && this.activePopoverDirection === 'up')
+            this.scrollUpCalendarToBottom();
+    }
+    // #endregion
+    // #region Listeners
+    beforeInputHandler(event) {
+        if (this.acceptsTypeableInput && event.data && !this.typeableAllowedCharacters.test(event.data)) {
+            event.preventDefault();
+        }
+    }
+    delegateFocus(event) {
+        var _a;
+        if (!isEventFromElement(event, this.hostElement))
+            return;
+        (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    popoverStateHandler({ detail: { open } }) {
+        if (this.open !== open)
+            this.open = open;
+    }
+    // #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(date) {
+        var _a;
+        if (!isValidDate(date))
+            return;
+        await waitForNextPaint();
+        await ((_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.focusDate(date));
+    }
+    /** Opens the calendar popover if it is closed. */
+    async openPopover() {
+        var _a;
+        if (this.open || this.disabled || this.readonly || this._actionSheet)
+            return;
+        this.setActivePopoverDirection();
+        this.open = true;
+        await waitForNextPaint();
+        const toggleElement = this.acceptsTypeableInput
+            ? (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.querySelector('[test-id="datePickerCalendarToggle"]')
+            : this.controlElement;
+        toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.focus();
+        toggleElement === null || toggleElement === void 0 ? void 0 : toggleElement.dispatchEvent(new FocusEvent('focus'));
+    }
+    /** Clears selected values, uncommitted typeable input, and error state without changing configuration props. */
+    async reset() {
+        clearTimeout(this.closeTimeout);
+        this.value = undefined;
+        this.rangeStart = undefined;
+        this.rangeEnd = undefined;
+        this.errors = undefined;
+        this.invalid = false;
+        this.calendarError = '';
+        this.typeableError = '';
+        this.typeableValue = '';
+    }
+    /** Opens the calendar and selects the provided date when it is valid. */
+    async setValue(value) {
+        var _a;
+        const date = parseDatePickerValue(normalizeDatePickerValue(value));
+        if (this.disabled || this.readonly || this.isRangeTypeable || !isValidDate(date) || !this.isDateValid(date)) {
+            return;
+        }
+        if (!this._actionSheet) {
+            this.setActivePopoverDirection();
+            this.open = true;
+            await waitForNextPaint();
+        }
+        await ((_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.setValue(date));
+    }
+    /**
+     * 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(value) {
+        var _a;
+        if (!this.isSingleTypeable)
+            return;
+        const date = parseDatePickerValue(normalizeDatePickerValue(value));
+        if (!isValidDate(date))
+            return;
+        await ((_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.setValue(this.formatDateWithModifier(date)));
+    }
+    // #endregion
+    // #region Watchers
+    constraintsChanged() {
+        if (this.committingValue)
+            return;
+        if (this.acceptsTypeableInput)
+            this.revalidateTypeableValue();
+        if (!this.typeableError)
+            this.validateCurrentValue();
+    }
+    disabledChanged(disabled) {
+        if (disabled)
+            this.closeCalendar(false);
+    }
+    displayFormatChanged() {
+        this.calendarError = '';
+        this.typeableError = '';
+        this.typeableValue = this.formattedTypeableValue;
+    }
+    modeChanged() {
+        this.open = false;
+        this.calendarError = '';
+        this.typeableError = '';
+        this.typeableValue = this.formattedTypeableValue;
+    }
+    openChanged(open) {
+        if (!open)
+            return;
+        this.setActivePopoverDirection();
+        if (this.isRangeMode && this.activePopoverDirection === 'down')
+            this.scrollDownCalendarToTop();
+    }
+    popDirectionChanged() {
+        if (this.popDirection)
+            handleDeprecationWarning(this, 'popDirection', 'prop');
+        this.setActivePopoverDirection();
+    }
+    popoverDirectionChanged() {
+        this.setActivePopoverDirection();
+    }
+    rangeEndChanged() {
+        if (!this.isRangeMode)
+            return;
+        this.calendarError = '';
+        if (this.isRangeTypeable)
+            this.syncTypeableValue();
+    }
+    rangeStartChanged() {
+        if (!this.isRangeMode)
+            return;
+        this.calendarError = '';
+        if (this.isRangeTypeable)
+            this.syncTypeableValue();
+    }
+    readonlyChanged(readonly) {
+        if (readonly)
+            this.closeCalendar(false);
+    }
+    valueChanged(value) {
+        const normalizedValue = normalizeDatePickerValue(value);
+        if (normalizedValue && value !== normalizedValue) {
+            this.value = normalizedValue;
+            return;
+        }
+        if (this.isRangeMode || this.committingValue)
+            return;
+        this.calendarError = '';
+        if (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: normalizeDatePickerValue(this.endDate),
+                displayFormat: this.normalizedDisplayFormat,
+                invalidDates: this.normalizedInvalidDates,
+                locale: this.locale,
+                mode: this.isRangeMode ? 'range' : 'single',
+                rangeEnd: normalizeDatePickerValue(this.rangeEnd),
+                rangeStart: normalizeDatePickerValue(this.rangeStart),
+                startDate: normalizeDatePickerValue(this.startDate),
+                validDates: this.normalizedValidDates,
+                value: this.normalizedValue,
+            },
+        };
+    }
+    get automaticPopoverDirection() {
+        var _a, _b;
+        const { top = 0, bottom = 0 } = ((_b = (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+        return top > window.innerHeight - bottom ? 'up' : 'down';
+    }
+    get canClear() {
+        return this.clearable && (this.isRangeMode ? !!this.rangeStart || !!this.rangeEnd : !!this.normalizedValue);
+    }
+    get computedErrors() {
+        const errors = [...(this.errors || [])];
+        const internalError = this.typeableError || this.calendarError;
+        if (internalError)
+            errors.push(internalError);
+        if (!errors.length && this.invalid)
+            errors.push('tecton.element.calendar.invalid');
+        return errors.length ? [errors[0]] : undefined;
+    }
+    get computedPlaceholder() {
+        if (this.disabled && this.disabledMsg)
+            return this.localizeForLocale(this.disabledMsg);
+        return this.localizeForLocale(this.placeholder);
+    }
+    get dateFormatValidationError() {
+        return this.localizeForLocale('tecton.element.datePicker.validation.dateFormat', {
+            format: this.normalizedDisplayFormat,
+        });
+    }
+    get effectiveMode() {
+        if (this.mode !== 'single')
+            return this.mode;
+        return this.typeable ? 'single-typeable' : 'single';
+    }
+    get effectivePopoverDirection() {
+        return this.popoverDirection || this.popDirection;
+    }
+    get formattedTypeableValue() {
+        if (!this.selectedDate)
+            return '';
+        if (!this.isRangeTypeable)
+            return this.formatDateWithModifier(this.selectedDate);
+        if (!this.rangeEndDate)
+            return '';
+        return `${this.formatDateWithModifier(this.selectedDate)} - ${this.formatDateWithModifier(this.rangeEndDate)}`;
+    }
+    get formattedValue() {
+        if (!this.selectedDate)
+            return '';
+        const formatDate = (date) => this.displayFormat ? formatLegacyDisplayDate(date, this.displayFormat) : this.formatLongDate(date);
+        if (this.effectiveMode !== 'range' || !this.rangeEndDate)
+            return formatDate(this.selectedDate);
+        return `${formatDate(this.selectedDate)} – ${formatDate(this.rangeEndDate)}`;
+    }
+    get isRangeMode() {
+        return this.effectiveMode === 'range' || this.isRangeTypeable;
+    }
+    get isRangeTypeable() {
+        return this.effectiveMode === 'range-typeable';
+    }
+    get isSingleTypeable() {
+        return this.effectiveMode === 'single-typeable';
+    }
+    get normalizedDisplayFormat() {
+        return normalizeDisplayFormat(this.displayFormat);
+    }
+    get normalizedInvalidDates() {
+        return this.normalizeDateList(this.invalidDates);
+    }
+    get normalizedValidDates() {
+        return this.normalizeDateList(this.validDates);
+    }
+    get normalizedValue() {
+        return normalizeDatePickerValue(this.value);
+    }
+    get rangeEndDate() {
+        const date = parseDatePickerValue(normalizeDatePickerValue(this.rangeEnd));
+        return isValidDate(date) ? date : undefined;
+    }
+    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 date = parseDatePickerValue(this.isRangeMode ? normalizeDatePickerValue(this.rangeStart) : this.normalizedValue);
+        return isValidDate(date) ? date : undefined;
+    }
+    get typeableAllowedCharacters() {
+        const formatSeparators = this.normalizedDisplayFormat.replace(/[MDY]/g, '');
+        const rangeSeparator = this.isRangeTypeable ? ' -' : '';
+        const escapedSeparators = `${formatSeparators}${rangeSeparator}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return new RegExp(`^[0-9${escapedSeparators}]+$`);
+    }
+    closeAfterSelection() {
+        clearTimeout(this.closeTimeout);
+        const closeDelay = Number(this.closeDelay);
+        if (!closeDelay || closeDelay <= 0) {
+            this.closeCalendar(true, true);
+            return;
+        }
+        this.closeTimeout = setTimeout(() => this.closeCalendar(true, true), closeDelay);
+    }
+    closeCalendar(returnFocus = true, emitClose = false) {
+        var _a;
+        if (!this.open)
+            return;
+        this.open = false;
+        if (emitClose)
+            this.tctClose.emit();
+        if (returnFocus)
+            (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    commitSingleValue(value) {
+        if (this.committingValue)
+            return;
+        // Watchers and consumer change handlers may update constraints during either event alias.
+        this.committingValue = true;
+        try {
+            this.value = value;
+            mirrorEmit(this, ['change', 'tctChange'], { value });
+        }
+        finally {
+            this.committingValue = false;
+        }
+        if (this.isSingleTypeable)
+            this.syncTypeableValue();
+        if (!this.typeableError)
+            this.validateCurrentValue();
+    }
+    emitValidationError(message) {
+        if (this.isRangeMode)
+            return;
+        mirrorEmit(this, ['error', 'tctError'], {
+            errors: [{ message, errorCode: 'generalInvalid' }],
+        });
+    }
+    emitValidationSuccess(value) {
+        if (this.isRangeMode)
+            return;
+        mirrorEmit(this, ['success', 'tctSuccess'], { value });
+    }
+    focusRenderedDate(value) {
+        var _a;
+        (_a = this.calendarElement) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent('tctCalendarFocus', {
+            detail: { value },
+        }));
+    }
+    formatDateWithModifier(date) {
+        return formatDisplayDate(date, this.normalizedDisplayFormat);
+    }
+    formatLongDate(date) {
+        return new Intl.DateTimeFormat(this.locale, {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        }).format(date);
+    }
+    formatTypeableDate(value) {
+        const separator = this.normalizedDisplayFormat.includes('-') ? '-' : '/';
+        const dateParts = this.normalizedDisplayFormat.startsWith('YYYY')
+            ? [value.slice(0, 4), value.slice(4, 6), value.slice(6, 8)]
+            : [value.slice(0, 2), value.slice(2, 4), value.slice(4, 8)];
+        return dateParts.filter(Boolean).join(separator);
+    }
+    isDateValid(date) {
+        return isDateSelectable(date, {
+            cutoffTime: this.cutoffTime,
+            daysOfWeekChecksum: this.daysOfWeekChecksum,
+            endDate: normalizeDatePickerValue(this.endDate),
+            invalidDates: this.normalizedInvalidDates,
+            startDate: normalizeDatePickerValue(this.startDate),
+            validDates: this.normalizedValidDates,
+        });
+    }
+    isRangeValid(start, end) {
+        return isRangeSelectable(start, end, {
+            cutoffTime: this.cutoffTime,
+            daysOfWeekChecksum: this.daysOfWeekChecksum,
+            endDate: normalizeDatePickerValue(this.endDate),
+            invalidDates: this.normalizedInvalidDates,
+            startDate: normalizeDatePickerValue(this.startDate),
+            validDates: this.normalizedValidDates,
+        });
+    }
+    isTypeableDatePrefixInvalid(digits) {
+        const isYearFirst = this.normalizedDisplayFormat.startsWith('YYYY');
+        const isDayFirst = this.normalizedDisplayFormat.startsWith('DD');
+        const firstPart = isYearFirst ? digits.slice(0, 4) : digits.slice(0, 2);
+        const secondPart = isYearFirst ? digits.slice(4, 6) : digits.slice(2, 4);
+        const monthPart = isYearFirst || isDayFirst ? secondPart : firstPart;
+        const dayPart = isYearFirst ? digits.slice(6, 8) : isDayFirst ? firstPart : secondPart;
+        const isSegmentInvalid = (segment, maximum) => {
+            if (!segment)
+                return false;
+            if (segment.length === 1)
+                return Number(segment) > Math.floor(maximum / 10);
+            const value = Number(segment);
+            return value < 1 || value > maximum;
+        };
+        if (isSegmentInvalid(monthPart, 12) || isSegmentInvalid(dayPart, 31))
+            return true;
+        if (monthPart.length < 2 || dayPart.length < 2)
+            return false;
+        return Number(dayPart) > new Date(2000, Number(monthPart), 0).getDate();
+    }
+    localizeForLocale(value, substitutions = {}) {
+        return localizeDatePickerString(value, substitutions);
+    }
+    normalizeDateList(values) {
+        if (!values)
+            return;
+        // Stable references prevent child constraint watchers from clearing errors on unrelated renders.
+        if (!this.normalizedDateLists.has(values)) {
+            this.normalizedDateLists.set(values, values.map(value => normalizeDatePickerValue(value)).filter((value) => !!value));
+        }
+        return this.normalizedDateLists.get(values);
+    }
+    parseTypeableDate(value) {
+        var _a;
+        const separator = this.normalizedDisplayFormat.includes('-') ? '-' : '/';
+        const escapedSeparator = separator === '-' ? '\\-' : '/';
+        const isYearFirst = this.normalizedDisplayFormat.startsWith('YYYY');
+        const pattern = isYearFirst
+            ? `^\\d{4}${escapedSeparator}\\d{2}${escapedSeparator}\\d{2}$`
+            : `^\\d{2}${escapedSeparator}\\d{2}(?:${escapedSeparator}\\d{4})?$`;
+        if (!new RegExp(pattern).test(value || ''))
+            return;
+        const dateParts = value.split(separator);
+        const [yearPart, monthPart, dayPart] = isYearFirst
+            ? dateParts
+            : this.normalizedDisplayFormat.startsWith('DD')
+                ? [dateParts[2], dateParts[1], dateParts[0]]
+                : [dateParts[2], dateParts[0], dateParts[1]];
+        const month = Number(monthPart);
+        const day = Number(dayPart);
+        const year = yearPart ? Number(yearPart) : (_a = buildInputDate(`${month}/${day}`, this.assume)) === null || _a === void 0 ? void 0 : _a.getFullYear();
+        if (!year)
+            return;
+        const date = new Date(year, month - 1, day);
+        if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day)
+            return;
+        return date;
+    }
+    /**
+     * 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() {
+        this.validateTypeableValue();
+        if (this.typeableError || !this.isRangeTypeable)
+            return;
+        const [startValue, endValue] = this.typeableValue.split(' - ');
+        const start = this.parseTypeableDate(startValue);
+        const end = this.parseTypeableDate(endValue);
+        if (!start || !end)
+            return;
+        this.typeableError = this.typeableRangeError(start, end);
+    }
+    async scrollDownCalendarToTop() {
+        var _a;
+        if (!this.open || !this.isRangeMode || this.activePopoverDirection !== 'down')
+            return;
+        await waitForNextPaint();
+        await waitForNextPaint();
+        if (!this.open || !this.isRangeMode || this.activePopoverDirection !== 'down')
+            return;
+        await ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.scrollContainerTo({ top: 0 }));
+    }
+    async scrollUpCalendarToBottom() {
+        var _a;
+        if (!this.open || this.activePopoverDirection !== 'up')
+            return;
+        await waitForNextPaint();
+        await waitForNextPaint();
+        if (!this.open || this.activePopoverDirection !== 'up')
+            return;
+        await ((_a = this.popoverElement) === null || _a === void 0 ? void 0 : _a.scrollContainerTo({ top: Number.MAX_SAFE_INTEGER }));
+    }
+    setActivePopoverDirection() {
+        this.activePopoverDirection = this.effectivePopoverDirection || this.automaticPopoverDirection;
+    }
+    setTypeableError(error) {
+        if (this.typeableError === error)
+            return;
+        this.typeableError = error;
+        if (error)
+            this.emitValidationError(error);
+    }
+    async showActionSheet() {
+        var _a, _b;
+        const result = (await ((_a = window.TectonElements) === null || _a === void 0 ? void 0 : _a.showActionSheet(this.actionSheetData)));
+        (_b = this.controlElement) === null || _b === void 0 ? void 0 : _b.focus();
+        if (result === null || result === void 0 ? void 0 : result.error) {
+            this.calendarError = result.error;
+            this.tctClose.emit({ error: result.error });
+            return;
+        }
+        if (!result || result.type === 'cancel')
+            return;
+        if (this.isRangeMode) {
+            const { rangeStart, rangeEnd } = result;
+            if (!rangeStart || !rangeEnd)
+                return;
+            this.rangeStart = rangeStart;
+            this.rangeEnd = rangeEnd;
+            mirrorEmit(this, ['change', 'tctChange'], { rangeStart, rangeEnd });
+            this.tctClose.emit();
+            return;
+        }
+        if (!result.value)
+            return;
+        this.commitSingleValue(result.value);
+        this.tctClose.emit();
+    }
+    syncTypeableValue() {
+        this.typeableValue = this.formattedTypeableValue;
+        this.revalidateTypeableValue();
+    }
+    toggleCalendar() {
+        if (this.disabled || this.readonly)
+            return;
+        if (shouldShowActionSheet({ hoist: this.hoist })) {
+            this.showActionSheet();
+            return;
+        }
+        if (!this.open)
+            this.setActivePopoverDirection();
+        this.open = !this.open;
+    }
+    typeableRangeError(start, end) {
+        if (start.getTime() > end.getTime())
+            return this.rangeOrderValidationError;
+        if (!this.isRangeValid(start, end))
+            return this.rangeValidationError;
+        return '';
+    }
+    validateCurrentValue(value = this.value) {
+        if (!value || this.isRangeMode)
+            return;
+        const normalizedValue = normalizeDatePickerValue(value);
+        const date = parseDatePickerValue(normalizedValue);
+        if (!normalizedValue || !isValidDate(date) || !this.isDateValid(date)) {
+            this.emitValidationError(`Value passed is invalid: The date ${value} is not valid`);
+            return;
+        }
+        this.emitValidationSuccess(normalizedValue);
+    }
+    validateTypeableValue() {
+        const digits = this.typeableValue.replace(/\D/g, '');
+        if (!digits) {
+            this.setTypeableError('');
+            return;
+        }
+        const dateParts = this.isRangeTypeable ? [digits.slice(0, 8), digits.slice(8)] : [digits];
+        const containsInvalidDate = dateParts.some(part => {
+            if (this.isTypeableDatePrefixInvalid(part))
+                return true;
+            if (part.length !== 8)
+                return false;
+            const date = this.parseTypeableDate(this.formatTypeableDate(part));
+            return !date || !this.isDateValid(date);
+        });
+        this.setTypeableError(containsInvalidDate
+            ? this.isRangeTypeable
+                ? this.rangeFormatValidationError
+                : this.dateFormatValidationError
+            : '');
+    }
+    // #endregion
+    // #region Render Methods
+    renderCalendar() {
+        return (h("q2-date-calendar", { ref: element => (this.calendarElement = element), class: this._actionSheet ? 'is-action-sheet' : undefined, 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: normalizeDatePickerValue(this.endDate), invalidDates: this.normalizedInvalidDates, locale: this.locale, mode: this.effectiveMode, open: this.open, rangeEnd: normalizeDatePickerValue(this.rangeEnd), rangeStart: normalizeDatePickerValue(this.rangeStart), readonly: this.readonly, startDate: normalizeDatePickerValue(this.startDate), validDates: this.normalizedValidDates, value: this.normalizedValue, onTctCalendarCancel: this.onCalendarCancel, onTctCalendarCommit: this.onCalendarCommit, onTctCalendarDismiss: this.onCalendarDismiss, onTctCalendarError: this.onCalendarError }));
+    }
+    render() {
+        if (this._actionSheet)
+            return this.renderCalendar();
+        return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, h("q2-input", { ref: element => (this.controlElement = element), 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: loc(this.label), placeholder: this.computedPlaceholder, "icon-right": this.acceptsTypeableInput ? undefined : 'calendar', autocomplete: "off", maxlength: this.isRangeTypeable ? 23 : this.isSingleTypeable ? 10 : undefined, "aria-haspopup": "dialog", "aria-expanded": `${this.open}`, "aria-controls": "date-picker-popover", onClick: this.acceptsTypeableInput ? undefined : this.onInputClick, onChange: event => event.stopImmediatePropagation(), onTctChange: this.acceptsTypeableInput ? this.onTypeableChange : event => event.stopImmediatePropagation(), onInput: event => event.stopImmediatePropagation(), onTctInput: this.acceptsTypeableInput ? this.onTypeableInput : event => event.stopImmediatePropagation(), onTctClear: this.onClear, onKeyDown: this.onInputKeydown, "test-id": "datePickerToggle", _preventEntry: !this.acceptsTypeableInput }, hasSlotContent(this.hostElement, 'label') && (h("slot", { name: "label", slot: "label" })), this.acceptsTypeableInput && (h("q2-btn", { slot: "input-right", "hide-label": true, disabled: this.disabled || this.readonly, label: "tecton.element.calendar.toggleAriaLabel", onClick: this.onCalendarToggleClick, "test-id": "datePickerCalendarToggle" }, h("q2-icon", { type: "calendar" })))), h("q2-popover", { ref: element => (this.popoverElement = element), id: "date-picker-popover", controlElement: this.controlElement, open: this.open, direction: this.effectivePopoverDirection, align: this.popoverAlignment, minHeight: this.popoverMinHeight, mode: this.popoverMode || undefined }, this.renderCalendar())));
+    }
+    static get is() { return "q2-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-date-picker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "_actionSheet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "Renders the calendar panel inline with behavior specific to being hosted by `q2-action-sheet`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "_action-sheet",
+                "defaultValue": "false"
+            },
+            "assume": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'current' | 'future' | 'past'",
+                    "resolved": "\"current\" | \"future\" | \"past\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the year for a committed month/day typeable date with no year.\n`future` selects the next year for dates before today, while `past` selects the prior year for dates after today.\nOnly applies to `single-typeable` mode with a month-first or day-first display format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "assume",
+                "defaultValue": "'current'"
+            },
+            "calendarLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A label shown above the date picker navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "calendar-label"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a button in the input field allowing the user to clear the selected date or range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "closeDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Delay in milliseconds before the popover closes after selection. Explicitly undefined or non-positive values close immediately."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "close-delay",
+                "defaultValue": "400"
+            },
+            "cutoffTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Must be a valid ISO date string."
+                        }],
+                    "text": "Specifies a time of day after which a date is no longer valid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cutoff-time"
+            },
+            "daysOfWeekChecksum": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines valid days of the week using the calendar checksum values.\n\nSunday begins at `1` and each following day doubles through Saturday at `64`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "days-of-week-checksum"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the date picker cannot be focused or interacted with."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disabledMsg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed as the input placeholder when the field is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled-msg"
+            },
+            "disclaimer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown below the date grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disclaimer"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Formats the displayed date using legacy Moment-style tokens. Typeable modes support the numeric formats defined\nby `DatePickerDisplayFormat` and fall back to `MM/DD/YYYY` for other formats."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "display-format"
+            },
+            "endDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the last selectable date. ISO date strings are preferred; legacy date strings and\ntimestamps are normalized to their calendar date, without shifting timestamp time zones."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "end-date"
+            },
+            "errors": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Consumer-provided error messages displayed below the input field."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Hides the label visually. `label` text is still required for screenreader compliance."
+                        }],
+                    "text": "Hides the input field's visible label while retaining its accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-label",
+                "defaultValue": "false"
+            },
+            "hints": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Consumer-provided hint messages displayed below the input field."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "hoist": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | undefined",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Instructs the component to use the action sheet workflow for displaying its calendar.\n\nFor more information, see [Action Sheets](https://tecton.q2developer.com/guides/action-sheets/)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hoist",
+                "defaultValue": "window.Tecton?.useActionSheets ? true : undefined"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the input field's error visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "invalid",
+                "defaultValue": "false"
+            },
+            "invalidDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an explicit date blacklist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates.\n\nAssign a new array when changing this property. Mutating the existing array does not trigger validation updates."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Required for screen reader compliance even when `hideLabel` is `true`."
+                        }],
+                    "text": "The visible label for the date picker input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Formats selected dates using the provided locale. Accepts multiple locales in an array as sequential fallbacks."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "locale",
+                "defaultValue": "document.documentElement.lang || 'en-US'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerMode",
+                    "resolved": "\"range\" | \"range-typeable\" | \"single\" | \"single-typeable\"",
+                    "references": {
+                        "DatePickerMode": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerMode",
+                            "referenceLocation": "DatePickerMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selects calendar or typeable behavior for a single date or date range.\nEnabling the legacy `typeable` prop uses `single-typeable` when `mode` is left at its default; an explicit mode takes precedence."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode",
+                "defaultValue": "'single'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the date picker popover is open or closed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "optional": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Appends \"(optional)\" to the input label and marks the field as not required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "optional",
+                "defaultValue": "false"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown in the input field when no date is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder"
+            },
+            "popDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down'",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `popoverDirection` instead."
+                        }],
+                    "text": "Forces the direction of the popover when it opens."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "pop-direction"
+            },
+            "popoverAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aligns the calendar popover to the left or right side of the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "popover-alignment",
+                "defaultValue": "'left'"
+            },
+            "popoverDirection": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down'",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forces the direction of the popover when it opens.\n\nIf no value is passed, the popover automatically selects a direction based on available space.\nUse `up` to place navigation below the date grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "popover-direction"
+            },
+            "popoverMinHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Retained for compatibility with `q2-date-picker`."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-min-height",
+                "defaultValue": "355"
+            },
+            "popoverMode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'legacy'",
+                    "resolved": "\"legacy\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Uses absolute positioning for the popover when set to `legacy`.\n\nThis compatibility option supports layouts where transformed ancestors interfere with fixed positioning."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "popover-mode",
+                "defaultValue": "null"
+            },
+            "rangeEnd": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected range end. ISO dates, legacy date strings, and timestamps are accepted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "range-end"
+            },
+            "rangeStart": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected range start. ISO dates, legacy date strings, and timestamps are accepted."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "range-start"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The field's content is not editable, but the field remains focusable.\n\nAppends \"(read only)\" to the field label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "startDate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the first selectable date. ISO date strings are preferred; legacy date strings and\ntimestamps are normalized to their calendar date, without shifting timestamp time zones."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "start-date"
+            },
+            "typeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables the legacy single-date typeable input behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "typeable",
+                "defaultValue": "false"
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the input field's success visual state when no errors are active."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "valid",
+                "defaultValue": "false"
+            },
+            "validDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an explicit date whitelist. ISO dates, legacy date strings, and timestamps are normalized to calendar dates.\n\nAssign a new array when changing this property. Mutating the existing array does not trigger validation updates."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DatePickerValue",
+                    "resolved": "DatePickerMomentLike | string",
+                    "references": {
+                        "DatePickerValue": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerValue",
+                            "referenceLocation": "DatePickerValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date. ISO date strings are preferred; legacy date strings and Moment-like values are normalized to\nan ISO date string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activePopoverDirection": {},
+            "calendarError": {},
+            "typeableError": {},
+            "typeableValue": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "change",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "legacyEvent",
+                            "text": undefined
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use `tctChange` instead."
+                        }],
+                    "text": "Emitted when a date is selected."
+                },
+                "complexType": {
+                    "original": "DatePickerChangeDetail",
+                    "resolved": "DatePickerChangeDetail",
+                    "references": {
+                        "DatePickerChangeDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerChangeDetail",
+                            "referenceLocation": "DatePickerChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "error",
+                "name": "error",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `tctError` instead."
+                        }],
+                    "text": "Emitted when an invalid single date is entered or assigned."
+                },
+                "complexType": {
+                    "original": "DatePickerErrorDetail",
+                    "resolved": "DatePickerErrorDetail",
+                    "references": {
+                        "DatePickerErrorDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerErrorDetail",
+                            "referenceLocation": "DatePickerErrorDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "success",
+                "name": "success",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `tctSuccess` instead."
+                        }],
+                    "text": "Emitted when a valid single date is entered, selected, or assigned."
+                },
+                "complexType": {
+                    "original": "DatePickerSuccessDetail",
+                    "resolved": "DatePickerSuccessDetail",
+                    "references": {
+                        "DatePickerSuccessDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerSuccessDetail",
+                            "referenceLocation": "DatePickerSuccessDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tctCancel",
+                "name": "tctCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an action-sheet date range is cancelled."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tctChange",
+                "name": "tctChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a date is selected."
+                },
+                "complexType": {
+                    "original": "DatePickerChangeDetail",
+                    "resolved": "DatePickerChangeDetail",
+                    "references": {
+                        "DatePickerChangeDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerChangeDetail",
+                            "referenceLocation": "DatePickerChangeDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tctClose",
+                "name": "tctClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the picker closes after confirmation. Includes validation details when confirmation fails."
+                },
+                "complexType": {
+                    "original": "DatePickerCloseDetail | void",
+                    "resolved": "DatePickerCloseDetail | void",
+                    "references": {
+                        "DatePickerCloseDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerCloseDetail",
+                            "referenceLocation": "DatePickerCloseDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tctError",
+                "name": "tctError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an invalid single date is entered or assigned."
+                },
+                "complexType": {
+                    "original": "DatePickerErrorDetail",
+                    "resolved": "DatePickerErrorDetail",
+                    "references": {
+                        "DatePickerErrorDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerErrorDetail",
+                            "referenceLocation": "DatePickerErrorDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tctSuccess",
+                "name": "tctSuccess",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a valid single date is entered, selected, or assigned."
+                },
+                "complexType": {
+                    "original": "DatePickerSuccessDetail",
+                    "resolved": "DatePickerSuccessDetail",
+                    "references": {
+                        "DatePickerSuccessDetail": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerSuccessDetail",
+                            "referenceLocation": "DatePickerSuccessDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "closePopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the calendar popover if it is open.",
+                    "tags": []
+                }
+            },
+            "focusDate": {
+                "complexType": {
+                    "signature": "(date: Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "date",
+                            "type": "Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves the visible month to the provided date and focuses that day.",
+                    "tags": []
+                }
+            },
+            "openPopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLQ2BtnElement": {
+                            "location": "global",
+                            "id": "global::HTMLQ2BtnElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the calendar popover if it is closed.",
+                    "tags": []
+                }
+            },
+            "reset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears selected values, uncommitted typeable input, and error state without changing configuration props.",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string | Date | DatePickerMomentLike) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | Date | DatePickerMomentLike",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        },
+                        "DatePickerMomentLike": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerMomentLike",
+                            "referenceLocation": "DatePickerMomentLike"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the calendar and selects the provided date when it is valid.",
+                    "tags": []
+                }
+            },
+            "typeValue": {
+                "complexType": {
+                    "signature": "(value: string | Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string | Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Focuses the single typeable input and stages a valid date without committing it.",
+                    "tags": [{
+                            "name": "warning",
+                            "text": "Only applicable when the effective mode is `single-typeable`."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "cutoffTime",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "assume",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "daysOfWeekChecksum",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "endDate",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "invalidDates",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "startDate",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "validDates",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
+            }, {
+                "propName": "displayFormat",
+                "methodName": "displayFormatChanged"
+            }, {
+                "propName": "mode",
+                "methodName": "modeChanged"
+            }, {
+                "propName": "typeable",
+                "methodName": "modeChanged"
+            }, {
+                "propName": "open",
+                "methodName": "openChanged"
+            }, {
+                "propName": "popDirection",
+                "methodName": "popDirectionChanged"
+            }, {
+                "propName": "popoverDirection",
+                "methodName": "popoverDirectionChanged"
+            }, {
+                "propName": "rangeEnd",
+                "methodName": "rangeEndChanged"
+            }, {
+                "propName": "rangeStart",
+                "methodName": "rangeStartChanged"
+            }, {
+                "propName": "readonly",
+                "methodName": "readonlyChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "beforeinput",
+                "method": "beforeInputHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "delegateFocus",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "popoverStateChanged",
+                "method": "popoverStateHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}