q2-tecton-elements 1.52.1 → 1.52.2

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

@@ -701,7 +701,6 @@ const Q2Calendar = class {
                 this.openCalendar();
             }
         };
-        this.controlElement = undefined;
         this.dateList = undefined;
         this.hintMessage = this.defaultHintMessage;
         this.hintMessageType = 'info';
@@ -1046,6 +1045,10 @@ 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');
@@ -1086,6 +1089,10 @@ const Q2Calendar = class {
             return (index$2.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) && (index$2.h("div", { class: "today-decorator", "aria-hidden": "true" }, index.loc('tecton.element.calendar.today'))), index$2.h("div", { "aria-label": ariaLabel }, (_a = day === null || day === void 0 ? void 0 : day.integer) !== null && _a !== void 0 ? _a : '')));
         })))))));
     }
+    renderCalendarPopover() {
+        const { monthIndex, selectedYear } = this.selectedMonthYear;
+        return (index$2.h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && index$2.h("p", { class: "calendar-label" }, index.loc(this.calendarLabel)), index$2.h("div", { class: "cal-month-heading" }, index$2.h("q2-btn", { label: index.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) }, index$2.h("q2-icon", { type: "chevron-left" })), index$2.h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), index$2.h("q2-btn", { label: index.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) }, index$2.h("q2-icon", { type: "chevron-right" })), index$2.h("q2-btn", { label: index.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) }, index$2.h("q2-icon", { type: "chevron-left" })), index$2.h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), index$2.h("q2-btn", { label: index.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 }, index$2.h("q2-icon", { type: "chevron-right" }))), index$2.h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && index$2.h("div", { class: "calendar-disclaimer" }, index.loc(this.disclaimer)), index$2.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'))
@@ -1111,6 +1118,15 @@ const Q2Calendar = class {
         const { monthIndex, selectedYear } = this.selectedMonthYear;
         return new Date(selectedYear, monthIndex, day);
     }
+    renderHintField() {
+        if (!this.hintMessage)
+            return;
+        return (index$2.h("q2-message", { class: "calendar-hint sr", ref: el => (this.hintMessageElement = el), type: this.hintMessageType }, this.hintMessage));
+    }
+    renderInputField() {
+        const { isTypeable } = this;
+        return (index$2.h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: index.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 && (index$2.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 }, index$2.h("q2-icon", { type: "calendar" })))));
+    }
     setCompleteInput(inputDate) {
         const formattedDate = formatDateShort(inputDate);
         this.change.emit({ value: formatDateISO(inputDate) });
@@ -1188,21 +1204,8 @@ const Q2Calendar = class {
     }
     // #endregion
     // #region Render Methods
-    renderCalendarPopover() {
-        const { monthIndex, selectedYear } = this.selectedMonthYear;
-        return (index$2.h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && index$2.h("p", { class: "calendar-label" }, index.loc(this.calendarLabel)), index$2.h("div", { class: "cal-month-heading" }, index$2.h("q2-btn", { label: index.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) }, index$2.h("q2-icon", { type: "chevron-left" })), index$2.h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), index$2.h("q2-btn", { label: index.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) }, index$2.h("q2-icon", { type: "chevron-right" })), index$2.h("q2-btn", { label: index.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) }, index$2.h("q2-icon", { type: "chevron-left" })), index$2.h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), index$2.h("q2-btn", { label: index.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 }, index$2.h("q2-icon", { type: "chevron-right" }))), index$2.h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && index$2.h("div", { class: "calendar-disclaimer" }, index.loc(this.disclaimer)), index$2.h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
-    }
-    renderHintField() {
-        if (!this.hintMessage)
-            return;
-        return (index$2.h("q2-message", { class: "calendar-hint sr", ref: el => (this.hintMessageElement = el), type: this.hintMessageType }, this.hintMessage));
-    }
-    renderInputField() {
-        const { isTypeable } = this;
-        return (index$2.h("q2-input", { ref: el => (this.controlElement = el), class: "calendar-input-field", value: this.formattedValue, label: index.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 && (index$2.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 }, index$2.h("q2-icon", { type: "calendar" })))));
-    }
     render() {
-        return (index$2.h("click-elsewhere", { key: '9b9a4058ca1f6fd2e613804f19817f7a670a016f', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), index$2.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())));
+        return (index$2.h("click-elsewhere", { key: '76bda9101bf99ae49ab8f04be2d5743dc6b110a8', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.renderInputField(), index$2.h("q2-popover", { key: '4e556602957d99a9e48127e647923f3e5719e950', 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.renderHintField(), this.renderCalendarPopover())));
     }
     get hostElement() { return index$2.getElement(this); }
     static get watchers() { return {