q2-tecton-elements 1.72.0 → 1.73.0

package/dist/esm/q2-date-picker_2.entry.js

@@ -0,0 +1,965 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cqkz7Bnm.js';
+import { d as dateFnsExports } from './index-O1A-ZSZs.js';
+import { q as handleDeprecationWarning, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, l as loc, h as hasSlotContent, c as createGuid } from './index-CP8pXJ-l.js';
+import { s as shouldShowActionSheet } from './action-sheet-DuQ7VZ08.js';
+import { m as mirrorEmit } from './mirror-emit-DUjY_ucm.js';
+import { f as formatDateISO, p as parseDatePickerValue, e as normalizeDatePickerValue, h as formatLegacyDisplayDate, n as normalizeDisplayFormat, b as formatDisplayDate, i as isDateSelectable, c as isRangeSelectable, l as localizeDatePickerString, j as buildInputDate } from './date-picker-helpers-D8QnN_AS.js';
+import { b as hasValidAncestor } from './component-DaQM9u3s.js';
+
+const q2DatePickerCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-date-picker-width:var(--tct-date-picker-width, var(--tct-date-calendar-width, 360px));box-sizing:border-box;display:block}:host[hidden]{display:none}click-elsewhere,.date-picker-input{display:block;width:100%}q2-date-calendar{--comp-date-calendar-width:var(--comp-date-picker-width);display:block;width:var(--comp-date-picker-width)}q2-date-calendar.is-action-sheet{--comp-date-calendar-width:100%;width:100%}q2-popover{--tct-popover-width:var(--comp-date-picker-width);--tct-popover-border-radius:var(--tct-date-picker-border-radius, var(--tct-date-calendar-border-radius, var(--app-border-radius-1, 4px)))}@media (max-width: 768px){:host{--comp-date-picker-width:min(         100%,         calc(             100vw - var(--tct-date-picker-mobile-gutter, var(--tct-date-calendar-mobile-gutter, 24px)) - var(--tct-date-picker-mobile-gutter, var(--tct-date-calendar-mobile-gutter, 24px))         ),         var(--tct-date-picker-mobile-max-width, var(--tct-date-calendar-mobile-max-width, 420px))     )}}`;
+
+const Q2DatePicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "change", 7);
+        this.error = createEvent(this, "error", 7);
+        this.success = createEvent(this, "success", 7);
+        this.tctCancel = createEvent(this, "tctCancel", 7);
+        this.tctChange = createEvent(this, "tctChange", 7);
+        this.tctClose = createEvent(this, "tctClose", 7);
+        this.tctError = createEvent(this, "tctError", 7);
+        this.tctSuccess = createEvent(this, "tctSuccess", 7);
+        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 (!dateFnsExports.isValid(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 || !dateFnsExports.isValid(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 (!dateFnsExports.isValid(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 dateFnsExports.isValid(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 dateFnsExports.isValid(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 || !dateFnsExports.isValid(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())));
+    }
+    get hostElement() { return getElement(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
+            }]
+    }; }
+};
+Q2DatePicker.style = q2DatePickerCss();
+
+const q2OptgroupCss = () => `*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block}.q2-optgroup-header{--comp-header-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-2, var(--app-scale-2x, 10px));background:var(--tct-optgroup-header-background, var(--tct-optgroup-header-bg, var(--t-optgroup-header-bg, var(--t-base, #FFFFFF))));color:var(--tct-optgroup-header-color, inherit);font-size:var(--tct-optgroup-header-font-size, var(--const-px-14, 14px));font-weight:var(--tct-optgroup-header-font-weight, 600);letter-spacing:var(--tct-optgroup-header-letter-spacing, inherit);position:var(--tct-optgroup-header-position, sticky);padding:var(--tct-optgroup-header-padding, var(--t-optgroup-header-padding, var(--comp-header-padding)));text-transform:var(--tct-optgroup-header-text-transform, var(--t-optgroup-header-text-transform, none));top:calc(var(--comp-popover-top-container-height, 0px) + var(--tct-optgroup-top, var(--t-optgroup-top, 0px)));z-index:5}`;
+
+const Q2Optgroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        // #region Own Properties
+        this.guid = createGuid();
+        // #endregion
+        // #region State Properties
+        this.hidden = false;
+        // #endregion
+        // #region Public Property API
+        /** Determines whether all nested options are disabled. */
+        this.disabled = false;
+        this.setHidden = () => {
+            this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);
+        };
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = null;
+    }
+    componentWillLoad() {
+        hasValidAncestor(this.hostElement, 'q2-option-list, q2-select, q2-dropdown, q2-pill');
+        const observer = new MutationObserver(this.setHidden);
+        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });
+        this.mutationObserver = observer;
+        // set initially
+        this.setHidden();
+        this.disabledWatcher(this.disabled);
+    }
+    // #endregion
+    // #region Watchers
+    disabledWatcher(disabled) {
+        this.options.forEach(opt => {
+            opt.disabledGroup = !!disabled;
+        });
+    }
+    // #endregion
+    // #region Local Methods
+    get headerId() {
+        return `q2-optgroup-header-${this.guid}`;
+    }
+    get options() {
+        return Array.from(this.hostElement.querySelectorAll('q2-option'));
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return (h("div", { key: '829ae5ebec150734128c98343ddb8112de0ee21e', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '6683155f922a2d15349f885aabac0bf9ee6a4575', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'b974da306256b13283183fa03e4dc8bcc8be3f44', class: "q2-optgroup-options" }, h("slot", { key: '2f0035aad12309be2c5c4ea3125077cc704e65e4' }))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "disabledWatcher": 0
+            }]
+    }; }
+};
+Q2Optgroup.style = q2OptgroupCss();
+
+export { Q2DatePicker as q2_date_picker, Q2Optgroup as q2_optgroup };