q2-tecton-elements 1.12.1 → 1.13.1

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-be8376c0.js';
-import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-fa32f694.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-dbfb3ecc.js';
+import { l as loc, s as setPopProperties, h as handleAriaLabel, o as overrideFocus, i as isEventFromElement } from './index-0ff8de52.js';
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -2764,7 +2764,7 @@ function formatDateShort(value) {
     month: '2-digit',
     day: '2-digit',
     year: 'numeric',
-    timeZone: 'UTC'
+    timeZone: 'UTC',
   }).format(new Date(isoDate));
 }
 function formatDateLong(value) {
@@ -2774,7 +2774,7 @@ function formatDateLong(value) {
   return new Intl.DateTimeFormat('default', {
     month: 'short',
     day: 'numeric',
-    year: 'numeric'
+    year: 'numeric',
   }).format(date);
 }
 function convertMomentFormat(stringFormat) {
@@ -2794,7 +2794,7 @@ function stringToDate(date) {
     return undefined;
   }
   let result;
-  let dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
+  const dateParts = date.split(/[\/\-]/).map(part => part.padStart(2, '0'));
   const isIsoString = isString && date.length >= 24 && date[10] === 'T';
   const isCompleteDate = dateParts.length === 3;
   const isPartialDate = dateParts.length < 3;
@@ -2849,7 +2849,7 @@ function setupMonthYear(value = new Date()) {
   const monthIndex = Number(value.toISOString().split('-')[1]) - 1;
   return {
     monthIndex,
-    selectedYear: value.getFullYear()
+    selectedYear: value.getFullYear(),
   };
 }
 function validateInput(input = '', validDays = [], validDates = [], // white list
@@ -2893,14 +2893,10 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     if (input.length >= 5 && !isAvailable) {
       isValid$1 = false;
       messageType = 'error';
-      if (!monthName || !date || !year) {
-        message = `${loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`;
-      }
-      else {
-        message = loc('tecton.element.calendar.hint.notAvailableDate', [
-          formatDateLong(inputDate)
-        ]);
-      }
+      const isInvalid = !monthName || !date || !year;
+      message = isInvalid
+        ? `${loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`
+        : loc('tecton.element.calendar.hint.notAvailableDate', [formatDateLong(inputDate)]);
     }
   }
   else {
@@ -2914,19 +2910,19 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     message,
     inputDate,
     isAvailable,
-    calendarPosition
+    calendarPosition,
   };
 }
 function buildInputDate(input, assume) {
   const now = new Date();
-  let [month, day, year] = input.split('/');
+  const [month, day, year] = input.split('/');
   if (input.length === 10) {
     return new Date(input);
   }
   else if (month && day && Number(day) > 0) {
-    day = Number(day) < 10 ? `0${Number(day)}` : day;
-    year = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
-    return new Date(`${month}/${day}/${year}`);
+    const twoDigitDay = Number(day) < 10 ? `0${Number(day)}` : day;
+    const fourDigitYear = !year || year.length < 4 ? assumeYear(month, day, assume) : year;
+    return new Date(`${month}/${twoDigitDay}/${fourDigitYear}`);
   }
   else if (month && day && Number(day) === 0) {
     return new Date(''); // invalid date: 09/0/2021
@@ -2980,7 +2976,7 @@ function getDays() {
     loc('tecton.element.calendar.days.short.Wednesday'),
     loc('tecton.element.calendar.days.short.Thursday'),
     loc('tecton.element.calendar.days.short.Friday'),
-    loc('tecton.element.calendar.days.short.Saturday')
+    loc('tecton.element.calendar.days.short.Saturday'),
   ];
 }
 function getDaysOfWeek() {
@@ -2991,7 +2987,7 @@ function getDaysOfWeek() {
     loc('tecton.element.calendar.days.Wednesday'),
     loc('tecton.element.calendar.days.Thursday'),
     loc('tecton.element.calendar.days.Friday'),
-    loc('tecton.element.calendar.days.Saturday')
+    loc('tecton.element.calendar.days.Saturday'),
   ];
 }
 function getMonths() {
@@ -3007,7 +3003,7 @@ function getMonths() {
     loc('tecton.element.calendar.months.September'),
     loc('tecton.element.calendar.months.October'),
     loc('tecton.element.calendar.months.November'),
-    loc('tecton.element.calendar.months.December')
+    loc('tecton.element.calendar.months.December'),
   ];
 }
 
@@ -3019,6 +3015,7 @@ function generateDatesFromMonthYear(month, year) {
   }, []);
 }
 function getValidDaysOfWeek(checksum = 127) {
+  /* tslint:disable:no-bitwise */
   const sunValid = checksum & 1;
   const monValid = checksum & 2;
   const tuesValid = checksum & 4;
@@ -3026,6 +3023,7 @@ function getValidDaysOfWeek(checksum = 127) {
   const thursValid = checksum & 16;
   const friValid = checksum & 32;
   const satValid = checksum & 64;
+  /* tslint:enable:no-bitwise */
   const ret = [];
   if (checksum <= 0)
     return ret;
@@ -3093,7 +3091,7 @@ function getDayState(dayInMonth, dateValidators, currentDate) {
   const isEndDate = isSameDay(dayInMonth, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate);
   return { isSelected, isToday, isStartDate, isEndDate };
 }
-function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate }) {
+function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate, }) {
   const classes = [];
   if (!isInvalid)
     classes.push('is-valid');
@@ -3127,7 +3125,7 @@ const emptyDate = {
   isSelected: false,
   isStartDate: false,
   isEndDate: false,
-  classList: ''
+  classList: '',
 };
 function addEmptyDates(from, to) {
   if (from === 7)
@@ -3135,7 +3133,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-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);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{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-list(--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-2, 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}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}td.is-valid:hover{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]{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:inset 2px 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), inset -2px -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-2, 10px)));text-align:left}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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);color:var(--t-font-color);left:0;width:100%;z-index:100;margin-top:1px;box-shadow:var(--app-shadow-1);height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--app-tween-1);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{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-2, 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}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000))}td.is-valid:hover{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]{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:inset 2px 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), inset -2px -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-2, 10px)));text-align:left}";
 
 const Q2Calendar = class {
   constructor(hostRef) {
@@ -3302,7 +3300,7 @@ const Q2Calendar = class {
       const newYear = removeTimezoneOffset(new Date(year, monthIndex));
       this.selectedMonthYear = {
         monthIndex: newYear.getMonth(),
-        selectedYear: newYear.getFullYear()
+        selectedYear: newYear.getFullYear(),
       };
       this.dateList = this.buildDateList(this.selectedMonthYear);
       this.scheduledAfterRender.push(() => this.checkActiveCellForBlankness());
@@ -3390,9 +3388,7 @@ const Q2Calendar = class {
     };
   }
   resizeIframe() {
-    return (window.TectonElements &&
-      window.TectonElements.resizeIframe &&
-      window.TectonElements.resizeIframe());
+    return window.TectonElements && window.TectonElements.resizeIframe && window.TectonElements.resizeIframe();
   }
   connectedCallback() {
     this.selectedMonthYear = setupMonthYear(this.dateValue);
@@ -3427,9 +3423,7 @@ const Q2Calendar = class {
   }
   get localizedErrors() {
     return ((Array.isArray(this.errors) &&
-      this.errors
-        .filter((error) => error)
-        .map((error) => error && loc(error))) ||
+      this.errors.filter((error) => error).map((error) => error && loc(error))) ||
       []);
   }
   get formattedValue() {
@@ -3444,7 +3438,7 @@ const Q2Calendar = class {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
-      timeZone: 'UTC'
+      timeZone: 'UTC',
     }).format(dateValue);
   }
   get computedPlaceholder() {
@@ -3466,9 +3460,7 @@ const Q2Calendar = class {
       if (isMoment)
         return value.toDate();
       // stringified moment value assigned in html template e.g.) handlebar
-      const isMomentString = typeof value === 'string' &&
-        value.split(' ').length === 6 &&
-        /GMT-\d{4}/g.test(value);
+      const isMomentString = typeof value === 'string' && value.split(' ').length === 6 && /GMT-\d{4}/g.test(value);
       if (isMomentString) {
         value = formatDateISO(value);
       }
@@ -3480,7 +3472,7 @@ const Q2Calendar = class {
     return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: isValid(ct) ? ct : undefined
+      cutOffTime: isValid(ct) ? ct : undefined,
     };
   }
   get isTypeable() {
@@ -3497,8 +3489,7 @@ const Q2Calendar = class {
   }
   defaultErrorHandler(event) {
     if (event.target === this.hostElement && !this.hostElement.onerror) {
-      if (Array.isArray(this.errors) &&
-        this.errors.includes('tecton.element.calendar.invalidDate')) {
+      if (Array.isArray(this.errors) && this.errors.includes('tecton.element.calendar.invalidDate')) {
         return;
       }
       this.errors = (this.errors || []).concat(['tecton.element.calendar.invalidDate']);
@@ -3512,8 +3503,7 @@ const Q2Calendar = class {
       this.onsuccess(event);
     }
     else {
-      if (Array.isArray(this.errors) &&
-        this.errors.includes('tecton.element.calendar.invalidDate')) {
+      if (Array.isArray(this.errors) && this.errors.includes('tecton.element.calendar.invalidDate')) {
         this.errors = this.errors.filter(x => x !== 'tecton.element.calendar.invalidDate');
       }
     }
@@ -3536,9 +3526,7 @@ const Q2Calendar = class {
       this.typedValue = newValueAsString;
     }
     else {
-      const dateValue = isMoment
-        ? newValue.toDate()
-        : stringToDate(newValue);
+      const dateValue = isMoment ? newValue.toDate() : stringToDate(newValue);
       this.inputField.value = formatDateShort(dateValue);
       this.selectedMonthYear = setupMonthYear(dateValue);
       this.dateList = this.buildDateList(this.selectedMonthYear);
@@ -3595,22 +3583,21 @@ const Q2Calendar = class {
         else {
           calculationDateList = this.buildDateList({
             monthIndex: month,
-            selectedYear: year
+            selectedYear: year,
           });
         }
         const dateValueDayOfMonth = (_c = dateValue === null || dateValue === void 0 ? void 0 : dateValue.getDate()) !== null && _c !== void 0 ? _c : undefined;
         const isDateValueInvalid = dateValueDayOfMonth
-          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth)
-            .isValid
+          ? !calculationDateList.find(({ integer }) => integer === dateValueDayOfMonth).isValid
           : true;
         if (isDateValueInvalid) {
           this.error.emit({
             errors: [
               {
                 message: `Value passed is invalid: The date ${this.value} is not valid`,
-                errorCode: 'generalInvalid'
-              }
-            ]
+                errorCode: 'generalInvalid',
+              },
+            ],
           });
         }
         else {
@@ -3619,7 +3606,7 @@ const Q2Calendar = class {
       }
     }
     catch (error) {
-      console.log('Invalid moment value ', this.dateValue);
+      console.warn('Invalid moment value ', this.dateValue);
     }
   }
   focusInput() {
@@ -3628,16 +3615,12 @@ const Q2Calendar = class {
   }
   checkActiveCellForBlankness() {
     const activeElement = this.hostElement.shadowRoot.activeElement;
-    if (!activeElement ||
-      activeElement.tagName !== 'TD' ||
-      !activeElement.hasAttribute('aria-hidden'))
+    if (!activeElement || activeElement.tagName !== 'TD' || !activeElement.hasAttribute('aria-hidden'))
       return;
     const { calendarBody } = this;
     const calendarCells = Array.from(calendarBody.querySelectorAll('td'));
     const indexOfCell = Array.from(calendarCells).indexOf(activeElement);
-    const dayToFocus = indexOfCell < 15
-      ? 1
-      : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
+    const dayToFocus = indexOfCell < 15 ? 1 : calendarCells.filter(cell => !cell.hasAttribute('aria-hidden')).length;
     this.focusDay(this.generateDateFromDay(dayToFocus));
   }
   generateDateFromDay(day) {
@@ -3673,11 +3656,11 @@ const Q2Calendar = class {
     this.setHints({
       isValid: true,
       message: `${loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
-      messageType: 'success'
+      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, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+    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, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: `${!!this.dropdownOpen}`, 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" }));
   }

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

@@ -1,8 +1,26 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-be8376c0.js';
-import { a as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index-fa32f694.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-dbfb3ecc.js';
+import { a as isTouchDevice, o as overrideFocus, i as isEventFromElement } from './index-0ff8de52.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}button,a{width:100%;text-align:start;cursor:pointer;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));text-decoration:none;border-radius:var(--tct-card-border-radius, var(--t-card-border-radius, var(--app-border-radius-1, 3px)));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))));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0}@media (hover: hover){button:hover,button:active,button:focus,a:hover,a:active,a:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)))}button:hover,a: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))))}button:active,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))))}}button.is-small,a.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}button.is-touch,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)}button.has-avatar,a.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)}button.has-avatar.is-touch,a.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.container{overflow:hidden;display:grid;gap:var(--tct-card-container-gap, var(--t-card-container-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}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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}button,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));position:relative;width:100%;text-align:start;cursor:pointer;height:100%;display:grid;gap:var(--tct-card-gap, var(--t-card-gap, var(--app-scale-3x, 15px)));margin:0;border:none;background:var(--tct-card-background, var(--t-card-background, var(--t-base, #ffffff)));padding:var(--tct-card-padding, var(--t-card-padding, var(--app-scale-4x, 20px)));color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)));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))));--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 44px));--comp-chevron-size:0}@media (hover: hover){button:hover,button:active,button:focus,a:hover,a:active,a:focus{color:var(--tct-card-color, var(--t-card-color, var(--t-text, #4d4d4d)))}button:hover,a: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))))}button:active,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))))}}button.is-small,a.is-small{--comp-avatar-size:var(--tct-card-avatar-size, var(--t-card-avatar-size, 26px))}button.is-touch,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)}button.has-avatar,a.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)}button.has-avatar.is-touch,a.has-avatar.is-touch{grid-template-columns:var(--comp-avatar-size) 1fr var(--comp-chevron-size)}.container{overflow:hidden;display:grid;gap:var(--tct-card-container-gap, var(--t-card-container-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(--tct-card-bar-width, var(--t-card-bar-width, var(--app-scale-2x, 10px)));background:var(--comp-bar-color);height:100%}.touch-indicator{align-self:center;--tct-icon-size:var(--comp-chevron-size)}";
 
+const SUPPORTED_THEME_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'accent-1',
+  'accent-2',
+  'accent-3',
+  'accent-4',
+  'accent-5',
+  'accent-6',
+  'accent-7',
+  'accent-8',
+  'accent-9',
+  'accent-10',
+  'accent-11',
+  'accent-12',
+];
+const STOPLIGHT_COLORS = ['info', 'success', 'warning', 'alert'];
 const Q2Card = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -18,6 +36,9 @@ const Q2Card = class {
       this.click.emit();
     };
   }
+  componentWillLoad() {
+    this.checkBar();
+  }
   componentDidLoad() {
     const { hostElement, clickableElement } = this;
     hostElement.click = () => clickableElement.click();
@@ -33,6 +54,20 @@ const Q2Card = class {
       return;
     this.clickableElement.focus();
   }
+  checkBar() {
+    const { bar } = this;
+    if (!bar)
+      return;
+    if (SUPPORTED_THEME_COLORS.includes(bar)) {
+      this.barColor = `var(--t-${bar})`;
+    }
+    else if (STOPLIGHT_COLORS.includes(bar)) {
+      this.barColor = `var(--const-stoplight-${bar})`;
+    }
+    else {
+      this.barColor = bar;
+    }
+  }
   determineAutoTouch() {
     if (this.hostElement.hasAttribute('is-touch'))
       return;
@@ -58,11 +93,11 @@ const Q2Card = class {
     }
   }
   generateContent() {
-    return (h(Fragment, null, this.generateAvatar(), h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description)), this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+    return (h(Fragment, null, this.bar && (h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })), this.generateAvatar(), h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && h("h3", { "test-id": "title" }, this.title), this.description && h("p", { "test-id": "description" }, this.description)), this.isTouch && (h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
   }
   generateContainerClasses() {
     const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
-    let result = [];
+    const result = [];
     const showSmall = isSmall || isAutoSmall;
     const showTouch = isTouch || isAutoTouch;
     const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
@@ -79,6 +114,9 @@ const Q2Card = class {
     return !!url ? (h("a", { ref: e => (this.clickableElement = e), href: this.url, class: this.generateContainerClasses(), target: this.target, rel: "noopener noreferrer", "test-id": "clickableElement", onClick: this.handleClick }, this.generateContent())) : (h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "bar": ["checkBar"]
+  }; }
 };
 Q2Card.style = stylesCss;
 

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-be8376c0.js';
-import { l as loc } from './index-fa32f694.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-dbfb3ecc.js';
+import { l as loc } from './index-0ff8de52.js';
 
-const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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{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(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25));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, 1px)) 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));min-height:10em}";
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-global-focus)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size: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));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(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff))}q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content{box-shadow:var(--app-shadow-2, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)));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(--app-shadow-3, 0px 2px 8px 0px var(--t-top-a1, rgba(0, 0, 0, 0.25)))}";
 
 const Q2Carousel = class {
   constructor(hostRef) {
@@ -16,7 +16,7 @@ const Q2Carousel = class {
       event.preventDefault();
       this.clickCarouselPane.emit({
         paneIndex: this.index,
-        pane: this.hostElement
+        pane: this.hostElement,
       });
     };
   }
@@ -57,7 +57,7 @@ const Q2Carousel = class {
         ? loc(label)
         : loc('tecton.element.carousel.itemDescription', [
           (this.currentPaneIndex + 1).toString(),
-          (this.siblingCount || 0).toString()
+          (this.siblingCount || 0).toString(),
         ]), onClick: this.paneClicked }, h("article", { class: "q2-carousel-pane-main-content" }, h("slot", null))));
   }
   get hostElement() { return getElement(this); }