@descope/web-components-ui 1.0.406 → 1.0.407-2

package/dist/cjs/index.cjs.js

@@ -9063,9 +9063,9 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
   updateLabel(val) {
     if (!val) {
       this.classList.add('hide-label');
-      this.label.innerHTML = '';
+      this.label.textContent = '';
     } else {
-      this.label.innerHTML = val;
+      this.label.textContent = val;
       this.classList.remove('hide-label');
     }
   }
@@ -9506,15 +9506,15 @@ class RawUploadFile extends BaseInputClass$2 {
   }
 
   updateTitle(val) {
-    this.title.innerHTML = val;
+    this.title.textContent = val;
   }
 
   updateDescription(val) {
-    this.description.innerHTML = val;
+    this.description.textContent = val;
   }
 
   updateButtonLabel(val) {
-    this.button.innerHTML = val;
+    this.button.textContent = val;
   }
 
   updateButtonSize(val) {
@@ -10527,7 +10527,7 @@ const renderCodeSnippet = (value, lang) =>
 
 const renderText = (text) =>
   `<div class="row-details__value text" title="${text}">${text}</div>`;
-const renderJson = (value) => renderCodeSnippet(JSON.stringify(value, null, 2), 'json');
+const renderJson = (value) => renderCodeSnippet(escapeXML(JSON.stringify(value, null, 2)), 'json');
 const renderXml = (value) => renderCodeSnippet(escapeXML(value), 'xml');
 
 const defaultRowDetailsValueRenderer = (value) => {
@@ -17311,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';
@@ -17328,7 +17333,7 @@ class RawRecaptcha extends BaseClass {
       :host {
         display: inline-flex;
       }
-      :host > div {
+      :host > div:not(.hidden) {
         display: flex;
       }
       :host #recaptcha .grecaptcha-badge {
@@ -17343,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() {