@descope/web-components-ui 1.97.0 → 1.99.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() {
@@ -5339,9 +5376,13 @@ const weekdays = [
 ];
 
 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 },
+  MONTH: { id: 'month', min: 1, max: 12, placeholder: 'MM' },
+  DAY: { id: 'day', min: 1, max: 31, placeholder: 'DD' },
+  YEAR: { id: 'year', min: 0, max: 9999, placeholder: 'YYYY' },
+};
+
+const valRange = {
+  year: { min: 1900, max: 2099 },
 };
 
 const BUTTON_LABEL_DONE = 'Done';
@@ -7208,16 +7249,6 @@ class RawDateFieldClass extends BaseInputClass$a {
     });
   }
 
-  setYearRange(val) {
-    if (!val) return;
-    const [min, max] = val.split?.('-');
-    if (min && max) {
-      const counter = this.getCounterById('year');
-      counter.setMin(min);
-      counter.setMax(max);
-    }
-  }
-
   togglePopoverAccess(visibility) {
     if (visibility) {
       this.popoverToggleButton.classList.remove('hidden');
@@ -7230,9 +7261,6 @@ class RawDateFieldClass extends BaseInputClass$a {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
     if (oldValue !== newValue) {
-      if (attrName === 'years-range') {
-        this.setYearRange(newValue);
-      }
       if (attrName === 'disable-calendar') {
         this.togglePopoverAccess(newValue !== 'true');
       }
@@ -7258,9 +7286,17 @@ class RawDateFieldClass extends BaseInputClass$a {
   // 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
-    );
+    const yearCounter = this.getCounterById('year');
+    const isYearOutOfRange =
+      yearCounter.numberValue > valRange['year'].max ||
+      yearCounter.numberValue < valRange['year'].min;
+
+    const isDateDisplayMismatch = Object.entries(this.getDateVals()).some(([key, val]) => {
+      const counter = this.getCounterById(key);
+      return !val || counter.numberValue !== val;
+    });
+
+    return isYearOutOfRange || isDateDisplayMismatch;
   }
 
   getValidity() {