@descope/web-components-ui 3.2.2 → 3.3.1

package/dist/index.esm.js

@@ -11075,12 +11075,19 @@ const componentName$$ = getComponentName('phone-field-internal');
 
 const commonAttrs$2 = ['disabled', 'size', 'bordered', 'readonly'];
 const countryAttrs = ['country-input-placeholder', 'default-code', 'restrict-countries'];
-const phoneAttrs = ['phone-input-placeholder', 'maxlength', 'autocomplete', 'name'];
+const phoneAttrs = [
+  'phone-input-placeholder',
+  'maxlength',
+  'autocomplete',
+  'name',
+  'phone-input-type',
+];
 const labelTypeAttrs$1 = ['label-type', 'country-input-label', 'label'];
 const mapAttrs$1 = {
   'country-input-label': 'label',
   'country-input-placeholder': 'placeholder',
   'phone-input-placeholder': 'placeholder',
+  'phone-input-type': 'type',
 };
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$2, countryAttrs, phoneAttrs, labelTypeAttrs$1);
@@ -11116,7 +11123,10 @@ let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$a {
     this.inputs = [this.comboBox, this.textField];
 
     forwardAttrs(this, this.comboBox, { includeAttrs: ['label-type'] });
-    forwardAttrs(this, this.textField, { includeAttrs: ['label-type', 'required'] });
+    forwardAttrs(this, this.textField, {
+      includeAttrs: ['label-type', 'required', 'phone-input-type'],
+      mapAttrs: { 'phone-input-type': 'type' },
+    });
 
     // override combo box setter to display dialCode value in input
     this.comboBox.customValueTransformFn = (val) => {
@@ -11486,6 +11496,7 @@ const customMixin$b = (superclass) =>
           'allow-alphanumeric-input',
           'format-value',
           'strict-validation',
+          'phone-input-type',
         ],
       });
     }
@@ -11765,9 +11776,11 @@ const observedAttributes$4 = [
   'maxlength',
   'autocomplete',
   'label-type',
+  'phone-input-type',
 ];
 const mapAttrs = {
   'phone-input-placeholder': 'placeholder',
+  'phone-input-type': 'type',
 };
 
 const BaseInputClass$9 = createBaseInputClass({ componentName: componentName$Z, baseSelector: 'div' });
@@ -11861,6 +11874,11 @@ class PhoneFieldInternal extends BaseInputClass$9 {
     this.handleFocusEventsDispatching([this.textField]);
 
     forwardAttrs$1(this.textField, this, { includeAttrs: ['has-value'] });
+
+    forwardAttrs$1(this, this.textField, {
+      includeAttrs: ['phone-input-type'],
+      mapAttrs: { 'phone-input-type': 'type' },
+    });
   }
 
   getValidity() {
@@ -12063,6 +12081,7 @@ const customMixin$a = (superclass) =>
           'format-value',
           'strict-validation',
           'data-errormessage-type-mismatch',
+          'phone-input-type',
         ],
       });
     }
@@ -13047,7 +13066,7 @@ customElements.define(componentName$V, NewPasswordClass);
 
 const componentName$U = getComponentName('recaptcha');
 
-const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
 const BaseClass$7 = createBaseClass({
   componentName: componentName$U,
@@ -13064,6 +13083,10 @@ class RawRecaptcha extends BaseClass$7 {
       if (attrName === 'enabled') {
         this.#toggleRecaptcha(newValue === 'true');
       }
+
+      if (attrName === 'variant') {
+        this.updatePreview();
+      }
     }
   }
 
@@ -13076,13 +13099,37 @@ class RawRecaptcha extends BaseClass$7 {
     this.toggleRecaptchaEles(enabled);
   }
 
+  displayRecaptcha() {
+    if (this.isWidget) {
+      this.displayWidget();
+    } else {
+      this.displayDeprecated();
+    }
+  }
+
+  displayWidget() {
+    this.mockRecaptchaEle.style.display = 'none';
+    this.recaptchaWidgetEle.style.display = '';
+    this.depercatedRecaptchaEle.style.display = 'none';
+  }
+
+  hideRecaptcha() {
+    this.recaptchaWidgetEle.style.display = 'none';
+    this.depercatedRecaptchaEle.style.display = 'none';
+    this.mockRecaptchaEle.style.display = '';
+  }
+
+  displayDeprecated() {
+    this.mockRecaptchaEle.style.display = 'none';
+    this.recaptchaWidgetEle.style.display = 'none';
+    this.depercatedRecaptchaEle.style.display = '';
+  }
+
   toggleRecaptchaEles(enabled) {
     if (enabled) {
-      this.recaptchaEle.style.display = '';
-      this.mockRecaptchaEle.style.display = 'none';
+      this.displayRecaptcha();
     } else {
-      this.recaptchaEle.style.display = 'none';
-      this.mockRecaptchaEle.style.display = '';
+      this.hideRecaptcha();
     }
   }
 
@@ -13092,6 +13139,8 @@ class RawRecaptcha extends BaseClass$7 {
     this.attachShadow({ mode: 'open' }).innerHTML = `
     <div class="badge">
       <span id="recaptcha"></span>
+      <span id="recaptcha-widget"></span>
+      <input id="recaptcha-widget-input" type="hidden" name="recaptcha-widget" required />
       <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
     </div>
     <slot></slot>
@@ -13115,6 +13164,13 @@ class RawRecaptcha extends BaseClass$7 {
 				width: 100%;
         height: 100%;
 			}
+      :host #recaptcha-widget {
+        width: 100%;
+        height: 100%;
+      }
+      :host #recaptcha-widget-input {
+        display: none;
+      }
       :host img {
         width: 256px;
       }
@@ -13128,7 +13184,9 @@ class RawRecaptcha extends BaseClass$7 {
       this
     );
 
-    this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.depercatedRecaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.recaptchaWidgetEle = this.baseElement.querySelector('#recaptcha-widget');
+    this.recaptchaWidgetInputEle = this.baseElement.querySelector('#recaptcha-widget-input');
     this.mockRecaptchaEle = this.baseElement.querySelector('img');
     this.badge = this.shadowRoot.querySelector('.badge');
   }
@@ -13141,7 +13199,8 @@ class RawRecaptcha extends BaseClass$7 {
 
   updatePreview() {
     if (this.children.length) {
-      this.recaptchaEle.style.display = 'none';
+      this.depercatedRecaptchaEle.style.display = 'none';
+      this.recaptchaWidgetEle.style.display = 'none';
       this.mockRecaptchaEle.style.display = 'none';
       this.badge.classList.add('hidden');
     } else {
@@ -13150,6 +13209,26 @@ class RawRecaptcha extends BaseClass$7 {
     }
   }
 
+  getValidity() {
+    if (!this.isWidget) {
+      return {};
+    }
+
+    if (!this.recaptchaWidgetInputEle.value) {
+      return { valueMissing: true };
+    }
+
+    return {};
+  }
+
+  checkValidity() {
+    if (!this.isWidget) {
+      return true;
+    }
+
+    return !!this.recaptchaWidgetInputEle.value;
+  }
+
   get enterprise() {
     return this.getAttribute('enterprise') === 'true';
   }
@@ -13166,6 +13245,14 @@ class RawRecaptcha extends BaseClass$7 {
     return this.getAttribute('enabled') === 'true';
   }
 
+  get variant() {
+    return this.getAttribute('variant') || 'text';
+  }
+
+  get isWidget() {
+    return this.variant === 'widget';
+  }
+
   get scriptURL() {
     const url = new URL('https://www.google.com/recaptcha/');
     url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
@@ -13176,6 +13263,11 @@ class RawRecaptcha extends BaseClass$7 {
 
   #toggleRecaptcha(enabled) {
     this.renderRecaptcha(enabled);
+    if (this.isWidget) {
+      // For the v2 checkbox flow, scripts are loaded/executed by the runtime (grecaptcha-v2).
+      // This legacy v3/invisible path must be fully skipped.
+      return;
+    }
     if (enabled) {
       this.#createOnLoadScript();
       if (!document.getElementById('recaptcha-script')) {
@@ -13248,7 +13340,7 @@ class RawRecaptcha extends BaseClass$7 {
 
   #createOnLoadScript() {
     window.onRecaptchaLoadCallback = () => {
-      const currentNode = this.recaptchaEle;
+      const currentNode = this.depercatedRecaptchaEle;
 
       // if there are child nodes, it means that the recaptcha was already rendered
       if (currentNode.hasChildNodes()) {
@@ -18952,6 +19044,7 @@ const attrs = {
       'phone-minlength',
       'phone-format-value',
       'phone-strict-validation',
+      'phone-input-type',
       'data-errormessage-value-missing-phone',
     ],
     inputBox: [
@@ -18960,6 +19053,7 @@ const attrs = {
       'phone-minlength',
       'phone-format-value',
       'phone-strict-validation',
+      'phone-input-type',
       'data-errormessage-value-missing-phone',
     ],
   },
@@ -18999,8 +19093,8 @@ class RawHybridField extends BaseClass$6 {
     this.attachShadow({ mode: 'open' }).innerHTML = `
     <div class="wrapper">
       <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
-      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
-      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
+      <descope-phone-field allow-alphanumeric-input="true" phone-input-type="text"></descope-phone-field>
+      <descope-phone-input-box-field allow-alphanumeric-input="true" phone-input-type="text"></descope-phone-input-box-field>
     </div>
 		`;