@descope/web-components-ui 1.92.0 → 1.94.0

package/dist/index.esm.js

@@ -5239,66 +5239,9 @@ loadingIndicatorStyles = `
 
 customElements.define(componentName$17, ButtonClass);
 
-const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
-
-const DEFAULT_FORMAT = SUPPORTED_FORMATS[0];
-
-const NATIVE_FORMAT = 'YYYY-MM-DD';
-
-const YEARS_RANGE = 100;
-
-const DIVIDER = '/';
-
-const COUNTER_SUPPORTED_KEYS = [
-  'Backspace',
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowDown',
-  'ArrowUp',
-  'PageUp',
-  'PageDown',
-  'Meta',
-  'Enter',
-];
-
-const months = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
-const weekdays = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday',
-];
-
-const counterConfig = {
-  MONTH: { id: 'month', min: 1, max: 12, placeholder: 'MM', count: 5, shiftCount: 10 },
-  DAY: { id: 'day', min: 1, max: 31, placeholder: 'DD', count: 5, shiftCount: 10 },
-  YEAR: { id: 'year', min: 1900, max: 2099, placeholder: 'YYYY', count: 10, shiftCount: 100 },
-};
-
-const BUTTON_LABEL_DONE = 'Done';
-const BUTTON_LABEL_CANCEL = 'Cancel';
-const CALENDAR_LABEL_TODAY = 'Today';
-
 const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 
-const isNumber = (val) => !Number.isNaN(Number(val));
+const isNumber = (val) => !!String(val || '').trim() && !Number.isNaN(Number(val));
 
 const getTimestampParts = (timestamp) => {
   const date = newDate(timestamp);
@@ -5331,28 +5274,6 @@ const newDate = (date) => {
   return new Date();
 };
 
-const isSupportedKey = (key) => COUNTER_SUPPORTED_KEYS.includes(key);
-
-const getKeyMap = (key, shiftKey, metaKey) => {
-  return {
-    refresh: metaKey && key.toLowerCase() === 'r',
-    tab: key === 'Tab',
-    shiftTab: shiftKey && key === 'Tab',
-    backspace: key === 'Backspace',
-    arrowUp: !shiftKey && key === 'ArrowUp',
-    arrowDown: !shiftKey && key === 'ArrowDown',
-    arrowLeft: !shiftKey && key === 'ArrowLeft',
-    arrowRight: !shiftKey && key === 'ArrowRight',
-    pageUp: !shiftKey && key === 'PageUp',
-    pageDown: !shiftKey && key === 'PageDown',
-    shiftArrowUp: shiftKey && key === 'ArrowUp',
-    shiftArrowDown: shiftKey && key === 'ArrowDown',
-    shiftPageUp: shiftKey && key === 'PageUp',
-    shiftPageDown: shiftKey && key === 'PageDown',
-    enter: key === 'Enter',
-  };
-};
-
 const getCurrentTime = () => newDate().getTime();
 const getFullYear = (timestamp) => newDate(timestamp).getFullYear().toString();
 const getMonth = (timestamp) => (newDate(timestamp).getMonth() + 1).toString();
@@ -5382,6 +5303,51 @@ const arrowLeftIcon = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
 <path d="M14.7272 17.2193C15.1209 17.6584 15.0841 18.3334 14.6451 18.7272C14.206 19.1209 13.5309 19.0841 13.1372 18.6451C13.1372 18.6451 7.99776 13.0457 7.63399 12.64C7.27023 12.2343 7.27023 11.7608 7.63399 11.3552L13.1372 5.35492C13.5309 4.91587 14.206 4.87912 14.6451 5.27283C15.0841 5.66655 15.1209 6.34164 14.7272 6.78069L9.86322 12L14.7272 17.2193Z" fill="#808080"/>
 </svg>`;
 
+const SUPPORTED_FORMATS = ['MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
+
+const DEFAULT_FORMAT = SUPPORTED_FORMATS[0];
+
+const NATIVE_FORMAT = 'YYYY-MM-DD';
+
+const YEARS_RANGE = 100;
+
+const DIVIDER = '/';
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const weekdays = [
+  'Sunday',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+];
+
+const counterConfig = {
+  MONTH: { id: 'month', min: 1, max: 12, placeholder: 'MM', count: 5, shiftCount: 10 },
+  DAY: { id: 'day', min: 1, max: 31, placeholder: 'DD', count: 5, shiftCount: 10 },
+  YEAR: { id: 'year', min: 1900, max: 2099, placeholder: 'YYYY', count: 10, shiftCount: 100 },
+};
+
+const BUTTON_LABEL_DONE = 'Done';
+const BUTTON_LABEL_CANCEL = 'Cancel';
+const CALENDAR_LABEL_TODAY = 'Today';
+
 const isValidAttrArr = (arr, count) =>
   Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
 
@@ -6684,12 +6650,10 @@ class RawDateFieldClass extends BaseInputClass$a {
     }
   }
 
-  #yearDateCounter = new DateCounter(counterConfig.YEAR, this.onDateCounterChange.bind(this));
-
   dateCounters = [
     new DateCounter(counterConfig.MONTH, this.onDateCounterChange.bind(this)),
     new DateCounter(counterConfig.DAY, this.onDateCounterChange.bind(this)),
-    this.#yearDateCounter,
+    new DateCounter(counterConfig.YEAR, this.onDateCounterChange.bind(this)),
   ];
 
   static get observedAttributes() {
@@ -6804,6 +6768,9 @@ class RawDateFieldClass extends BaseInputClass$a {
   }
 
   get value() {
+    if (this.isInvalidDate()) {
+      return '';
+    }
     return this.timestamp;
   }
 
@@ -6862,8 +6829,8 @@ class RawDateFieldClass extends BaseInputClass$a {
     this.inputElement.addEventListener('focus', this.onFocus.bind(this));
     this.inputElement.addEventListener('blur', this.onBlur.bind(this));
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleNavKeys.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleDigitKeys.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
+    this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
 
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
@@ -6889,6 +6856,17 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
+  handleInput(e) {
+    e.preventDefault();
+
+    if (e.data && isNumber(e.data)) {
+      this.parseDigits(e.data);
+      this.updateCountersDisplay();
+    } else if (e.inputType) {
+      this.handleNavKeys(e);
+    }
+  }
+
   initPopover() {
     this.baseElement.trigger = ['click'];
     this.baseElement.withBackdrop = true;
@@ -7057,6 +7035,8 @@ class RawDateFieldClass extends BaseInputClass$a {
 
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
+      // If no value, on focus select the first part of the format placeholder
+      this.selectedCounterIdx = 0;
       this.setInputSelectionRange();
     }
   }
@@ -7084,18 +7064,14 @@ class RawDateFieldClass extends BaseInputClass$a {
     this.setAttribute('pattern', formats[format].pattern);
   }
 
-  handleDigitKeys(e) {
-    if (isNumber(e.key)) {
-      e.preventDefault();
-
-      this.activeCounter.add(e.key);
-
-      if (this.activeCounter.isFull) {
-        this.selectNextCounter();
-      }
+  parseDigits(value) {
+    this.activeCounter.add(value);
 
-      this.setInputSelectionRange();
+    if (this.activeCounter.isFull) {
+      this.selectNextCounter();
     }
+
+    this.setInputSelectionRange();
   }
 
   getCounterIdx(caretPos) {
@@ -7165,52 +7141,47 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
+  handleArrowKeys(e) {
+    if (e.key === 'ArrowUp') {
+      this.activeCounter.inc();
+    } else if (e.key === 'ArrowDown') {
+      this.activeCounter.dec();
+    } else if (e.key === 'ArrowRight') {
+      this.selectNextCounter();
+    } else if (e.key === 'ArrowLeft') {
+      this.selectPrevCounter();
+    }
+
+    setTimeout(() => {
+      this.setInputSelectionRange();
+    });
+  }
+
   handleNavKeys(e) {
     if (this.isReadOnly) {
       return;
     }
 
-    const { key, shiftKey, metaKey } = e;
-    const keys = getKeyMap(key, shiftKey, metaKey);
-
     if (this.opened) {
       this.closePopover();
     }
 
-    e.preventDefault();
-
-    if (isSupportedKey(key)) {
-      const counter = this.activeCounter;
-
-      if (!counter) return;
+    if (!this.activeCounter) return;
 
-      const counterData = Object.values(counterConfig).find((config) => config.id === counter.id);
-      const { count, shiftCount } = counterData;
-
-      if (keys.backspace) this.handleBackspace();
-      else if (keys.arrowUp) counter.inc();
-      else if (keys.arrowDown) counter.dec();
-      else if (keys.shiftArrowUp) counter.inc(count);
-      else if (keys.shiftArrowDown) counter.dec(count);
-      else if (keys.pageUp) counter.inc(count);
-      else if (keys.pageDown) counter.dec(count);
-      else if (keys.shiftPageUp) counter.inc(shiftCount);
-      else if (keys.shiftPageDown) counter.dec(shiftCount);
-      else if (keys.arrowRight) this.selectNextCounter();
-      else if (keys.arrowLeft) this.selectPrevCounter();
-
-      this.setInputSelectionRange();
+    if (e.inputType === 'deleteContentBackward') {
+      this.handleBackspace();
     }
+
+    this.setInputSelectionRange();
   }
 
   handleBackspace() {
-    const counter = this.activeCounter;
-
-    if (counter.isEmpty) {
+    if (this.activeCounter.isEmpty) {
+      this.activeCounter.clear();
       this.selectPrevCounter();
       this.setInputSelectionRange();
     } else {
-      counter.del();
+      this.activeCounter.del();
     }
   }
 
@@ -7237,8 +7208,9 @@ class RawDateFieldClass extends BaseInputClass$a {
     if (!val) return;
     const [min, max] = val.split?.('-');
     if (min && max) {
-      this.#yearDateCounter.setMin(min);
-      this.#yearDateCounter.setMax(max);
+      const counter = this.getCounterById('year');
+      counter.setMin(min);
+      counter.setMax(max);
     }
   }
 
@@ -7277,17 +7249,45 @@ class RawDateFieldClass extends BaseInputClass$a {
     }
   }
 
+  // we want to validate the date supplied actually exists. For example: Feb 31 is not an actual date,
+  // but in JS when create a `new Date('1999-02-31') we get March 2nd 1999.
+  // To prevent this error from being submitted, we evaluate the
+  // date parts against their generated Date value.
+  isInvalidDate() {
+    return Object.entries(this.getDateVals()).some(
+      ([key, val]) => !val || this.getCounterById(key).numberValue !== val
+    );
+  }
+
   getValidity() {
     if (this.isRequired && this.isCountersEmpty) {
       return { valueMissing: true };
     }
 
-    if (this.isCountersOutOfRange) {
+    if (this.isCountersOutOfRange || this.isInvalidDate()) {
       return { patternMismatch: true };
     }
 
     return {};
   }
+
+  getDateVals() {
+    const ret = {
+      day: '',
+      month: '',
+      year: '',
+    };
+
+    try {
+      const date = newDate(this.timestamp);
+
+      ret.month = date.getMonth() + 1;
+      ret.day = date.getDate();
+      ret.year = date.getFullYear();
+    } catch (e) {}
+
+    return ret;
+  }
 }
 
 const textVars$4 = TextFieldClass.cssVarList;