@descope/web-components-ui 1.96.0 → 1.98.0

package/dist/index.esm.js

@@ -5339,9 +5339,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';
@@ -6546,7 +6550,10 @@ class DateCounter {
 
     data = [...data, num];
 
-    if (this.numberValue > this.max) {
+    // we need to re-evaluate the number value
+    const numVal = Number(data.join(''));
+
+    if (numVal > this.max) {
       data = [num];
     } else if (this.length < data.length) {
       data = data.slice(1, data.length);
@@ -7035,10 +7042,11 @@ 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();
     }
+
+    // On focus select the first part of the format placeholder
+    this.selectedCounterIdx = 0;
+    this.setInputSelectionRange();
   }
 
   onBlur() {
@@ -7204,16 +7212,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');
@@ -7226,9 +7224,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');
       }
@@ -7254,9 +7249,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() {