q2-tecton-elements 1.10.5 → 1.10.8

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

@@ -1,67 +1,67 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
 .q2-element-dropdown {
@@ -79,10 +79,10 @@ button {
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--app-tween-1);
-  border-radius: var(--tct-dropdown-element-br, 0);
-  --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
-  --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
-  --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
+  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;
 }
@@ -111,7 +111,6 @@ button {
   overflow: auto;
   opacity: 1;
   visibility: visible;
-  margin-bottom: var(--app-scale-2);
 }
 
 :host([alignment=right]) .q2-element-dropdown {
@@ -148,11 +147,11 @@ q2-input {
 }
 
 .calendar-label {
-  font-size: var(--tct-calendar-label-font-size, 16px);
+  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(--tct-scale-2, var(--app-scale-2, 10px))) 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 {
@@ -165,8 +164,8 @@ q2-input {
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: var(--tct-calendar-month-font-size, 16px);
-  font-weight: var(--tct-calendar-month-font-weight, 600);
+  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 {
@@ -179,51 +178,39 @@ q2-input {
   display: inline-block;
 }
 
-.cal-days {
-  display: flex;
-  flex-wrap: wrap;
-  padding-bottom: 2px;
-}
-
-.cal-day,
-.cal-days > div {
-  flex: 0 0 14.285714%;
-}
-
-.cal-day-heading {
-  font-size: var(--tct-calendar-day-heading-font-size, inherit);
-  font-weight: var(--tct-calendar-day-heading-font-weight, 600);
+table {
+  width: 100%;
+  margin-bottom: 2px;
 }
 
-.is-valid:hover {
-  background-color: var(--tct-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, inherit);
+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%;
 }
 
-.is-valid.is-selected {
-  background-color: var(--tct-calendar-day-selected-bg, var(--tct-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(--tct-calendar-day-hover-font-color, inherit));
-  box-shadow: inset 2px 2px var(--tct-calenday-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))), inset -2px -2px var(--tct-calenday-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)));
+td {
+  height: 44px;
+  cursor: pointer;
 }
-
-.cal-day.is-unavailable {
+td.is-unavailable {
   border: 1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #c30000));
 }
-
-.date-details {
-  display: flex;
-  height: 44px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+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));
 }
-
-.is-today span {
-  display: block;
+td[aria-hidden], td[aria-disabled] {
+  pointer-events: none;
+  cursor: not-allowed;
 }
-
-.is-today .date-details {
-  justify-content: flex-start;
+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 {
@@ -233,17 +220,9 @@ q2-input {
   height: 12px;
 }
 
-.activity-decorator {
-  width: var(--tct-scale-1, var(--app-scale-1, 5px));
-  height: var(--tct-scale-1, var(--app-scale-1, 5px));
-  border-radius: 50%;
-  margin: 0 auto;
-  background-color: var(--tct-calendar-activity-indicator-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)));
-}
-
 .calendar-disclaimer {
-  font-size: var(--tct-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(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6)))));
+  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;
 }

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

@@ -1,14 +1,11 @@
 import { firstDayOfWeekInMonth } from './helpers';
-import moment from 'moment';
-function generateDatesFromMonthYear(month, year) {
-  const startingMoment = moment(`${year}-${month >= 9 ? month + 1 : `0${month + 1}`}-01`, 'YYYY-MM-DD');
-  const lastDayOfMonth = startingMoment.daysInMonth();
-  let datesArr = [startingMoment];
-  while (datesArr.length < lastDayOfMonth) {
-    const lastDayInList = datesArr[datesArr.length - 1];
-    datesArr = datesArr.concat(lastDayInList.clone().add(1, 'day'));
-  }
-  return datesArr;
+import { getDaysInMonth, isSameDay, isBefore, isAfter, isValid as isValidDate } from 'date-fns';
+export function generateDatesFromMonthYear(month, year) {
+  const daysInMonth = getDaysInMonth(new Date(year, month));
+  return [...Array(daysInMonth).keys()].reduce((acc, stepIndex) => {
+    acc.push(new Date(year, month, stepIndex + 1));
+    return acc;
+  }, []);
 }
 export function getValidDaysOfWeek(checksum = 127) {
   const sunValid = checksum & 1;
@@ -19,173 +16,110 @@ export function getValidDaysOfWeek(checksum = 127) {
   const friValid = checksum & 32;
   const satValid = checksum & 64;
   const ret = [];
-  if (checksum > 0) {
-    if (sunValid) {
-      ret.push(0);
-    }
-    if (monValid) {
-      ret.push(1);
-    }
-    if (tuesValid) {
-      ret.push(2);
-    }
-    if (wedsValid) {
-      ret.push(3);
-    }
-    if (thursValid) {
-      ret.push(4);
-    }
-    if (friValid) {
-      ret.push(5);
-    }
-    if (satValid) {
-      ret.push(6);
-    }
-  }
+  if (checksum <= 0)
+    return ret;
+  if (sunValid)
+    ret.push(0);
+  if (monValid)
+    ret.push(1);
+  if (tuesValid)
+    ret.push(2);
+  if (wedsValid)
+    ret.push(3);
+  if (thursValid)
+    ret.push(4);
+  if (friValid)
+    ret.push(5);
+  if (satValid)
+    ret.push(6);
   return ret;
 }
 export function validateAgainstChecksum(validDaysOfWeek, newDate) {
-  return validDaysOfWeek.includes(newDate.day());
+  return validDaysOfWeek.includes(newDate.getDay());
 }
-export function validateAgainstBlacklist(invalidDateMoments, newDate) {
-  return !invalidDateMoments.some(date => date && date.isSame(newDate, 'day'));
+export function validateAgainstBlacklist(invalidDates, newDate) {
+  return !validateAgainstWhitelist(invalidDates, newDate);
 }
-export function validateAgainstWhitelist(validDateMoments, newDate) {
-  return validDateMoments.some(date => date && date.isSame(newDate, 'day'));
+export function validateAgainstWhitelist(validDates, newDate) {
+  return validDates.some(validDate => isSameDay(validDate, newDate));
 }
-const META_DATA_STUB = () => {
-  return ['', '', false];
-};
-export function buildDates(validDaysOfWeek, validDateMoments, invalidDateMoments, selectedMonthYear, currentSelection, daysOfWeek, dateValidators, typedValue) {
-  const validationFns = [];
-  if (validDateMoments === null || validDateMoments === void 0 ? void 0 : validDateMoments.length) {
-    validationFns.push(validateAgainstWhitelist.bind(null, validDateMoments));
+export function buildDates(validDaysOfWeek, validDates, invalidDates, selectedMonthYear, currentSelection, dateValidators, typedValue) {
+  const validationFns = [baseValidation.bind(null, dateValidators, new Date())];
+  if (validDates === null || validDates === void 0 ? void 0 : validDates.length) {
+    validationFns.push(validateAgainstWhitelist.bind(null, validDates));
   }
   else {
     validationFns.push(validateAgainstChecksum.bind(null, validDaysOfWeek));
   }
-  validationFns.push(validateAgainstBlacklist.bind(null, invalidDateMoments));
-  return generateDateList(selectedMonthYear, currentSelection, daysOfWeek, dateValidators, validationFns, typedValue, META_DATA_STUB);
-}
-export function generateDateList({ monthIndex, selectedMonth: month, selectedYear: year }, currentSelection, daysOfWeek, dateValidators, validationFns, typedValue, genMetaData) {
-  const totalValidationFns = [baseValidation.bind(null, dateValidators, moment())].concat(validationFns);
-  const startOfMonthEmpties = addEmptiesMonthStart(firstDayOfWeekInMonth(monthIndex, year));
-  const typedDate = new Date(typedValue);
-  const datesInMonth = generateDatesFromMonthYear(monthIndex, year).map((momentDate, dateIndex) => {
-    const dayIndexOfWeek = momentDate.day();
-    const isInvalid = totalValidationFns.some(fn => !fn(momentDate));
-    const [metaDataTop, metaDataBottom, isActivityDate] = genMetaData(momentDate);
-    const [isStartDate, isEndDate, isToday, isSelected] = applyDateClasses(momentDate, dateValidators, currentSelection);
-    const isFirst = isFirstDayOfWeek(dayIndexOfWeek);
-    const isLast = isLastDayOfWeek(dayIndexOfWeek);
-    const dayOfWeek = daysOfWeek[dayIndexOfWeek];
-    const classList = generateClassesForCalDay(!isInvalid, isFirst, isLast, isSelected, isEndDate, isStartDate, isToday, typedDate.toString() === 'Invalid Date');
-    return {
-      isValid: !isInvalid,
-      isEmpty: false,
-      dateString: momentDate.format('YYYY-MM-DD'),
-      integer: dateIndex + 1,
-      month,
-      year,
-      dayOfWeek,
-      metaDataTop,
-      metaDataBottom,
-      isActivityDate,
-      isStartDate,
-      isEndDate,
-      isSelected,
-      isToday,
-      isFirst,
-      isLast,
-      classList
-    };
+  validationFns.push(validateAgainstBlacklist.bind(null, invalidDates));
+  return generateDateList(selectedMonthYear, currentSelection, dateValidators, validationFns, typedValue);
+}
+export function generateDateList({ monthIndex, selectedYear }, currentSelection, dateValidators, validationFns, typedValue) {
+  const isIncompleteDate = !isValidDate(new Date(typedValue));
+  const datesInMonth = generateDatesFromMonthYear(monthIndex, selectedYear).map((dayInMonth, dateIndex) => {
+    const isInvalid = validationFns.some(fn => !fn(dayInMonth));
+    const dayState = getDayState(dayInMonth, dateValidators, currentSelection);
+    const classList = generateClassesForCalDay(Object.assign(Object.assign({}, dayState), { isInvalid,
+      isIncompleteDate }));
+    return Object.assign(Object.assign({}, dayState), { isValid: !isInvalid, date: dayInMonth, integer: dateIndex + 1, isEmpty: false, isActivity: false, classList });
   });
+  const startOfMonthEmpties = addEmptiesMonthStart(firstDayOfWeekInMonth(monthIndex, selectedYear));
   const endOfMonthEmpties = addEmptiesMonthEnd((startOfMonthEmpties.length + datesInMonth.length) % 7);
-  return startOfMonthEmpties.concat(datesInMonth, endOfMonthEmpties);
-}
-function baseValidation(dateValidators, now, newDate) {
-  const inValidatedByStartDate = (dateValidators.startDate && dateValidators.startDate.isAfter(newDate, 'day')) || false;
-  const inValidatedByCutoffTime = (dateValidators.cutOffTime &&
-    now.isSame(newDate, 'day') &&
-    now.isAfter(dateValidators.cutOffTime)) ||
-    false;
-  const inValidatedByEndDate = (dateValidators.endDate && dateValidators.endDate.isBefore(newDate, 'day')) || false;
-  return !(inValidatedByStartDate || inValidatedByCutoffTime || inValidatedByEndDate);
-}
-function applyDateClasses(dateObjMoment, dateValidators, newDateMoment) {
-  const isSelected = newDateMoment && newDateMoment.isSame(dateObjMoment, 'day');
-  const isToday = dateObjMoment.isSame(moment(), 'day');
-  const isStartDate = dateObjMoment.isSame(dateValidators.startDate, 'day');
-  const isEndDate = dateObjMoment.isSame(dateValidators.endDate, 'day');
-  return [isStartDate, isEndDate, isToday, isSelected];
-}
-function generateClassesForCalDay(isValid, isFirst, isLast, isSelected, isEndDate, isStartDate, isToday, isIncompleteDate) {
-  const isValidClass = isValid ? ' is-valid' : '';
-  const isFirstClass = isFirst ? ' is-first' : '';
-  const isLastClass = isLast ? ' is-last' : '';
-  const isSelectedClass = isSelected ? ' is-selected' : '';
-  const isEndDateClass = isEndDate ? ' is-end-date' : '';
-  const isStartDateClass = isStartDate ? ' is-start-date' : '';
-  const isTodayClass = isToday ? ' is-today' : '';
-  const isUnAvailableClass = isSelected && !isValid && !isIncompleteDate ? ' is-unavailable' : '';
-  const classList = `${isValidClass}${isFirstClass}${isLastClass}${isSelectedClass}${isEndDateClass}${isStartDateClass}${isTodayClass}${isUnAvailableClass}`;
-  return classList;
-}
-function addEmptiesMonthStart(monthStartDay) {
-  return _addEmptyDates(0, monthStartDay);
-}
-function addEmptiesMonthEnd(monthEndDay) {
-  if (monthEndDay > 0) {
-    return _addEmptyDates(monthEndDay, 7);
-  }
-  else {
+  return [...startOfMonthEmpties, ...datesInMonth, ...endOfMonthEmpties];
+}
+export function baseValidation(dateValidators, now, newDate) {
+  const isNewDateBeforeStartDate = isAfter(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.startDate, newDate);
+  const isNewDateAfterEndDate = isBefore(dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.endDate, newDate);
+  const isNowAfterCutoffTime = isSameDay(now, newDate) && isAfter(now, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.cutOffTime);
+  return !(isNewDateBeforeStartDate || isNowAfterCutoffTime || isNewDateAfterEndDate);
+}
+export function getDayState(dayInMonth, dateValidators, currentDate) {
+  if (!currentDate)
+    currentDate = new Date();
+  const isSelected = currentDate && isSameDay(currentDate, dayInMonth);
+  const isToday = isSameDay(dayInMonth, new Date());
+  const isStartDate = isSameDay(dayInMonth, dateValidators === null || dateValidators === void 0 ? void 0 : dateValidators.startDate);
+  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 }) {
+  const classes = [];
+  if (!isInvalid)
+    classes.push('is-valid');
+  if (isSelected)
+    classes.push('is-selected');
+  if (isEndDate)
+    classes.push('is-end-date');
+  if (isStartDate)
+    classes.push('is-start-date');
+  if (isToday)
+    classes.push('is-today');
+  if (isSelected && isInvalid && !isIncompleteDate)
+    classes.push('is-unavailable');
+  return classes.join(' ');
+}
+export function addEmptiesMonthStart(monthStartDayOfWeek) {
+  return addEmptyDates(0, monthStartDayOfWeek);
+}
+export function addEmptiesMonthEnd(monthEndDayOfWeek) {
+  if (monthEndDayOfWeek === 0)
     return [];
-  }
-}
-function _addEmptyDates(from, to) {
-  // 7 & 0 are both Sunday reseting to 0 to set up loop
-  const fromDate = from === 7 ? 0 : from;
-  const dates = [];
-  for (let i = fromDate; i < to; i++) {
-    const newDate = {
-      dateString: '',
-      integer: '&nbsp;',
-      year: -1,
-      month: '',
-      isEmpty: true,
-      isActivityDate: false,
-      isFirst: false,
-      isLast: false,
-      isValid: false,
-      isToday: false,
-      isSelected: false,
-      isRepeatDate: false,
-      isStartDate: false,
-      isEndDate: false,
-      metaDataTop: '',
-      metaDataBottom: '',
-      dayOfWeek: '',
-      classList: ''
-    };
-    processCount(newDate, i);
-    dates.push(newDate);
-  }
-  return dates;
-}
-function isFirstDayOfWeek(dayCount) {
-  return dayCount === 0 || dayCount % 7 === 0;
-}
-function isLastDayOfWeek(dayCount) {
-  return dayCount % 7 === 6;
-}
-function processCount(newCalendarDate, count) {
-  let returnCount = count;
-  if (count === 0 || count % 7 === 0) {
-    newCalendarDate.isFirst = true;
-    returnCount = 0;
-  }
-  else if (count % 7 === 6) {
-    newCalendarDate.isLast = true;
-  }
-  return returnCount;
+  return addEmptyDates(monthEndDayOfWeek, 7);
+}
+export const emptyDate = {
+  date: null,
+  integer: null,
+  isActivity: false,
+  isEmpty: true,
+  isValid: false,
+  isToday: false,
+  isSelected: false,
+  isStartDate: false,
+  isEndDate: false,
+  classList: ''
+};
+export function addEmptyDates(from, to) {
+  if (from === 7)
+    from = 0;
+  return [...Array(to - from).keys()].map(() => (Object.assign({}, emptyDate)));
 }