@descope/web-components-ui 1.0.184 → 1.0.186

package/dist/index.esm.js

@@ -5619,7 +5619,7 @@ customElements.define(componentName$6, NewPasswordClass);
 
 const componentName$5 = getComponentName('recaptcha');
 
-const observedAttributes$1 = ['disabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes$1 = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
   componentName: componentName$5,
@@ -5632,18 +5632,18 @@ class RawRecaptcha extends BaseClass {
 
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
-    if (attrName === 'disabled') {
+    if (attrName === 'enabled') {
       this.#toggleRecaptcha(newValue === 'true');
     }
   }
 
-  renderRecaptcha(disabled) {
-    if (disabled) {
-      this.recaptchaEle.style.display = 'none';
-      this.mockRecaptchaEle.style.display = '';
-    } else {
+  renderRecaptcha(enabled) {
+    if (enabled) {
       this.recaptchaEle.style.display = '';
       this.mockRecaptchaEle.style.display = 'none';
+    } else {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = '';
     }
   }
 
@@ -5652,16 +5652,19 @@ class RawRecaptcha extends BaseClass {
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
 		<style>
-			:host #recaptcha {
+      :host {
+        display: inline-flex;
+      }
+      :host > div {
+        display: flex;
+      }
+      :host #recaptcha {
 				width: 100%;
-				height: 100%
+        height: 100%;
 			}
       :host img {
         width: 256px;
       }
-			:host {
-				display: inline-flex;
-			}
 		</style>
     <div>
       <span id="recaptcha"></span>
@@ -5685,8 +5688,8 @@ class RawRecaptcha extends BaseClass {
     return this.getAttribute('action') || 'load';
   }
 
-  get disabled() {
-    return this.getAttribute('disabled') === 'true';
+  get enabled() {
+    return this.getAttribute('enabled') === 'true';
   }
 
   get scriptURL() {
@@ -5697,9 +5700,9 @@ class RawRecaptcha extends BaseClass {
     return url.toString();
   }
 
-  #toggleRecaptcha(disabled) {
-    this.renderRecaptcha(disabled);
-    if (!disabled) {
+  #toggleRecaptcha(enabled) {
+    this.renderRecaptcha(enabled);
+    if (enabled) {
       this.#loadRecaptchaScript();
       this.#createOnLoadScript();
     }
@@ -5765,8 +5768,7 @@ class RawRecaptcha extends BaseClass {
 
   connectedCallback() {
     super.connectedCallback?.();
-
-    this.#toggleRecaptcha(this.disabled);
+    this.#toggleRecaptcha(this.enabled);
   }
 }
 
@@ -5966,7 +5968,7 @@ class RawUploadFile extends BaseInputClass {
 const { host: host$1, wrapper, icon, title, description, requiredIndicator: requiredIndicator$1 } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
-  icon: { selector: () => '.icon' },
+  icon: { selector: () => '::slotted(*)' },
   title: { selector: () => '.title' },
   description: { selector: () => '.description' },
   requiredIndicator: { selector: () => '.title::after' },