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

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -1,7 +1,7 @@
 import { draggableMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
-import { getComponentName } from '../../helpers/componentHelpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('recaptcha');
 
@@ -26,6 +26,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';
@@ -43,7 +48,7 @@ class RawRecaptcha extends BaseClass {
       :host {
         display: inline-flex;
       }
-      :host > div {
+      :host > div:not(.hidden) {
         display: flex;
       }
       :host #recaptcha .grecaptcha-badge {
@@ -58,16 +63,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() {

package/src/components/descope-upload-file/UploadFileClass.js

@@ -155,15 +155,15 @@ class RawUploadFile extends BaseInputClass {
   }
 
   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) {