npm - q2-tecton-elements - Versions diffs - 1.27.1 → 1.28.0 - Mend

q2-tecton-elements 1.27.1 → 1.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (156) hide show

package/dist/components/q2-calendar.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isMobile, a as isEventFromElement } from './index15.js';
-import { d as defineCustomElement$8 } from './index2.js';
-import { d as defineCustomElement$7 } from './index4.js';
-import { d as defineCustomElement$6 } from './index5.js';
-import { d as defineCustomElement$5 } from './index7.js';
-import { d as defineCustomElement$4 } from './index8.js';
-import { d as defineCustomElement$3 } from './index9.js';
-import { d as defineCustomElement$2 } from './index10.js';
+import { l as loc, h as handleAriaLabel, o as overrideFocus, i as isMobile, a as isEventFromElement, b as handleRenamedProp, w as waitForNextPaint } from './index15.js';
+import { d as defineCustomElement$9 } from './index2.js';
+import { d as defineCustomElement$8 } from './index4.js';
+import { d as defineCustomElement$7 } from './index5.js';
+import { d as defineCustomElement$6 } from './index7.js';
+import { d as defineCustomElement$5 } from './index8.js';
+import { d as defineCustomElement$4 } from './index9.js';
+import { d as defineCustomElement$3 } from './index10.js';
+import { d as defineCustomElement$2 } from './index14.js';
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -2667,27 +2668,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
@@ -3045,7 +3072,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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -3057,38 +3084,31 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.success = 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 = 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) => {
@@ -3121,10 +3141,11 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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;
@@ -3198,10 +3219,8 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     };
     this.onInputClick = () => {
-      if (this.disabled) {
+      if (this.disabled)
         return;
-      }
-      setPopProperties(this);
       this.toggleCalendar();
     };
     this.onRefocus = () => {
@@ -3238,13 +3257,6 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         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) => {
@@ -3319,6 +3331,7 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.disabled = undefined;
     this.readonly = undefined;
     this.invalid = undefined;
+    this.open = undefined;
     this.typeable = undefined;
     this.clearable = undefined;
     this.placeholder = undefined;
@@ -3330,24 +3343,22 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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);
@@ -3357,6 +3368,7 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.validateDate();
   }
   componentWillLoad() {
+    this.popDirectionHandler();
     handleAriaLabel(this);
   }
   componentDidRender() {
@@ -3368,6 +3380,20 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   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;
@@ -3475,36 +3501,52 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   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);
@@ -3584,7 +3626,7 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   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;
@@ -3604,56 +3646,60 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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 : '')));
     })))))));
   }
   get hostElement() { return this; }
   static get watchers() { return {
+    "popDirection": ["popDirectionHandler"],
     "ariaLabel": ["ariaLabelObserver"],
+    "typeable": ["typeableChanged"],
     "value": ["valueObserver"],
     "daysOfWeekChecksum": ["daysOfWeekChecksumObserver"],
     "validDates": ["validDatesObserver"],
@@ -3671,6 +3717,7 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "disabled": [516],
     "readonly": [516],
     "invalid": [1540],
+    "open": [1540],
     "typeable": [516],
     "clearable": [516],
     "placeholder": [513],
@@ -3682,26 +3729,27 @@ const Q2Calendar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "endDate": [513, "end-date"],
     "cutoffTime": [513, "cutoff-time"],
     "daysOfWeekChecksum": [514, "days-of-week-checksum"],
-    "popDirection": [513, "pop-direction"],
     "assume": [513],
     "errors": [1040],
     "invalidDates": [16],
     "validDates": [16],
+    "popoverDirection": [1025, "popover-direction"],
+    "popoverMinHeight": [2, "popover-min-height"],
+    "popDirection": [513, "pop-direction"],
     "onsuccess": [16],
     "buttonLabel": [513, "button-label"],
-    "ariaLabel": [513, "aria-label"],
-    "dropdownOpen": [32],
+    "ariaLabel": [1537, "aria-label"],
     "keyboardSelection": [32],
     "typedValue": [32],
     "dateList": [32],
     "hintMessage": [32],
     "hintMessageType": [32]
-  }, [[0, "change", "defaultChangeHandler"], [0, "error", "defaultErrorHandler"], [0, "success", "defaultSuccessHandler"], [0, "focus", "delegateFocus"], [0, "clear", "handleClear"]]]);
+  }, [[0, "change", "defaultChangeHandler"], [0, "error", "defaultErrorHandler"], [0, "success", "defaultSuccessHandler"], [0, "focus", "delegateFocus"], [0, "clear", "handleClear"], [0, "popoverStateChanged", "popoverStateHandler"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["q2-calendar", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-message"];
+  const components = ["q2-calendar", "click-elsewhere", "q2-badge", "q2-btn", "q2-icon", "q2-input", "q2-loading", "q2-message", "q2-popover"];
   components.forEach(tagName => { switch (tagName) {
     case "q2-calendar":
       if (!customElements.get(tagName)) {
@@ -3710,35 +3758,40 @@ function defineCustomElement$1() {
       break;
     case "click-elsewhere":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "q2-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "q2-btn":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "q2-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "q2-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "q2-loading":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "q2-message":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-popover":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/q2-card.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { b as isTouchDevice, o as overrideFocus, a as isEventFromElement } from './index15.js';
+import { c as isTouchDevice, o as overrideFocus, a as isEventFromElement } from './index15.js';
 import { d as defineCustomElement$3 } from './index3.js';
 import { d as defineCustomElement$2 } from './index7.js';

package/dist/components/q2-carousel.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as createGuid, l as loc, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus } from './index15.js';
+import { d as createGuid, l as loc, h as handleAriaLabel, a as isEventFromElement, o as overrideFocus } from './index15.js';
 import { d as defineCustomElement$4 } from './index5.js';
 import { d as defineCustomElement$3 } from './index7.js';
 import { d as defineCustomElement$2 } from './index9.js';

package/dist/components/q2-checkbox-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createGuid, l as loc } from './index15.js';
+import { d as createGuid, l as loc } from './index15.js';
 import { d as defineCustomElement$2 } from './index7.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/components/q2-checkbox.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { c as createGuid, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement, l as loc } from './index15.js';
+import { d as createGuid, h as handleAriaLabel, o as overrideFocus, a as isEventFromElement, l as loc } from './index15.js';
 import { d as defineCustomElement$2 } from './index7.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}";