q2-tecton-elements 1.51.0 → 1.52.0

package/dist/esm/q2-calendar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1e1ce94e.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7a5365e2.js';
 import { d as dateFns } from './index-3184c760.js';
-import { l as loc, a as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, j as handleRenamedProp } from './index-844fc010.js';
+import { l as loc, a as handleAriaLabel, o as overrideFocus, i as isEventFromElement, w as waitForNextPaint, j as handleRenamedProp } from './index-d18e2a20.js';
 
 function formatDateISO(value) {
     const date = new Date(value);
@@ -697,6 +697,7 @@ const Q2Calendar = class {
                 this.openCalendar();
             }
         };
+        this.controlElement = undefined;
         this.dateList = undefined;
         this.hintMessage = this.defaultHintMessage;
         this.hintMessageType = 'info';
@@ -1041,10 +1042,6 @@ const Q2Calendar = class {
             return [hintMessage];
         return [];
     }
-    get innerInputContainer() {
-        var _a, _b;
-        return (_b = (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-container');
-    }
     get innerInputField() {
         var _a, _b;
         return (_b = (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.input-field');
@@ -1085,10 +1082,6 @@ const Q2Calendar = class {
             return (h("td", { class: day.classList, "aria-hidden": day.isEmpty ? 'true' : undefined, tabindex: day.isSelected ? 0 : -1, role: day.isSelected ? 'gridcell' : undefined, "aria-selected": day.isSelected ? 'true' : undefined, "aria-disabled": day.isValid ? undefined : 'true', "data-day": day.integer || undefined, "data-date": day.date ? formatDateISO(day.date) : undefined }, (day === null || day === void 0 ? void 0 : day.isToday) && (h("div", { class: "today-decorator", "aria-hidden": "true" }, loc('tecton.element.calendar.today'))), h("div", { "aria-label": ariaLabel }, (_a = day === null || day === void 0 ? void 0 : day.integer) !== null && _a !== void 0 ? _a : '')));
         })))))));
     }
-    calendarPopover() {
-        const { monthIndex, selectedYear } = this.selectedMonthYear;
-        return (h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && h("p", { class: "calendar-label" }, loc(this.calendarLabel)), h("div", { class: "cal-month-heading" }, h("q2-btn", { label: loc('tecton.element.calendar.previousMonth'), "hide-label": true, ref: elm => (this.btnPrevMonth = elm), class: "cal-nav-btn prev-month", "test-id": "previousMonthButton", onClick: () => this.goToMonthYear(monthIndex - 1, selectedYear) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), h("q2-btn", { label: loc('tecton.element.calendar.nextMonth'), "hide-label": true, class: "cal-nav-btn next-month", ref: elm => (this.btnNextMonth = elm), "test-id": "nextMonthButton", onClick: () => this.goToMonthYear(monthIndex + 1, selectedYear) }, h("q2-icon", { type: "chevron-right" })), h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", ref: elm => (this.btnPrevYear = elm), "test-id": "previousYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear - 1) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", ref: elm => (this.btnNextYear = elm), "test-id": "nextYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear + 1), onKeyDown: this.onHeaderControlKeydown }, h("q2-icon", { type: "chevron-right" }))), h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && h("div", { class: "calendar-disclaimer" }, loc(this.disclaimer)), h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
-    }
     checkActiveCellForBlankness() {
         const activeElement = this.hostElement.shadowRoot.activeElement;
         if (!activeElement || activeElement.tagName !== 'TD' || !activeElement.hasAttribute('aria-hidden'))
@@ -1114,15 +1107,6 @@ const Q2Calendar = class {
         const { monthIndex, selectedYear } = this.selectedMonthYear;
         return new Date(selectedYear, monthIndex, day);
     }
-    hintField() {
-        if (!this.hintMessage)
-            return;
-        return (h("q2-message", { class: "calendar-hint sr", ref: el => (this.hintMessageElement = el), type: this.hintMessageType }, this.hintMessage));
-    }
-    inputField() {
-        const { isTypeable } = this;
-        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
-    }
     setCompleteInput(inputDate) {
         const formattedDate = formatDateShort(inputDate);
         this.change.emit({ value: formatDateISO(inputDate) });
@@ -1200,8 +1184,21 @@ const Q2Calendar = class {
     }
     // #endregion
     // #region Render Methods
+    renderCalendarPopover() {
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        return (h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && h("p", { class: "calendar-label" }, loc(this.calendarLabel)), h("div", { class: "cal-month-heading" }, h("q2-btn", { label: loc('tecton.element.calendar.previousMonth'), "hide-label": true, ref: elm => (this.btnPrevMonth = elm), class: "cal-nav-btn prev-month", "test-id": "previousMonthButton", onClick: () => this.goToMonthYear(monthIndex - 1, selectedYear) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), h("q2-btn", { label: loc('tecton.element.calendar.nextMonth'), "hide-label": true, class: "cal-nav-btn next-month", ref: elm => (this.btnNextMonth = elm), "test-id": "nextMonthButton", onClick: () => this.goToMonthYear(monthIndex + 1, selectedYear) }, h("q2-icon", { type: "chevron-right" })), h("q2-btn", { label: loc('tecton.element.calendar.previousYear'), "hide-label": true, class: "cal-nav-btn prev-year", ref: elm => (this.btnPrevYear = elm), "test-id": "previousYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear - 1) }, h("q2-icon", { type: "chevron-left" })), h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), h("q2-btn", { label: loc('tecton.element.calendar.nextYear'), "hide-label": true, class: "cal-nav-btn next-year", ref: elm => (this.btnNextYear = elm), "test-id": "nextYearButton", onClick: () => this.goToMonthYear(monthIndex, selectedYear + 1), onKeyDown: this.onHeaderControlKeydown }, h("q2-icon", { type: "chevron-right" }))), h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && h("div", { class: "calendar-disclaimer" }, loc(this.disclaimer)), h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
+    }
+    renderHintField() {
+        if (!this.hintMessage)
+            return;
+        return (h("q2-message", { class: "calendar-hint sr", ref: el => (this.hintMessageElement = el), type: this.hintMessageType }, this.hintMessage));
+    }
+    renderInputField() {
+        const { isTypeable } = this;
+        return (h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: loc(this.label), hideLabel: this.hideLabel, disabled: !!this.disabled, readonly: !!this.readonly, clearable: this.canClear, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.open}`, hints: this.hintList, errors: this.errorList, onClick: isTypeable ? undefined : this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "icon-right": isTypeable ? undefined : 'calendar', "format-modifier": isTypeable ? this.formatModifier : this.displayFormat || this.formatModifier, type: "date", "hide-messages": !isTypeable, "test-id": "inputAndCalendarToggle", _role: "combobox", _preventEntry: !isTypeable }, isTypeable && (h("q2-btn", { ref: el => (this.btnCalendarToggle = el), slot: "input-right", onClick: this.onInputClick, "test-id": "calendarToggle", label: "tecton.element.calendar.toggleAriaLabel", "hide-label": true }, h("q2-icon", { type: "calendar" })))));
+    }
     render() {
-        return (h("click-elsewhere", { key: 'e23ea47b755999a0447d11b11185040de8b6cb34', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), h("q2-popover", { key: 'b1b25c6016f27d75c3e4934fce14049e9becb012', ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.hintField(), this.calendarPopover())));
+        return (h("click-elsewhere", { key: '9b9a4058ca1f6fd2e613804f19817f7a670a016f', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), h("q2-popover", { key: '7f729ebe0684463c3d19e732973708347a900040', ref: el => (this.popoverElement = el), controlElement: this.controlElement, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, mode: this.popoverMode || undefined, block: true }, this.renderHintField(), this.renderCalendarPopover())));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {