q2-tecton-elements 1.27.1 → 1.28.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-734296a7.js');
-const index = require('./index-ffd19146.js');
+const index = require('./index-7a73e106.js');
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -2664,27 +2664,53 @@ function formatDateISO(value) {
     return;
   return formatISO(date, { representation: 'date' });
 }
+let memoizedFormatDateShort;
 function formatDateShort(value) {
   const date = new Date(value);
   if (!isValid(date))
     return;
   const isoDate = date.toISOString();
-  return new Intl.DateTimeFormat('default', {
-    month: '2-digit',
-    day: '2-digit',
-    year: 'numeric',
-    timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-  }).format(new Date(isoDate));
+  if (!memoizedFormatDateShort) {
+    memoizedFormatDateShort = new Intl.DateTimeFormat('default', {
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    });
+  }
+  return memoizedFormatDateShort.format(new Date(isoDate));
 }
+let memoizedFormatDateLong;
 function formatDateLong(value) {
   const date = new Date(value);
   if (!isValid(date))
     return;
-  return new Intl.DateTimeFormat('default', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  }).format(date);
+  if (!memoizedFormatDateLong) {
+    memoizedFormatDateLong = new Intl.DateTimeFormat('default', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }
+  return memoizedFormatDateLong.format(date);
+}
+let memoizedFormatDateFull;
+function formatDateFull(value) {
+  if (!value)
+    return;
+  const date = new Date(value);
+  if (!isValid(date))
+    return;
+  if (!memoizedFormatDateFull) {
+    memoizedFormatDateFull = new Intl.DateTimeFormat('default', {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+      weekday: 'long',
+      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+    });
+  }
+  return memoizedFormatDateFull.format(date);
 }
 function convertMomentFormat(stringFormat) {
   return stringFormat
@@ -3042,7 +3068,7 @@ function addEmptyDates(from, to) {
   return [...Array(to - from).keys()].map(() => (Object.assign({}, emptyDate)));
 }
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}.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}:host[hidden]{display:none}.calendar-container{position:relative;display:block}q2-input{margin:0;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-label{font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.calendar-hint{text-align:left;margin:0}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;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))}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:44px;cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background-color:var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background-color:var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-top:1px solid var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host{display:block}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer}.calendar-field-popup{padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)))}.calendar-label{font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, 16px));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.calendar-hint{text-align:left;margin:0}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;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{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:44px;cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background-color:var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background-color:var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:10px;height:12px}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px))));border-top:1px solid var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}";
 
 const Q2Calendar = class {
   constructor(hostRef) {
@@ -3052,38 +3078,31 @@ const Q2Calendar = class {
     this.success = index$1.createEvent(this, "success", 7);
     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 = index.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) => {
@@ -3116,10 +3135,11 @@ const Q2Calendar = class {
       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;
@@ -3193,10 +3213,8 @@ const Q2Calendar = class {
       }
     };
     this.onInputClick = () => {
-      if (this.disabled) {
+      if (this.disabled)
         return;
-      }
-      index.setPopProperties(this);
       this.toggleCalendar();
     };
     this.onRefocus = () => {
@@ -3233,13 +3251,6 @@ const Q2Calendar = class {
         return;
       const clickedDate = removeTimezoneOffset(new Date(dateCell.dataset.date));
       this.selectDate(clickedDate);
-      if (this.isTypeable) {
-        this.setHints({
-          isValid: true,
-          message: `${index.loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(clickedDate)}`,
-          messageType: 'success',
-        });
-      }
       this.closeCalendar();
     };
     this.onDateKeydown = (event) => {
@@ -3314,6 +3325,7 @@ const Q2Calendar = class {
     this.disabled = undefined;
     this.readonly = undefined;
     this.invalid = undefined;
+    this.open = undefined;
     this.typeable = undefined;
     this.clearable = undefined;
     this.placeholder = undefined;
@@ -3325,24 +3337,22 @@ const Q2Calendar = class {
     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);
@@ -3352,6 +3362,7 @@ const Q2Calendar = class {
     this.validateDate();
   }
   componentWillLoad() {
+    this.popDirectionHandler();
     index.handleAriaLabel(this);
   }
   componentDidRender() {
@@ -3363,6 +3374,20 @@ const Q2Calendar = class {
   componentDidLoad() {
     index.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
+      ? index.loc('tecton.element.calendar.hint.format') + ': ' + this.defaultFormatString
+      : index.loc('tecton.element.calendar.hint.select');
+  }
   get canClear() {
     if (this.isTypeable) {
       return this.clearable && !!this.typedValue;
@@ -3470,36 +3495,52 @@ const Q2Calendar = class {
   delegateFocus(event) {
     if (!index.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() {
+    index.handleRenamedProp(this, 'popDirection', 'popoverDirection');
+  }
   ariaLabelObserver() {
     index.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: `${index.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);
@@ -3579,7 +3620,7 @@ const Q2Calendar = class {
   }
   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;
@@ -3599,56 +3640,60 @@ const Q2Calendar = class {
     this.goToMonthYear(date.getMonth(), date.getFullYear());
     this.scheduledAfterRender.push(() => this.focusDay(date));
   }
-  focusDay(date) {
+  async focusDay(date) {
     var _a;
+    if (!date)
+      return;
+    await index.waitForNextPaint();
     (_a = this.calendarBody.querySelector(`td[data-day="${date.getDate()}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
   }
   render() {
-    return (index$1.h("click-elsewhere", { class: `calendar-container${this.dropdownOpen ? ' dropdown-open' : ''}`, onChange: this.onClickElsewhere }, this.calendarField(), index$1.h("div", { ref: el => (this.dropdownContainer = el), "aria-modal": "true", role: "dialog", "aria-label": index.loc('tecton.element.calendar.dialogLabel'), class: `q2-element-dropdown ${this.privatePopDirection === 'up' ? 'dropup' : ''}` }, this.isTypeable && this.hintField(), this.calendarPopUp())));
+    return (index$1.h("click-elsewhere", { class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), index$1.h("q2-popover", { ref: el => (this.popoverElement = el), controlElement: this.innerInputField, open: this.open, direction: this.popoverDirection, "aria-label": index.loc('tecton.element.calendar.dialogLabel'), minHeight: this.popoverMinHeight, block: true }, this.hintField(), this.calendarPopover())));
   }
   hintField() {
-    return (index$1.h("q2-message", { type: this.hintMessageType, class: "calendar-hint" }, this.hintMessage));
+    const messageClasses = ['calendar-hint'];
+    if (!this.isTypeable)
+      messageClasses.push('sr');
+    return (index$1.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: `${index.loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
-      messageType: 'success',
-    });
   }
-  calendarField() {
-    return (index$1.h("q2-input", { ref: el => (this.inputField = 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.dropdownOpen}`, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+  inputField() {
+    return (index$1.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}`, 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 (index$1.h("div", { class: "calendar-field-popup", onKeyUp: this.onPopupKeyup }, this.calendarLabel && index$1.h("p", { class: "calendar-label" }, index.loc(this.calendarLabel)), index$1.h("div", { class: "cal-month-heading" }, index$1.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$1.h("q2-icon", { type: "chevron-left" })), index$1.h("span", { class: "cal-month-text" }, this.monthStrings[monthIndex]), index$1.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$1.h("q2-icon", { type: "chevron-right" })), index$1.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$1.h("q2-icon", { type: "chevron-left" })), index$1.h("span", { class: "cal-year-text" }, this.selectedMonthYear.selectedYear), index$1.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) }, index$1.h("q2-icon", { type: "chevron-right" }))), index$1.h("div", { class: "sr", "aria-live": "polite", id: "table-label" }, `${this.monthStrings[monthIndex]} ${selectedYear}`), this.calendarDays(), this.disclaimer && index$1.h("div", { class: "calendar-disclaimer" }, index.loc(this.disclaimer)), index$1.h("q2-btn", { class: "sr refocus-popup", onFocus: this.onRefocus })));
   }
   calendarDays() {
-    const monthName = this.monthStrings[this.selectedMonthYear.monthIndex];
-    return (index$1.h("table", { role: "grid", "aria-labelledby": "table-label" }, index$1.h("thead", null, index$1.h("tr", null, [...Array(7).keys()].map(index => (index$1.h("th", { scope: "col", abbr: this.dayStrings[index] }, this.dayAbbrStrings[index]))))), index$1.h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (index$1.h("tr", null, week.map(day => {
+    return (index$1.h("table", { role: "grid", "aria-labelledby": "table-label" }, index$1.h("thead", null, index$1.h("tr", null, [...Array(7).keys()].map(index => (index$1.h("th", { scope: "col", "aria-label": this.dayStrings[index] }, this.dayAbbrStrings[index]))))), index$1.h("tbody", { onClick: this.onDateSelection, onKeyDown: this.onDateKeydown, ref: elm => (this.calendarBody = elm), "test-id": "calendarTableBody" }, this.currentWeeks.map(week => (index$1.h("tr", null, week.map(day => {
       var _a;
-      let ariaLabel = `${monthName} ${day.integer}`;
+      let ariaLabel = '';
+      if (day.isToday)
+        ariaLabel = `${index.loc('tecton.element.calendar.today')}, `;
+      ariaLabel += formatDateFull(day.date);
       if (day.isSelected)
         ariaLabel += ` (${index.loc('tecton.element.calendar.selected')})`;
-      return (index$1.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$1.h("div", { class: "today-decorator" }, index.loc('tecton.element.calendar.today'))), index$1.h("div", { "aria-label": ariaLabel }, (_a = day === null || day === void 0 ? void 0 : day.integer) !== null && _a !== void 0 ? _a : '')));
+      return (index$1.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$1.h("div", { class: "today-decorator", "aria-hidden": "true" }, index.loc('tecton.element.calendar.today'))), index$1.h("div", { "aria-label": ariaLabel }, (_a = day === null || day === void 0 ? void 0 : day.integer) !== null && _a !== void 0 ? _a : '')));
     })))))));
   }
   get hostElement() { return index$1.getElement(this); }
   static get watchers() { return {
+    "popDirection": ["popDirectionHandler"],
     "ariaLabel": ["ariaLabelObserver"],
+    "typeable": ["typeableChanged"],
     "value": ["valueObserver"],
     "daysOfWeekChecksum": ["daysOfWeekChecksumObserver"],
     "validDates": ["validDatesObserver"],

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host{display:block}.container{position:relative;width:100%;text-align:start;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0;--comp-bar-width:var(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));--comp-card-padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)))}.container.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}.container.has-avatar{grid-template-columns:var(--comp-avatar-size) 1fr;--tct-avatar-width:var(--comp-avatar-size);--tct-avatar-height:var(--comp-avatar-size);--tct-icon-size:var(--comp-avatar-size)}:host([bar][is-static]) .container{padding-left:var(--comp-card-padding)}.container:is(button),.container:is(a){--comp-border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));--comp-border-width:var(--tct-card-border-width, var(--t-card-border-width, 0px));cursor:pointer;border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--comp-card-padding);text-decoration:none;border-width:var(--comp-border-width);border-color:var(--tct-card-border-color, var(--t-card-border-color, transparent));border-style:solid;border-radius:var(--comp-border-radius);transition:box-shadow var(--tct-tween-1, var(--app-tween-1, 0.2s ease));box-shadow:var(--tct-card-box-shadow, var(--t-card-box-shadow, var(--app-shadow-2, 0 3px 6px rgba(0, 0, 0, 0.3))))}@media (hover: hover){.container:is(button),.container:is(a){--comp-card-hover-box-shadow:var(--tct-card-hover-box-shadow, var(--t-card-hover-box-shadow, var(--app-shadow-3, 0 4px 12px rgba(0, 0, 0, 0.3))))}.container:is(button):hover,.container:is(button):active,.container:is(button):focus,.container:is(a):hover,.container:is(a):active,.container:is(a):focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));box-shadow:var(--const-double-focus-ring)}.container:is(button):hover,.container:is(a):hover{box-shadow:var(--comp-card-hover-box-shadow)}.container:is(button):focus:hover,.container:is(a):focus:hover{box-shadow:var(--const-double-focus-ring), var(--comp-card-hover-box-shadow)}.container:is(button):active,.container:is(a):active{box-shadow:var(--tct-card-active-box-shadow, var(--t-card-active-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}}.container:is(button).is-touch,.container:is(a).is-touch{--comp-chevron-size:var(--tct-card-chevron-size, var(--t-card-chevron-size, 26px));grid-template-columns:1fr var(--comp-chevron-size)}.container:is(button).has-avatar.is-touch,.container:is(a).has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.content{overflow:hidden;display:grid;gap:var(--tct-card-content-gap, var(--t-card-content-gap, var(--app-scale-1x, 5px)));align-content:start}h3,p{margin:0;padding:0;line-height:var(--tct-card-font-height, var(--t-card-font-height, 20px))}h3{font-weight:var(--tct-card-font-weight, var(--t-card-font-weight, 600));font-size:var(--tct-card-font-size, var(--t-card-font-size, 17px));text-overflow:ellipsis;overflow:hidden;white-space:nowrap}p{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.bar{--comp-bar-border-radius:calc(var(--comp-border-radius) - var(--comp-border-width));border-radius:var(--comp-bar-border-radius) 0 0 var(--comp-bar-border-radius);position:absolute;inset:0 auto auto 0;width:var(--comp-bar-width);background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
 

package/dist/cjs/q2-carousel-pane.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}q2-carousel .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;transition:all 0.2s}q2-carousel-pane.q2-carousel-pane{--comp-carousel-pane-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-carousel-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));cursor:grab}q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) *{cursor:pointer}q2-carousel-pane.q2-carousel-pane:focus{box-shadow:none}q2-carousel-pane.q2-carousel-pane:focus .q2-carousel-pane-main-content{outline:none;box-shadow:var(--const-double-focus-ring)}q2-carousel-pane.q2-carousel-pane button{border:0;background:transparent;transition:all 0.2s;opacity:0.3;cursor:pointer}q2-carousel-pane.q2-carousel-pane button:hover{opacity:0.7}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--comp-carousel-shadow);transition:var(--comp-carousel-pane-tween);background-color:var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff))));border:var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));border-radius:var(--tct-carousel-pane-border-radius, var(--t-carousel-pane-border-radius, 8px));padding:var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 0.5rem 0.5rem 0.5rem 0.5rem));height:var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover{box-shadow:var(--const-double-focus-ring), var(--comp-carousel-shadow)}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-734296a7.js');
-const index$2 = require('./index-ffd19146.js');
+const index$2 = require('./index-7a73e106.js');
 
 /**
  * SSR Window 4.0.2

package/dist/cjs/q2-chart-area.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 const charting = require('./charting-d02cba1f.js');
 const installCanvasRenderer = require('./installCanvasRenderer-6c4fbcc9.js');
 

package/dist/cjs/q2-chart-bar.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 const charting = require('./charting-d02cba1f.js');
 const installCanvasRenderer = require('./installCanvasRenderer-6c4fbcc9.js');
 const installLabelLayout = require('./installLabelLayout-d6b548fe.js');

package/dist/cjs/q2-chart-donut.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 const installCanvasRenderer = require('./installCanvasRenderer-6c4fbcc9.js');
 const installLabelLayout = require('./installLabelLayout-d6b548fe.js');
 

package/dist/cjs/q2-checkbox-group.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host{margin-top:var(--tct-scale-2, var(--app-scale-2x, 10px))}fieldset{padding:var(--tct-input-error-padding, 0);margin:0;border:0}fieldset.has-error{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));border-width:1px;border-style:solid;border-radius:var(--tct-border-radius-1, var(--app-border-radius-1, 2px));position:relative}fieldset.has-error .error-icon-container{top:8px;right:8px;position:absolute;width:40%;text-align:right;background:linear-gradient(to right, var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))), var(--tct-checkbox-group-error-gradient-end, var(--t-base, white)))}fieldset.has-error legend+div.error-icon-container.no-label{top:28px}.group-legend{font-weight:600}legend.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.optional-tag{margin-left:var(--tct-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)));color:var(--tct-input-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666)))))));font-size:var(--tct-input-label-optional-font-size, 12px);font-weight:var(--tct-input-label-optional-font-weight, 400)}.flexed{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.flexed.left{justify-content:left}";
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}:host{display:block;position:relative;padding:var(--tct-checkbox-vertical-padding, var(--t-checkbox-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0}.container{--comp-checkbox-size:var(--tct-checkbox-size, var(--t-checkbox-size, 20px));--comp-checkbox-default-column-gap:var(--app-scale-2x, 10px);--comp-checkbox-default-row-gap:0;--comp-checkbox-default-gap:var(--comp-checkbox-default-row-gap) var(--comp-checkbox-default-column-gap);--comp-checkbox-tween:var(--tct-tween-1, var(--app-tween-1, 0.2s ease));--comp-checkbox-toggle-width:var(--tct-checkbox-toggle-width, var(--t-checkbox-toggle-width, 46px));--comp-checkbox-gap:var(--tct-checkbox-gap, var(--t-checkbox-gap, var(--comp-checkbox-default-gap)));--comp-checkbox-outer-stroke-color:var(--tct-checkbox-outer-stroke-color, var(--t-checkbox-outer-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-outer-fill-color:var(--tct-checkbox-outer-fill-color, var(--t-checkbox-outer-fill-color, var(--tct-white, var(--app-white, #ffffff))));--comp-checkbox-checked-color:var(--tct-checkbox-check-stroke-color, var(--t-checkbox-check-stroke-color, var(--t-checkbox-fill, var(--t-a11y-active-gray-color-AA, #404040))));--comp-control-width:var(--comp-checkbox-size);display:grid;grid-template-areas:\"svg label\" \"svg description\";align-items:center;gap:var(--comp-checkbox-gap);grid-template-columns:var(--comp-control-width) calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap))}:host([type=favorite]) .container{--comp-checkbox-favorite-stroke-color:var(--tct-checkbox-favorite-stroke-color, var(--t-checkbox-favorite-stroke-color, var(--t-a11y-gray-color-AA, #949494)));--comp-checkbox-favorite-fill-color:var(--tct-checkbox-favorite-fill-color, var(--t-checkbox-favorite-fill-color, #db7d24))}:host([type=toggle]) .container{--comp-control-width:var(--comp-checkbox-toggle-width)}:host([alignment=right]) .container,:host([type=toggle]:not([alignment])) .container{grid-template-areas:\"label svg\" \"description svg\";grid-template-columns:calc(100% - var(--comp-control-width) - var(--comp-checkbox-default-column-gap)) var(--comp-control-width)}.label-control{align-items:center;display:flex}.label-text{grid-area:label}:host([description]) .label-text{font-weight:var(--tct-checkbox-label-font-weight, var(--t-checkbox-label-font-weight, 600))}:host([checked]) .label-text{font-weight:var(--tct-checkbox-checked-label-font-weight, var(--t-checkbox-checked-label-font-weight, 600))}.description-text{grid-area:description;font-weight:var(--tct-checkbox-description-font-weight, var(--t-checkbox-description-font-weight, 400))}label{color:var(--tct-checkbox-label-color);cursor:pointer}:host([disabled]:not([disabled=false])),:host([group-disabled]){opacity:var(--tct-checkbox-disabled-opacity, var(--t-checkbox-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}:host([disabled]:not([disabled=false])) label,:host([group-disabled]) label{cursor:not-allowed}.checkbox-icon{--t-icon-stroke-primary:var(--comp-checkbox-outer-stroke-color);width:var(--comp-checkbox-size);height:var(--comp-checkbox-size);border-radius:var(--tct-checkbox-outer-border-radius, var(--t-checkbox-outer-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));stroke:var(--comp-checkbox-outer-stroke-color);color:var(--comp-checkbox-outer-stroke-color);stroke-width:var(--tct-checkbox-outer-stroke-width, var(--t-checkbox-outer-stroke-width, 2));fill:var(--comp-checkbox-outer-fill-color);flex-shrink:0}:host([checked]) .checkbox-icon{fill:var(--tct-checkbox-checked-outer-fill-color, var(--t-checkbox-checked-outer-fill-color, var(--comp-checkbox-outer-fill-color)));stroke:var(--tct-checkbox-checked-outer-stroke-color, var(--t-checkbox-checked-outer-stroke-color, var(--comp-checkbox-outer-stroke-color)))}:host(:focus-within) .checkbox-icon{box-shadow:var(--const-double-focus-ring), var(--tct-global-focus, 0 0 0 2px #33b4ff);stroke:var(--tct-checkbox-focused-outer-stroke-color, var(--t-checkbox-focused-outer-stroke-color, var(--comp-checkbox-checked-color)))}:host([type=favorite]) .checkbox-icon{--tct-icon-stroke-width:var(--tct-checkbox-favorite-stroke-width, var(--t-checkbox-favorite-stroke-width, 1));--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([type=favorite]:focus-within) .checkbox-icon,:host([type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}:host([checked][type=favorite]) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-fill-color);fill:var(--comp-checkbox-favorite-fill-color);transition:fill var(--comp-checkbox-tween), color var(--comp-checkbox-tween), stroke var(--comp-checkbox-tween)}:host([checked][type=favorite]:focus-within) .checkbox-icon,:host([checked][type=favorite]:hover) .checkbox-icon{--tct-icon-stroke-primary:var(--comp-checkbox-favorite-stroke-color);--tct-icon-fill-primary:var(--comp-checkbox-favorite-fill-color);--tct-icon-stroke-width:var(--tct-checkbox-favorite-hover-stroke-width, var(--t-checkbox-favorite-hover-stroke-width, 2))}.checkbox-fill{stroke:var(--comp-checkbox-checked-color)}.checked-fill{stroke-width:var(--tct-checkbox-check-stroke-width, var(--t-checkbox-check-stroke-width, 2.5));stroke-linecap:round;stroke-linejoin:round}:host([type=toggle]) .checked-fill{stroke:var(--tct-checkbox-toggle-icon-stroke, var(--t-checkbox-toggle-icon-stroke, var(--tct-white, var(--app-white, #ffffff))));transition:opacity var(--comp-checkbox-tween)}:host([type=toggle][checked]) .checked-fill{stroke:var(--tct-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-toggle-checked-icon-stroke, var(--t-checkbox-text, var(--tct-white, var(--app-white, #ffffff)))))}.indeterminate-fill{stroke-width:var(--tct-checkbox-indeterminate-stroke-width, var(--t-checkbox-indeterminate-stroke-width, 3.5))}.toggle-svg{height:30px;width:var(--comp-checkbox-toggle-width);position:relative;text-align:initial}.toggle-track,.toggle-indicator{position:absolute;top:50%;transform:translateY(-50%)}.toggle-track{fill:var(--tct-checkbox-toggle-track-color, var(--t-checkbox-toggle-track-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:14px;width:46px}:host([checked]) .toggle-track{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));opacity:0.5}.toggle-indicator{transition:left var(--comp-checkbox-tween);height:30px;width:30px;left:0;border-radius:50%}:host([checked]) .toggle-indicator{left:21px}.toggle-circle{fill:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .toggle-circle{fill:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)))}:host(:focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-checked-color, var(--t-checkbox-toggle-checked-color, var(--comp-checkbox-checked-color)));stroke-width:10px;stroke-opacity:0.5}:host(:not([checked]):focus-within) .toggle-circle{stroke:var(--tct-checkbox-toggle-circle-color, var(--t-checkbox-toggle-circle-color, var(--t-a11y-gray-color-AA, #949494)))}:host([checked]) .off,:host(:not([checked])) .on{opacity:0}";
 

package/dist/cjs/q2-dropdown-item.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-734296a7.js');
-const index$1 = require('./index-ffd19146.js');
+const index$1 = require('./index-7a73e106.js');
 
 const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}: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}.dropdown-separator{--comp-default-separator-margin:0 var(--tct-scale-1, var(--app-scale-3x, 15px));margin:var(--tct-dropdown-separator-margin, var(--t-dropdown-separator-margin, var(--comp-default-separator-margin)));border-bottom:1px solid var(--tct-dropdown-item-separator-color, var(--t-dropdown-item-separator-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))))}.dropdown-item-wrapper{display:flex}.dropdown-item{min-height:44px;flex:1 1 100%;padding:var(--tct-dropdown-item-padding, var(--t-dropdown-item-padding, 2px))}.dropdown-item-content{--comp-default-content-padding:12px var(--app-scale-3x, 15px);padding:var(--tct-dropdown-item-content-padding, var(--t-dropdown-item-content-padding, var(--comp-default-content-padding)));text-align:left;background-color:var(--tct-dropdown-item-bg, var(--t-dropdown-item-bg, var(--tct-white, var(--t-base, var(--app-white, #ffffff)))));color:var(--tct-dropdown-item-font-color, var(--t-dropdown-item-font-color, inherit));transition:background-color var(--tct-dropdown-item-content-tween, var(--t-dropdown-item-content-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));overflow:hidden;text-overflow:ellipsis;flex:1}:host(:not([disabled])) .dropdown-item-content:hover,:host(:not([disabled])) .dropdown-item:focus-within .dropdown-item-content{background-color:var(--tct-dropdown-item-selected-bg, var(--t-dropdown-item-selected-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, var(--t-base, #f2f2f2)))))));color:var(--tct-dropdown-item-selected-font-color, var(--t-dropdown-item-selected-font-color, inherit))}.remove-dropdown-item{flex:0 0 44px;margin:2px}";