@descope/web-components-ui 1.88.0 → 1.90.0

package/src/components/descope-date-field/DateFieldClass.js

@@ -42,10 +42,40 @@ class RawDateFieldClass extends BaseInputClass {
 
   selectedCounterIdx = 0;
 
+  updateCountersDisplay() {
+    this.inputElement.value = this.countersValue;
+  }
+
+  updateValue() {
+    if (this.isCountersOutOfRange) {
+      this.updateTimestamp('');
+    } else {
+      const date = formats[this.format].getDate(this.inputElement.value);
+      this.updateTimestamp(date.getTime());
+    }
+  }
+
+  onDateCounterChange = () => {
+    this.updateCountersDisplay();
+    this.updateValue();
+    // update validity
+    this.#dispatchInput();
+  };
+
+  updateTimestamp(epochOrDate) {
+    if (!epochOrDate) {
+      this.timestamp = '';
+    } else {
+      this.timestamp = newDate(epochOrDate).getTime();
+    }
+  }
+
+  #yearDateCounter = new DateCounter(counterConfig.YEAR, this.onDateCounterChange.bind(this));
+
   dateCounters = [
-    new DateCounter(counterConfig.MONTH),
-    new DateCounter(counterConfig.DAY),
-    new DateCounter(counterConfig.YEAR),
+    new DateCounter(counterConfig.MONTH, this.onDateCounterChange.bind(this)),
+    new DateCounter(counterConfig.DAY, this.onDateCounterChange.bind(this)),
+    this.#yearDateCounter,
   ];
 
   static get observedAttributes() {
@@ -97,11 +127,10 @@ class RawDateFieldClass extends BaseInputClass {
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
+  }
 
-    this.oninvalid = () => {
-      this.inputElement.setAttribute('invalid', 'true');
-      this.inputElement.focus();
-    };
+  get validationTarget() {
+    return this.inputElement;
   }
 
   get opened() {
@@ -109,7 +138,7 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   // returns the input's value as a timestamp
-  get inputValueTimestamp() {
+  get displayValueEpoch() {
     const date = formats[this.format].getDate(this.inputElement.value);
 
     if (!isValidTimestamp(date?.getTime())) {
@@ -161,37 +190,32 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   set value(val) {
-    if (!val) return;
-
-    const numVal = Number(val);
-    const isValTimestamp = !Number.isNaN(numVal);
-
-    let date;
-    let timestamp;
-
-    if (isValTimestamp) {
-      date = newDate(numVal);
-      timestamp = numVal;
+    if (val) {
+      this.updateTimestamp(val);
+      this.updateDateCounters(newDate(val));
     } else {
-      date = newDate(val);
-      timestamp = date.getTime();
+      this.updateTimestamp('');
     }
+  }
 
-    if (!isValidTimestamp(timestamp) || timestamp === this.timestamp) {
-      return;
-    }
+  get isCountersEmpty() {
+    return this.dateCounters.every((dc) => dc.isEmpty);
+  }
 
-    this.timestamp = timestamp;
+  get isCountersOutOfRange() {
+    return this.dateCounters.some((dc) => !dc.isInRange(dc.numberValue));
+  }
 
-    this.updateInputDisplay();
-    this.updateDateCounters(date);
+  reportValidity() {
+    this.inputElement.reportValidity();
+  }
 
-    // since baseElement is set to vaadin-popover, we need to manually dispatch an input event to trigger getValidity
-    this.dispatchEvent(new Event('input'));
+  #dispatchInput() {
+    this.inputElement.baseElement.dispatchEvent(new Event('input', { bubbles: true }));
   }
 
   updateInputDisplay() {
-    this.inputElement.value = formatTimestamp(newDate(this.value).getTime(), this.format);
+    this.inputElement.value = formatTimestamp(newDate(this.countersValue).getTime(), this.format);
   }
 
   init() {
@@ -199,6 +223,7 @@ class RawDateFieldClass extends BaseInputClass {
 
     this.updateFormatPattern();
     this.initPopover();
+    this.onDateCounterChange();
     this.initInputElement();
 
     setTimeout(() => {
@@ -207,15 +232,16 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   initInputElement() {
+    this.inputElement.getValidity = this.getValidity.bind(this);
+    this.inputElement.baseElement.checkValidity = this.checkValidity.bind(this);
+
     this.popoverToggleButton.addEventListener('click', this.onPopoverToggle.bind(this));
 
     this.inputElement.addEventListener('focus', this.onFocus.bind(this));
     this.inputElement.addEventListener('blur', this.onBlur.bind(this));
-    this.inputElement.addEventListener('input', this.onInput.bind(this));
     this.inputElement.addEventListener('click', this.handleMouseCaretPositionChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleKeyDownValueChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleKeydownCaretPositionChange.bind(this));
-    this.inputElement.addEventListener('keydown', this.handleValueChange.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleNavKeys.bind(this));
+    this.inputElement.addEventListener('keydown', this.handleDigitKeys.bind(this));
 
     forwardAttrs(this, this.inputElement, {
       includeAttrs: [
@@ -229,8 +255,14 @@ class RawDateFieldClass extends BaseInputClass {
         'full-width',
         'st-host-direction',
         'pattern',
-        'invalid',
         'bordered',
+        'data-errormessage-value-missing',
+        'data-errormessage-pattern-mismatch',
+        'data-errormessage-range-underflow',
+        'data-errormessage-range-overflow',
+        'st-error-message-icon',
+        'st-error-message-icon-size',
+        'st-error-message-icon-padding',
       ],
     });
   }
@@ -358,7 +390,7 @@ class RawDateFieldClass extends BaseInputClass {
       this.getCounterById('month').replaceValue(calendarDate.getMonth() + 1);
       this.getCounterById('day').replaceValue(calendarDate.getDate());
 
-      this.dispatchEvent(new Event('input'));
+      this.#dispatchInput();
     }
 
     this.closePopover();
@@ -369,10 +401,10 @@ class RawDateFieldClass extends BaseInputClass {
       isValidTimestamp(newDate(this.inputElement.value || '').getTime()) &&
       formats[this.format].validate(this.inputElement.value);
 
-    if (this.inputValueTimestamp || validInputVal) {
+    if (this.displayValueEpoch || validInputVal) {
       this.calendar.setAttribute(
         'initial-value',
-        formatTimestamp(this.inputValueTimestamp || this.timestamp, NATIVE_FORMAT)
+        formatTimestamp(this.displayValueEpoch || this.timestamp, NATIVE_FORMAT)
       );
     } else {
       this.calendar.clearValue();
@@ -395,13 +427,6 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
-  onInput(e) {
-    if (!e.target.value) {
-      this.calendar?.clear();
-      this.calendar?.renderCalendar();
-    }
-  }
-
   onFocus() {
     if (this.isReadOnly) {
       return;
@@ -413,16 +438,13 @@ class RawDateFieldClass extends BaseInputClass {
     }
   }
 
-  clearInputValue() {
-    this.inputElement.value = '';
-    this.resetDateCounters();
-  }
-
   onBlur() {
-    if (this.inputValueTimestamp) {
-      this.value = this.inputValueTimestamp;
-    } else if (!this.opened && this.countersValue === this.format) {
-      this.clearInputValue();
+    if (this.opened) {
+      return;
+    }
+
+    if (this.inputElement.value === this.format) {
+      this.inputElement.value = '';
     }
   }
 
@@ -439,11 +461,11 @@ class RawDateFieldClass extends BaseInputClass {
     this.setAttribute('pattern', formats[format].pattern);
   }
 
-  handleValueChange(e) {
+  handleDigitKeys(e) {
     if (isNumber(e.key)) {
       e.preventDefault();
 
-      this.handleCountersValue(e.key);
+      this.activeCounter.add(e.key);
 
       if (this.activeCounter.isFull) {
         this.selectNextCounter();
@@ -463,11 +485,6 @@ class RawDateFieldClass extends BaseInputClass {
     return [c1, c2, c3].indexOf(true);
   }
 
-  handleCountersValue(val) {
-    this.activeCounter.add(val);
-    this.inputElement.value = this.countersValue;
-  }
-
   setSelectedCounterByCaretPosition(e) {
     this.selectedCounterIdx = this.getCounterIdx(e.target.selectionStart);
   }
@@ -527,21 +544,21 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
-  handleKeyDownValueChange(e) {
+  handleNavKeys(e) {
     if (this.isReadOnly) {
       return;
     }
 
     const { key, shiftKey, metaKey } = e;
     const keys = getKeyMap(key, shiftKey, metaKey);
-    const allowedOperations = keys.refresh || keys.tab || keys.shiftTab;
 
     if (this.opened) {
       this.closePopover();
     }
 
+    e.preventDefault();
+
     if (isSupportedKey(key)) {
-      e.preventDefault();
       const counter = this.activeCounter;
 
       if (!counter) return;
@@ -558,12 +575,10 @@ class RawDateFieldClass extends BaseInputClass {
       else if (keys.pageDown) counter.dec(count);
       else if (keys.shiftPageUp) counter.inc(shiftCount);
       else if (keys.shiftPageDown) counter.dec(shiftCount);
-
-      this.inputElement.value = this.countersValue;
+      else if (keys.arrowRight) this.selectNextCounter();
+      else if (keys.arrowLeft) this.selectPrevCounter();
 
       this.setInputSelectionRange();
-    } else if (!allowedOperations) {
-      e.preventDefault();
     }
   }
 
@@ -578,25 +593,6 @@ class RawDateFieldClass extends BaseInputClass {
     }
   }
 
-  handleKeydownCaretPositionChange(e) {
-    if (this.opened) {
-      return;
-    }
-
-    const { key } = e;
-
-    if (isSupportedKey(key)) {
-      e.preventDefault();
-
-      const keys = getKeyMap(key, false);
-
-      if (keys.arrowRight) this.selectNextCounter();
-      else if (keys.arrowLeft) this.selectPrevCounter();
-
-      this.setInputSelectionRange();
-    }
-  }
-
   handleMouseCaretPositionChange(e) {
     if (this.opened) {
       return;
@@ -616,10 +612,22 @@ class RawDateFieldClass extends BaseInputClass {
     });
   }
 
+  setYearRange(val) {
+    if (!val) return;
+    const [min, max] = val.split?.('-');
+    if (min && max) {
+      this.#yearDateCounter.setMin(min);
+      this.#yearDateCounter.setMax(max);
+    }
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
     if (oldValue !== newValue) {
+      if (attrName === 'years-range') {
+        this.setYearRange(newValue);
+      }
       if (dateFieldAttrs.includes(attrName)) {
         if (newValue && attrName === 'format') {
           this.onFormatUpdate(newValue);
@@ -638,16 +646,20 @@ class RawDateFieldClass extends BaseInputClass {
   }
 
   getValidity() {
-    if (this.isRequired && !this.inputElement.value) {
+    if (this.isRequired && this.isCountersEmpty) {
       return { valueMissing: true };
     }
 
+    if (this.isCountersOutOfRange) {
+      return { patternMismatch: true };
+    }
+
     return {};
   }
 }
 
 const textVars = TextFieldClass.cssVarList;
-const { host, input, inputEleRTL, toggleButton, overlay, backdrop } = {
+const { host, input, inputEleRTL, toggleButton, overlay, backdrop, errorMessage } = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   inputEleRTL: { selector: () => ':host([st-host-direction="rtl"]) descope-text-field' },
@@ -685,6 +697,30 @@ export const DateFieldClass = compose(
       overlayOutlineStyle: {
         property: () => DateFieldClass.cssVarList.overlayOutlineStyle,
       },
+      errorMessageIcon: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageIcon,
+      },
+      errorMessageIconSize: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageIconSize,
+      },
+      errorMessageIconPadding: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageIconPadding,
+      },
+      errorMessageIconRepeat: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageIconRepeat,
+      },
+      errorMessageIconPosition: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageIconPosition,
+      },
+      errorMessageFontSize: {
+        selector: TextFieldClass.componentName,
+        property: TextFieldClass.cssVarList.errorMessageFontSize,
+      },
     },
   }),
   portalMixin({

package/src/components/descope-date-field/consts.js

@@ -17,6 +17,7 @@ export const COUNTER_SUPPORTED_KEYS = [
   'PageUp',
   'PageDown',
   'Meta',
+  'Enter',
 ];
 
 export const months = [
@@ -47,7 +48,7 @@ export const weekdays = [
 export 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: 0, max: 9999, placeholder: 'YYYY', count: 10, shiftCount: 100 },
+  YEAR: { id: 'year', min: 1900, max: 2099, placeholder: 'YYYY', count: 10, shiftCount: 100 },
 };
 
 export const BUTTON_LABEL_DONE = 'Done';

package/src/components/descope-date-field/helpers.js

@@ -5,7 +5,7 @@ export const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 export const isNumber = (val) => !Number.isNaN(Number(val));
 
 export const getTimestampParts = (timestamp) => {
-  const date = new Date(timestamp);
+  const date = newDate(timestamp);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();
@@ -53,6 +53,7 @@ export const getKeyMap = (key, shiftKey, metaKey) => {
     shiftArrowDown: shiftKey && key === 'ArrowDown',
     shiftPageUp: shiftKey && key === 'PageUp',
     shiftPageDown: shiftKey && key === 'PageDown',
+    enter: key === 'Enter',
   };
 };
 

package/src/theme/components/dateField.js

@@ -26,6 +26,13 @@ const dateField = {
 
   [vars.rtlInputDirection]: 'ltr',
   [vars.rtlInputAlignment]: 'right',
+
+  [vars.errorMessageIcon]: refs.errorMessageIcon,
+  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
+  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
+  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
+  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
+  [vars.errorMessageFontSize]: refs.errorMessageFontSize,
 };
 
 export default dateField;