@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.
package/dist/index.esm.js CHANGED
@@ -906,7 +906,11 @@ const getNestedInput = (ele) => {
906
906
  };
907
907
 
908
908
  const proxyInputMixin =
909
- ({ proxyProps = [] }) =>
909
+ ({
910
+ proxyProps = [],
911
+ // allows us to set the event that should trigger validation
912
+ inputEvent = 'input',
913
+ }) =>
910
914
  (superclass) =>
911
915
  class ProxyInputMixinClass extends inputValidationMixin(superclass) {
912
916
  static get observedAttributes() {
@@ -955,14 +959,7 @@ const proxyInputMixin =
955
959
  return this.inputElement?.validity || {};
956
960
  }
957
961
 
958
- handleInternalInputErrorMessage() {
959
- if (!this.inputElement.checkValidity()) {
960
- this.inputElement.setCustomValidity(this.validationMessage);
961
- }
962
- }
963
-
964
962
  #handleErrorMessage() {
965
- this.handleInternalInputErrorMessage();
966
963
  this.setAttribute('error-message', this.validationMessage);
967
964
  }
968
965
 
@@ -984,22 +981,26 @@ const proxyInputMixin =
984
981
  init() {
985
982
  super.init?.();
986
983
 
984
+ // vaadin sets invalid indication on blur
985
+ // we want invalid indication to appear only when calling reportValidity
986
+ // this is why we are overriding vaadin's setInvalid behavior
987
+ // to update only when the element is valid (so invalid indication will only be removed)
988
+ // and we are adding it in reportValidity
989
+ // eslint-disable-next-line func-names
990
+ this.baseElement._setInvalid = function (invalid) {
991
+ if (!invalid && this._shouldSetInvalid(invalid)) {
992
+ this.invalid = invalid;
993
+ }
994
+ };
995
+
987
996
  // on some cases the base element is not ready so the inputElement is empty
988
997
  // we are deferring this section to make sure the base element is ready
989
998
  setTimeout(() => {
990
- this.inputElement?.addEventListener('input', (e) => {
991
- if (!this.inputElement.checkValidity()) {
992
- this.inputElement.setCustomValidity('');
993
- // after updating the input validity we want to trigger set validity on the wrapping element
994
- // so we will get the updated validity
995
- this.setCustomValidity('');
996
-
997
- // Vaadin is getting the input event before us,
998
- // so in order to make sure they use the updated validity
999
- // we calling their fn after updating the input validity
1000
- this.baseElement.__onInput(e);
1001
-
999
+ this.baseElement?.addEventListener(inputEvent, () => {
1000
+ if (!this.baseElement.checkValidity()) {
1002
1001
  this.#handleErrorMessage();
1002
+ } else {
1003
+ this.removeAttribute('invalid');
1003
1004
  }
1004
1005
  });
1005
1006
 
@@ -1007,13 +1008,6 @@ const proxyInputMixin =
1007
1008
  this.#dispatchChange();
1008
1009
  });
1009
1010
 
1010
- this.#inputElement.addEventListener('blur', () => {
1011
- if (!this.checkValidity()) {
1012
- this.setAttribute('invalid', 'true');
1013
- this.#handleErrorMessage();
1014
- }
1015
- });
1016
-
1017
1011
  this.addEventListener('invalid', () => {
1018
1012
  if (!this.checkValidity()) {
1019
1013
  this.setAttribute('invalid', 'true');
@@ -1021,8 +1015,6 @@ const proxyInputMixin =
1021
1015
  this.#handleErrorMessage();
1022
1016
  });
1023
1017
 
1024
- this.handleInternalInputErrorMessage();
1025
-
1026
1018
  // sync properties
1027
1019
  proxyProps.forEach((prop) => {
1028
1020
  propertyObserver(this, this.inputElement, prop);
@@ -3214,12 +3206,7 @@ const ComboBoxMixin = (superclass) =>
3214
3206
  }
3215
3207
 
3216
3208
  handleSelectedItem() {
3217
- if (this.isDisabled || this.isReadOnly) {
3218
- this.baseElement.selectedItem = undefined;
3219
- return;
3220
- }
3221
-
3222
- const currentSelected = this.selectedItem?.['data-id'];
3209
+ const currentSelected = this.baseElement.selectedItem?.['data-id'];
3223
3210
 
3224
3211
  this.baseElement.selectedItem = undefined;
3225
3212
 
@@ -3232,11 +3219,6 @@ const ComboBoxMixin = (superclass) =>
3232
3219
  if (!this.value) {
3233
3220
  this.setDefaultValue();
3234
3221
  }
3235
-
3236
- // otherwise, set first item as selected item
3237
- if (!this.value) {
3238
- this.value = this.items?.[0]?.['data-id'];
3239
- }
3240
3222
  }
3241
3223
 
3242
3224
  // eslint-disable-next-line class-methods-use-this
@@ -3259,7 +3241,7 @@ const ComboBoxMixin = (superclass) =>
3259
3241
  value: {
3260
3242
  ...valueDescriptor,
3261
3243
  set(val) {
3262
- if (!comboBox.items?.length) {
3244
+ if (!comboBox.baseElement.items?.length) {
3263
3245
  return;
3264
3246
  }
3265
3247
 
@@ -3287,9 +3269,13 @@ const ComboBoxMixin = (superclass) =>
3287
3269
  items.forEach((node) => {
3288
3270
  Object.defineProperty(node, 'data-name', {
3289
3271
  value: node.getAttribute('data-name'),
3272
+ configurable: true,
3273
+ writable: true,
3290
3274
  });
3291
3275
  Object.defineProperty(node, 'data-id', {
3292
3276
  value: node.getAttribute('data-id'),
3277
+ configurable: true,
3278
+ writable: true,
3293
3279
  });
3294
3280
  });
3295
3281
 
@@ -3301,6 +3287,9 @@ const ComboBoxMixin = (superclass) =>
3301
3287
  }, 0);
3302
3288
  }
3303
3289
 
3290
+ // use vaadin combobox custom renderer to render options as HTML
3291
+ // and not via default renderer, which renders only the data-name's value
3292
+ // in its own HTML template
3304
3293
  baseElement.renderer = (root, combo, model) => {
3305
3294
  // eslint-disable-next-line no-param-reassign
3306
3295
  root.innerHTML = model.item.outerHTML;
@@ -3322,6 +3311,16 @@ const ComboBoxMixin = (superclass) =>
3322
3311
  init() {
3323
3312
  super.init?.();
3324
3313
 
3314
+ // eslint-disable-next-line func-names
3315
+ this.getValidity = function () {
3316
+ if (!this.value && this.isRequired) {
3317
+ return {
3318
+ valueMissing: true,
3319
+ };
3320
+ }
3321
+ return {};
3322
+ };
3323
+
3325
3324
  this.setComboBoxDescriptor();
3326
3325
 
3327
3326
  this.#overrideOverlaySettings();
@@ -3340,13 +3339,15 @@ const ComboBoxMixin = (superclass) =>
3340
3339
  }
3341
3340
 
3342
3341
  set value(val) {
3343
- const child = this.baseElement.items.find((item) => item['data-id'] === val);
3342
+ if (val) {
3343
+ const child = this.baseElement.items?.find((item) => item['data-id'] === val);
3344
3344
 
3345
- if (!child) {
3346
- return;
3345
+ if (child) {
3346
+ this.baseElement.selectedItem = child;
3347
+ }
3348
+ } else {
3349
+ this.baseElement.selectedItem = undefined;
3347
3350
  }
3348
-
3349
- this.baseElement.selectedItem = child;
3350
3351
  }
3351
3352
 
3352
3353
  get value() {
@@ -3443,7 +3444,7 @@ const ComboBoxClass = compose(
3443
3444
  attributes: ['size'],
3444
3445
  },
3445
3446
  }),
3446
- composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
3447
+ composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
3447
3448
  componentNameValidationMixin,
3448
3449
  ComboBoxMixin
3449
3450
  )(
@@ -4784,9 +4785,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4784
4785
 
4785
4786
  set value(val) {
4786
4787
  const [countryCode = '', phoneNumber = ''] = val.split('-');
4787
- const countryCodeItem = this.getCountryByDialCode(countryCode);
4788
- if (countryCodeItem) {
4789
- this.countryCodeInput.selectedItem = countryCodeItem;
4788
+
4789
+ if (countryCode) {
4790
+ const countryCodeItem = this.getCountryByDialCode(countryCode);
4791
+ if (countryCodeItem) {
4792
+ this.countryCodeInput.selectedItem = countryCodeItem;
4793
+ }
4794
+ } else {
4795
+ this.countryCodeInput.selectedItem = undefined;
4790
4796
  }
4791
4797
  this.phoneNumberInput.value = phoneNumber;
4792
4798
  }
@@ -4825,7 +4831,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
4825
4831
  init() {
4826
4832
  this.addEventListener('focus', (e) => {
4827
4833
  // we want to ignore focus events we are dispatching
4828
- if (e.isTrusted) this.inputs[0].focus();
4834
+ if (e.isTrusted) this.inputs[1].focus();
4829
4835
  });
4830
4836
 
4831
4837
  super.init?.();
@@ -6031,9 +6037,10 @@ class RawUploadFile extends BaseInputClass {
6031
6037
  */
6032
6038
 
6033
6039
  getValidity() {
6034
- if (this.isRequired && !this.value) {
6040
+ if (this.isRequired && !this.input.value) {
6035
6041
  return { valueMissing: true };
6036
6042
  }
6043
+ this.removeAttribute('invalid');
6037
6044
  return {};
6038
6045
  }
6039
6046