@descope/web-components-ui 1.91.0 → 1.93.0

package/dist/index.esm.js

@@ -5239,63 +5239,6 @@ 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));
@@ -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;
 
@@ -6862,8 +6828,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('input', this.handleInput.bind(this));
 
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
@@ -6889,6 +6855,15 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
+  handleInput(e) {
+    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;
@@ -7084,18 +7059,14 @@ class RawDateFieldClass extends BaseInputClass$a {
     this.setAttribute('pattern', formats[format].pattern);
   }
 
-  handleDigitKeys(e) {
-    if (isNumber(e.key)) {
-      e.preventDefault();
+  parseDigits(value) {
+    this.activeCounter.add(value);
 
-      this.activeCounter.add(e.key);
-
-      if (this.activeCounter.isFull) {
-        this.selectNextCounter();
-      }
-
-      this.setInputSelectionRange();
+    if (this.activeCounter.isFull) {
+      this.selectNextCounter();
     }
+
+    this.setInputSelectionRange();
   }
 
   getCounterIdx(caretPos) {
@@ -7165,52 +7136,49 @@ 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 (!this.activeCounter) return;
 
-      if (!counter) 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();
     }
   }
 
@@ -18488,8 +18456,11 @@ class RawHybridField extends BaseClass$2 {
     // On reportValidity we want to set the caret at the end of the input value.
     // Since checkValidity triggers `focus` on the input, it sets the caret at the start of the input,
     // regardless the existing value.
+    const origInputType = ele.type;
+    ele.setAttribute('type', 'text');
     setTimeout(() => {
       ele.setSelectionRange?.(ele.value.length, ele.value.length);
+      ele.setAttribute('type', origInputType);
     });
 
     return this.activeInput.reportValidity();