@descope/flow-components 2.0.548 → 2.0.549

package/dist/index.cjs.js

@@ -79160,8 +79160,9 @@ function requireIndex_cjs () {
 	    #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();
+	          }        });
 	      });
 	    }
 
@@ -92990,6 +92991,7 @@ descope-boolean-field-internal {
 	  'PageUp',
 	  'PageDown',
 	  'Meta',
+	  'Enter',
 	];
 
 	const months = [
@@ -93020,7 +93022,7 @@ descope-boolean-field-internal {
 	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';
@@ -93032,7 +93034,7 @@ descope-boolean-field-internal {
 	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();
@@ -93080,6 +93082,7 @@ descope-boolean-field-internal {
 	    shiftArrowDown: shiftKey && key === 'ArrowDown',
 	    shiftPageUp: shiftKey && key === 'PageUp',
 	    shiftPageDown: shiftKey && key === 'PageDown',
+	    enter: key === 'Enter',
 	  };
 	};
 
@@ -94064,12 +94067,23 @@ descope-boolean-field-internal {
 	// 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() {
@@ -94101,23 +94115,27 @@ descope-boolean-field-internal {
 	  }
 
 	  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);
 	    }
 	  }
 
@@ -94126,11 +94144,19 @@ descope-boolean-field-internal {
 	  }
 
 	  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) {
@@ -94142,6 +94168,14 @@ descope-boolean-field-internal {
 	      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');
@@ -94162,10 +94196,40 @@ descope-boolean-field-internal {
 
 	  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() {
@@ -94217,11 +94281,10 @@ descope-boolean-field-internal {
 
 	    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() {
@@ -94229,7 +94292,7 @@ descope-boolean-field-internal {
 	  }
 
 	  // 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())) {
@@ -94281,37 +94344,32 @@ descope-boolean-field-internal {
 	  }
 
 	  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() {
@@ -94319,6 +94377,7 @@ descope-boolean-field-internal {
 
 	    this.updateFormatPattern();
 	    this.initPopover();
+	    this.onDateCounterChange();
 	    this.initInputElement();
 
 	    setTimeout(() => {
@@ -94327,15 +94386,16 @@ descope-boolean-field-internal {
 	  }
 
 	  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: [
@@ -94349,8 +94409,14 @@ descope-boolean-field-internal {
 	        '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',
 	      ],
 	    });
 	  }
@@ -94478,7 +94544,7 @@ descope-boolean-field-internal {
 	      this.getCounterById('month').replaceValue(calendarDate.getMonth() + 1);
 	      this.getCounterById('day').replaceValue(calendarDate.getDate());
 
-	      this.dispatchEvent(new Event('input'));
+	      this.#dispatchInput();
 	    }
 
 	    this.closePopover();
@@ -94489,10 +94555,10 @@ descope-boolean-field-internal {
 	      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();
@@ -94515,13 +94581,6 @@ descope-boolean-field-internal {
 	    });
 	  }
 
-	  onInput(e) {
-	    if (!e.target.value) {
-	      this.calendar?.clear();
-	      this.calendar?.renderCalendar();
-	    }
-	  }
-
 	  onFocus() {
 	    if (this.isReadOnly) {
 	      return;
@@ -94533,16 +94592,13 @@ descope-boolean-field-internal {
 	    }
 	  }
 
-	  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 = '';
 	    }
 	  }
 
@@ -94559,11 +94615,11 @@ descope-boolean-field-internal {
 	    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();
@@ -94583,11 +94639,6 @@ descope-boolean-field-internal {
 	    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);
 	  }
@@ -94645,21 +94696,21 @@ descope-boolean-field-internal {
 	    });
 	  }
 
-	  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;
@@ -94676,12 +94727,10 @@ descope-boolean-field-internal {
 	      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();
 	    }
 	  }
 
@@ -94696,25 +94745,6 @@ descope-boolean-field-internal {
 	    }
 	  }
 
-	  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;
@@ -94734,10 +94764,22 @@ descope-boolean-field-internal {
 	    });
 	  }
 
+	  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);
@@ -94756,16 +94798,20 @@ descope-boolean-field-internal {
 	  }
 
 	  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' },
@@ -94803,6 +94849,30 @@ descope-boolean-field-internal {
 	      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({
@@ -94847,6 +94917,13 @@ descope-boolean-field-internal {
 
 	  [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({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/flow-components",
-	"version": "2.0.548",
+	"version": "2.0.549",
 	"description": "",
 	"main": "dist/index.cjs.js",
 	"module": "dist/index.esm.js",
@@ -112,7 +112,7 @@
 		"webpack-dev-server": "5.2.1"
 	},
 	"dependencies": {
-		"@descope/web-components-ui": "1.88.0"
+		"@descope/web-components-ui": "1.89.0"
 	},
 	"peerDependencies": {
 		"react": ">= 18"