q2-tecton-elements 1.12.0-alpha.0 → 1.13.0

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-c2e53804.js');
-const index = require('./index-a55d3c34.js');
+const index$1 = require('./index-7febb200.js');
+const index = require('./index-dd823ee6.js');
 
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
@@ -2768,7 +2768,7 @@ function formatDateShort(value) {
     month: '2-digit',
     day: '2-digit',
     year: 'numeric',
-    timeZone: 'UTC'
+    timeZone: 'UTC',
   }).format(new Date(isoDate));
 }
 function formatDateLong(value) {
@@ -2778,7 +2778,7 @@ function formatDateLong(value) {
   return new Intl.DateTimeFormat('default', {
     month: 'short',
     day: 'numeric',
-    year: 'numeric'
+    year: 'numeric',
   }).format(date);
 }
 function convertMomentFormat(stringFormat) {
@@ -2798,7 +2798,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;
@@ -2853,7 +2853,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
@@ -2897,14 +2897,10 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     if (input.length >= 5 && !isAvailable) {
       isValid$1 = false;
       messageType = 'error';
-      if (!monthName || !date || !year) {
-        message = `${index.loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`;
-      }
-      else {
-        message = index.loc('tecton.element.calendar.hint.notAvailableDate', [
-          formatDateLong(inputDate)
-        ]);
-      }
+      const isInvalid = !monthName || !date || !year;
+      message = isInvalid
+        ? `${index.loc('tecton.element.calendar.hint.invalidDate')}: ${formatString}`
+        : index.loc('tecton.element.calendar.hint.notAvailableDate', [formatDateLong(inputDate)]);
     }
   }
   else {
@@ -2918,19 +2914,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
@@ -2967,6 +2963,12 @@ function handleMissingZeros(input) {
   }
   return input;
 }
+function reorderDateString(input) {
+  const dateParts = (input || '').split('-');
+  if (dateParts.length !== 3)
+    return '';
+  return `${dateParts[1]}/${dateParts[2]}/${dateParts[0]}`;
+}
 function firstDayOfWeekInMonth(month, year) {
   return new Date(year, month, 1, 1, 1, 1, 1).getDay();
 }
@@ -2978,7 +2980,7 @@ function getDays() {
     index.loc('tecton.element.calendar.days.short.Wednesday'),
     index.loc('tecton.element.calendar.days.short.Thursday'),
     index.loc('tecton.element.calendar.days.short.Friday'),
-    index.loc('tecton.element.calendar.days.short.Saturday')
+    index.loc('tecton.element.calendar.days.short.Saturday'),
   ];
 }
 function getDaysOfWeek() {
@@ -2989,7 +2991,7 @@ function getDaysOfWeek() {
     index.loc('tecton.element.calendar.days.Wednesday'),
     index.loc('tecton.element.calendar.days.Thursday'),
     index.loc('tecton.element.calendar.days.Friday'),
-    index.loc('tecton.element.calendar.days.Saturday')
+    index.loc('tecton.element.calendar.days.Saturday'),
   ];
 }
 function getMonths() {
@@ -3005,7 +3007,7 @@ function getMonths() {
     index.loc('tecton.element.calendar.months.September'),
     index.loc('tecton.element.calendar.months.October'),
     index.loc('tecton.element.calendar.months.November'),
-    index.loc('tecton.element.calendar.months.December')
+    index.loc('tecton.element.calendar.months.December'),
   ];
 }
 
@@ -3017,6 +3019,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;
@@ -3024,6 +3027,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;
@@ -3091,7 +3095,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');
@@ -3125,7 +3129,7 @@ const emptyDate = {
   isSelected: false,
   isStartDate: false,
   isEndDate: false,
-  classList: ''
+  classList: '',
 };
 function addEmptyDates(from, to) {
   if (from === 7)
@@ -3162,7 +3166,7 @@ const Q2Calendar = class {
       }
     };
     this.openCalendar = () => {
-      if (!this.dropdownOpen) {
+      if (!this.readonly && !this.dropdownOpen) {
         this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
         this.dropdownOpen = true;
@@ -3171,6 +3175,8 @@ const Q2Calendar = class {
       }
     };
     this.toggleCalendar = () => {
+      if (this.readonly)
+        return;
       this.dropdownOpen = !this.dropdownOpen;
       this.scheduledAfterRender.push(this.resizeIframe);
       if (this.dropdownOpen) {
@@ -3298,7 +3304,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());
@@ -3386,13 +3392,14 @@ 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);
     this.dateList = this.buildDateList(this.selectedMonthYear);
+    if (this.value && this.isTypeable && !this.typedValue) {
+      this.typedValue = reorderDateString(this.value);
+    }
     this.validateDate();
   }
   componentWillLoad() {
@@ -3420,9 +3427,7 @@ const Q2Calendar = class {
   }
   get localizedErrors() {
     return ((Array.isArray(this.errors) &&
-      this.errors
-        .filter((error) => error)
-        .map((error) => error && index.loc(error))) ||
+      this.errors.filter((error) => error).map((error) => error && index.loc(error))) ||
       []);
   }
   get formattedValue() {
@@ -3437,7 +3442,7 @@ const Q2Calendar = class {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
-      timeZone: 'UTC'
+      timeZone: 'UTC',
     }).format(dateValue);
   }
   get computedPlaceholder() {
@@ -3459,9 +3464,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);
       }
@@ -3472,7 +3475,7 @@ const Q2Calendar = class {
     return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: stringToDate(this.cutoffTime)
+      cutOffTime: stringToDate(this.cutoffTime),
     };
   }
   get isTypeable() {
@@ -3489,8 +3492,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']);
@@ -3504,8 +3506,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');
       }
     }
@@ -3528,9 +3529,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);
@@ -3587,22 +3586,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 {
@@ -3611,7 +3609,7 @@ const Q2Calendar = class {
       }
     }
     catch (error) {
-      console.log('Invalid moment value ', this.dateValue);
+      console.warn('Invalid moment value ', this.dateValue);
     }
   }
   focusInput() {
@@ -3620,16 +3618,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) {
@@ -3665,11 +3659,11 @@ const Q2Calendar = class {
     this.setHints({
       isValid: true,
       message: `${index.loc('tecton.element.calendar.hint.selection')}: ${formatDateLong(inputDate)}`,
-      messageType: 'success'
+      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, placeholder: this.computedPlaceholder, optional: !!this.optional, ariaExpanded: this.dropdownOpen, errors: (this.localizedErrors.length > 0 && this.localizedErrors) ||
+    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, 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/cjs/q2-card.cjs.entry.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7febb200.js');
+const index$1 = require('./index-dd823ee6.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{--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) {
+    index.registerInstance(this, hostRef);
+    this.click = index.createEvent(this, "click", 7);
+    this.isTouch = index$1.isTouchDevice();
+    this.isAutoTouch = false;
+    this.isAutoSmall = false;
+    this.handleClick = (event) => {
+      if (this.url)
+        return true;
+      event.preventDefault();
+      event.stopPropagation();
+      this.click.emit();
+    };
+  }
+  componentWillLoad() {
+    this.checkBar();
+  }
+  componentDidLoad() {
+    const { hostElement, clickableElement } = this;
+    hostElement.click = () => clickableElement.click();
+    index$1.overrideFocus(this.hostElement);
+    this.resizeObserver = new ResizeObserver(() => this.determineAutoSmall());
+    this.resizeObserver.observe(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  onHostElementFocus(event) {
+    if (!index$1.isEventFromElement(event, this.hostElement))
+      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;
+    this.isAutoTouch = index$1.isTouchDevice();
+  }
+  determineAutoSmall() {
+    var _a, _b;
+    if (this.hostElement.hasAttribute('is-small'))
+      return;
+    const { containerElement, avatarElement } = this;
+    const avatarWidth = (_a = avatarElement === null || avatarElement === void 0 ? void 0 : avatarElement.offsetWidth) !== null && _a !== void 0 ? _a : 0;
+    const containerWidth = (_b = containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+    const totalWidth = avatarWidth + containerWidth;
+    this.isAutoSmall = totalWidth < 350;
+  }
+  generateAvatar() {
+    const { avatarName, avatarInitials, avatarSrc, avatarIcon } = this;
+    if (avatarIcon) {
+      return (index.h("q2-icon", { type: avatarIcon, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+    else if (avatarName || avatarInitials || avatarSrc) {
+      return (index.h("q2-avatar", { name: avatarName, initials: avatarInitials, src: avatarSrc, ref: e => (this.avatarElement = e), "test-id": "avatar" }));
+    }
+  }
+  generateContent() {
+    return (index.h(index.Fragment, null, this.bar && (index.h("div", { class: "bar", "test-id": "bar", style: { '--comp-bar-color': this.barColor } })), this.generateAvatar(), index.h("div", { class: "container", "test-id": "contentContainer", ref: e => (this.containerElement = e) }, this.title && index.h("h3", { "test-id": "title" }, this.title), this.description && index.h("p", { "test-id": "description" }, this.description)), this.isTouch && (index.h("q2-icon", { "test-id": "touchIndicator", type: "chevron-right", class: "touch-indicator" }))));
+  }
+  generateContainerClasses() {
+    const { isSmall, isAutoSmall, avatarName, avatarInitials, avatarSrc, avatarIcon, isTouch, isAutoTouch } = this;
+    const result = [];
+    const showSmall = isSmall || isAutoSmall;
+    const showTouch = isTouch || isAutoTouch;
+    const hasAvatar = avatarName || avatarInitials || avatarSrc || avatarIcon;
+    if (showSmall)
+      result.push('is-small');
+    if (showTouch)
+      result.push('is-touch');
+    if (hasAvatar)
+      result.push('has-avatar');
+    return result.join(' ');
+  }
+  render() {
+    const { url } = this;
+    return !!url ? (index.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())) : (index.h("button", { ref: e => (this.clickableElement = e), class: this.generateContainerClasses(), "test-id": "clickableElement", type: "button", onClick: this.handleClick }, this.generateContent()));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "bar": ["checkBar"]
+  }; }
+};
+Q2Card.style = stylesCss;
+
+exports.q2_card = Q2Card;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c2e53804.js');
-const index$1 = require('./index-a55d3c34.js');
+const index = require('./index-7febb200.js');
+const index$1 = require('./index-dd823ee6.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) {
@@ -20,7 +20,7 @@ const Q2Carousel = class {
       event.preventDefault();
       this.clickCarouselPane.emit({
         paneIndex: this.index,
-        pane: this.hostElement
+        pane: this.hostElement,
       });
     };
   }
@@ -61,7 +61,7 @@ const Q2Carousel = class {
         ? index$1.loc(label)
         : index$1.loc('tecton.element.carousel.itemDescription', [
           (this.currentPaneIndex + 1).toString(),
-          (this.siblingCount || 0).toString()
+          (this.siblingCount || 0).toString(),
         ]), onClick: this.paneClicked }, index.h("article", { class: "q2-carousel-pane-main-content" }, index.h("slot", null))));
   }
   get hostElement() { return index.getElement(this); }