@descope/web-components-ui 1.0.405 → 1.0.407

package/dist/index.esm.js

@@ -1436,10 +1436,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 });
+          }
         }
       });
     }
@@ -8768,7 +8772,6 @@ class PhoneFieldInternal extends BaseInputClass$5 {
     });
 
     this.handleFocusEventsDispatching([this.phoneNumberInput]);
-    this.handleInputEventDispatching();
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -9695,6 +9698,11 @@ class RawRecaptcha extends BaseClass$1 {
   }
 
   renderRecaptcha(enabled) {
+    if (this.children.length) {
+      this.updatePreview();
+      return;
+    }
+
     if (enabled) {
       this.recaptchaEle.style.display = '';
       this.mockRecaptchaEle.style.display = 'none';
@@ -9712,7 +9720,7 @@ class RawRecaptcha extends BaseClass$1 {
       :host {
         display: inline-flex;
       }
-      :host > div {
+      :host > div:not(.hidden) {
         display: flex;
       }
       :host #recaptcha .grecaptcha-badge {
@@ -9727,16 +9735,40 @@ class RawRecaptcha extends BaseClass$1 {
 			}
       :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() {