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

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

@@ -61,17 +61,17 @@ export class Q2Btn {
     return (h("button", { "aria-expanded": ariaExpanded, "aria-haspopup": ariaHasPopup, "aria-label": hideLabel && loc(label), "aria-selected": ariaSelected, disabled: disabled, type: type, tabindex: tabindex, "test-id": "q2BtnInnerButton", class: iconPosition && `icon-${iconPosition}` },
       h("div", null,
         renderLoadingSpinner && (h("q2-loading", { hidden: !loading, modifiers: isLoadingSpinnerInline ? 'inline' : undefined })),
-        !hideLabel && label ? (loc(label)) : (h("slot", { onSlotchange: this.handleSlotChange })))));
+        !hideLabel && label ? loc(label) : h("slot", { onSlotchange: this.handleSlotChange }))));
   }
   get buttonAttributes() {
     return {
-      ariaExpanded: this.ariaExpanded !== undefined ? `${!!this.ariaExpanded}` : undefined,
-      ariaHasPopup: this.ariaHasPopup ? `${this.ariaHasPopup}` : undefined,
+      ariaExpanded: this.ariaExpanded !== undefined ? `${this.ariaExpanded.toString() === 'true'}` : undefined,
+      ariaHasPopup: this.ariaHasPopup !== undefined ? `${this.ariaHasPopup.toString() === 'true'}` : undefined,
       ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,
-      ariaSelected: this.ariaSelected ? `${this.ariaSelected}` : undefined,
+      ariaSelected: this.ariaSelected !== undefined ? `${this.ariaSelected.toString() === 'true'}` : undefined,
       disabled: this.disabled || false,
       type: this.type || 'button',
-      tabindex: this.tabIndex || undefined
+      tabindex: this.tabIndex || undefined,
     };
   }
   static get is() { return "q2-btn"; }
@@ -84,11 +84,11 @@ export class Q2Btn {
   }; }
   static get properties() { return {
     "ariaExpanded": {
-      "type": "boolean",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -101,11 +101,11 @@ export class Q2Btn {
       "reflect": false
     },
     "ariaHasPopup": {
-      "type": "any",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean | string",
-        "resolved": "boolean | string",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -135,11 +135,11 @@ export class Q2Btn {
       "reflect": false
     },
     "ariaSelected": {
-      "type": "boolean",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,

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

@@ -237,7 +237,7 @@ button:disabled {
 }
 :host([badge]) button {
   padding: var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));
-  font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct---btn-font-size, var(--t---btn-font-size, inherit))));
+  font-size: var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));
   border-radius: var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 3px))));
   background-color: var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent));
   color: var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit));

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

@@ -15,7 +15,7 @@ export function formatDateShort(value) {
     month: '2-digit',
     day: '2-digit',
     year: 'numeric',
-    timeZone: 'UTC'
+    timeZone: 'UTC',
   }).format(new Date(isoDate));
 }
 export function formatDateLong(value) {
@@ -25,7 +25,7 @@ export function formatDateLong(value) {
   return new Intl.DateTimeFormat('default', {
     month: 'short',
     day: 'numeric',
-    year: 'numeric'
+    year: 'numeric',
   }).format(date);
 }
 export function convertMomentFormat(stringFormat) {
@@ -45,7 +45,7 @@ export 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;
@@ -100,7 +100,7 @@ export function setupMonthYear(value = new Date()) {
   const monthIndex = Number(value.toISOString().split('-')[1]) - 1;
   return {
     monthIndex,
-    selectedYear: value.getFullYear()
+    selectedYear: value.getFullYear(),
   };
 }
 export function validateInput(input = '', validDays = [], validDates = [], // white list
@@ -144,14 +144,10 @@ startDate, endDate, formatString = 'mm/dd/yyyy', assume) {
     if (input.length >= 5 && !isAvailable) {
       isValid = 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 {
@@ -165,19 +161,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
@@ -214,6 +210,12 @@ export function handleMissingZeros(input) {
   }
   return input;
 }
+export function reorderDateString(input) {
+  const dateParts = (input || '').split('-');
+  if (dateParts.length !== 3)
+    return '';
+  return `${dateParts[1]}/${dateParts[2]}/${dateParts[0]}`;
+}
 export function firstDayOfWeekInMonth(month, year) {
   return new Date(year, month, 1, 1, 1, 1, 1).getDay();
 }
@@ -225,7 +227,7 @@ export 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'),
   ];
 }
 export function getDaysOfWeek() {
@@ -236,7 +238,7 @@ export 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'),
   ];
 }
 export function getMonths() {
@@ -252,6 +254,6 @@ export 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'),
   ];
 }

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

@@ -1,6 +1,6 @@
-import { Component, Prop, Element, State, Event, Listen, Watch, h } from '@stencil/core';
+import { Component, Prop, Element, State, Event, Listen, Watch, h, } from '@stencil/core';
 import { addDays, isSameDay, format, isValid as isValidDate } from 'date-fns';
-import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset } from './helpers';
+import { stringToDate, setupMonthYear, getMonths, getDays, getDaysOfWeek, stringArrayToDate, convertMomentFormat, validateInput, handleMissingZeros, formatDateISO, formatDateLong, formatDateShort, removeTimezoneOffset, reorderDateString, } from './helpers';
 import { buildDates, getValidDaysOfWeek } from './validation';
 import { handleAriaLabel, loc, setPopProperties, overrideFocus, isEventFromElement } from 'src/utils';
 export class Q2Calendar {
@@ -26,7 +26,7 @@ export class Q2Calendar {
       }
     };
     this.openCalendar = () => {
-      if (!this.dropdownOpen) {
+      if (!this.readonly && !this.dropdownOpen) {
         this.selectedMonthYear = setupMonthYear(this.dateValue);
         this.dateList = this.buildDateList(this.selectedMonthYear);
         this.dropdownOpen = true;
@@ -35,6 +35,8 @@ export class Q2Calendar {
       }
     };
     this.toggleCalendar = () => {
+      if (this.readonly)
+        return;
       this.dropdownOpen = !this.dropdownOpen;
       this.scheduledAfterRender.push(this.resizeIframe);
       if (this.dropdownOpen) {
@@ -162,7 +164,7 @@ export class Q2Calendar {
       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());
@@ -250,13 +252,14 @@ export class Q2Calendar {
     };
   }
   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() {
@@ -284,9 +287,7 @@ export class Q2Calendar {
   }
   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() {
@@ -301,7 +302,7 @@ export class Q2Calendar {
       year: 'numeric',
       month: '2-digit',
       day: '2-digit',
-      timeZone: 'UTC'
+      timeZone: 'UTC',
     }).format(dateValue);
   }
   get computedPlaceholder() {
@@ -323,9 +324,7 @@ export class Q2Calendar {
       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);
       }
@@ -336,7 +335,7 @@ export class Q2Calendar {
     return {
       startDate: stringToDate(this.startDate),
       endDate: stringToDate(this.endDate),
-      cutOffTime: stringToDate(this.cutoffTime)
+      cutOffTime: stringToDate(this.cutoffTime),
     };
   }
   get isTypeable() {
@@ -353,8 +352,7 @@ export class Q2Calendar {
   }
   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']);
@@ -368,8 +366,7 @@ export class Q2Calendar {
       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');
       }
     }
@@ -392,9 +389,7 @@ export class Q2Calendar {
       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);
@@ -451,22 +446,21 @@ export class Q2Calendar {
         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 {
@@ -475,7 +469,7 @@ export class Q2Calendar {
       }
     }
     catch (error) {
-      console.log('Invalid moment value ', this.dateValue);
+      console.warn('Invalid moment value ', this.dateValue);
     }
   }
   focusInput() {
@@ -484,16 +478,12 @@ export class Q2Calendar {
   }
   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) {
@@ -533,11 +523,11 @@ export class Q2Calendar {
     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, 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" }));
   }
@@ -691,6 +681,23 @@ export class Q2Calendar {
       "attribute": "disabled",
       "reflect": true
     },
+    "readonly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "readonly",
+      "reflect": true
+    },
     "invalid": {
       "type": "boolean",
       "mutable": true,

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

@@ -8,6 +8,7 @@ export function generateDatesFromMonthYear(month, year) {
   }, []);
 }
 export function getValidDaysOfWeek(checksum = 127) {
+  /* tslint:disable:no-bitwise */
   const sunValid = checksum & 1;
   const monValid = checksum & 2;
   const tuesValid = checksum & 4;
@@ -15,6 +16,7 @@ export 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;
@@ -82,7 +84,7 @@ export function getDayState(dayInMonth, dateValidators, currentDate) {
   const isEndDate = isSameDay(dayInMonth, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate);
   return { isSelected, isToday, isStartDate, isEndDate };
 }
-export function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate }) {
+export function generateClassesForCalDay({ isInvalid, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate, }) {
   const classes = [];
   if (!isInvalid)
     classes.push('is-valid');
@@ -116,7 +118,7 @@ export const emptyDate = {
   isSelected: false,
   isStartDate: false,
   isEndDate: false,
-  classList: ''
+  classList: '',
 };
 export function addEmptyDates(from, to) {
   if (from === 7)