@descope/web-components-ui 1.0.198 → 1.0.200

Sign up to get free protection for your applications and to get access to all the features.
@@ -2034,7 +2034,11 @@ const getNestedInput = (ele) => {
2034
2034
  };
2035
2035
 
2036
2036
  const proxyInputMixin =
2037
- ({ proxyProps = [] }) =>
2037
+ ({
2038
+ proxyProps = [],
2039
+ // allows us to set the event that should trigger validation
2040
+ inputEvent = 'input',
2041
+ }) =>
2038
2042
  (superclass) =>
2039
2043
  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
2040
2044
  static get observedAttributes() {
@@ -2083,14 +2087,7 @@ const proxyInputMixin =
2083
2087
  return this.inputElement?.validity || {};
2084
2088
  }
2085
2089
 
2086
- handleInternalInputErrorMessage() {
2087
- if (!this.inputElement.checkValidity()) {
2088
- this.inputElement.setCustomValidity(this.validationMessage);
2089
- }
2090
- }
2091
-
2092
2090
  #handleErrorMessage() {
2093
- this.handleInternalInputErrorMessage();
2094
2091
  this.setAttribute('error-message', this.validationMessage);
2095
2092
  }
2096
2093
 
@@ -2112,22 +2109,26 @@ const proxyInputMixin =
2112
2109
  init() {
2113
2110
  super.init?.();
2114
2111
 
2112
+ // vaadin sets invalid indication on blur
2113
+ // we want invalid indication to appear only when calling reportValidity
2114
+ // this is why we are overriding vaadin's setInvalid behavior
2115
+ // to update only when the element is valid (so invalid indication will only be removed)
2116
+ // and we are adding it in reportValidity
2117
+ // eslint-disable-next-line func-names
2118
+ this.baseElement._setInvalid = function (invalid) {
2119
+ if (!invalid && this._shouldSetInvalid(invalid)) {
2120
+ this.invalid = invalid;
2121
+ }
2122
+ };
2123
+
2115
2124
  // on some cases the base element is not ready so the inputElement is empty
2116
2125
  // we are deferring this section to make sure the base element is ready
2117
2126
  setTimeout(() => {
2118
- this.inputElement?.addEventListener('input', (e) => {
2119
- if (!this.inputElement.checkValidity()) {
2120
- this.inputElement.setCustomValidity('');
2121
- // after updating the input validity we want to trigger set validity on the wrapping element
2122
- // so we will get the updated validity
2123
- this.setCustomValidity('');
2124
-
2125
- // Vaadin is getting the input event before us,
2126
- // so in order to make sure they use the updated validity
2127
- // we calling their fn after updating the input validity
2128
- this.baseElement.__onInput(e);
2129
-
2127
+ this.baseElement?.addEventListener(inputEvent, () => {
2128
+ if (!this.baseElement.checkValidity()) {
2130
2129
  this.#handleErrorMessage();
2130
+ } else {
2131
+ this.removeAttribute('invalid');
2131
2132
  }
2132
2133
  });
2133
2134
 
@@ -2135,13 +2136,6 @@ const proxyInputMixin =
2135
2136
  this.#dispatchChange();
2136
2137
  });
2137
2138
 
2138
- this.#inputElement.addEventListener('blur', () => {
2139
- if (!this.checkValidity()) {
2140
- this.setAttribute('invalid', 'true');
2141
- this.#handleErrorMessage();
2142
- }
2143
- });
2144
-
2145
2139
  this.addEventListener('invalid', () => {
2146
2140
  if (!this.checkValidity()) {
2147
2141
  this.setAttribute('invalid', 'true');
@@ -2149,8 +2143,6 @@ const proxyInputMixin =
2149
2143
  this.#handleErrorMessage();
2150
2144
  });
2151
2145
 
2152
- this.handleInternalInputErrorMessage();
2153
-
2154
2146
  // sync properties
2155
2147
  proxyProps.forEach((prop) => {
2156
2148
  propertyObserver(this, this.inputElement, prop);
@@ -4903,12 +4895,7 @@ const ComboBoxMixin = (superclass) =>
4903
4895
  }
4904
4896
 
4905
4897
  handleSelectedItem() {
4906
- if (this.isDisabled || this.isReadOnly) {
4907
- this.baseElement.selectedItem = undefined;
4908
- return;
4909
- }
4910
-
4911
- const currentSelected = this.selectedItem?.['data-id'];
4898
+ const currentSelected = this.baseElement.selectedItem?.['data-id'];
4912
4899
 
4913
4900
  this.baseElement.selectedItem = undefined;
4914
4901
 
@@ -4921,11 +4908,6 @@ const ComboBoxMixin = (superclass) =>
4921
4908
  if (!this.value) {
4922
4909
  this.setDefaultValue();
4923
4910
  }
4924
-
4925
- // otherwise, set first item as selected item
4926
- if (!this.value) {
4927
- this.value = this.items?.[0]?.['data-id'];
4928
- }
4929
4911
  }
4930
4912
 
4931
4913
  // eslint-disable-next-line class-methods-use-this
@@ -4948,7 +4930,7 @@ const ComboBoxMixin = (superclass) =>
4948
4930
  value: {
4949
4931
  ...valueDescriptor,
4950
4932
  set(val) {
4951
- if (!comboBox.items?.length) {
4933
+ if (!comboBox.baseElement.items?.length) {
4952
4934
  return;
4953
4935
  }
4954
4936
 
@@ -4976,9 +4958,13 @@ const ComboBoxMixin = (superclass) =>
4976
4958
  items.forEach((node) => {
4977
4959
  Object.defineProperty(node, 'data-name', {
4978
4960
  value: node.getAttribute('data-name'),
4961
+ configurable: true,
4962
+ writable: true,
4979
4963
  });
4980
4964
  Object.defineProperty(node, 'data-id', {
4981
4965
  value: node.getAttribute('data-id'),
4966
+ configurable: true,
4967
+ writable: true,
4982
4968
  });
4983
4969
  });
4984
4970
 
@@ -4990,6 +4976,9 @@ const ComboBoxMixin = (superclass) =>
4990
4976
  }, 0);
4991
4977
  }
4992
4978
 
4979
+ // use vaadin combobox custom renderer to render options as HTML
4980
+ // and not via default renderer, which renders only the data-name's value
4981
+ // in its own HTML template
4993
4982
  baseElement.renderer = (root, combo, model) => {
4994
4983
  // eslint-disable-next-line no-param-reassign
4995
4984
  root.innerHTML = model.item.outerHTML;
@@ -5011,6 +5000,16 @@ const ComboBoxMixin = (superclass) =>
5011
5000
  init() {
5012
5001
  super.init?.();
5013
5002
 
5003
+ // eslint-disable-next-line func-names
5004
+ this.getValidity = function () {
5005
+ if (!this.value && this.isRequired) {
5006
+ return {
5007
+ valueMissing: true,
5008
+ };
5009
+ }
5010
+ return {};
5011
+ };
5012
+
5014
5013
  this.setComboBoxDescriptor();
5015
5014
 
5016
5015
  this.#overrideOverlaySettings();
@@ -5029,13 +5028,15 @@ const ComboBoxMixin = (superclass) =>
5029
5028
  }
5030
5029
 
5031
5030
  set value(val) {
5032
- const child = this.baseElement.items.find((item) => item['data-id'] === val);
5031
+ if (val) {
5032
+ const child = this.baseElement.items?.find((item) => item['data-id'] === val);
5033
5033
 
5034
- if (!child) {
5035
- return;
5034
+ if (child) {
5035
+ this.baseElement.selectedItem = child;
5036
+ }
5037
+ } else {
5038
+ this.baseElement.selectedItem = undefined;
5036
5039
  }
5037
-
5038
- this.baseElement.selectedItem = child;
5039
5040
  }
5040
5041
 
5041
5042
  get value() {
@@ -5132,7 +5133,7 @@ const ComboBoxClass = compose(
5132
5133
  attributes: ['size'],
5133
5134
  },
5134
5135
  }),
5135
- composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
5136
+ composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
5136
5137
  componentNameValidationMixin,
5137
5138
  ComboBoxMixin
5138
5139
  )(
@@ -7205,9 +7206,10 @@ class RawUploadFile extends BaseInputClass {
7205
7206
  */
7206
7207
 
7207
7208
  getValidity() {
7208
- if (this.isRequired && !this.value) {
7209
+ if (this.isRequired && !this.input.value) {
7209
7210
  return { valueMissing: true };
7210
7211
  }
7212
+ this.removeAttribute('invalid');
7211
7213
  return {};
7212
7214
  }
7213
7215