@descope/web-components-ui 3.2.2 → 3.3.0

package/dist/cjs/index.cjs.js

@@ -25119,7 +25119,7 @@ const darkTheme = merge({}, defaultTheme, {
 
 const componentName$2 = getComponentName$1('recaptcha');
 
-const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
 const BaseClass$1 = createBaseClass({
   componentName: componentName$2,
@@ -25136,6 +25136,10 @@ class RawRecaptcha extends BaseClass$1 {
       if (attrName === 'enabled') {
         this.#toggleRecaptcha(newValue === 'true');
       }
+
+      if (attrName === 'variant') {
+        this.updatePreview();
+      }
     }
   }
 
@@ -25148,13 +25152,37 @@ class RawRecaptcha extends BaseClass$1 {
     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();
     }
   }
 
@@ -25164,6 +25192,8 @@ class RawRecaptcha extends BaseClass$1 {
     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>
@@ -25187,6 +25217,13 @@ class RawRecaptcha extends BaseClass$1 {
 				width: 100%;
         height: 100%;
 			}
+      :host #recaptcha-widget {
+        width: 100%;
+        height: 100%;
+      }
+      :host #recaptcha-widget-input {
+        display: none;
+      }
       :host img {
         width: 256px;
       }
@@ -25200,7 +25237,9 @@ class RawRecaptcha extends BaseClass$1 {
       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');
   }
@@ -25213,7 +25252,8 @@ class RawRecaptcha extends BaseClass$1 {
 
   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 {
@@ -25222,6 +25262,26 @@ class RawRecaptcha extends BaseClass$1 {
     }
   }
 
+  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';
   }
@@ -25238,6 +25298,14 @@ class RawRecaptcha extends BaseClass$1 {
     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`;
@@ -25248,6 +25316,11 @@ class RawRecaptcha extends BaseClass$1 {
 
   #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')) {
@@ -25320,7 +25393,7 @@ class RawRecaptcha extends BaseClass$1 {
 
   #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()) {