@descope/web-components-ui 1.115.0 → 1.117.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.115.0",
+  "version": "1.117.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -89,7 +89,7 @@
     "@descope-ui/descope-list": "0.0.1",
     "@descope-ui/descope-list-item": "0.0.1",
     "@descope-ui/descope-apps-list": "0.0.1",
-    "@descope-ui/descope-outbound-apps": "0.0.4",
+    "@descope-ui/descope-outbound-apps": "0.0.5",
     "@descope-ui/descope-password-strength": "0.0.13",
     "@descope-ui/descope-collapsible-container": "0.0.18",
     "@descope-ui/descope-recovery-codes": "0.0.6",

package/src/components/descope-date-field/DateFieldClass.js

@@ -9,11 +9,12 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { compose } from '../../helpers';
 import {
   newDate,
-  isValidTimestamp,
-  formatTimestamp,
+  isValidEpoch,
+  formatEpoch,
   isNumber,
   getCurrentTime,
   overrideConstructedStylesheet,
+  dateToEpoch,
 } from './helpers';
 import { formats } from './formats';
 import { calendarIcon } from './icons';
@@ -37,12 +38,19 @@ export const componentName = getComponentName('date-field');
 const BASE_SELECTOR = 'vaadin-popover';
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: BASE_SELECTOR });
 
-const dateFieldAttrs = ['format', 'opened', 'initial-value', 'readonly', 'disable-calendar'];
+const dateFieldAttrs = [
+  'format',
+  'opened',
+  'initial-value',
+  'readonly',
+  'disable-calendar',
+  'utc-time',
+];
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
 class RawDateFieldClass extends BaseInputClass {
-  timestamp = '';
+  epoch = '';
 
   format = DEFAULT_FORMAT;
 
@@ -54,10 +62,10 @@ class RawDateFieldClass extends BaseInputClass {
 
   updateValue() {
     if (this.isCountersOutOfRange) {
-      this.updateTimestamp('');
+      this.updateEpoch('');
     } else {
       const date = formats[this.format].getDate(this.inputElement.value);
-      this.updateTimestamp(date.getTime());
+      this.updateEpoch(dateToEpoch(date, this.isUtcTime));
     }
   }
 
@@ -68,11 +76,11 @@ class RawDateFieldClass extends BaseInputClass {
     this.#dispatchInput();
   };
 
-  updateTimestamp(epochOrDate) {
+  updateEpoch(epochOrDate) {
     if (!epochOrDate) {
-      this.timestamp = '';
+      this.epoch = '';
     } else {
-      this.timestamp = newDate(epochOrDate).getTime();
+      this.epoch = dateToEpoch(newDate(epochOrDate), this.isUtcTime);
     }
   }
 
@@ -145,11 +153,11 @@ class RawDateFieldClass extends BaseInputClass {
     return this.getAttribute('opened') === 'true';
   }
 
-  // returns the input's value as a timestamp
+  // returns the input's value as a epoch
   get displayValueEpoch() {
     const date = formats[this.format].getDate(this.inputElement.value);
 
-    if (!isValidTimestamp(date?.getTime())) {
+    if (!isValidEpoch(date?.getTime())) {
       return null;
     }
 
@@ -197,15 +205,15 @@ class RawDateFieldClass extends BaseInputClass {
     if (this.isInvalidDate()) {
       return '';
     }
-    return this.timestamp;
+    return this.epoch;
   }
 
   set value(val) {
     if (val) {
-      this.updateTimestamp(val);
+      this.updateEpoch(val);
       this.updateDateCounters(newDate(val));
     } else {
-      this.updateTimestamp('');
+      this.updateEpoch('');
     }
   }
 
@@ -221,6 +229,10 @@ class RawDateFieldClass extends BaseInputClass {
     return this.getAttribute('disable-calendar') === 'true';
   }
 
+  get isUtcTime() {
+    return this.getAttribute('utc-time') === 'true';
+  }
+
   get isSelectAll() {
     const inputEle = this.inputElement.baseElement.inputElement;
     return inputEle.value.length === inputEle.selectionStart + inputEle.selectionEnd;
@@ -235,7 +247,7 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   updateInputDisplay() {
-    this.inputElement.value = formatTimestamp(newDate(this.countersValue).getTime(), this.format);
+    this.inputElement.value = formatEpoch(newDate(this.countersValue).getTime(), this.format);
   }
 
   init() {
@@ -426,7 +438,7 @@ class RawDateFieldClass extends BaseInputClass {
 
       const calendarDate = newDate(this.calendar.value);
 
-      this.value = calendarDate.getTime();
+      this.value = dateToEpoch(calendarDate, this.isUtcTime);
 
       this.getCounterById('year').replaceValue(calendarDate.getFullYear());
       this.getCounterById('month').replaceValue(calendarDate.getMonth() + 1);
@@ -440,17 +452,17 @@ class RawDateFieldClass extends BaseInputClass {
 
   updateCalendarView() {
     const validInputVal =
-      isValidTimestamp(newDate(this.inputElement.value || '').getTime()) &&
+      isValidEpoch(newDate(this.inputElement.value || '').getTime()) &&
       formats[this.format].validate(this.inputElement.value);
 
     if (this.displayValueEpoch || validInputVal) {
       this.calendar.setAttribute(
         'initial-value',
-        formatTimestamp(this.displayValueEpoch || this.timestamp, NATIVE_FORMAT)
+        formatEpoch(this.displayValueEpoch || this.epoch, NATIVE_FORMAT)
       );
     } else {
       this.calendar.clearValue();
-      this.calendar.setAttribute('preview', formatTimestamp(getCurrentTime(), NATIVE_FORMAT));
+      this.calendar.setAttribute('preview', formatEpoch(getCurrentTime(), NATIVE_FORMAT));
     }
 
     forwardAttrs(this, this.calendar, {
@@ -599,13 +611,13 @@ class RawDateFieldClass extends BaseInputClass {
     this.dateCounters.forEach((dc) => {
       switch (dc.id) {
         case counterConfig.MONTH.id:
-          dc.set(date.getMonth() + 1);
+          dc.set(this.isUtcTime ? date.getUTCMonth() + 1 : date.getMonth() + 1);
           break;
         case counterConfig.YEAR.id:
-          dc.set(date.getFullYear());
+          dc.set(this.isUtcTime ? date.getUTCFullYear() : date.getFullYear());
           break;
         case counterConfig.DAY.id:
-          dc.set(date.getDate());
+          dc.set(this.isUtcTime ? date.getUTCDate() : date.getDate());
           break;
         default:
           break;
@@ -768,12 +780,22 @@ class RawDateFieldClass extends BaseInputClass {
       year: '',
     };
 
-    try {
-      const date = newDate(this.timestamp);
+    if (!this.epoch) {
+      return ret;
+    }
 
-      ret.month = date.getMonth() + 1;
-      ret.day = date.getDate();
-      ret.year = date.getFullYear();
+    try {
+      const date = newDate(this.epoch);
+
+      if (this.isUtcTime) {
+        ret.month = date.getUTCMonth() + 1;
+        ret.day = date.getUTCDate();
+        ret.year = date.getUTCFullYear();
+      } else {
+        ret.month = date.getMonth() + 1;
+        ret.day = date.getDate();
+        ret.year = date.getFullYear();
+      }
     } catch (e) {}
 
     return ret;
@@ -817,7 +839,7 @@ class RawDateFieldClass extends BaseInputClass {
     const validDate = parseDateString(pastedData, this.format);
 
     if (validDate) {
-      this.value = validDate.getTime();
+      this.value = dateToEpoch(validDate, this.isUtcTime);
       this.onDateCounterChange();
 
       // select all

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -5,10 +5,10 @@ import { inputFloatingLabelStyle } from '../../../helpers/themeHelpers/resetHelp
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../../mixins';
 import {
   getCurrentDay,
-  getTimestampParts,
-  isValidTimestamp,
+  getPartsFromEpoch,
+  isValidEpoch,
   newDate,
-  formatTimestamp,
+  formatEpoch,
   getCurrentTime,
   getFullYear,
   getMonth,
@@ -61,11 +61,11 @@ class RawCalendar extends BaseInputClass {
     return [].concat(BaseInputClass.observedAttributes || [], observedAttrs, calendarUiAttrs);
   }
 
-  // preview state timestamp
+  // preview state epoch
   preview;
 
-  // value timestamp
-  timestamp;
+  // value epoch
+  epoch;
 
   constructor() {
     super();
@@ -151,23 +151,23 @@ class RawCalendar extends BaseInputClass {
   set value(val) {
     if (!val) return;
 
-    const timestamp = newDate(val).getTime();
+    const epoch = newDate(val).getTime();
 
-    if (!isValidTimestamp(timestamp) || timestamp === this.timestmap) {
+    if (!isValidEpoch(epoch) || epoch === this.epoch) {
       return;
     }
 
-    this.timestamp = timestamp;
+    this.epoch = epoch;
 
     this.renderCalendar();
   }
 
   get value() {
-    return this.timestamp ? formatTimestamp(this.timestamp, NATIVE_FORMAT) : '';
+    return this.epoch ? formatEpoch(this.epoch, NATIVE_FORMAT) : '';
   }
 
   get isSelectedView() {
-    return isViewVisible(this.preview, this.timestamp);
+    return isViewVisible(this.preview, this.epoch);
   }
 
   get isTodayView() {
@@ -284,14 +284,14 @@ class RawCalendar extends BaseInputClass {
   clearSelectedDay() {
     this.getSelectedDayEle()?.removeAttribute('data-selected');
     this.submitButton.setAttribute('disabled', 'true');
-    this.timestamp = '';
+    this.epoch = '';
   }
 
   updateInputs() {
     if (this.yearInput && this.monthInput) {
-      const timestamp = this.preview || getCurrentTime();
-      const year = getFullYear(timestamp);
-      const month = getMonth(timestamp);
+      const epoch = this.preview || getCurrentTime();
+      const year = getFullYear(epoch);
+      const month = getMonth(epoch);
       this.monthInput.value = month;
       // For the yearInput we update the base element directly to properly trigger the change event
       // since this can be a custom value
@@ -303,9 +303,9 @@ class RawCalendar extends BaseInputClass {
 
   renderCalendar() {
     const date = newDate(this.preview || getCurrentTime());
-    const timestamp = date.getTime();
+    const epoch = date.getTime();
 
-    const [year, month] = getTimestampParts(timestamp);
+    const [year, month] = getPartsFromEpoch(epoch);
 
     if (this.calendar) {
       this.calendar.innerHTML = createMonthView(year, month, truncateWeekdays(this.weekdayNames));
@@ -324,7 +324,7 @@ class RawCalendar extends BaseInputClass {
     if (this.isDisabled) return;
     const date = newDate(this.preview);
     date.setDate(Number(e.target.getAttribute('data-date-day')));
-    this.value = formatTimestamp(date.getTime(), NATIVE_FORMAT);
+    this.value = formatEpoch(date.getTime(), NATIVE_FORMAT);
     this.dispatchEvent(new CustomEvent('day-changed', { detail: date }));
   }
 
@@ -355,7 +355,7 @@ class RawCalendar extends BaseInputClass {
   }
 
   getSelectedDayEle() {
-    const day = newDate(this.timestamp).getDate();
+    const day = newDate(this.epoch).getDate();
     return this.calendar?.querySelector(`[data-date-day="${day}"]`);
   }
 
@@ -380,8 +380,8 @@ class RawCalendar extends BaseInputClass {
     if (this.isTodayView) {
       const ele = this.getCurrentDayEle();
       const title = this.getAttribute('calendar-label-today') || CALENDAR_LABEL_TODAY;
-      ele.setAttribute('data-current-day', 'true');
-      ele.setAttribute('title', title);
+      ele?.setAttribute('data-current-day', 'true');
+      ele?.setAttribute('title', title);
     }
   }
 
@@ -404,7 +404,7 @@ class RawCalendar extends BaseInputClass {
   }
 
   clearValue() {
-    this.timestamp = '';
+    this.epoch = '';
     this.value = '';
     this.removeAttribute('preview');
     this.submitButton.setAttribute('disabled', 'true');
@@ -417,11 +417,11 @@ class RawCalendar extends BaseInputClass {
     }
 
     const date = newDate(newValue);
-    const timestamp = date.getTime();
+    const epoch = date.getTime();
 
-    if (isValidTimestamp(timestamp)) {
-      this.timestamp = timestamp;
-      this.preview = timestamp;
+    if (isValidEpoch(epoch)) {
+      this.epoch = epoch;
+      this.preview = epoch;
     } else {
       this.clearValue();
     }

package/src/components/descope-date-field/descope-calendar/helpers.js

@@ -1,5 +1,5 @@
 import { months, weekdays } from '../consts';
-import { getTimestampParts, newDate } from '../helpers';
+import { getPartsFromEpoch, newDate } from '../helpers';
 
 const isValidAttrArr = (arr, count) =>
   Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
@@ -91,9 +91,9 @@ export const getMonthsOptions = (customMonths = months) =>
     .map((item, index) => comboBoxItemTpl({ label: item, dataId: index + 1, dataName: item }))
     .join('');
 
-export const isViewVisible = (selectionTimestamp, previewTimestamp) => {
-  const [previewYear, previewMonth] = getTimestampParts(previewTimestamp);
-  const [selectedYear, selectedMonth] = getTimestampParts(selectionTimestamp);
+export const isViewVisible = (selectionEpoch, previewEpoch) => {
+  const [previewYear, previewMonth] = getPartsFromEpoch(previewEpoch);
+  const [selectedYear, selectedMonth] = getPartsFromEpoch(selectionEpoch);
   return selectedYear === previewYear && selectedMonth === previewMonth;
 };
 
@@ -154,8 +154,8 @@ export const ensureShortWeekdayNamesArr = (attrVal) => {
 
 export const truncateWeekdays = (arr) => arr.map((d) => d.substring(0, 3));
 
-export const prevMonth = (timestamp) => {
-  const date = newDate(timestamp);
+export const prevMonth = (epoch) => {
+  const date = newDate(epoch);
   const month = date.getMonth();
 
   if (month === 0) {
@@ -169,8 +169,8 @@ export const prevMonth = (timestamp) => {
   return date;
 };
 
-export const nextMonth = (timestamp) => {
-  const date = newDate(timestamp);
+export const nextMonth = (epoch) => {
+  const date = newDate(epoch);
   const month = date.getMonth();
 
   if (month === 11) {

package/src/components/descope-date-field/helpers.js

@@ -1,19 +1,19 @@
 import { formats } from './formats';
 
-export const isValidTimestamp = (val) => !Number.isNaN(Number(val));
+export const isValidEpoch = (val) => !Number.isNaN(Number(val));
 
 export const isNumber = (val) => !!String(val || '').trim() && !Number.isNaN(Number(val));
 
-export const getTimestampParts = (timestamp) => {
-  const date = newDate(timestamp);
+export const getPartsFromEpoch = (epoch) => {
+  const date = newDate(epoch);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();
   return [year, month, day];
 };
 
-export const formatTimestamp = (timestamp, format) => {
-  const [year, month, day] = getTimestampParts(timestamp);
+export const formatEpoch = (epoch, format) => {
+  const [year, month, day] = getPartsFromEpoch(epoch);
 
   const parts = {
     DD: String(day).padStart(2, '0'),
@@ -36,8 +36,8 @@ export const newDate = (date) => {
 };
 
 export const getCurrentTime = () => newDate().getTime();
-export const getFullYear = (timestamp) => newDate(timestamp).getFullYear().toString();
-export const getMonth = (timestamp) => (newDate(timestamp).getMonth() + 1).toString();
+export const getFullYear = (epoch) => newDate(epoch).getFullYear().toString();
+export const getMonth = (epoch) => (newDate(epoch).getMonth() + 1).toString();
 export const getCurrentDay = () => newDate().getDate();
 export const getCurrentYear = () => newDate().getFullYear().toString();
 
@@ -55,3 +55,10 @@ export const parseDateString = (val, format) => {
   if (!trimmed) return null;
   return formats[format].getDate(trimmed);
 };
+
+export const dateToEpoch = (date, isUtc) => {
+  if (isUtc) {
+    return new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())).getTime();
+  }
+  return date.getTime();
+};

package/src/constants.js

@@ -2,3 +2,5 @@ export const DESCOPE_PREFIX = 'descope';
 export const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
 export const BASE_THEME_SECTION = 'host';
 export const PORTAL_THEME_PREFIX = '@';
+
+export const TEST_CONST_FOR_RELEASE_TRIGGER = 'true';