@descope/web-components-ui 1.103.0 → 1.105.0

package/dist/index.esm.js

@@ -5499,6 +5499,8 @@ const BUTTON_LABEL_DONE = 'Done';
 const BUTTON_LABEL_CANCEL = 'Cancel';
 const CALENDAR_LABEL_TODAY = 'Today';
 
+const MOBILE_DEVICE_INTERACTION_TIMEOUT_MS = 150;
+
 const isValidAttrArr = (arr, count) =>
   Array.isArray(arr) && arr.length === count && arr.filter(Boolean).length === count;
 
@@ -6776,8 +6778,6 @@ class RawDateFieldClass extends BaseInputClass$a {
 
   selectedCounterIdx = 0;
 
-  #focused = false;
-
   updateCountersDisplay() {
     this.inputElement.value = this.countersValue;
   }
@@ -6987,22 +6987,7 @@ class RawDateFieldClass extends BaseInputClass$a {
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
     this.inputElement.addEventListener('keydown', this.handleArrowKeys.bind(this));
     this.inputElement.addEventListener('beforeinput', this.handleInput.bind(this));
-
-    // We want to handle touch events the same way we handle `click` events.
-    // Since we can't seem to block touch events (`touch-action: none` or preventing default on `touchstart`
-    // or `touchend`, we listen to `pointerdown` and in case it's of type `touch` we execute
-    // the component's logic for range selection.
-    this.inputElement.addEventListener('pointerdown', (e) => {
-      if (e.pointerType === 'touch') {
-        e.preventDefault();
-        if (!this.#focused) {
-          this.inputElement.focus();
-        }
-        setTimeout(() => {
-          this.handleMouseCaretPositionChange(e);
-        }, 250);
-      }
-    });
+    this.inputElement.addEventListener('pointerdown', this.onPointerDown.bind(this));
 
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
@@ -7200,16 +7185,19 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
+  // In mobile devices, there are cases were `pointerdown` is triggered
+  // instead of `click`.
+  onPointerDown(e) {
+    setTimeout(() => this.handleMouseCaretPositionChange(e), MOBILE_DEVICE_INTERACTION_TIMEOUT_MS);
+  }
+
   onFocus() {
-    if (this.isReadOnly || this.#focused) {
+    if (this.isReadOnly) {
       return;
     }
 
-    // We use this flag to support mobile logic, which calls `focus` on touch event, we want to make sure
-    // focus executes it logic only when needed.
-    this.#focused = true;
-
-    this.resetDisplay();
+    // We need to wait for focus to end before we set selection
+    setTimeout(() => this.resetDisplay());
   }
 
   resetDisplay() {
@@ -7217,18 +7205,12 @@ class RawDateFieldClass extends BaseInputClass$a {
       this.inputElement.value = this.format;
     }
 
-    // On focus select the first part of the format placeholder
+    // On focus select the first counter
     this.selectedCounterIdx = 0;
-
-    setTimeout(() => {
-      // set selection on first counter
-      this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
-    });
+    this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
   }
 
   onBlur() {
-    this.#focused = false;
-
     if (this.opened) {
       return;
     }
@@ -7258,6 +7240,8 @@ class RawDateFieldClass extends BaseInputClass$a {
       this.selectNextCounter();
     }
 
+    // We wait for the digit to be parsed, and only then set the selection.
+    // Failing to do so results in unexpected "jump" of the screen in mobile devices.
     this.setInputSelectionRange();
   }
 
@@ -7273,7 +7257,11 @@ class RawDateFieldClass extends BaseInputClass$a {
 
   setSelectedCounterByCaretPosition(e) {
     this.selectedCounterIdx = this.getCounterIdx(
-      e.target.selectionStart || this.inputElement.selectionStart
+      // if triggered by touch event, target might not include `selectionStart`
+      // in that case we fall back to the inputElement's `selectionStart` value.
+      // Therefore, it is recommended to run this function with setTimeout,
+      // at least for mobile events.
+      e.target?.selectionStart || this.inputElement.selectionStart
     );
   }
 
@@ -7299,14 +7287,18 @@ class RawDateFieldClass extends BaseInputClass$a {
       return;
     }
 
-    const caretStart = this.sortedCounters
-      .slice(0, this.selectedCounterIdx)
-      .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
+    // We wait for before setting the selection, otherwise there's an
+    // unexpected "jump" of the screen in mobile devices.
+    setTimeout(() => {
+      const caretStart = this.sortedCounters
+        .slice(0, this.selectedCounterIdx)
+        .reduce((acc, counter) => acc + counter.length, this.selectedCounterIdx);
 
-    this.inputElement.setSelectionRange(
-      caretStart,
-      caretStart + this.sortedCounters[this.selectedCounterIdx].length
-    );
+      this.inputElement.setSelectionRange(
+        caretStart,
+        caretStart + this.sortedCounters[this.selectedCounterIdx].length
+      );
+    });
   }
 
   resetDateCounters() {
@@ -7341,9 +7333,7 @@ class RawDateFieldClass extends BaseInputClass$a {
       this.selectPrevCounter();
     }
 
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setInputSelectionRange();
   }
 
   handleNavKeys(e) {
@@ -7365,27 +7355,32 @@ class RawDateFieldClass extends BaseInputClass$a {
   }
 
   handleBackspace() {
-    if (this.activeCounter.isEmpty) {
-      this.activeCounter.clear();
+    const counter = this.activeCounter;
+
+    if (counter.isEmpty) {
       this.selectPrevCounter();
       this.setInputSelectionRange();
     } else {
-      this.activeCounter.del();
+      counter.set('');
     }
+
+    // To support keyboards like SwiftKey, we need to re-render the counters display and selection,
+    // otherwise we get an unexpected behavior, where the format is deleted.
+    setTimeout(() => {
+      this.updateCountersDisplay();
+      this.setInputSelectionRange();
+    });
   }
 
   handleMouseCaretPositionChange(e) {
     if (this.opened) {
       return;
     }
+
     e.preventDefault();
-    this.setSelectedCounterByCaretPosition(e);
 
-    // On keydown - in desktop mode - selection is sometimes not set, and instead there is a cursor.
-    // We need to wait until we can set selection range.
-    setTimeout(() => {
-      this.setInputSelectionRange();
-    });
+    this.setSelectedCounterByCaretPosition(e);
+    this.setInputSelectionRange();
   }
 
   onInitialValueChange(val) {
@@ -19026,6 +19021,13 @@ const colors$2 = genColors({
     highlight: '#fef1f1',
     contrast: '#ffffff',
   },
+  warning: {
+    main: '#c45512',
+    dark: '#a24309',
+    light: '#ff985a',
+    highlight: '#fdf0e5',
+    contrast: '#ffffff',
+  },
 });
 
 const fonts$1 = {
@@ -19203,6 +19205,13 @@ const colors$1 = genColors$1({
     highlight: '#fef1f1',
     contrast: '#ffffff',
   },
+  warning: {
+    main: '#c45512',
+    dark: '#a24309',
+    light: '#ff985a',
+    highlight: '#fdf0e5',
+    contrast: '#ffffff',
+  },
 });
 
 const fonts = {
@@ -20220,9 +20229,21 @@ const text$1 = {
     error: {
       [vars$O.textColor]: globalRefs$A.colors.error.main,
     },
+    'error-dark': {
+      [vars$O.textColor]: globalRefs$A.colors.error.dark,
+    },
     success: {
       [vars$O.textColor]: globalRefs$A.colors.success.main,
     },
+    'success-dark': {
+      [vars$O.textColor]: globalRefs$A.colors.success.dark,
+    },
+    warning: {
+      [vars$O.textColor]: globalRefs$A.colors.warning.main,
+    },
+    'warning-dark': {
+      [vars$O.textColor]: globalRefs$A.colors.warning.dark,
+    },
   },
 
   textAlign: {
@@ -24332,6 +24353,13 @@ const colors = {
     highlight: '#4a0603',
     contrast: '#000000',
   },
+  warning: {
+    main: '#EF7A33',
+    dark: '#FF985A',
+    light: '#FF6304',
+    highlight: '#C45512',
+    contrast: '#000000',
+  },
 };
 
 const darkTheme = merge({}, defaultTheme, {