@descope/web-components-ui 1.0.403 → 1.0.405

package/dist/cjs/index.cjs.js

@@ -16853,8 +16853,6 @@ const componentName$2 = getComponentName('hybrid-field');
 
 const attrs = {
   shared: [
-    'label',
-    'placeholder',
     'bordered',
     'full-width',
     'label-type',
@@ -16865,12 +16863,15 @@ const attrs = {
     'st-host-direction',
   ],
   email: [
+    'label',
+    'placeholder',
     'data-errormessage-value-missing-email',
     'data-errormessage-pattern-mismatch-email',
     'external-input',
   ],
   phone: {
     countryCode: [
+      'phone-input-label',
       'country-input-label',
       'country-input-placeholder',
       'restrict-countries',
@@ -16879,6 +16880,7 @@ const attrs = {
       'data-errormessage-value-missing-phone',
     ],
     inputBox: [
+      'label',
       'restrict-countries',
       'default-code',
       'phone-minlength',
@@ -16893,7 +16895,7 @@ const attrMap = {
     'data-errormessage-pattern-mismatch-email': 'data-errormessage-pattern-mismatch',
   },
   phone: {
-    placeholder: 'phone-input-placeholder',
+    'phone-input-label': 'label',
     'phone-minlength': 'minlength',
     'data-errormessage-value-missing-phone': 'data-errormessage-value-missing',
   },
@@ -16926,7 +16928,7 @@ class RawHybridField extends BaseClass$1 {
       }
       .wrapper {
         display: grid;
-        place-content: center;
+        width: 100%;
       }
       descope-email-field,
       descope-phone-field,
@@ -16981,11 +16983,29 @@ class RawHybridField extends BaseClass$1 {
     this.activeInput.value = val;
   }
 
-  init() {
+  async init() {
     super.init?.();
+
     this.initInputs();
     this.updateAttrs();
     this.toggleInputVisibility();
+
+    await this.waitForInputs();
+
+    this.initInputEles();
+    this.overrideEmailInputType();
+    this.overrideEmailSetAttribute();
+  }
+
+  waitForInputs() {
+    return new Promise((resolve) => {
+      const check = setInterval(() => {
+        if (this.emailInputEle) {
+          clearInterval(check);
+          resolve();
+        }
+      });
+    });
   }
 
   initInputs() {
@@ -16996,19 +17016,6 @@ class RawHybridField extends BaseClass$1 {
     this.inputs = [this.emailInput, this.phoneCountryCodeInput, this.phoneInputBoxInput];
 
     this.activeInput = this.emailInput;
-
-    this.initInputEles();
-    this.overrideEmailInputType();
-
-    // We want to prevent Vaadin from changing the input type to `email`
-    // otherwise, we cannot get the selectionStart from the input.
-    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);
-    this.emailInputEle.setAttribute = (name, value) => {
-      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {
-        return origEmailSetAttr(name, value);
-      }
-      return false;
-    };
   }
 
   // we need to listen on the inner `input` element itself, otherwise we don't always get an `input` event
@@ -17020,7 +17027,7 @@ class RawHybridField extends BaseClass$1 {
     ];
 
     inputEles.forEach((ele) => {
-      ele?.addEventListener('input', this.onValueChange.bind(this));
+      ele.addEventListener('input', this.onValueChange.bind(this));
     });
   }
 
@@ -17030,14 +17037,24 @@ class RawHybridField extends BaseClass$1 {
     });
     this.emailInputEle.addEventListener('blur', () => {
       setTimeout(() => {
-        this.emailInputEle?.setAttribute('type', 'email');
+        this.emailInputEle.setAttribute('type', 'email');
       });
     });
   }
 
-  updateAttrs() {
-    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));
+  // We want to prevent Vaadin from changing the input type to `email`
+  // otherwise, we cannot get the selectionStart from the input.
+  overrideEmailSetAttribute() {
+    const origEmailSetAttr = this.emailInput.setAttribute.bind(this.emailInputEle);
+    this.emailInputEle.setAttribute = (name, value) => {
+      if (name !== 'type' || value !== 'email' || !this.emailInput.hasAttribute('focused')) {
+        return origEmailSetAttr(name, value);
+      }
+      return false;
+    };
+  }
 
+  updateAttrs() {
     forwardAttrs(this, this.emailInput, { includeAttrs: attrs.email, mapAttrs: attrMap.email });
 
     forwardAttrs(this, this.phoneCountryCodeInput, {
@@ -17050,6 +17067,8 @@ class RawHybridField extends BaseClass$1 {
       mapAttrs: attrMap.phone,
     });
 
+    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));
+
     setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));
   }