@descope/web-components-ui 1.0.184 → 1.0.186

package/dist/cjs/index.cjs.js

@@ -6312,7 +6312,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' },
@@ -6842,7 +6842,7 @@ const themeVars = { globals: vars$r, components: vars };
 
 const componentName = getComponentName('recaptcha');
 
-const observedAttributes = ['disabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
   componentName,
@@ -6855,18 +6855,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 = '';
     }
   }
 
@@ -6875,16 +6875,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>
@@ -6908,8 +6911,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() {
@@ -6920,9 +6923,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();
     }
@@ -6988,8 +6991,7 @@ class RawRecaptcha extends BaseClass {
 
   connectedCallback() {
     super.connectedCallback?.();
-
-    this.#toggleRecaptcha(this.disabled);
+    this.#toggleRecaptcha(this.enabled);
   }
 }