q2-tecton-elements 1.72.0 → 1.73.0

package/dist/cjs/q2-date-calendar.cjs.entry.js

@@ -0,0 +1,452 @@
+'use strict';
+
+var index = require('./index-DUaTw_1N.js');
+var index$1 = require('./index-CgG3VNXc.js');
+var index$2 = require('./index-BqyWHpNu.js');
+var datePickerHelpers = require('./date-picker-helpers-UYvPn98R.js');
+
+const q2DateCalendarCss = () => `*{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{box-sizing:border-box;display:block}:host[hidden]{display:none}.cal-panel{box-sizing:border-box;width:var(--comp-date-calendar-width, var(--tct-date-calendar-width, 360px));min-width:0;padding:var(--tct-date-calendar-padding, var(--app-scale-4x, 20px));border-radius:var(--tct-date-calendar-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-date-calendar-background, var(--t-base, #ffffff));box-shadow:var(--tct-date-calendar-box-shadow, var(--app-shadow-3))}.cal-panel.is-action-sheet{width:100%;padding:0;border-radius:0;background:transparent;box-shadow:none}.calendar-label{margin:0 0 var(--tct-date-calendar-label-margin-bottom, var(--tct-scale-2, var(--app-scale-2x, 10px)));color:var(--tct-date-calendar-label-font-color, var(--tct-text, var(--t-text, #4d4d4d)));font-size:var(--tct-date-calendar-label-font-size, var(--tct-font-size, var(--app-font-size, var(--const-px-14, 14px))));font-weight:var(--tct-date-calendar-label-font-weight, var(--tct-font-weight-semibold, 600))}.cal-nav{display:grid;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);align-items:center;margin-bottom:var(--tct-date-calendar-navigation-margin-bottom, var(--app-scale-3x, 15px))}.cal-nav-controls{display:flex;gap:var(--tct-date-calendar-navigation-gap, 2px)}.cal-nav-controls-left{justify-self:start}.cal-nav-controls-right{justify-self:end}.cal-panel.direction-up .cal-nav{margin-top:var(--tct-date-calendar-navigation-margin-top, var(--app-scale-3x, 15px));margin-bottom:0}.cal-nav-btn{width:var(--tct-date-calendar-navigation-button-width, 40px);height:var(--tct-date-calendar-navigation-button-height, 40px);margin:0;--tct-btn-icon-width:var(--tct-date-calendar-navigation-button-width, 40px);--tct-btn-icon-height:var(--tct-date-calendar-navigation-button-height, 40px);--tct-btn-icon-size:var(--tct-date-calendar-navigation-icon-size, 22px);--tct-btn-icon-border-radius:var(--tct-date-calendar-navigation-button-border-radius, var(--app-border-radius-1, 4px))}.cal-nav-btn q2-icon{width:var(--tct-date-calendar-navigation-icon-size, 22px);min-width:var(--tct-date-calendar-navigation-icon-size, 22px);height:var(--tct-date-calendar-navigation-icon-size, 22px)}.cal-nav-title{overflow:hidden;color:var(--tct-date-calendar-month-font-color, var(--tct-text, var(--t-text, #4d4d4d)));font-size:var(--tct-date-calendar-month-font-size, var(--const-px-15, 15px));font-weight:var(--tct-date-calendar-month-font-weight, 700);text-align:center;text-overflow:ellipsis;white-space:nowrap}.cal-row{display:grid;grid-template-columns:repeat(7, 44px);gap:var(--tct-date-calendar-grid-gap, 2px);justify-content:center}.cal-days{display:flex;flex-direction:column;gap:var(--tct-date-calendar-grid-gap, 2px)}.cal-dow{padding:var(--tct-date-calendar-weekday-padding, 6px 0 10px);color:var(--tct-date-calendar-day-heading-font-color, var(--tct-gray-8, var(--t-gray-8, #747474)));font-size:var(--tct-date-calendar-day-heading-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-date-calendar-day-heading-font-weight, 600);text-align:center}[role=gridcell]{min-width:0}.cal-day{box-sizing:border-box;display:flex;width:100%;height:var(--tct-date-calendar-day-height, 44px);padding:0;align-items:center;justify-content:center;border:0;border-radius:var(--tct-date-calendar-day-border-radius, var(--app-border-radius-2, 8px));background:transparent;color:var(--tct-date-calendar-day-font-color, var(--t-gray-1, #0d0d0d));cursor:pointer;font:inherit;font-size:var(--tct-date-calendar-day-font-size, var(--app-font-size, var(--const-px-14, 14px)))}.cal-day:hover:not(:disabled):not(.is-selected){background:var(--tct-date-calendar-day-hover-background, var(--t-gray-14, #f2f2f2))}.cal-day:focus-visible{background:var(--tct-date-calendar-background, var(--t-base, #ffffff));outline:0;box-shadow:var(--tct-date-calendar-day-focus-ring, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc))}.cal-day.is-outside{color:var(--tct-date-calendar-day-outside-font-color, var(--t-gray-8, #747474))}.cal-day:disabled{color:var(--tct-date-calendar-day-disabled-font-color, var(--t-gray-11, #cccccc));cursor:not-allowed}.cal-day.is-today{color:var(--tct-date-calendar-today-color, var(--t-primary, #6a4a9e));font-weight:var(--tct-date-calendar-today-font-weight, 600);box-shadow:inset 0 0 0 2px var(--tct-date-calendar-today-color, var(--t-primary, #6a4a9e))}.cal-day.is-selected{border-radius:var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px));background:var(--tct-date-calendar-day-selected-background, var(--t-primary, #6a4a9e));color:var(--tct-date-calendar-day-selected-font-color, var(--t-primary-text, #ffffff));font-weight:var(--tct-date-calendar-day-selected-font-weight, 700);box-shadow:none}.cal-day.in-range{border-radius:0;background:var(--tct-date-calendar-range-background, var(--t-primary-t4, #eee8f5));color:var(--tct-date-calendar-range-font-color, var(--t-primary, #6a4a9e))}.cal-day.in-range.is-disabled{background:var(--tct-date-calendar-range-disabled-background, var(--const-stoplight-alert, #d20a0a));color:var(--t-base, #ffffff)}.cal-day.range-start{border-radius:var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) 0 0 var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px))}.cal-day.range-end{border-radius:0 var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) 0}.cal-day.range-start.range-end{border-radius:var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px))}.calendar-disclaimer{margin-top:var(--tct-date-calendar-disclaimer-margin-top, var(--app-scale-3x, 15px));padding-top:var(--tct-date-calendar-disclaimer-padding-top, var(--app-scale-2x, 10px));border-top:1px solid var(--tct-date-calendar-disclaimer-border-color, var(--t-gray-13, #e6e6e6));color:var(--tct-date-calendar-disclaimer-font-color, var(--t-text, #4d4d4d));font-size:var(--tct-date-calendar-disclaimer-font-size, var(--app-font-size-small, var(--const-px-12, 12px)))}.cal-footer{display:grid;gap:var(--tct-date-calendar-footer-gap, var(--app-scale-2x, 10px));margin-top:var(--tct-date-calendar-footer-margin-top, var(--app-scale-3x, 15px));padding-top:var(--tct-date-calendar-footer-padding-top, var(--app-scale-3x, 15px));border-top:1px solid var(--tct-date-calendar-footer-border-color, var(--t-gray-13, #e6e6e6))}.cal-footer-summary{display:grid;color:var(--tct-date-calendar-footer-font-color, var(--t-primary, #6a4a9e));font-size:var(--tct-date-calendar-footer-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));font-weight:var(--tct-date-calendar-footer-font-weight, 600)}.cal-footer-summary>*{grid-area:1/1}.cal-footer-summary q2-message{color:var(--t-text, #4d4d4d)}.cal-footer-summary>span{display:flex;align-items:center}.cal-footer-summary q2-message.is-placeholder{visibility:hidden;pointer-events:none}.cal-footer-actions{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:var(--tct-date-calendar-footer-action-gap, var(--app-scale-1x, 5px));padding:var(--tct-date-calendar-footer-action-padding, var(--app-scale-1x, 5px))}.cal-footer-actions q2-btn{flex:0 0 auto;width:auto}@media (max-width: 768px){:host{max-width:none}.cal-panel{width:var(--comp-date-calendar-width, min(100%, 100vw - var(--tct-date-calendar-mobile-gutter, 24px) - var(--tct-date-calendar-mobile-gutter, 24px), var(--tct-date-calendar-mobile-max-width, 420px)));min-width:0}.cal-row{grid-template-columns:repeat(7, minmax(44px, 1fr))}.cal-day{height:auto;aspect-ratio:1}}@media (max-width: 360px){.cal-nav-btn{height:var(--tct-date-calendar-mobile-navigation-button-height, 32px);--tct-btn-icon-height:var(--tct-date-calendar-mobile-navigation-button-height, 32px)}}`;
+
+const Q2DateCalendar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tctCalendarCancel = index.createEvent(this, "tctCalendarCancel", 1);
+        this.tctCalendarCommit = index.createEvent(this, "tctCalendarCommit", 1);
+        this.tctCalendarDismiss = index.createEvent(this, "tctCalendarDismiss", 1);
+        this.tctCalendarError = index.createEvent(this, "tctCalendarError", 1);
+        this.tctChange = index.createEvent(this, "tctChange", 1);
+        // #region Own Properties
+        this.dayAbbrStrings = datePickerHelpers.getDays();
+        this.dayStrings = datePickerHelpers.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 = datePickerHelpers.parseDatePickerValue(button.dataset.date);
+            this.rangeHoverDate = index$1.dateFnsExports.isValid(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 = datePickerHelpers.parseDatePickerValue(button.dataset.date);
+            let nextDate;
+            let navigationDirection;
+            switch (event.key) {
+                case 'Escape':
+                    event.preventDefault();
+                    this.resetRangeDraft();
+                    this.tctCalendarDismiss.emit();
+                    return;
+                case 'ArrowUp':
+                    nextDate = index$1.dateFnsExports.addDays(currentDate, -7);
+                    navigationDirection = -1;
+                    break;
+                case 'ArrowDown':
+                    nextDate = index$1.dateFnsExports.addDays(currentDate, 7);
+                    navigationDirection = 1;
+                    break;
+                case 'ArrowLeft':
+                    nextDate = index$1.dateFnsExports.addDays(currentDate, -1);
+                    navigationDirection = -1;
+                    break;
+                case 'ArrowRight':
+                    nextDate = index$1.dateFnsExports.addDays(currentDate, 1);
+                    navigationDirection = 1;
+                    break;
+                case 'Home':
+                    nextDate = index$1.dateFnsExports.addDays(currentDate, -currentDate.getDay());
+                    navigationDirection = 1;
+                    break;
+                case 'End':
+                    nextDate = index$1.dateFnsExports.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(datePickerHelpers.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: datePickerHelpers.formatDateISO(this.rangeDraftStart),
+                rangeEnd: datePickerHelpers.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' ? datePickerHelpers.parseDatePickerValue(value) : value;
+        if (!index$1.dateFnsExports.isValid(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' ? datePickerHelpers.parseDatePickerValue(value) : value;
+        if (!index$1.dateFnsExports.isValid(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 = index$1.dateFnsExports.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 && index$1.dateFnsExports.isSameDay(date, rangeStart);
+            const isRangeEnd = this.isRangeMode && !!rangeEnd && index$1.dateFnsExports.isSameDay(date, rangeEnd);
+            const isSelected = this.isRangeMode
+                ? isRangeStart || isRangeEnd
+                : !!this.selectedDate && index$1.dateFnsExports.isSameDay(date, this.selectedDate);
+            const isInRange = this.isRangeMode &&
+                !!rangeStart &&
+                !!rangeEnd &&
+                date.getTime() > rangeStart.getTime() &&
+                date.getTime() < rangeEnd.getTime();
+            const isToday = index$1.dateFnsExports.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 datePickerHelpers.normalizeDisplayFormat(this.displayFormat);
+    }
+    get rangeConfirmDisabled() {
+        return !this.rangeDraftStart || !this.rangeDraftEnd;
+    }
+    get rangeEndDate() {
+        const date = datePickerHelpers.parseDatePickerValue(this.rangeEnd);
+        return index$1.dateFnsExports.isValid(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)} – ${datePickerHelpers.localizeDatePickerString('tecton.element.datePicker.range.selectEnd')}`;
+        }
+        return datePickerHelpers.localizeDatePickerString('tecton.element.datePicker.range.selectStart');
+    }
+    get rangeValidationError() {
+        return datePickerHelpers.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 = datePickerHelpers.parseDatePickerValue(this.isRangeMode ? this.rangeStart : this.value);
+        return index$1.dateFnsExports.isValid(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 = index$1.dateFnsExports.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="${datePickerHelpers.formatDateISO(date)}"]`)) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    formatRangeDate(date) {
+        if (this.displayFormat)
+            return datePickerHelpers.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 datePickerHelpers.isDateSelectable(date, this.constraints);
+    }
+    isRangeValid(start, end) {
+        return datePickerHelpers.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 = datePickerHelpers.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: datePickerHelpers.formatDateISO(selectedDate) });
+    }
+    setRangeError(error) {
+        if (this.rangeError === error)
+            return;
+        this.rangeError = error;
+        this.tctCalendarError.emit(error);
+    }
+    // #endregion
+    // #region Render Methods
+    renderNavigation() {
+        return [
+            index.h("div", { class: "cal-nav-controls cal-nav-controls-left" }, this.renderNavigationButton('previousYear'), this.renderNavigationButton('previousMonth')),
+            index.h("div", { class: "cal-nav-title", id: "date-picker-label", "aria-live": "polite" }, this.title),
+            index.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 (index.h("q2-btn", { class: `cal-nav-btn ${action}`, "hide-label": true, label: index$2.loc(`tecton.element.calendar.${action}`), onTctClick: () => this.onNavigate(action), "test-id": `${action}Button` }, index.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 (index.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
+                : datePickerHelpers.localizeDatePickerString(this.accessibleLabel || this.calendarLabel || 'Choose a date') }, this.calendarLabel && !this.actionSheet && (index.h("p", { key: '9a466d3509ed7ce45949039cfa11ce8485c4e278', class: "calendar-label" }, datePickerHelpers.localizeDatePickerString(this.calendarLabel))), !navigationBelow && index.h("div", { key: 'a8c6ef4c4098c81bb79cd2ca450f38c56c99c51d', class: "cal-nav" }, this.renderNavigation()), index.h("div", { key: '45e7f43ee502ea2c19049112860b3690313f53d5', class: "cal-grid", role: "grid", "aria-labelledby": "date-picker-label" }, index.h("div", { key: '2a1a4caebfb72b601b9dd282550b519a3f610329', role: "rowgroup" }, index.h("div", { key: '6187b5b5b7391e389a4af9403a2b8c63f9606e35', class: "cal-row cal-weekdays", role: "row" }, this.dayAbbrStrings.map((day, index$1) => (index.h("div", { class: "cal-dow", role: "columnheader", "aria-label": this.dayStrings[index$1] }, day))))), index.h("div", { key: 'f2c274adc93798dd8c20762a09fcc95bcb77992f', class: "cal-days", role: "rowgroup", onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, onMouseLeave: this.onDateHoverEnd }, this.currentWeeks.map(week => (index.h("div", { class: "cal-row", role: "row" }, week.map(day => (index.h("div", { role: "gridcell", "aria-selected": `${day.isSelected}` }, index.h("button", { type: "button", class: day.classList, "data-date": datePickerHelpers.formatDateISO(day.date), disabled: !day.isValid, tabindex: index$1.dateFnsExports.isSameDay(day.date, rovingDate) ? 0 : -1, "aria-disabled": !day.isValid ? 'true' : undefined, "aria-current": day.isToday ? 'date' : undefined, "aria-label": datePickerHelpers.formatDateFull(day.date), onMouseEnter: this.onDateHover }, day.date.getDate()))))))))), navigationBelow && index.h("div", { key: '14a8abe8669e403c4745eaf256783f37caf7fc43', class: "cal-nav" }, this.renderNavigation()), this.disclaimer && index.h("div", { key: 'f3ab74f66fca52d2499f52d20fdfd8a86cc154bc', class: "calendar-disclaimer" }, datePickerHelpers.localizeDatePickerString(this.disclaimer)), this.isRangeMode && (index.h("div", { key: '276c870f99275bb582b250ed1a3632f5e95c17c3', class: "cal-footer" }, index.h("div", { key: '1d753811c31360780fae551cb49c190561e292ed', class: "cal-footer-summary" }, index.h("q2-message", { key: '9db690009d1efa45b4e852e16a5b47ab0262c751', class: "is-placeholder", appearance: "minimal", type: "error", "aria-hidden": "true" }, rangeValidationError), index.h("span", { key: 'c1b41f3faf70207aa8dc65c8812dc91737cfe590' }, this.rangeSummary)), index.h("div", { key: '6af2f2741335e07737e61936cd480e90eb38918b', class: "cal-footer-actions" }, index.h("q2-btn", { key: '62e02cab1e110559304475a1d0c29d1fc65f1d93', intent: "workflow-escape", size: "small", label: datePickerHelpers.localizeDatePickerString('tecton.element.datePicker.action.cancel'), onTctClick: this.onRangeCancel }), index.h("q2-btn", { key: '14f1286e80e92b42168e3e6abe9718d40b4ded59', intent: "workflow-primary", size: "small", label: datePickerHelpers.localizeDatePickerString('tecton.element.datePicker.action.confirm'), disabled: this.rangeConfirmDisabled, onTctClick: this.onRangeCommit }))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "cutoffTime": [{
+                "constraintsChanged": 0
+            }],
+        "daysOfWeekChecksum": [{
+                "constraintsChanged": 0
+            }],
+        "endDate": [{
+                "constraintsChanged": 0
+            }],
+        "invalidDates": [{
+                "constraintsChanged": 0
+            }],
+        "startDate": [{
+                "constraintsChanged": 0
+            }],
+        "validDates": [{
+                "constraintsChanged": 0
+            }],
+        "mode": [{
+                "modeChanged": 0
+            }],
+        "open": [{
+                "openChanged": 0
+            }],
+        "rangeEnd": [{
+                "rangeChanged": 0
+            }],
+        "rangeStart": [{
+                "rangeChanged": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+Q2DateCalendar.style = q2DateCalendarCss();
+
+exports.q2_date_calendar = Q2DateCalendar;