@descope/web-components-ui 1.0.199 → 1.0.201

package/dist/index.esm.js

@@ -906,7 +906,11 @@ const getNestedInput = (ele) => {
 };
 
 const proxyInputMixin =
-  ({ proxyProps = [] }) =>
+  ({
+    proxyProps = [],
+    // allows us to set the event that should trigger validation
+    inputEvent = 'input',
+  }) =>
   (superclass) =>
     class ProxyInputMixinClass extends inputValidationMixin(superclass) {
       static get observedAttributes() {
@@ -955,14 +959,7 @@ const proxyInputMixin =
         return this.inputElement?.validity || {};
       }
 
-      handleInternalInputErrorMessage() {
-        if (!this.inputElement.checkValidity()) {
-          this.inputElement.setCustomValidity(this.validationMessage);
-        }
-      }
-
       #handleErrorMessage() {
-        this.handleInternalInputErrorMessage();
         this.setAttribute('error-message', this.validationMessage);
       }
 
@@ -984,22 +981,26 @@ const proxyInputMixin =
       init() {
         super.init?.();
 
+        // vaadin sets invalid indication on blur
+        // we want invalid indication to appear only when calling reportValidity
+        // this is why we are overriding vaadin's setInvalid behavior
+        // to update only when the element is valid (so invalid indication will only be removed)
+        // and we are adding it in reportValidity
+        // eslint-disable-next-line func-names
+        this.baseElement._setInvalid = function (invalid) {
+          if (!invalid && this._shouldSetInvalid(invalid)) {
+            this.invalid = invalid;
+          }
+        };
+
         // on some cases the base element is not ready so the inputElement is empty
         // we are deferring this section to make sure the base element is ready
         setTimeout(() => {
-          this.inputElement?.addEventListener('input', (e) => {
-            if (!this.inputElement.checkValidity()) {
-              this.inputElement.setCustomValidity('');
-              // after updating the input validity we want to trigger set validity on the wrapping element
-              // so we will get the updated validity
-              this.setCustomValidity('');
-
-              // Vaadin is getting the input event before us,
-              // so in order to make sure they use the updated validity
-              // we calling their fn after updating the input validity
-              this.baseElement.__onInput(e);
-
+          this.baseElement?.addEventListener(inputEvent, () => {
+            if (!this.baseElement.checkValidity()) {
               this.#handleErrorMessage();
+            } else {
+              this.removeAttribute('invalid');
             }
           });
 
@@ -1007,13 +1008,6 @@ const proxyInputMixin =
             this.#dispatchChange();
           });
 
-          this.#inputElement.addEventListener('blur', () => {
-            if (!this.checkValidity()) {
-              this.setAttribute('invalid', 'true');
-              this.#handleErrorMessage();
-            }
-          });
-
           this.addEventListener('invalid', () => {
             if (!this.checkValidity()) {
               this.setAttribute('invalid', 'true');
@@ -1021,8 +1015,6 @@ const proxyInputMixin =
             this.#handleErrorMessage();
           });
 
-          this.handleInternalInputErrorMessage();
-
           // sync properties
           proxyProps.forEach((prop) => {
             propertyObserver(this, this.inputElement, prop);
@@ -3214,12 +3206,7 @@ const ComboBoxMixin = (superclass) =>
     }
 
     handleSelectedItem() {
-      if (this.isDisabled || this.isReadOnly) {
-        this.baseElement.selectedItem = undefined;
-        return;
-      }
-
-      const currentSelected = this.selectedItem?.['data-id'];
+      const currentSelected = this.baseElement.selectedItem?.['data-id'];
 
       this.baseElement.selectedItem = undefined;
 
@@ -3232,11 +3219,6 @@ const ComboBoxMixin = (superclass) =>
       if (!this.value) {
         this.setDefaultValue();
       }
-
-      // otherwise, set first item as selected item
-      if (!this.value) {
-        this.value = this.items?.[0]?.['data-id'];
-      }
     }
 
     // eslint-disable-next-line class-methods-use-this
@@ -3259,7 +3241,7 @@ const ComboBoxMixin = (superclass) =>
         value: {
           ...valueDescriptor,
           set(val) {
-            if (!comboBox.items?.length) {
+            if (!comboBox.baseElement.items?.length) {
               return;
             }
 
@@ -3287,9 +3269,13 @@ const ComboBoxMixin = (superclass) =>
         items.forEach((node) => {
           Object.defineProperty(node, 'data-name', {
             value: node.getAttribute('data-name'),
+            configurable: true,
+            writable: true,
           });
           Object.defineProperty(node, 'data-id', {
             value: node.getAttribute('data-id'),
+            configurable: true,
+            writable: true,
           });
         });
 
@@ -3301,6 +3287,9 @@ const ComboBoxMixin = (superclass) =>
         }, 0);
       }
 
+      // use vaadin combobox custom renderer to render options as HTML
+      // and not via default renderer, which renders only the data-name's value
+      // in its own HTML template
       baseElement.renderer = (root, combo, model) => {
         // eslint-disable-next-line no-param-reassign
         root.innerHTML = model.item.outerHTML;
@@ -3322,6 +3311,16 @@ const ComboBoxMixin = (superclass) =>
     init() {
       super.init?.();
 
+      // eslint-disable-next-line func-names
+      this.getValidity = function () {
+        if (!this.value && this.isRequired) {
+          return {
+            valueMissing: true,
+          };
+        }
+        return {};
+      };
+
       this.setComboBoxDescriptor();
 
       this.#overrideOverlaySettings();
@@ -3340,13 +3339,15 @@ const ComboBoxMixin = (superclass) =>
     }
 
     set value(val) {
-      const child = this.baseElement.items.find((item) => item['data-id'] === val);
+      if (val) {
+        const child = this.baseElement.items?.find((item) => item['data-id'] === val);
 
-      if (!child) {
-        return;
+        if (child) {
+          this.baseElement.selectedItem = child;
+        }
+      } else {
+        this.baseElement.selectedItem = undefined;
       }
-
-      this.baseElement.selectedItem = child;
     }
 
     get value() {
@@ -3443,7 +3444,7 @@ const ComboBoxClass = compose(
       attributes: ['size'],
     },
   }),
-  composedProxyInputMixin({ proxyProps: ['selectionStart'] }),
+  composedProxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
   componentNameValidationMixin,
   ComboBoxMixin
 )(
@@ -4784,9 +4785,14 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
 
   set value(val) {
     const [countryCode = '', phoneNumber = ''] = val.split('-');
-    const countryCodeItem = this.getCountryByDialCode(countryCode);
-    if (countryCodeItem) {
-      this.countryCodeInput.selectedItem = countryCodeItem;
+
+    if (countryCode) {
+      const countryCodeItem = this.getCountryByDialCode(countryCode);
+      if (countryCodeItem) {
+        this.countryCodeInput.selectedItem = countryCodeItem;
+      }
+    } else {
+      this.countryCodeInput.selectedItem = undefined;
     }
     this.phoneNumberInput.value = phoneNumber;
   }
@@ -6031,9 +6037,10 @@ class RawUploadFile extends BaseInputClass {
   */
 
   getValidity() {
-    if (this.isRequired && !this.value) {
+    if (this.isRequired && !this.input.value) {
       return { valueMissing: true };
     }
+    this.removeAttribute('invalid');
     return {};
   }
 
@@ -6204,13 +6211,17 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     return this.getAttribute('size') || 'md';
   }
 
+  get allowDeselect() {
+    return this.getAttribute('allow-deselect') === 'true';
+  }
+
   removeSelected() {
     this.getSelectedNode()?.removeAttribute('selected');
   }
 
   onClick(e) {
     if (!this.isReadonly && e.target !== e.currentTarget) {
-      if (e.target === this.getSelectedNode()) {
+      if (e.target === this.getSelectedNode() && this.allowDeselect) {
         this.removeSelected();
       } else {
         this.setSelected(e.target);
@@ -6379,7 +6390,9 @@ const customMixin = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$3);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-value', 'allow-deselect'],
+      });
 
       this.renderItems();