@descope/web-components-ui 1.98.0 → 1.100.0

package/dist/index.esm.js

@@ -1453,6 +1453,10 @@ const inputValidationMixin$1 = (superclass) =>
       return `Please match the requested type.`;
     }
 
+    getCustomErrorMessage(attr, defaultMsg) {
+      return this.hasAttribute(attr) ? this.getAttribute(attr) || ' ' : defaultMsg;
+    }
+
     getErrorMessage(flags) {
       const {
         valueMissing,
@@ -1469,31 +1473,33 @@ const inputValidationMixin$1 = (superclass) =>
 
       switch (true) {
         case valueMissing:
-          return (
-            this.getAttribute(errorAttributes$1.valueMissing) || this.defaultErrorMsgValueMissing
+          return this.getCustomErrorMessage(
+            errorAttributes$1.valueMissing,
+            this.defaultErrorMsgValueMissing
           );
         case patternMismatch || stepMismatch || badInput:
-          return (
-            this.getAttribute(errorAttributes$1.patternMismatch) ||
+          return this.getCustomErrorMessage(
+            errorAttributes$1.patternMismatch,
             this.defaultErrorMsgPatternMismatch
           );
         case typeMismatch:
-          return (
-            this.getAttribute(errorAttributes$1.typeMismatch) ||
-            this.getAttribute(errorAttributes$1.patternMismatch) ||
+          return this.getCustomErrorMessage(
+            errorAttributes$1.typeMismatch,
             this.defaultErrorMsgTypeMismatch
           );
         case tooShort:
-          return this.getAttribute(errorAttributes$1.tooShort) || this.defaultErrorMsgTooShort;
+          return this.getCustomErrorMessage(errorAttributes$1.tooShort, this.defaultErrorMsgTooShort);
         case tooLong:
-          return this.getAttribute(errorAttributes$1.tooLong) || this.defaultErrorMsgTooLong;
+          return this.getCustomErrorMessage(errorAttributes$1.tooLong, this.defaultErrorMsgTooLong);
         case rangeUnderflow:
-          return (
-            this.getAttribute(errorAttributes$1.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
+          return this.getCustomErrorMessage(
+            errorAttributes$1.rangeUnderflow,
+            this.defaultErrorMsgRangeUnderflow
           );
         case rangeOverflow:
-          return (
-            this.getAttribute(errorAttributes$1.rangeOverflow) || this.defaultErrorMsgRangeOverflow
+          return this.getCustomErrorMessage(
+            errorAttributes$1.rangeOverflow,
+            this.defaultErrorMsgRangeOverflow
           );
         case customError:
           return this.validationMessage;
@@ -3726,6 +3732,12 @@ const inputValidationMixin = (superclass) =>
       return `Please match the requested type.`;
     }
 
+    getCustomErrorMessage(attr, defaultMsg) {
+      return this.hasAttribute(attr)
+        ? this.getAttribute(attr) || ' '
+        : defaultMsg;
+    }
+
     getErrorMessage(flags) {
       const {
         valueMissing,
@@ -3742,31 +3754,39 @@ const inputValidationMixin = (superclass) =>
 
       switch (true) {
         case valueMissing:
-          return (
-            this.getAttribute(errorAttributes.valueMissing) || this.defaultErrorMsgValueMissing
+          return this.getCustomErrorMessage(
+            errorAttributes.valueMissing,
+            this.defaultErrorMsgValueMissing,
           );
         case patternMismatch || stepMismatch || badInput:
-          return (
-            this.getAttribute(errorAttributes.patternMismatch) ||
-            this.defaultErrorMsgPatternMismatch
+          return this.getCustomErrorMessage(
+            errorAttributes.patternMismatch,
+            this.defaultErrorMsgPatternMismatch,
           );
         case typeMismatch:
-          return (
-            this.getAttribute(errorAttributes.typeMismatch) ||
-            this.getAttribute(errorAttributes.patternMismatch) ||
-            this.defaultErrorMsgTypeMismatch
+          return this.getCustomErrorMessage(
+            errorAttributes.typeMismatch,
+            this.defaultErrorMsgTypeMismatch,
           );
         case tooShort:
-          return this.getAttribute(errorAttributes.tooShort) || this.defaultErrorMsgTooShort;
+          return this.getCustomErrorMessage(
+            errorAttributes.tooShort,
+            this.defaultErrorMsgTooShort,
+          );
         case tooLong:
-          return this.getAttribute(errorAttributes.tooLong) || this.defaultErrorMsgTooLong;
+          return this.getCustomErrorMessage(
+            errorAttributes.tooLong,
+            this.defaultErrorMsgTooLong,
+          );
         case rangeUnderflow:
-          return (
-            this.getAttribute(errorAttributes.rangeUnderflow) || this.defaultErrorMsgRangeUnderflow
+          return this.getCustomErrorMessage(
+            errorAttributes.rangeUnderflow,
+            this.defaultErrorMsgRangeUnderflow,
           );
         case rangeOverflow:
-          return (
-            this.getAttribute(errorAttributes.rangeOverflow) || this.defaultErrorMsgRangeOverflow
+          return this.getCustomErrorMessage(
+            errorAttributes.rangeOverflow,
+            this.defaultErrorMsgRangeOverflow,
           );
         case customError:
           return this.validationMessage;
@@ -3777,7 +3797,11 @@ const inputValidationMixin = (superclass) =>
 
     #setValidity() {
       const validity = this.isReadOnly ? {} : this.getValidity();
-      this.#internals.setValidity(validity, this.getErrorMessage(validity), this.validationTarget);
+      this.#internals.setValidity(
+        validity,
+        this.getErrorMessage(validity),
+        this.validationTarget,
+      );
     }
 
     get validationMessage() {
@@ -3814,7 +3838,11 @@ const inputValidationMixin = (superclass) =>
 
     setCustomValidity(errorMessage) {
       if (errorMessage) {
-        this.#internals.setValidity({ customError: true }, errorMessage, this.validationTarget);
+        this.#internals.setValidity(
+          { customError: true },
+          errorMessage,
+          this.validationTarget,
+        );
       } else {
         this.#internals.setValidity({});
         this.#setValidity();
@@ -3822,15 +3850,24 @@ const inputValidationMixin = (superclass) =>
     }
 
     get isRequired() {
-      return this.hasAttribute('required') && this.getAttribute('required') !== 'false';
+      return (
+        this.hasAttribute('required') &&
+        this.getAttribute('required') !== 'false'
+      );
     }
 
     get isReadOnly() {
-      return this.hasAttribute('readonly') && this.getAttribute('readonly') !== 'false';
+      return (
+        this.hasAttribute('readonly') &&
+        this.getAttribute('readonly') !== 'false'
+      );
     }
 
     get isDisabled() {
-      return this.hasAttribute('disabled') && this.getAttribute('disabled') !== 'false';
+      return (
+        this.hasAttribute('disabled') &&
+        this.getAttribute('disabled') !== 'false'
+      );
     }
 
     get pattern() {
@@ -6629,6 +6666,8 @@ class RawDateFieldClass extends BaseInputClass$a {
 
   selectedCounterIdx = 0;
 
+  #focused = false;
+
   updateCountersDisplay() {
     this.inputElement.value = this.countersValue;
   }
@@ -6839,6 +6878,22 @@ class RawDateFieldClass extends BaseInputClass$a {
     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);
+      }
+    });
+
     forwardAttrs$1(this, this.inputElement, {
       includeAttrs: [
         'label',
@@ -7036,20 +7091,34 @@ class RawDateFieldClass extends BaseInputClass$a {
   }
 
   onFocus() {
-    if (this.isReadOnly) {
+    if (this.isReadOnly || this.#focused) {
       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();
+  }
+
+  resetDisplay() {
     if (!this.inputElement.value) {
       this.inputElement.value = this.format;
     }
 
     // On focus select the first part of the format placeholder
     this.selectedCounterIdx = 0;
-    this.setInputSelectionRange();
+
+    setTimeout(() => {
+      // set selection on first counter
+      this.inputElement.setSelectionRange(0, this.sortedCounters[0].length);
+    });
   }
 
   onBlur() {
+    this.#focused = false;
+
     if (this.opened) {
       return;
     }
@@ -7093,7 +7162,9 @@ class RawDateFieldClass extends BaseInputClass$a {
   }
 
   setSelectedCounterByCaretPosition(e) {
-    this.selectedCounterIdx = this.getCounterIdx(e.target.selectionStart);
+    this.selectedCounterIdx = this.getCounterIdx(
+      e.target.selectionStart || this.inputElement.selectionStart
+    );
   }
 
   selectNextCounter() {
@@ -7199,7 +7270,12 @@ class RawDateFieldClass extends BaseInputClass$a {
     }
     e.preventDefault();
     this.setSelectedCounterByCaretPosition(e);
-    this.setInputSelectionRange();
+
+    // 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();
+    });
   }
 
   onInitialValueChange(val) {