@descope/web-components-ui 1.0.157 → 1.0.159

package/dist/cjs/index.cjs.js

@@ -820,6 +820,32 @@ const componentNameValidationMixin = (superclass) =>
     }
   };
 
+// create a dispatch event function that also calls to the onevent function in case  it's set
+// usage example:
+// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
+// this will dispatch a new event when called, but also call to "onsomething"
+function createDispatchEvent(eventName, options = {}) {
+  const event = new Event(eventName, options);
+
+  this[`on${eventName}`]?.(event); // in case we got an event callback as property
+  this.dispatchEvent(event);
+}
+
+const componentsContextMixin = (superclass) =>
+  class ComponentsContextMixinClass extends superclass {
+    #dispatchComponentsContext = createDispatchEvent.bind(this, 'components-context');
+
+    updateComponentsContext(componentsContext) {
+      this.dispatchEvent(
+        new CustomEvent('components-context', {
+          bubbles: true,
+          composed: true,
+          detail: componentsContext,
+        })
+      );
+    }
+  };
+
 const hoverableMixin = (superclass) =>
   class HoverableMixinClass extends superclass {
     init() {
@@ -943,21 +969,11 @@ const createBaseClass = ({ componentName, baseSelector = '' }) => {
   return compose(
     componentNameValidationMixin,
     hoverableMixin,
-    normalizeBooleanAttributesMixin
+    normalizeBooleanAttributesMixin,
+    componentsContextMixin
   )(DescopeBaseClass);
 };
 
-// create a dispatch event function that also calls to the onevent function in case  it's set
-// usage example:
-// #dispatchSomething = createDispatchEvent.bind(this, 'something' { ...options })
-// this will dispatch a new event when called, but also call to "onsomething"
-function createDispatchEvent(eventName, options = {}) {
-  const event = new Event(eventName, options);
-
-  this[`on${eventName}`]?.(event); // in case we got an event callback as property
-  this.dispatchEvent(event);
-}
-
 const createProxy = ({
   componentName,
   wrappedEleName,
@@ -1006,7 +1022,7 @@ const createProxy = ({
   return ProxyClass;
 };
 
-const observedAttributes$3 = ['required', 'pattern'];
+const observedAttributes$4 = ['required', 'pattern'];
 
 const errorAttributes = {
   valueMissing: 'data-errormessage-value-missing',
@@ -1017,7 +1033,7 @@ const errorAttributes = {
 const inputValidationMixin = (superclass) =>
   class InputValidationMixinClass extends superclass {
     static get observedAttributes() {
-      return [...(superclass.observedAttributes || []), ...observedAttributes$3];
+      return [...(superclass.observedAttributes || []), ...observedAttributes$4];
     }
 
     static get formAssociated() {
@@ -1148,7 +1164,7 @@ const inputValidationMixin = (superclass) =>
     attributeChangedCallback(attrName, oldValue, newValue) {
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
-      if (observedAttributes$3.includes(attrName)) {
+      if (observedAttributes$4.includes(attrName)) {
         this.#setValidity();
       }
     }
@@ -1485,7 +1501,7 @@ const clickableMixin = (superclass) =>
     }
   };
 
-const componentName$q = getComponentName('button');
+const componentName$r = getComponentName('button');
 
 const resetStyles = `
 	:host {
@@ -1579,7 +1595,7 @@ const ButtonClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$q,
+    componentName: componentName$r,
   })
 );
 
@@ -1627,7 +1643,7 @@ const mode = {
   surface: globalRefs$b.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$q);
+const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -1880,7 +1896,7 @@ const resetInputOverrides = (name, cssVarList) => `
     ${resetInputFieldUnderlayingBorder(name)}
 `;
 
-const componentName$p = getComponentName('text-field');
+const componentName$q = getComponentName('text-field');
 
 const observedAttrs = ['type'];
 
@@ -1928,11 +1944,11 @@ const TextFieldClass = compose(
 			${resetInputOverrides('vaadin-text-field', TextFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$p,
+    componentName: componentName$q,
   })
 );
 
-const componentName$o = getComponentName('input-wrapper');
+const componentName$p = getComponentName('input-wrapper');
 const globalRefs$a = getThemeRefs(globals);
 
 const [theme$1, refs, vars$m] = createHelperVars(
@@ -1997,7 +2013,7 @@ const [theme$1, refs, vars$m] = createHelperVars(
       backgroundColor: globalRefs$a.colors.surface.main,
     },
   },
-  componentName$o
+  componentName$p
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -2073,7 +2089,7 @@ const passwordDraggableMixin = (superclass) =>
     }
   };
 
-const componentName$n = getComponentName('password');
+const componentName$o = getComponentName('password');
 
 const {
   host: host$b,
@@ -2201,7 +2217,7 @@ const PasswordClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$n,
+    componentName: componentName$o,
   })
 );
 
@@ -2238,7 +2254,7 @@ var password$1 = /*#__PURE__*/Object.freeze({
   vars: vars$k
 });
 
-const componentName$m = getComponentName('number-field');
+const componentName$n = getComponentName('number-field');
 
 const NumberFieldClass = compose(
   createStyleMixin({
@@ -2263,7 +2279,7 @@ const NumberFieldClass = compose(
 			${resetInputOverrides('vaadin-number-field', NumberFieldClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$m,
+    componentName: componentName$n,
   })
 );
 
@@ -2298,7 +2314,7 @@ var numberField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$j
 });
 
-const componentName$l = getComponentName('email-field');
+const componentName$m = getComponentName('email-field');
 
 const EmailFieldClass = compose(
   createStyleMixin({
@@ -2323,7 +2339,7 @@ const EmailFieldClass = compose(
 			${resetInputOverrides('vaadin-email-field', EmailFieldClass.cssVarList)}		
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$l,
+    componentName: componentName$m,
   })
 );
 
@@ -2358,7 +2374,7 @@ var emailField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$i
 });
 
-const componentName$k = getComponentName('text-area');
+const componentName$l = getComponentName('text-area');
 
 const {
   host: host$a,
@@ -2430,7 +2446,7 @@ const TextAreaClass = compose(
 			${resetInputCursor('vaadin-text-area')}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$k,
+    componentName: componentName$l,
   })
 );
 
@@ -2482,9 +2498,9 @@ const createBaseInputClass = (...args) =>
     inputEventsDispatchingMixin
   )(createBaseClass(...args));
 
-const componentName$j = getComponentName('boolean-field-internal');
+const componentName$k = getComponentName('boolean-field-internal');
 
-createBaseInputClass({ componentName: componentName$j, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$k, baseSelector: 'div' });
 
 const booleanFieldMixin = (superclass) =>
   class BooleanFieldMixinClass extends superclass {
@@ -2493,14 +2509,14 @@ const booleanFieldMixin = (superclass) =>
 
       const template = document.createElement('template');
       template.innerHTML = `
-				<${componentName$j}
+				<${componentName$k}
 					tabindex="-1"
 					slot="input"
-				></${componentName$j}>
+				></${componentName$k}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
-      this.inputElement = this.shadowRoot.querySelector(componentName$j);
+      this.inputElement = this.shadowRoot.querySelector(componentName$k);
       this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
       forwardAttrs(this, this.inputElement, {
@@ -2579,7 +2595,7 @@ vaadin-checkbox::part(checkbox) {
 }
 `;
 
-const componentName$i = getComponentName('checkbox');
+const componentName$j = getComponentName('checkbox');
 
 const {
   host: host$9,
@@ -2669,7 +2685,7 @@ const CheckboxClass = compose(
 			${useHostExternalPadding(CheckboxClass.cssVarList)}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$i,
+    componentName: componentName$j,
   })
 );
 
@@ -2711,7 +2727,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$g
 });
 
-const componentName$h = getComponentName('switch-toggle');
+const componentName$i = getComponentName('switch-toggle');
 
 const {
   host: host$8,
@@ -2814,7 +2830,7 @@ const SwitchToggleClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$i,
   })
 );
 
@@ -2888,9 +2904,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   vars: vars$f
 });
 
-const componentName$g = getComponentName('container');
+const componentName$h = getComponentName('container');
 
-class RawContainer extends createBaseClass({ componentName: componentName$g, baseSelector: ':host > slot' }) {
+class RawContainer extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -2964,7 +2980,7 @@ const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
     horizontalAlignment,
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$g
+  componentName$h
 );
 
 const { shadowColor } = helperRefs$2;
@@ -3109,10 +3125,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   return CssVarImageClass;
 };
 
-const componentName$f = getComponentName('logo');
+const componentName$g = getComponentName('logo');
 
 const LogoClass = createCssVarImageClass({
-  componentName: componentName$f,
+  componentName: componentName$g,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -3129,10 +3145,10 @@ var logo$2 = /*#__PURE__*/Object.freeze({
   vars: vars$d
 });
 
-const componentName$e = getComponentName('totp-image');
+const componentName$f = getComponentName('totp-image');
 
 const TotpImageClass = createCssVarImageClass({
-  componentName: componentName$e,
+  componentName: componentName$f,
   varName: 'url',
   fallbackVarName: 'fallbackUrl',
 });
@@ -3149,9 +3165,9 @@ var totpImage = /*#__PURE__*/Object.freeze({
   vars: vars$c
 });
 
-const componentName$d = getComponentName('text');
+const componentName$e = getComponentName('text');
 
-class RawText extends createBaseClass({ componentName: componentName$d, baseSelector: ':host > slot' }) {
+class RawText extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > slot' }) {
   constructor() {
     super();
 
@@ -3282,9 +3298,9 @@ var text$3 = /*#__PURE__*/Object.freeze({
   vars: vars$b
 });
 
-const componentName$c = getComponentName('link');
+const componentName$d = getComponentName('link');
 
-class RawLink extends createBaseClass({ componentName: componentName$c, baseSelector: ':host a' }) {
+class RawLink extends createBaseClass({ componentName: componentName$d, baseSelector: ':host a' }) {
   constructor() {
     super();
 
@@ -3388,8 +3404,8 @@ var link$1 = /*#__PURE__*/Object.freeze({
   vars: vars$a
 });
 
-const componentName$b = getComponentName('divider');
-class RawDivider extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > div' }) {
+const componentName$c = getComponentName('divider');
+class RawDivider extends createBaseClass({ componentName: componentName$c, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -3493,7 +3509,7 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
     thickness: '2px',
     spacing: '10px',
   },
-  componentName$b
+  componentName$c
 );
 
 const divider = {
@@ -3535,18 +3551,18 @@ var divider$1 = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable no-param-reassign */
 
-const componentName$a = getComponentName('passcode-internal');
+const componentName$b = getComponentName('passcode-internal');
 
-createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$b, baseSelector: 'div' });
 
-const componentName$9 = getComponentName('passcode');
+const componentName$a = getComponentName('passcode');
 
-const observedAttributes$2 = ['digits'];
+const observedAttributes$3 = ['digits'];
 
 const customMixin$2 = (superclass) =>
   class PasscodeMixinClass extends superclass {
     static get observedAttributes() {
-      return observedAttributes$2.concat(superclass.observedAttributes || []);
+      return observedAttributes$3.concat(superclass.observedAttributes || []);
     }
 
     get digits() {
@@ -3558,17 +3574,17 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$a}
+			<${componentName$b}
 				bordered="true"
 				name="code"
 				tabindex="-1"
 				slot="input"
-			></${componentName$a}>
+			></${componentName$b}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+      this.inputElement = this.shadowRoot.querySelector(componentName$b);
 
       forwardAttrs(this, this.inputElement, { includeAttrs: ['digits', 'size'] });
     }
@@ -3706,7 +3722,7 @@ const PasscodeClass = compose(
 			${resetInputCursor('vaadin-text-field')}
     	`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$9,
+    componentName: componentName$a,
   })
 );
 
@@ -3739,11 +3755,11 @@ var passcode$1 = /*#__PURE__*/Object.freeze({
   vars: vars$8
 });
 
-const componentName$8 = getComponentName('loader-linear');
+const componentName$9 = getComponentName('loader-linear');
 
-class RawLoaderLinear extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
+class RawLoaderLinear extends createBaseClass({ componentName: componentName$9, baseSelector: ':host > div' }) {
   static get componentName() {
-    return componentName$8;
+    return componentName$9;
   }
 
   constructor() {
@@ -3849,9 +3865,9 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
   vars: vars$7
 });
 
-const componentName$7 = getComponentName('loader-radial');
+const componentName$8 = getComponentName('loader-radial');
 
-class RawLoaderRadial extends createBaseClass({ componentName: componentName$7, baseSelector: ':host > div' }) {
+class RawLoaderRadial extends createBaseClass({ componentName: componentName$8, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -3910,7 +3926,7 @@ const [helperTheme, helperRefs] = createHelperVars(
       },
     },
   },
-  componentName$7
+  componentName$8
 );
 
 const loaderRadial = {
@@ -3946,7 +3962,7 @@ var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   vars: vars$6
 });
 
-const componentName$6 = getComponentName('combo-box');
+const componentName$7 = getComponentName('combo-box');
 
 const ComboBoxMixin = (superclass) =>
   class ComboBoxMixinClass extends superclass {
@@ -4127,7 +4143,7 @@ const ComboBoxClass = compose(
     // and reset items to an empty array, and opening the list box with no items
     // to display.
     excludeAttrsSync: ['tabindex', 'size'],
-    componentName: componentName$6,
+    componentName: componentName$7,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
   })
 );
@@ -4179,14 +4195,14 @@ var comboBox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$5
 });
 
-const observedAttributes$1 = ['src', 'alt'];
+const observedAttributes$2 = ['src', 'alt'];
 
-const componentName$5 = getComponentName('image');
+const componentName$6 = getComponentName('image');
 
-const BaseClass = createBaseClass({ componentName: componentName$5, baseSelector: ':host > img' });
-class RawImage extends BaseClass {
+const BaseClass$1 = createBaseClass({ componentName: componentName$6, baseSelector: ':host > img' });
+class RawImage extends BaseClass$1 {
   static get observedAttributes() {
-    return observedAttributes$1.concat(BaseClass.observedAttributes || []);
+    return observedAttributes$2.concat(BaseClass$1.observedAttributes || []);
   }
 
   constructor() {
@@ -4209,7 +4225,7 @@ class RawImage extends BaseClass {
   connectedCallback() {
     super.connectedCallback?.();
 
-    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$1 });
+    forwardAttrs(this, this.baseElement, { includeAttrs: observedAttributes$2 });
   }
 }
 
@@ -5446,14 +5462,14 @@ var CountryCodes = [
   },
 ].sort((a, b) => (a.name < b.name ? -1 : 1));
 
-const componentName$4 = getComponentName('phone-field-internal');
+const componentName$5 = getComponentName('phone-field-internal');
 
-createBaseInputClass({ componentName: componentName$4, baseSelector: 'div' });
+createBaseInputClass({ componentName: componentName$5, baseSelector: 'div' });
 
 const textVars = TextFieldClass.cssVarList;
 const comboVars = ComboBoxClass.cssVarList;
 
-const componentName$3 = getComponentName('phone-field');
+const componentName$4 = getComponentName('phone-field');
 
 const customMixin$1 = (superclass) =>
   class PhoneFieldMixinClass extends superclass {
@@ -5467,15 +5483,15 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-				<${componentName$4}
+				<${componentName$5}
 					tabindex="-1"
 					slot="input"
-				></${componentName$4}>
+				></${componentName$5}>
       		`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$4);
+      this.inputElement = this.shadowRoot.querySelector(componentName$5);
 
       forwardAttrs(this.shadowRoot.host, this.inputElement, {
         includeAttrs: [
@@ -5668,7 +5684,7 @@ const PhoneFieldClass = compose(
 			}
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$3,
+    componentName: componentName$4,
   })
 );
 
@@ -5706,9 +5722,9 @@ var phoneField$1 = /*#__PURE__*/Object.freeze({
   vars: vars$3
 });
 
-const componentName$2 = getComponentName('new-password-internal');
+const componentName$3 = getComponentName('new-password-internal');
 
-const componentName$1 = getComponentName('new-password');
+const componentName$2 = getComponentName('new-password');
 
 const customMixin = (superclass) =>
   class NewPasswordMixinClass extends superclass {
@@ -5718,16 +5734,16 @@ const customMixin = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-			<${componentName$2}
+			<${componentName$3}
 				name="new-password"
 				tabindex="-1"
 				slot="input"
-			></${componentName$2}>
+			></${componentName$3}>
 			`;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$2);
+      this.inputElement = this.shadowRoot.querySelector(componentName$3);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -5826,7 +5842,7 @@ const NewPasswordClass = compose(
 		},
 		`,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$1,
+    componentName: componentName$2,
   })
 );
 
@@ -5866,9 +5882,9 @@ const getFilename = (fileObj) => {
   return fileObj.name.replace(/^.*\\/, '');
 };
 
-const componentName = getComponentName('upload-file');
+const componentName$1 = getComponentName('upload-file');
 
-const observedAttributes = [
+const observedAttributes$1 = [
   'title',
   'description',
   'button-label',
@@ -5879,11 +5895,11 @@ const observedAttributes = [
   'size',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div.wrapper' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$1, baseSelector: ':host > div.wrapper' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
-    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
+    return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
   }
 
   constructor() {
@@ -6161,6 +6177,163 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$o, components: vars };
 
+const componentName = getComponentName('recaptcha');
+
+const observedAttributes = ['disabled', 'site-key', 'action', 'enterprise'];
+
+const BaseClass = createBaseClass({
+  componentName,
+  baseSelector: ':host > div',
+});
+class RawRecaptcha extends BaseClass {
+  static get observedAttributes() {
+    return observedAttributes.concat(BaseClass.observedAttributes || []);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'disabled') {
+      this.#toggleRecaptcha(newValue === 'true');
+    }
+  }
+
+  renderRecaptcha(disabled) {
+    if (disabled) {
+      this.recaptchaEle.style.display = 'none';
+      this.mockRecaptchaEle.style.display = '';
+    } else {
+      this.recaptchaEle.style.display = '';
+      this.mockRecaptchaEle.style.display = 'none';
+    }
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+			:host #recaptcha {
+				width: 100%;
+				height: 100%
+			}
+      :host img {
+        width: 256px;
+      }
+			:host {
+				display: inline-flex;
+			}
+		</style>
+    <div>
+      <span id="recaptcha"></span>
+      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
+    </div>
+	`;
+
+    this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
+    this.mockRecaptchaEle = this.baseElement.querySelector('img');
+  }
+
+  get enterprise() {
+    return this.getAttribute('enterprise') === 'true';
+  }
+
+  get siteKey() {
+    return this.getAttribute('site-key');
+  }
+
+  get action() {
+    return this.getAttribute('action') || 'load';
+  }
+
+  get disabled() {
+    return this.getAttribute('disabled') === 'true';
+  }
+
+  get scriptURL() {
+    const url = new URL('https://www.google.com/recaptcha/');
+    url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;
+    url.searchParams.append('onload', 'onRecaptchaLoadCallback');
+    url.searchParams.append('render', 'explicit');
+    return url.toString();
+  }
+
+  #toggleRecaptcha(disabled) {
+    this.renderRecaptcha(disabled);
+    if (!disabled) {
+      this.#loadRecaptchaScript();
+      this.#createOnLoadScript();
+    }
+  }
+
+  #loadRecaptchaScript() {
+    if (!document.getElementById('recaptcha-script')) {
+      const script = document.createElement('script');
+      script.src = this.scriptURL;
+      script.async = true;
+      script.id = 'recaptcha-script';
+      script.defer = true;
+      document.body.appendChild(script);
+    } else {
+      window.onRecaptchaLoadCallback();
+    }
+  }
+
+  #createOnLoadScript() {
+    if (window.onRecaptchaLoadCallback) {
+      return;
+    }
+
+    window.onRecaptchaLoadCallback = () => {
+      const currentNode = this.recaptchaEle;
+      // if there are child nodes, it means that the recaptcha was already rendered
+      if (currentNode.hasChildNodes()) {
+        return;
+      }
+      const grecaptchaInstance = this.enterprise
+        ? window.grecaptcha?.enterprise
+        : window.grecaptcha;
+
+      if (!grecaptchaInstance) {
+        return;
+      }
+
+      setTimeout(() => {
+        const view = grecaptchaInstance.render(currentNode, {
+          sitekey: this.siteKey,
+          badge: 'inline',
+          size: 'invisible',
+        });
+        grecaptchaInstance.ready(() => {
+          // clone the node and append it to the body so that it can be used by the grepcaptcha script
+          const cloneNode = currentNode.querySelector('#g-recaptcha-response')?.cloneNode();
+          if (cloneNode) {
+            cloneNode.style.display = 'none';
+            document.body.appendChild(cloneNode);
+          }
+          if (this.siteKey) {
+            grecaptchaInstance?.execute(view, { action: this.action }).then((token) => {
+              this.updateComponentsContext({
+                risktoken: token,
+                riskaction: this.action,
+              });
+            });
+          }
+        });
+      }, 0);
+    };
+  }
+
+  connectedCallback() {
+    super.connectedCallback?.();
+
+    this.#toggleRecaptcha(this.disabled);
+  }
+}
+
+const RecaptchaClass = compose(
+  draggableMixin
+)(RawRecaptcha);
+
 exports.ButtonClass = ButtonClass;
 exports.CheckboxClass = CheckboxClass;
 exports.ContainerClass = ContainerClass;
@@ -6176,6 +6349,7 @@ exports.NumberFieldClass = NumberFieldClass;
 exports.PasscodeClass = PasscodeClass;
 exports.PasswordClass = PasswordClass;
 exports.PhoneFieldClass = PhoneFieldClass;
+exports.RecaptchaClass = RecaptchaClass;
 exports.SwitchToggleClass = SwitchToggleClass;
 exports.TextAreaClass = TextAreaClass;
 exports.TextClass = TextClass;