@descope/web-components-ui 1.0.211 → 1.0.213

package/dist/index.esm.js

@@ -966,6 +966,9 @@ const proxyInputMixin =
       // We do not want to show the default validity report tooltip
       // So we are overriding the reportValidity fn to show the input's error message
       reportValidity = () => {
+        // we want to update validity so in case the value was set programmatically, we won't get an error
+        this.inputElement.setCustomValidity('');
+        this.setCustomValidity('');
         if (!this.checkValidity()) {
           this.setAttribute('invalid', 'true');
           this.#handleErrorMessage();
@@ -2081,6 +2084,8 @@ const DividerClass = compose(
   componentNameValidationMixin
 )(RawDivider);
 
+// eslint-disable-next-line max-classes-per-file
+
 const componentName$o = getComponentName('text');
 
 class RawText extends createBaseClass({ componentName: componentName$o, baseSelector: ':host > slot' }) {
@@ -2102,6 +2107,22 @@ class RawText extends createBaseClass({ componentName: componentName$o, baseSele
   }
 }
 
+const customTextMixin = (superclass) =>
+  class CustomTextMixin extends superclass {
+    get hideWhenEmpty() {
+      return this.getAttribute('hide-when-empty') === 'true';
+    }
+
+    init() {
+      super.init();
+
+      observeChildren(this, () => {
+        const hasChildren = !!this.childNodes.length;
+        this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
+      });
+    }
+  };
+
 const TextClass = compose(
   createStyleMixin({
     mappings: {
@@ -2122,7 +2143,8 @@ const TextClass = compose(
     },
   }),
   draggableMixin,
-  componentNameValidationMixin
+  componentNameValidationMixin,
+  customTextMixin
 )(RawText);
 
 customElements.define(componentName$o, TextClass);
@@ -4771,7 +4793,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
 
     // override combo box setter to display dialCode value in input
     this.countryCodeInput.customValueTransformFn = (val) => {
-      const [, dialCode] = val.split(' ');
+      const [, dialCode] = val?.split?.(' ') || [];
       return dialCode;
     };
   }
@@ -4843,9 +4865,7 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$3 {
   }
 
   getCountryByDialCode(countryDialCode) {
-    return this.countryCodeInput.items?.find(
-      (c) => c.getAttribute('data-country-code') === countryDialCode
-    );
+    return this.countryCodeInput.items?.find((c) => c.getAttribute('data-id') === countryDialCode);
   }
 
   getCountryByCodeId(countryCode) {