@descope/web-components-ui 1.0.403 → 1.0.405

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export {
   componentsThemeManager,
 } from './helpers/themeHelpers';
 export { genColor } from './helpers/themeHelpers/colorsHelpers';
-export { defaultTheme, themeVars } from './defaultTheme';
+export { defaultTheme, themeVars } from './theme';
 export { default as darkTheme } from './darkTheme';
 export { ButtonClass } from './components/descope-button';
 export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
@@ -49,6 +49,7 @@ export { PolicyValidationClass } from './components/descope-policy-validation/';
 export { CodeSnippetClass } from './components/descope-code-snippet/';
 export { CalendarClass } from './components/descope-date-field/descope-calendar';
 export { DateFieldClass } from './components/descope-date-field/';
+export { HybridFieldClass } from './components/descope-hybrid-field';
 
 export type Theme = {
   globals: {

package/dist/index.esm.js

@@ -15319,8 +15319,6 @@ const componentName$1 = getComponentName('hybrid-field');
 
 const attrs = {
   shared: [
-    'label',
-    'placeholder',
     'bordered',
     'full-width',
     'label-type',
@@ -15331,12 +15329,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',
@@ -15345,6 +15346,7 @@ const attrs = {
       'data-errormessage-value-missing-phone',
     ],
     inputBox: [
+      'label',
       'restrict-countries',
       'default-code',
       'phone-minlength',
@@ -15359,7 +15361,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',
   },
@@ -15392,7 +15394,7 @@ class RawHybridField extends BaseClass {
       }
       .wrapper {
         display: grid;
-        place-content: center;
+        width: 100%;
       }
       descope-email-field,
       descope-phone-field,
@@ -15447,11 +15449,29 @@ class RawHybridField extends BaseClass {
     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() {
@@ -15462,19 +15482,6 @@ class RawHybridField extends BaseClass {
     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
@@ -15486,7 +15493,7 @@ class RawHybridField extends BaseClass {
     ];
 
     inputEles.forEach((ele) => {
-      ele?.addEventListener('input', this.onValueChange.bind(this));
+      ele.addEventListener('input', this.onValueChange.bind(this));
     });
   }
 
@@ -15496,14 +15503,24 @@ class RawHybridField extends BaseClass {
     });
     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, {
@@ -15516,6 +15533,8 @@ class RawHybridField extends BaseClass {
       mapAttrs: attrMap.phone,
     });
 
+    this.inputs.forEach((input) => forwardAttrs(this, input, { includeAttrs: attrs.shared }));
+
     setTimeout(() => this.phoneCountryCodeInput.setAttribute('default-code', this.defaultCode));
   }