@descope/web-components-ui 1.0.405 → 1.0.407

package/dist/cjs/index.cjs.js

@@ -2663,10 +2663,14 @@ const inputEventsDispatchingMixin = (superclass) =>
       // we are comparing the previous value to the new one,
       // and if they have the same value, we are blocking the input event
       this.addEventListener('input', (e) => {
-        e.stopImmediatePropagation();
-        if (previousRootComponentValue !== this.value) {
-          previousRootComponentValue = this.value;
-          createDispatchEvent.call(this, 'input', { bubbles: true });
+        // We don't want to block our own event that we fire from handleInputEventDispatching
+        if (this !== e.target) {
+          e.stopImmediatePropagation();
+
+          if (previousRootComponentValue !== this.value) {
+            previousRootComponentValue = this.value;
+            createDispatchEvent.call(this, 'input', { bubbles: true, composed: true });
+          }
         }
       });
     }
@@ -17307,6 +17311,11 @@ class RawRecaptcha extends BaseClass {
   }
 
   renderRecaptcha(enabled) {
+    if (this.children.length) {
+      this.updatePreview();
+      return;
+    }
+
     if (enabled) {
       this.recaptchaEle.style.display = '';
       this.mockRecaptchaEle.style.display = 'none';
@@ -17324,7 +17333,7 @@ class RawRecaptcha extends BaseClass {
       :host {
         display: inline-flex;
       }
-      :host > div {
+      :host > div:not(.hidden) {
         display: flex;
       }
       :host #recaptcha .grecaptcha-badge {
@@ -17339,16 +17348,40 @@ class RawRecaptcha extends BaseClass {
 			}
       :host img {
         width: 256px;
+      }
+      :host([full-width="true"]) {
+        width: 100%;
+      }
+      .hidden {
+        display: none;
       }
 		</style>
-    <div>
+    <div class="badge">
       <span id="recaptcha"></span>
       <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
     </div>
+    <slot></slot>
 	`;
 
     this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
     this.mockRecaptchaEle = this.baseElement.querySelector('img');
+    this.badge = this.shadowRoot.querySelector('.badge');
+  }
+
+  init() {
+    super.init?.();
+
+    observeChildren(this, this.updatePreview.bind(this));
+  }
+
+  updatePreview() {
+    if (this.children.length) {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = 'none';
+      this.badge.classList.add('hidden');
+    } else {
+      this.badge.classList.remove('hidden');
+    }
   }
 
   get enterprise() {