q2-tecton-elements 1.27.1 → 1.28.1

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

@@ -1,44 +1,37 @@
 import { h, } from '@stencil/core';
 import { addDays, isSameDay, format, isValid as isValidDate } from 'date-fns';
-import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString, } from './helpers';
+import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString, formatDateFull, } from './helpers';
 import { buildDates, getValidDaysOfWeek } from './validation';
-import { handleAriaLabel, loc, setPopProperties, overrideFocus, isEventFromElement, isMobile } from 'src/utils';
+import { handleAriaLabel, loc, overrideFocus, isEventFromElement, isMobile, handleRenamedProp, waitForNextPaint, } from 'src/utils';
 export class Q2Calendar {
   constructor() {
     this.formatModifier = 'M/D/YYYY'; // To allow missing leading zero, 4/3/2021 => converts into 04/03/2021
     this.defaultFormatString = 'mm/dd/yyyy';
-    this.defaultHintMessage = loc('tecton.element.calendar.hint.format') + ': ' + this.defaultFormatString;
     this.scheduledAfterRender = [];
     this.dayAbbrStrings = getDays();
     this.dayStrings = getDaysOfWeek();
     this.monthStrings = getMonths();
     this.closeCalendar = () => {
-      if (this.dropdownOpen) {
-        this.dropdownOpen = false;
-        this.focusInput();
-        this.scheduledAfterRender.push(this.resizeIframe);
-      }
+      if (!this.open)
+        return;
+      this.open = false;
+      this.focusInput();
     };
     this.openCalendar = () => {
-      if (!this.readonly && !this.dropdownOpen) {
-        this.selectedMonthYear = setupMonthYear(this.dateValue);
-        this.dateList = this.buildDateList(this.selectedMonthYear);
-        this.dropdownOpen = true;
-        this.focusInput();
-        this.scheduledAfterRender.push(this.resizeIframe);
-      }
+      if (this.readonly || this.open)
+        return;
+      this.selectedMonthYear = setupMonthYear(this.dateValue);
+      this.dateList = this.buildDateList(this.selectedMonthYear);
+      this.open = true;
     };
     this.toggleCalendar = () => {
       if (this.readonly)
         return;
-      this.dropdownOpen = !this.dropdownOpen;
-      this.scheduledAfterRender.push(this.resizeIframe);
-      if (this.dropdownOpen) {
-        this.selectedMonthYear = setupMonthYear(this.dateValue);
-        this.dateList = this.buildDateList(this.selectedMonthYear);
+      if (this.open) {
+        this.closeCalendar();
       }
       else {
-        this.focusInput();
+        this.openCalendar();
       }
     };
     this.onClickElsewhere = (event) => {
@@ -71,10 +64,11 @@ export class Q2Calendar {
       if (this.disabled) {
         return;
       }
-      if (event.key === 'Escape' || event.key === 'Esc') {
-        this.onInputBlur();
-        this.closeCalendar();
-        return;
+      switch (event.key) {
+        case 'Escape':
+          this.onInputBlur();
+          this.closeCalendar();
+          break;
       }
       if (!this.isTypeable)
         return;
@@ -148,10 +142,8 @@ export class Q2Calendar {
       }
     };
     this.onInputClick = () => {
-      if (this.disabled) {
+      if (this.disabled)
         return;
-      }
-      setPopProperties(this);
       this.toggleCalendar();
     };
     this.onRefocus = () => {
@@ -188,13 +180,6 @@ export class Q2Calendar {
         return;
       const clickedDate = removeTimezoneOffset(new Date(dateCell.dataset.date));
       this.selectDate(clickedDate);
-      if (this.isTypeable) {
-        this.setHints({
-          isValid: true,
-          message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(clickedDate)}`,
-          messageType: 'success',
-        });
-      }
       this.closeCalendar();
     };
     this.onDateKeydown = (event) => {
@@ -269,6 +254,7 @@ export class Q2Calendar {
     this.disabled = undefined;
     this.readonly = undefined;
     this.invalid = undefined;
+    this.open = undefined;
     this.typeable = undefined;
     this.clearable = undefined;
     this.placeholder = undefined;
@@ -280,24 +266,22 @@ export class Q2Calendar {
     this.endDate = undefined;
     this.cutoffTime = undefined;
     this.daysOfWeekChecksum = undefined;
-    this.popDirection = undefined;
     this.assume = 'current';
     this.errors = undefined;
     this.invalidDates = undefined;
     this.validDates = undefined;
+    this.popoverDirection = undefined;
+    this.popoverMinHeight = 355;
+    this.popDirection = undefined;
     this.onsuccess = undefined;
     this.buttonLabel = undefined;
     this.ariaLabel = undefined;
-    this.dropdownOpen = false;
     this.keyboardSelection = false;
     this.typedValue = '';
     this.dateList = undefined;
     this.hintMessage = this.defaultHintMessage;
     this.hintMessageType = 'info';
   }
-  resizeIframe() {
-    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
-  }
   connectedCallback() {
     this.selectedMonthYear = setupMonthYear(this.dateValue);
     this.dateList = this.buildDateList(this.selectedMonthYear);
@@ -307,6 +291,7 @@ export class Q2Calendar {
     this.validateDate();
   }
   componentWillLoad() {
+    this.popDirectionHandler();
     handleAriaLabel(this);
   }
   componentDidRender() {
@@ -318,6 +303,20 @@ export class Q2Calendar {
   componentDidLoad() {
     overrideFocus(this.hostElement);
   }
+  get selectedDate() {
+    var _a;
+    const selectedCell = (_a = this.calendarBody) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-selected="true"]');
+    return selectedCell ? removeTimezoneOffset(new Date(selectedCell.dataset.date)) : null;
+  }
+  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');
+  }
+  get defaultHintMessage() {
+    return this.typeable
+      ? loc('tecton.element.calendar.hint.format') + ': ' + this.defaultFormatString
+      : loc('tecton.element.calendar.hint.select');
+  }
   get canClear() {
     if (this.isTypeable) {
       return this.clearable && !!this.typedValue;
@@ -425,36 +424,52 @@ export class Q2Calendar {
   delegateFocus(event) {
     if (!isEventFromElement(event, this.hostElement))
       return;
-    this.inputField.shadowRoot.querySelector('.input-field').focus();
+    this.controlElement.shadowRoot.querySelector('.input-field').focus();
   }
   handleClear() {
     this.value = null;
     this.typedValue = '';
-    this.setHints({ isValid: true, message: this.defaultHintMessage, messageType: 'info' });
+  }
+  popoverStateHandler({ detail: { open } }) {
+    if (this.open !== open)
+      this.open = open;
   }
   //////// Observers //////////
+  popDirectionHandler() {
+    handleRenamedProp(this, 'popDirection', 'popoverDirection');
+  }
   ariaLabelObserver() {
     handleAriaLabel(this);
   }
+  typeableChanged() {
+    this.valueObserver(this.value);
+  }
   valueObserver(newValue) {
     const isMoment = newValue && typeof newValue !== 'string' && 'toDate' in newValue;
+    const newDate = isMoment ? newValue.toDate() : stringToDate(newValue);
+    const shortFormattedValue = formatDateShort(newDate);
     if (this.isTypeable) {
-      const newValueAsString = isMoment
-        ? formatDateShort(newValue.toDate())
-        : newValue;
-      this.typedValue = newValueAsString;
-      // reset hint when value is cleared
-      if (!newValueAsString && !this.invalid) {
-        this.setHints({ isValid: true, message: this.defaultHintMessage, messageType: 'info' });
-      }
+      this.typedValue = shortFormattedValue;
     }
     else {
-      const dateValue = isMoment ? newValue.toDate() : stringToDate(newValue);
-      this.inputField.value = formatDateShort(dateValue);
-      this.selectedMonthYear = setupMonthYear(dateValue);
+      this.controlElement.value = shortFormattedValue;
+      this.selectedMonthYear = setupMonthYear(newDate);
       this.dateList = this.buildDateList(this.selectedMonthYear);
       this.validateDate();
     }
+    // reset hint when value is cleared
+    if (this.invalid)
+      return;
+    if (shortFormattedValue) {
+      this.setHints({
+        isValid: true,
+        message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(newDate)}`,
+        messageType: 'success',
+      });
+    }
+    else {
+      this.setHints({ isValid: true, message: this.defaultHintMessage, messageType: 'info' });
+    }
   }
   daysOfWeekChecksumObserver() {
     this.dateList = this.buildDateList(this.selectedMonthYear);
@@ -534,7 +549,7 @@ export class Q2Calendar {
   }
   focusInput() {
     var _a;
-    (_a = this.inputField) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new FocusEvent('focus'));
+    (_a = this.controlElement) === null || _a === void 0 ? void 0 : _a.focus();
   }
   checkActiveCellForBlankness() {
     const activeElement = this.hostElement.shadowRoot.activeElement;
@@ -554,51 +569,53 @@ export class Q2Calendar {
     this.goToMonthYear(date.getMonth(), date.getFullYear());
     this.scheduledAfterRender.push(() => this.focusDay(date));
   }
-  focusDay(date) {
+  async focusDay(date) {
     var _a;
+    if (!date)
+      return;
+    await waitForNextPaint();
     (_a = this.calendarBody.querySelector(`td[data-day="${date.getDate()}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
-    return (h("click-elsewhere", { class: `calendar-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere }, this.calendarField(), h("div", { ref: el => (this.dropdownContainer = el), "aria-modal": "true", role: "dialog", "aria-label": loc('tecton.element.calendar.dialogLabel'), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}` }, this.isTypeable && this.hintField(), this.calendarPopUp())));
+    return (h("click-elsewhere", { class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, direction: this.popoverDirection, "aria-label": loc('tecton.element.calendar.dialogLabel'), minHeight: this.popoverMinHeight, block: true }, this.hintField(), this.calendarPopover())));
   }
   hintField() {
-    return (h("q2-message", { type: this.hintMessageType, class: "calendar-hint" }, this.hintMessage));
+    const messageClasses = ['calendar-hint'];
+    if (!this.isTypeable)
+      messageClasses.push('sr');
+    return (h("q2-message", { ref: el => (this.hintMessageElement = el), type: this.hintMessageType, class: messageClasses.join(' ') }, this.hintMessage));
   }
   setHints({ isValid, message, messageType }) {
+    if (message === this.hintMessage)
+      return this.hintMessageElement.present();
     this.invalid = !isValid;
     this.hintMessage = message;
     this.hintMessageType = messageType;
-    if (!this.invalid) {
-      this.errors = [];
-    }
   }
   setCompleteInput(inputDate) {
     const formattedDate = formatDateShort(inputDate);
     this.change.emit({ value: formatDateISO(inputDate) });
     this.typedValue = formattedDate;
-    this.setHints({
-      isValid: true,
-      message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
-      messageType: 'success',
-    });
   }
-  calendarField() {
-    return (h("q2-input", { ref: el => (this.inputField = 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.dropdownOpen}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+  inputField() {
+    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}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
         (this.invalid && ['tecton.element.calendar.invalid']) ||
         [], onClick: this.onInputClick, onChange: this.onInputChange, onInput: this.onInputInput, onKeyDown: this.onInputKeydown, onKeyUp: this.onInputKeyup, onBlur: this.onInputBlur, "icon-right": "calendar", "format-modifier": this.isTypeable ? this.formatModifier : '', pseudo: !this.isTypeable, type: "date", "hide-messages": true, "test-id": "inputAndCalendarToggle" }));
   }
-  calendarPopUp() {
+  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) }, 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 })));
   }
   calendarDays() {
-    const monthName = this.monthStrings[this.selectedMonthYear.monthIndex];
-    return (h("table", { role: "grid", "aria-labelledby": "table-label" }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", abbr: this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
+    return (h("table", { role: "grid", "aria-labelledby": "table-label" }, h("thead", null, h("tr", null, [...Array(7).keys()].map(index => (h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (h("tr", null, week.map(day => {
       var _a;
-      let ariaLabel = `${monthName} ${day.integer}`;
+      let ariaLabel = '';
+      if (day.isToday)
+        ariaLabel = `${loc('tecton.element.calendar.today')}, `;
+      ariaLabel += formatDateFull(day.date);
       if (day.isSelected)
         ariaLabel += ` (${loc('tecton.element.calendar.selected')})`;
-      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" }, 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 : '')));
+      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 : '')));
     })))))));
   }
   static get is() { return "q2-calendar"; }
@@ -738,6 +755,23 @@ export class Q2Calendar {
         "attribute": "invalid",
         "reflect": true
       },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true
+      },
       "typeable": {
         "type": "boolean",
         "mutable": false,
@@ -925,23 +959,6 @@ export class Q2Calendar {
         "attribute": "days-of-week-checksum",
         "reflect": true
       },
-      "popDirection": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'up' | 'down'",
-          "resolved": "\"down\" | \"up\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "pop-direction",
-        "reflect": true
-      },
       "assume": {
         "type": "string",
         "mutable": false,
@@ -1005,6 +1022,61 @@ export class Q2Calendar {
           "text": ""
         }
       },
+      "popoverDirection": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-direction",
+        "reflect": false
+      },
+      "popoverMinHeight": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "popover-min-height",
+        "reflect": false,
+        "defaultValue": "355"
+      },
+      "popDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'up' | 'down'",
+          "resolved": "\"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "attribute": "pop-direction",
+        "reflect": true
+      },
       "onsuccess": {
         "type": "unknown",
         "mutable": false,
@@ -1049,7 +1121,7 @@ export class Q2Calendar {
       },
       "ariaLabel": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -1071,7 +1143,6 @@ export class Q2Calendar {
   }
   static get states() {
     return {
-      "dropdownOpen": {},
       "keyboardSelection": {},
       "typedValue": {},
       "dateList": {},
@@ -1130,8 +1201,14 @@ export class Q2Calendar {
   static get elementRef() { return "hostElement"; }
   static get watchers() {
     return [{
+        "propName": "popDirection",
+        "methodName": "popDirectionHandler"
+      }, {
         "propName": "ariaLabel",
         "methodName": "ariaLabelObserver"
+      }, {
+        "propName": "typeable",
+        "methodName": "typeableChanged"
       }, {
         "propName": "value",
         "methodName": "valueObserver"
@@ -1186,6 +1263,12 @@ export class Q2Calendar {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "popoverStateChanged",
+        "method": "popoverStateHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/q2-calendar/styles.css

@@ -65,65 +65,6 @@ button {
   visibility: hidden;
 }
 
-.q2-element-dropdown {
-  display: none;
-  position: absolute;
-  background-color: var(--app-white, #ffffff);
-  color: var(--t-text, #4d4d4d);
-  left: 0;
-  width: 100%;
-  z-index: 100;
-  margin-top: 1px;
-  box-shadow: var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3));
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--app-tween-1, 0.2s ease);
-  border-radius: var(--tct-dropdown-border-radius, --t-dropdown-border-radius, 0);
-  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--t-scrollbar-size, var(--app-scale-1x, 5px)));
-  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--t-scrollbar-border-radius, var(--app-border-radius-1, 3px)));
-  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-scrollbar-color, var(--t-a11y-gray-color, #747474)));
-  scrollbar-width: thin;
-  scrollbar-color: var(--comp-scrollbar-color) transparent;
-}
-.q2-element-dropdown::-webkit-scrollbar {
-  width: var(--comp-scrollbar-size);
-  height: var(--comp-scrollbar-size);
-  margin: 5px;
-}
-.q2-element-dropdown::-webkit-scrollbar-thumb {
-  background: var(--comp-scrollbar-color);
-  border-radius: var(--comp-scrollbar-border-radius);
-}
-.q2-element-dropdown::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: var(--comp-scrollbar-border-radius);
-}
-
-.q2-element-dropdown.sizable {
-  display: block;
-  height: auto;
-}
-
-.dropdown-open .q2-element-dropdown {
-  display: block;
-  height: auto;
-  overflow: auto;
-  opacity: 1;
-  visibility: visible;
-}
-
-:host([alignment=right]) .q2-element-dropdown {
-  left: auto;
-  right: 0;
-}
-
-:host([block]) q2-btn,
-:host([block]) {
-  display: block;
-}
-
 :host {
   display: block;
 }
@@ -132,7 +73,7 @@ button {
   display: none;
 }
 
-.calendar-container {
+click-elsewhere {
   position: relative;
   display: block;
 }
@@ -142,14 +83,8 @@ q2-input {
   cursor: pointer;
 }
 
-.q2-element-dropdown {
-  text-align: center;
-  min-width: 308px;
-}
-
-.q2-element-dropdown.dropup {
-  bottom: var(--comp-input-min-height, 44px);
-  margin-bottom: 0px;
+.calendar-field-popup {
+  padding: var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));
 }
 
 .calendar-label {
@@ -172,6 +107,7 @@ q2-input {
   align-items: center;
   font-size: var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, 16px));
   font-weight: var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));
+  text-align: center;
 }
 
 .cal-month-text {
@@ -187,6 +123,7 @@ q2-input {
 table {
   width: 100%;
   margin-bottom: 2px;
+  text-align: center;
 }
 
 th {