q2-tecton-elements 1.72.0 → 1.73.1

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

@@ -0,0 +1,1022 @@
+import { h, } from "@stencil/core";
+import { addDays, isSameDay, isValid as isValidDate } from "date-fns";
+import { loc } from "../../utils";
+import { formatDisplayDate, formatDateFull, formatDateISO, getDays, getDaysOfWeek, isDateSelectable, isRangeSelectable, localizeDatePickerString, normalizeDisplayFormat, parseDatePickerValue, setupMonthYear, } from "../../utils/date-picker/date-picker-helpers";
+/**
+ * @name Date Calendar
+ * @category Forms
+ * @summary Use for selecting dates from a standalone calendar.
+ */
+export class Q2DateCalendar {
+    constructor() {
+        // #region Own Properties
+        this.dayAbbrStrings = getDays();
+        this.dayStrings = getDaysOfWeek();
+        this.rangeError = '';
+        /** Uses the action-sheet calendar presentation. */
+        this.actionSheet = false;
+        /** Controls whether navigation appears above or below the date grid. */
+        this.direction = 'down';
+        /** Disables calendar interaction. */
+        this.disabled = false;
+        /** Formats calendar and range labels using the provided locale. */
+        this.locale = document.documentElement.lang || 'en-US';
+        /** Selects single-date or range calendar behavior. */
+        this.mode = 'single';
+        /** Indicates that a new calendar session has opened. */
+        this.open = false;
+        /** Prevents calendar selection while retaining calendar visibility. */
+        this.readonly = false;
+        this.onDateHover = (event) => {
+            const button = event.currentTarget;
+            if (button.disabled || !this.isRangeMode || !this.rangeDraftStart || this.rangeDraftEnd)
+                return;
+            const hoverDate = parseDatePickerValue(button.dataset.date);
+            this.rangeHoverDate = isValidDate(hoverDate) && this.isDateValid(hoverDate) ? hoverDate : undefined;
+        };
+        this.onDateHoverEnd = () => {
+            this.rangeHoverDate = undefined;
+        };
+        this.onDateKeydown = (event) => {
+            const button = event.target.closest('button[data-date]');
+            if (!button)
+                return;
+            const currentDate = parseDatePickerValue(button.dataset.date);
+            let nextDate;
+            let navigationDirection;
+            switch (event.key) {
+                case 'Escape':
+                    event.preventDefault();
+                    this.resetRangeDraft();
+                    this.tctCalendarDismiss.emit();
+                    return;
+                case 'ArrowUp':
+                    nextDate = addDays(currentDate, -7);
+                    navigationDirection = -1;
+                    break;
+                case 'ArrowDown':
+                    nextDate = addDays(currentDate, 7);
+                    navigationDirection = 1;
+                    break;
+                case 'ArrowLeft':
+                    nextDate = addDays(currentDate, -1);
+                    navigationDirection = -1;
+                    break;
+                case 'ArrowRight':
+                    nextDate = addDays(currentDate, 1);
+                    navigationDirection = 1;
+                    break;
+                case 'Home':
+                    nextDate = addDays(currentDate, -currentDate.getDay());
+                    navigationDirection = 1;
+                    break;
+                case 'End':
+                    nextDate = addDays(currentDate, 6 - currentDate.getDay());
+                    navigationDirection = -1;
+                    break;
+                case 'PageUp':
+                    nextDate = new Date(currentDate.getFullYear() - (event.shiftKey ? 1 : 0), currentDate.getMonth() - (event.shiftKey ? 0 : 1), currentDate.getDate());
+                    navigationDirection = -1;
+                    break;
+                case 'PageDown':
+                    nextDate = new Date(currentDate.getFullYear() + (event.shiftKey ? 1 : 0), currentDate.getMonth() + (event.shiftKey ? 0 : 1), currentDate.getDate());
+                    navigationDirection = 1;
+                    break;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            const validDate = this.findValidNavigationDate(nextDate, navigationDirection);
+            if (validDate)
+                this.activateDate(validDate);
+        };
+        this.onDateSelection = (event) => {
+            const button = event.target.closest('button[data-date]');
+            if (!button || button.disabled || this.disabled || this.readonly)
+                return;
+            this.selectDate(parseDatePickerValue(button.dataset.date));
+        };
+        this.onRangeCancel = () => {
+            this.resetRangeDraft();
+            this.tctCalendarCancel.emit();
+        };
+        this.onRangeCommit = () => {
+            if (this.disabled || this.readonly || !this.rangeDraftStart || !this.rangeDraftEnd)
+                return;
+            if (!this.isRangeValid(this.rangeDraftStart, this.rangeDraftEnd)) {
+                this.setRangeError(this.rangeValidationError);
+                return;
+            }
+            this.setRangeError('');
+            this.emitCommit({
+                rangeStart: formatDateISO(this.rangeDraftStart),
+                rangeEnd: formatDateISO(this.rangeDraftEnd),
+            });
+        };
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    connectedCallback() {
+        this.resetCalendarSession();
+    }
+    // #endregion
+    // #region Listeners
+    focusHandler(event) {
+        var _a;
+        if (event.target !== event.currentTarget)
+            return;
+        this.focusDate(((_a = event.detail) === null || _a === void 0 ? void 0 : _a.value) || this.rovingDate);
+    }
+    // #endregion
+    // #region Public Methods API
+    /** Moves the visible month to the provided date and focuses that day. */
+    async focusDate(value) {
+        const date = typeof value === 'string' ? parseDatePickerValue(value) : value;
+        if (!isValidDate(date))
+            return;
+        this.activeDate = date;
+        this.goToMonthYear(date.getMonth(), date.getFullYear());
+        requestAnimationFrame(() => this.focusRenderedDate(date));
+    }
+    /** Selects the provided date when it satisfies the calendar constraints. */
+    async setValue(value) {
+        const date = typeof value === 'string' ? parseDatePickerValue(value) : value;
+        if (!isValidDate(date) || !this.isDateValid(date))
+            return;
+        this.selectDate(date);
+    }
+    // #endregion
+    // #region Watchers
+    constraintsChanged() {
+        this.setRangeError('');
+    }
+    modeChanged() {
+        this.resetCalendarSession();
+    }
+    openChanged(open) {
+        if (open)
+            this.resetCalendarSession();
+    }
+    rangeChanged() {
+        if (this.isRangeMode)
+            this.resetCalendarSession();
+    }
+    valueChanged() {
+        if (!this.isRangeMode)
+            this.resetCalendarSession();
+    }
+    // #endregion
+    // #region Local Methods
+    get constraints() {
+        return {
+            cutoffTime: this.cutoffTime,
+            daysOfWeekChecksum: this.daysOfWeekChecksum,
+            endDate: this.endDate,
+            invalidDates: this.invalidDates,
+            startDate: this.startDate,
+            validDates: this.validDates,
+        };
+    }
+    get currentWeeks() {
+        return this.dateList.reduce((weeks, day, index) => {
+            const weekIndex = Math.floor(index / 7);
+            if (!weeks[weekIndex])
+                weeks[weekIndex] = [];
+            weeks[weekIndex].push(day);
+            return weeks;
+        }, []);
+    }
+    get dateList() {
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        const firstOfMonth = new Date(selectedYear, monthIndex, 1);
+        const daysInMonth = new Date(selectedYear, monthIndex + 1, 0).getDate();
+        const visibleCellCount = Math.ceil((firstOfMonth.getDay() + daysInMonth) / 7) * 7;
+        const cellCount = this.actionSheet ? 42 : visibleCellCount;
+        const firstVisibleDate = new Date(selectedYear, monthIndex, 1 - firstOfMonth.getDay());
+        return Array.from({ length: cellCount }, (_, index) => {
+            const date = addDays(firstVisibleDate, index);
+            const isOutside = date.getMonth() !== monthIndex;
+            const selectedRangeStart = this.rangeDraftStart;
+            const selectedRangeEnd = this.rangeDraftEnd || this.rangeHoverDate;
+            const rangeStart = selectedRangeStart && selectedRangeEnd && selectedRangeStart.getTime() > selectedRangeEnd.getTime()
+                ? selectedRangeEnd
+                : selectedRangeStart;
+            const rangeEnd = selectedRangeStart && selectedRangeEnd && selectedRangeStart.getTime() > selectedRangeEnd.getTime()
+                ? selectedRangeStart
+                : selectedRangeEnd;
+            const isRangeStart = this.isRangeMode && !!rangeStart && isSameDay(date, rangeStart);
+            const isRangeEnd = this.isRangeMode && !!rangeEnd && isSameDay(date, rangeEnd);
+            const isSelected = this.isRangeMode
+                ? isRangeStart || isRangeEnd
+                : !!this.selectedDate && isSameDay(date, this.selectedDate);
+            const isInRange = this.isRangeMode &&
+                !!rangeStart &&
+                !!rangeEnd &&
+                date.getTime() > rangeStart.getTime() &&
+                date.getTime() < rangeEnd.getTime();
+            const isToday = isSameDay(date, new Date());
+            const isValid = this.isDateValid(date);
+            const classes = ['cal-day'];
+            if (isOutside)
+                classes.push('is-outside');
+            if (isInRange)
+                classes.push('in-range');
+            if (isSelected)
+                classes.push('is-selected');
+            if (isRangeStart)
+                classes.push('range-start');
+            if (isRangeEnd || (isRangeStart && !rangeEnd))
+                classes.push('range-end');
+            if (isToday)
+                classes.push('is-today');
+            if (!isValid)
+                classes.push('is-disabled');
+            return {
+                classList: classes.join(' '),
+                date,
+                isOutside,
+                isSelected,
+                isToday,
+                isValid,
+            };
+        });
+    }
+    get isRangeMode() {
+        return this.mode === 'range' || this.mode === 'range-typeable';
+    }
+    get normalizedDisplayFormat() {
+        return normalizeDisplayFormat(this.displayFormat);
+    }
+    get rangeConfirmDisabled() {
+        return !this.rangeDraftStart || !this.rangeDraftEnd;
+    }
+    get rangeEndDate() {
+        const date = parseDatePickerValue(this.rangeEnd);
+        return isValidDate(date) ? date : undefined;
+    }
+    get rangeSummary() {
+        if (this.rangeDraftStart && this.rangeDraftEnd) {
+            return `${this.formatRangeDate(this.rangeDraftStart)} – ${this.formatRangeDate(this.rangeDraftEnd)}`;
+        }
+        if (this.rangeDraftStart) {
+            return `${this.formatRangeDate(this.rangeDraftStart)} – ${localizeDatePickerString('tecton.element.datePicker.range.selectEnd')}`;
+        }
+        return localizeDatePickerString('tecton.element.datePicker.range.selectStart');
+    }
+    get rangeValidationError() {
+        return localizeDatePickerString('tecton.element.datePicker.validation.rangeUnavailable');
+    }
+    get rovingDate() {
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        const preferredDates = [this.activeDate, this.isRangeMode ? this.rangeDraftStart : this.selectedDate];
+        for (const date of preferredDates) {
+            if ((date === null || date === void 0 ? void 0 : date.getMonth()) === monthIndex && (date === null || date === void 0 ? void 0 : date.getFullYear()) === selectedYear)
+                return date;
+        }
+        const today = new Date();
+        if (today.getMonth() === monthIndex && today.getFullYear() === selectedYear)
+            return today;
+        return new Date(selectedYear, monthIndex, 1);
+    }
+    get selectedDate() {
+        const date = parseDatePickerValue(this.isRangeMode ? this.rangeStart : this.value);
+        return isValidDate(date) ? date : undefined;
+    }
+    get title() {
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        return new Intl.DateTimeFormat(this.locale, { month: 'long', year: 'numeric' }).format(new Date(selectedYear, monthIndex, 1));
+    }
+    activateDate(date) {
+        this.activeDate = date;
+        this.goToMonthYear(date.getMonth(), date.getFullYear());
+        requestAnimationFrame(() => this.focusRenderedDate(date));
+    }
+    emitCommit(detail) {
+        this.tctCalendarCommit.emit(detail);
+        this.tctChange.emit(detail);
+    }
+    findValidNavigationDate(date, direction) {
+        let candidate = date;
+        for (let offset = 0; offset < 366; offset++) {
+            if (this.isDateValid(candidate))
+                return candidate;
+            candidate = addDays(candidate, direction);
+        }
+    }
+    focusRenderedDate(date) {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`button[data-date="${formatDateISO(date)}"]`)) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    formatRangeDate(date) {
+        if (this.displayFormat)
+            return formatDisplayDate(date, this.normalizedDisplayFormat);
+        return new Intl.DateTimeFormat(this.locale, { year: 'numeric', month: '2-digit', day: '2-digit' }).format(date);
+    }
+    goToMonthYear(monthIndex, selectedYear) {
+        const normalizedDate = new Date(selectedYear, monthIndex, 1);
+        this.selectedMonthYear = {
+            monthIndex: normalizedDate.getMonth(),
+            selectedYear: normalizedDate.getFullYear(),
+        };
+    }
+    isDateValid(date) {
+        return isDateSelectable(date, this.constraints);
+    }
+    isRangeValid(start, end) {
+        return isRangeSelectable(start, end, this.constraints);
+    }
+    onNavigate(action) {
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        const navigationTargets = {
+            previousYear: [monthIndex, selectedYear - 1],
+            previousMonth: [monthIndex - 1, selectedYear],
+            nextMonth: [monthIndex + 1, selectedYear],
+            nextYear: [monthIndex, selectedYear + 1],
+        };
+        this.goToMonthYear(...navigationTargets[action]);
+    }
+    resetCalendarSession() {
+        const selectedDate = this.selectedDate;
+        this.activeDate = selectedDate;
+        this.selectedMonthYear = setupMonthYear(selectedDate);
+        this.resetRangeDraft();
+    }
+    resetRangeDraft() {
+        this.setRangeError('');
+        this.rangeHoverDate = undefined;
+        if (!this.selectedDate || !this.rangeEndDate) {
+            this.rangeDraftStart = undefined;
+            this.rangeDraftEnd = undefined;
+            return;
+        }
+        [this.rangeDraftStart, this.rangeDraftEnd] = [this.selectedDate, this.rangeEndDate].sort((a, b) => a.getTime() - b.getTime());
+    }
+    selectDate(selectedDate) {
+        if (!this.isDateValid(selectedDate))
+            return;
+        this.activeDate = selectedDate;
+        if (this.isRangeMode) {
+            this.setRangeError('');
+            if (!this.rangeDraftStart || this.rangeDraftEnd) {
+                this.rangeDraftStart = selectedDate;
+                this.rangeDraftEnd = undefined;
+            }
+            else if (selectedDate.getTime() < this.rangeDraftStart.getTime()) {
+                this.rangeDraftEnd = this.rangeDraftStart;
+                this.rangeDraftStart = selectedDate;
+            }
+            else {
+                this.rangeDraftEnd = selectedDate;
+            }
+            this.rangeHoverDate = undefined;
+            this.goToMonthYear(selectedDate.getMonth(), selectedDate.getFullYear());
+            requestAnimationFrame(() => this.focusRenderedDate(selectedDate));
+            return;
+        }
+        this.goToMonthYear(selectedDate.getMonth(), selectedDate.getFullYear());
+        this.emitCommit({ value: formatDateISO(selectedDate) });
+    }
+    setRangeError(error) {
+        if (this.rangeError === error)
+            return;
+        this.rangeError = error;
+        this.tctCalendarError.emit(error);
+    }
+    // #endregion
+    // #region Render Methods
+    renderNavigation() {
+        return [
+            h("div", { class: "cal-nav-controls cal-nav-controls-left" }, this.renderNavigationButton('previousYear'), this.renderNavigationButton('previousMonth')),
+            h("div", { class: "cal-nav-title", id: "date-picker-label", "aria-live": "polite" }, this.title),
+            h("div", { class: "cal-nav-controls cal-nav-controls-right" }, this.renderNavigationButton('nextMonth'), this.renderNavigationButton('nextYear')),
+        ];
+    }
+    renderNavigationButton(action) {
+        const isYearControl = action === 'previousYear' || action === 'nextYear';
+        const isPrevious = action === 'previousYear' || action === 'previousMonth';
+        return (h("q2-btn", { class: `cal-nav-btn ${action}`, "hide-label": true, label: loc(`tecton.element.calendar.${action}`), onTctClick: () => this.onNavigate(action), "test-id": `${action}Button` }, h("q2-icon", { type: `chevron-${isYearControl ? 'double-' : ''}${isPrevious ? 'left' : 'right'}` })));
+    }
+    render() {
+        const navigationBelow = !this.actionSheet && this.direction === 'up';
+        const rovingDate = this.rovingDate;
+        const rangeValidationError = this.rangeValidationError;
+        return (h("div", { key: '84c278bd6817625fcf5f70528000edcc84d116a6', class: `cal-panel direction-${navigationBelow ? 'up' : 'down'}${this.actionSheet ? ' is-action-sheet' : ''}`, role: this.actionSheet ? undefined : 'dialog', "aria-label": this.actionSheet
+                ? undefined
+                : localizeDatePickerString(this.accessibleLabel || this.calendarLabel || 'Choose a date') }, this.calendarLabel && !this.actionSheet && (h("p", { key: '9a466d3509ed7ce45949039cfa11ce8485c4e278', class: "calendar-label" }, localizeDatePickerString(this.calendarLabel))), !navigationBelow && h("div", { key: 'a8c6ef4c4098c81bb79cd2ca450f38c56c99c51d', class: "cal-nav" }, this.renderNavigation()), h("div", { key: '45e7f43ee502ea2c19049112860b3690313f53d5', class: "cal-grid", role: "grid", "aria-labelledby": "date-picker-label" }, h("div", { key: '2a1a4caebfb72b601b9dd282550b519a3f610329', role: "rowgroup" }, h("div", { key: '6187b5b5b7391e389a4af9403a2b8c63f9606e35', class: "cal-row cal-weekdays", role: "row" }, this.dayAbbrStrings.map((day, index) => (h("div", { class: "cal-dow", role: "columnheader", "aria-label": this.dayStrings[index] }, day))))), h("div", { key: 'f2c274adc93798dd8c20762a09fcc95bcb77992f', class: "cal-days", role: "rowgroup", onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, onMouseLeave: this.onDateHoverEnd }, this.currentWeeks.map(week => (h("div", { class: "cal-row", role: "row" }, week.map(day => (h("div", { role: "gridcell", "aria-selected": `${day.isSelected}` }, h("button", { type: "button", class: day.classList, "data-date": formatDateISO(day.date), disabled: !day.isValid, tabindex: isSameDay(day.date, rovingDate) ? 0 : -1, "aria-disabled": !day.isValid ? 'true' : undefined, "aria-current": day.isToday ? 'date' : undefined, "aria-label": formatDateFull(day.date), onMouseEnter: this.onDateHover }, day.date.getDate()))))))))), navigationBelow && h("div", { key: '14a8abe8669e403c4745eaf256783f37caf7fc43', class: "cal-nav" }, this.renderNavigation()), this.disclaimer && h("div", { key: 'f3ab74f66fca52d2499f52d20fdfd8a86cc154bc', class: "calendar-disclaimer" }, localizeDatePickerString(this.disclaimer)), this.isRangeMode && (h("div", { key: '276c870f99275bb582b250ed1a3632f5e95c17c3', class: "cal-footer" }, h("div", { key: '1d753811c31360780fae551cb49c190561e292ed', class: "cal-footer-summary" }, h("q2-message", { key: '9db690009d1efa45b4e852e16a5b47ab0262c751', class: "is-placeholder", appearance: "minimal", type: "error", "aria-hidden": "true" }, rangeValidationError), h("span", { key: 'c1b41f3faf70207aa8dc65c8812dc91737cfe590' }, this.rangeSummary)), h("div", { key: '6af2f2741335e07737e61936cd480e90eb38918b', class: "cal-footer-actions" }, h("q2-btn", { key: '62e02cab1e110559304475a1d0c29d1fc65f1d93', intent: "workflow-escape", size: "small", label: localizeDatePickerString('tecton.element.datePicker.action.cancel'), onTctClick: this.onRangeCancel }), h("q2-btn", { key: '14f1286e80e92b42168e3e6abe9718d40b4ded59', intent: "workflow-primary", size: "small", label: localizeDatePickerString('tecton.element.datePicker.action.confirm'), disabled: this.rangeConfirmDisabled, onTctClick: this.onRangeCommit }))))));
+    }
+    static get is() { return "q2-date-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-date-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-date-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible calendar dialog label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessible-label"
+            },
+            "actionSheet": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Uses the action-sheet calendar presentation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action-sheet",
+                "defaultValue": "false"
+            },
+            "calendarLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible and visible calendar label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "calendar-label"
+            },
+            "cutoffTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a time of day after which a date is no longer valid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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 calendar checksum values."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "days-of-week-checksum"
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'up' | 'down'",
+                    "resolved": "\"down\" | \"up\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether navigation appears above or below the date grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'down'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables calendar interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "disclaimer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Localized disclaimer content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disclaimer"
+            },
+            "displayFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DatePickerDisplayFormat",
+                    "resolved": "\"DD-MM-YYYY\" | \"DD/MM/YYYY\" | \"MM-DD-YYYY\" | \"MM/DD/YYYY\" | \"YYYY-MM-DD\"",
+                    "references": {
+                        "DatePickerDisplayFormat": {
+                            "location": "import",
+                            "path": "@/utils/date-picker/date-picker-types",
+                            "id": "src/utils/date-picker/date-picker-types.ts::DatePickerDisplayFormat",
+                            "referenceLocation": "DatePickerDisplayFormat"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the date format used in range summaries."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-date"
+            },
+            "invalidDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an explicit date blacklist using ISO date strings."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Formats calendar and range labels using the provided locale."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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 single-date or range calendar behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'single'"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates that a new calendar session has opened."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "rangeEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The committed range end as an ISO date string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-end"
+            },
+            "rangeStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The committed range start as an ISO date string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range-start"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevents calendar selection while retaining calendar visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-date"
+            },
+            "validDates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines an explicit date whitelist using ISO date strings."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The committed single date as an ISO date string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeDate": {},
+            "rangeDraftEnd": {},
+            "rangeDraftStart": {},
+            "rangeError": {},
+            "rangeHoverDate": {},
+            "selectedMonthYear": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctCalendarCancel",
+                "name": "tctCalendarCancel",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user cancels range selection."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tctCalendarCommit",
+                "name": "tctCalendarCommit",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user commits a single date or date range."
+                },
+                "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": "tctCalendarDismiss",
+                "name": "tctCalendarDismiss",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the calendar asks its container to dismiss it."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tctCalendarError",
+                "name": "tctCalendarError",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when range confirmation validation changes."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "tctChange",
+                "name": "tctChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the committed date or range for standalone consumers and framework models."
+                },
+                "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"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusDate": {
+                "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": "Moves the visible month to the provided date and focuses that day.",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "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": "Selects the provided date when it satisfies the calendar constraints.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "cutoffTime",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "daysOfWeekChecksum",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "endDate",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "invalidDates",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "startDate",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "validDates",
+                "methodName": "constraintsChanged"
+            }, {
+                "propName": "mode",
+                "methodName": "modeChanged"
+            }, {
+                "propName": "open",
+                "methodName": "openChanged"
+            }, {
+                "propName": "rangeEnd",
+                "methodName": "rangeChanged"
+            }, {
+                "propName": "rangeStart",
+                "methodName": "rangeChanged"
+            }, {
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "tctCalendarFocus",
+                "method": "focusHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}