@descope/web-components-ui 1.87.0 → 1.89.0

package/dist/cjs/index.cjs.js

@@ -1765,8 +1765,9 @@ const inputEventsDispatchingMixin$1 = (superclass) =>
     #blockNativeEvents() {
       ['blur', 'focus', 'focusin', 'focusout'].forEach((event) => {
         this.addEventListener(event, (e) => {
-          e.isTrusted && e.target === this && e.stopImmediatePropagation();
-        });
+          if (e.isTrusted && e.target === this) {
+            e.stopImmediatePropagation();
+          }        });
       });
     }
 
@@ -14668,9 +14669,10 @@ const base64Prefix = 'data:image/svg+xml;base64,';
 
 const isBase64Svg = (src) => src.startsWith(base64Prefix);
 
-const createImgEle = (src) => {
+const createImgEle = (src, altText) => {
   const ele = document.createElement('img');
   ele.setAttribute('src', src);
+  ele.setAttribute('alt', altText);
   return ele;
 };
 
@@ -14687,7 +14689,7 @@ const createSvgEle = (text) => {
   return ele;
 };
 
-const createImage = async (src) => {
+const createImage = async (src, altText) => {
   try {
     let ele;
     if (isBase64Svg(src)) {
@@ -14701,7 +14703,7 @@ const createImage = async (src) => {
       ele = createSvgEle(text);
     } else {
       // handle binary
-      ele = createImgEle(src);
+      ele = createImgEle(src, altText);
     }
 
     ele.style.setProperty('max-width', '100%');
@@ -14776,6 +14778,10 @@ class RawImage extends createBaseClass$1({
     }
   }
 
+  get altText() {
+    return this.getAttribute('alt') || '';
+  }
+
   get legacySrc() {
     return this.getAttribute('src');
   }
@@ -14806,7 +14812,7 @@ class RawImage extends createBaseClass$1({
   renderImage() {
     this.toggleVisibility(this.src);
 
-    createImage(this.src).then((res) => {
+    createImage(this.src, this.altText).then((res) => {
       this.innerHTML = '';
       if (res) {
         this.updateFillColor(res);
@@ -15590,6 +15596,7 @@ const COUNTER_SUPPORTED_KEYS = [
   'PageUp',
   'PageDown',
   'Meta',
+  'Enter',
 ];
 
 const months = [
@@ -15620,7 +15627,7 @@ 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: 0, max: 9999, placeholder: 'YYYY', count: 10, shiftCount: 100 },
+  YEAR: { id: 'year', min: 1900, max: 2099, placeholder: 'YYYY', count: 10, shiftCount: 100 },
 };
 
 const BUTTON_LABEL_DONE = 'Done';
@@ -15632,7 +15639,7 @@ const isValidTimestamp = (val) => !Number.isNaN(Number(val));
 const isNumber = (val) => !Number.isNaN(Number(val));
 
 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();
@@ -15680,6 +15687,7 @@ const getKeyMap = (key, shiftKey, metaKey) => {
     shiftArrowDown: shiftKey && key === 'ArrowDown',
     shiftPageUp: shiftKey && key === 'PageUp',
     shiftPageDown: shiftKey && key === 'PageDown',
+    enter: key === 'Enter',
   };
 };
 
@@ -16664,12 +16672,23 @@ const formats = Object.fromEntries(SUPPORTED_FORMATS.map((f) => [f, createFormat
 // For examele, we have a DayCounter, MonthCounter and YearCounter, which can each separately navigate
 // between different ranges.
 class DateCounter {
-  constructor({ id, min, max, placeholder }) {
+  #data = Object.freeze([]);
+
+  constructor({ id, min, max, placeholder }, onChange) {
     this.id = id;
-    this.data = [];
     this.min = min;
     this.max = max;
     this.placeholder = placeholder;
+    this.onChange = onChange;
+  }
+
+  get data() {
+    return this.#data;
+  }
+
+  set data(val) {
+    this.#data = Object.freeze(val);
+    this.onChange?.();
   }
 
   get #initialNumValue() {
@@ -16701,23 +16720,27 @@ class DateCounter {
   }
 
   add(num) {
-    this.data.push(num);
+    // use local var to avoid triggering onChange
+    let data = this.data;
+
+    data = [...data, num];
 
     if (this.numberValue > this.max) {
-      this.data.length = 0;
-      this.data.push(num);
-    } else if (this.length < this.data.length) {
-      this.data.shift();
+      data = [num];
+    } else if (this.length < data.length) {
+      data = data.slice(1, data.length);
     }
 
+    this.data = data;
+
     return num;
   }
 
   del() {
     if (!this.data.filter((d) => d !== '0').filter(Boolean).length) {
-      this.data.length = 0;
+      this.data = [];
     } else {
-      this.data.pop();
+      this.data = this.data.slice(0, this.data.length - 1);
     }
   }
 
@@ -16726,11 +16749,19 @@ class DateCounter {
   }
 
   inc(gap) {
-    this.replaceValue(this.#initialNumValue + (gap || 1));
+    this.replaceValue(
+      this.#initialNumValue < this.max
+        ? Math.max(this.#initialNumValue + (gap || 1), this.min)
+        : this.min
+    );
   }
 
   dec(gap) {
-    this.replaceValue(this.#initialNumValue - (gap || 1));
+    this.replaceValue(
+      this.#initialNumValue > this.min
+        ? Math.min(this.#initialNumValue - (gap || 1), this.max)
+        : this.max
+    );
   }
 
   isInRange(val) {
@@ -16742,6 +16773,14 @@ class DateCounter {
       this.data = val.toString().padStart(this.length, 0).split('');
     }
   }
+
+  setMin(val) {
+    this.min = Number(val);
+  }
+
+  setMax(val) {
+    this.max = Number(val);
+  }
 }
 
 const componentName$j = getComponentName$1('date-field');
@@ -16762,10 +16801,40 @@ class RawDateFieldClass extends BaseInputClass$1 {
 
   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() {
@@ -16817,11 +16886,10 @@ class RawDateFieldClass extends BaseInputClass$1 {
 
     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() {
@@ -16829,7 +16897,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   // 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())) {
@@ -16881,37 +16949,32 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   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() {
@@ -16919,6 +16982,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
 
     this.updateFormatPattern();
     this.initPopover();
+    this.onDateCounterChange();
     this.initInputElement();
 
     setTimeout(() => {
@@ -16927,15 +16991,16 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   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$1(this, this.inputElement, {
       includeAttrs: [
@@ -16949,8 +17014,14 @@ class RawDateFieldClass extends BaseInputClass$1 {
         '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',
       ],
     });
   }
@@ -17078,7 +17149,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
       this.getCounterById('month').replaceValue(calendarDate.getMonth() + 1);
       this.getCounterById('day').replaceValue(calendarDate.getDate());
 
-      this.dispatchEvent(new Event('input'));
+      this.#dispatchInput();
     }
 
     this.closePopover();
@@ -17089,10 +17160,10 @@ class RawDateFieldClass extends BaseInputClass$1 {
       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();
@@ -17115,13 +17186,6 @@ class RawDateFieldClass extends BaseInputClass$1 {
     });
   }
 
-  onInput(e) {
-    if (!e.target.value) {
-      this.calendar?.clear();
-      this.calendar?.renderCalendar();
-    }
-  }
-
   onFocus() {
     if (this.isReadOnly) {
       return;
@@ -17133,16 +17197,13 @@ class RawDateFieldClass extends BaseInputClass$1 {
     }
   }
 
-  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 = '';
     }
   }
 
@@ -17159,11 +17220,11 @@ class RawDateFieldClass extends BaseInputClass$1 {
     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();
@@ -17183,11 +17244,6 @@ class RawDateFieldClass extends BaseInputClass$1 {
     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);
   }
@@ -17245,21 +17301,21 @@ class RawDateFieldClass extends BaseInputClass$1 {
     });
   }
 
-  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;
@@ -17276,12 +17332,10 @@ class RawDateFieldClass extends BaseInputClass$1 {
       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();
     }
   }
 
@@ -17296,25 +17350,6 @@ class RawDateFieldClass extends BaseInputClass$1 {
     }
   }
 
-  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;
@@ -17334,10 +17369,22 @@ class RawDateFieldClass extends BaseInputClass$1 {
     });
   }
 
+  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);
@@ -17356,16 +17403,20 @@ class RawDateFieldClass extends BaseInputClass$1 {
   }
 
   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: host$5, input, inputEleRTL, toggleButton, overlay, backdrop } = {
+const { host: host$5, input, inputEleRTL, toggleButton, overlay, backdrop} = {
   host: { selector: () => ':host' },
   input: { selector: () => 'descope-text-field' },
   inputEleRTL: { selector: () => ':host([st-host-direction="rtl"]) descope-text-field' },
@@ -17403,6 +17454,30 @@ const DateFieldClass = compose$1(
       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({
@@ -17447,6 +17522,13 @@ const dateField = {
 
   [vars$g.rtlInputDirection]: 'ltr',
   [vars$g.rtlInputAlignment]: 'right',
+
+  [vars$g.errorMessageIcon]: refs$1.errorMessageIcon,
+  [vars$g.errorMessageIconSize]: refs$1.errorMessageIconSize,
+  [vars$g.errorMessageIconPadding]: refs$1.errorMessageIconPadding,
+  [vars$g.errorMessageIconRepeat]: refs$1.errorMessageIconRepeat,
+  [vars$g.errorMessageIconPosition]: refs$1.errorMessageIconPosition,
+  [vars$g.errorMessageFontSize]: refs$1.errorMessageFontSize,
 };
 
 var dateField$1 = /*#__PURE__*/Object.freeze({