@descope/web-components-ui 3.18.5 → 3.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/index.cjs.js +3 -2
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +3 -2
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/descope-recaptcha-index-js.js.map +1 -1
  6. package/package.json +42 -42
  7. package/src/components/descope-recaptcha/RecaptchaClass.js +3 -2
package/dist/umd/descope-recaptcha-index-js.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"descope-recaptcha-index-js.js","mappings":"yPAMO,MAAAA,GAAsB,EAAAC,EAAAC,IAAgB,aAE7CC,EAAA,uDAEAC,GAAkB,EAAAC,EAAAC,GAAe,CACjCN,gBACAO,aAAA,gBAuSOC,GAAuB,EAAAC,EAAAC,IAAQC,EAAAC,GAAR,CArS9B,cAAAR,EACA,6BAAAD,GACA,OAAAA,EAAAU,OAAAT,EAAAD,oBAAA,GACA,CAEA,wBAAAW,CAAAC,EAAAC,EAAAC,GACAC,MAAAJ,2BAAAC,EAAAC,EAAAC,GACAD,IAAAC,IACA,YAAAF,GACAI,MAAAC,EAAA,SAAAH,GAGA,YAAAF,GACAI,KAAAE,gBAGA,CAEA,eAAAC,CAAAC,GACAJ,KAAAK,SAAAC,OACAN,KAAAE,gBAIAF,KAAAO,oBAAAH,EACA,CAEA,gBAAAI,GACAR,KAAAS,SACAT,KAAAU,gBAEAV,KAAAW,mBAEA,CAEA,aAAAD,GACAV,KAAAY,iBAAAC,MAAAC,QAAA,OACAd,KAAAe,mBAAAF,MAAAC,QAAA,GACAd,KAAAgB,uBAAAH,MAAAC,QAAA,MACA,CAEA,aAAAG,GACAjB,KAAAe,mBAAAF,MAAAC,QAAA,OACAd,KAAAgB,uBAAAH,MAAAC,QAAA,OACAd,KAAAY,iBAAAC,MAAAC,QAAA,EACA,CAEA,iBAAAH,GACAX,KAAAY,iBAAAC,MAAAC,QAAA,OACAd,KAAAe,mBAAAF,MAAAC,QAAA,OACAd,KAAAgB,uBAAAH,MAAAC,QAAA,EACA,CAEA,mBAAAP,CAAAH,GACAA,EACAJ,KAAAQ,mBAEAR,KAAAiB,eAEA,CAEA,WAAAC,GACAnB,QAEAC,KAAAmB,aAAA,CAAwBC,KAAA,SAAcC,UAAA,yVAUlC,EAAAC,EAAAC,IACJ,osBAkCAvB,MAGAA,KAAAgB,uBAAAhB,KAAAwB,YAAAC,cAAA,cACAzB,KAAAe,mBAAAf,KAAAwB,YAAAC,cAAA,qBACAzB,KAAA0B,wBAAA1B,KAAAwB,YAAAC,cAAA,2BACAzB,KAAAY,iBAAAZ,KAAAwB,YAAAC,cAAA,OACAzB,KAAA2B,MAAA3B,KAAA4B,WAAAH,cAAA,SACA,CAEA,IAAAI,GACA9B,MAAA8B,UAEI,EAAA/C,EAAAgD,IAAe9B,KAAAA,KAAAE,cAAA6B,KAAA/B,MACnB,CAEA,aAAAE,GACAF,KAAAK,SAAAC,QACAN,KAAAgB,uBAAAH,MAAAC,QAAA,OACAd,KAAAe,mBAAAF,MAAAC,QAAA,OACAd,KAAAY,iBAAAC,MAAAC,QAAA,OACAd,KAAA2B,MAAAK,UAAAC,IAAA,YAEAjC,KAAAO,oBAAAP,KAAAI,SACAJ,KAAA2B,MAAAK,UAAAE,OAAA,UAEA,CAEA,WAAAC,GACA,OAAAnC,KAAAS,SAIAT,KAAA0B,wBAAAU,MAIA,GAHA,CAAeC,cAAA,GAJf,EAQA,CAEA,aAAAC,GACA,OAAAtC,KAAAS,YAIAT,KAAA0B,wBAAAU,KACA,CAEA,cAAAG,GACA,eAAAvC,KAAAwC,aAAA,aACA,CAEA,WAAAC,GACA,OAAAzC,KAAAwC,aAAA,WACA,CAEA,UAAAE,GACA,OAAA1C,KAAAwC,aAAA,iBACA,CAEA,WAAApC,GACA,eAAAJ,KAAAwC,aAAA,UACA,CAEA,WAAAG,GACA,OAAA3C,KAAAwC,aAAA,kBACA,CAEA,YAAA/B,GACA,iBAAAT,KAAA2C,OACA,CAEA,aAAAC,GACA,MAAAC,EAAA,IAAAC,IAAA,qCAIA,OAHAD,EAAAE,WAAuB/C,KAAAuC,WAAA,oBAAvB,MACAM,EAAAG,aAAAC,OAAA,oCACAJ,EAAAG,aAAAC,OAAA,qBACAJ,EAAAK,UACA,CAEA,EAAAjD,CAAAG,GACAJ,KAAAG,gBAAAC,GACAJ,KAAAS,UAKAL,IACAJ,MAAAmD,IACAC,SAAAC,eAAA,oBAGAC,OAAAC,0BAFAvD,MAAAwD,IAKA,CAEA,EAAAA,GACA,MAAAC,EAAAL,SAAAM,cAAA,UACAD,EAAAE,IAAA3D,KAAA4C,UACAa,EAAAG,OAAA,EACAH,EAAAI,GAAA,mBACAJ,EAAAK,OAAA,EACAV,SAAAW,KAAAC,YAAAP,EACA,CAEA,sBAAAQ,GACA,OAAAjE,KAAAuC,WAAAe,OAAAY,YAAA3B,WAAAe,OAAAY,UACA,CAEA,EAAAC,CAAAF,EAAAG,EAAAC,GACArE,KAAAsE,aAIAL,EAAAM,MAAA,KAEA,MAAAC,EAAAJ,EACA3C,cAAA,2CACA+C,YAWA,GAVAA,IACAA,EAAA3D,MAAAC,QAAA,OACAsC,SAAAW,KAAAC,YAAAQ,KAQAxE,KAAAyC,QACA,OAIA,MAAAgC,EAAAR,GAAAS,QAAAL,EAAA,CAAoE3B,OAAA1C,KAAA0C,SACpE+B,EAAAE,KAAA,CAAAC,EAAAC,KACAA,EAEAC,QAAAC,KAAA,8BAAAF,IAEA7E,KAAAgF,wBAAA,CACAC,UAAAL,EACAM,WAAAlF,KAAA0C,SAGA1C,KAAAsE,aACAa,WAAA,KACAnF,MAAAmE,EAAAF,EAAAG,EAAAC,IACa,OAtBbG,EAAAtC,YA4BA,CAEA,EAAAiB,GACAG,OAAAC,wBAAA,KACA,MAAAa,EAAApE,KAAAgB,uBAGA,GAAAoD,EAAAgB,gBACA,OAGA,MAAAnB,mBAAcA,GAAqBjE,KAEnCiE,GAIAkB,WAAA,KACA,MAAAd,EAAAJ,EAAAoB,OAAAjB,EAAA,CACAkB,QAAAtF,KAAAyC,QACAd,MAAA,SACA4D,KAAA,cAEAvF,MAAAmE,EAAAF,EAAAG,EAAAC,IACO,GAEP,IC9SAmB,eAAAC,OAAsB5G,EAAeQ","sources":["webpack://@descope/web-components-ui/./src/components/descope-recaptcha/RecaptchaClass.js","webpack://@descope/web-components-ui/./src/components/descope-recaptcha/index.js"],"sourcesContent":["import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { draggableMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName, observeChildren } from '../../helpers/componentHelpers';\n\nexport const componentName = getComponentName('recaptcha');\n\nconst observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];\n\nconst BaseClass = createBaseClass({\n componentName,\n baseSelector: ':host > div',\n});\nclass RawRecaptcha extends BaseClass {\n static get observedAttributes() {\n return observedAttributes.concat(BaseClass.observedAttributes || []);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n if (oldValue !== newValue) {\n if (attrName === 'enabled') {\n this.#toggleRecaptcha(newValue === 'true');\n }\n\n if (attrName === 'variant') {\n this.updatePreview();\n }\n }\n }\n\n renderRecaptcha(enabled) {\n if (this.children.length) {\n this.updatePreview();\n return;\n }\n\n this.toggleRecaptchaEles(enabled);\n }\n\n displayRecaptcha() {\n if (this.isWidget) {\n this.displayWidget();\n } else {\n this.displayDeprecated();\n }\n }\n\n displayWidget() {\n this.mockRecaptchaEle.style.display = 'none';\n this.recaptchaWidgetEle.style.display = '';\n this.depercatedRecaptchaEle.style.display = 'none';\n }\n\n hideRecaptcha() {\n this.recaptchaWidgetEle.style.display = 'none';\n this.depercatedRecaptchaEle.style.display = 'none';\n this.mockRecaptchaEle.style.display = '';\n }\n\n displayDeprecated() {\n this.mockRecaptchaEle.style.display = 'none';\n this.recaptchaWidgetEle.style.display = 'none';\n this.depercatedRecaptchaEle.style.display = '';\n }\n\n toggleRecaptchaEles(enabled) {\n if (enabled) {\n this.displayRecaptcha();\n } else {\n this.hideRecaptcha();\n }\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <div class=\"badge\">\n <span id=\"recaptcha\"></span>\n <span id=\"recaptcha-widget\"></span>\n <input id=\"recaptcha-widget-input\" type=\"hidden\" name=\"recaptcha-widget\" required />\n <img src=\"https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png\" alt=\"recaptcha\"/>\n </div>\n <slot></slot>\n\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n :host > div:not(.hidden) {\n display: flex;\n }\n :host #recaptcha .grecaptcha-badge {\n box-shadow: none !important;\n }\n :host #recaptcha .grecaptcha-logo {\n height: 100%;\n }\n :host #recaptcha {\n\t\t\t\twidth: 100%;\n height: 100%;\n\t\t\t}\n :host #recaptcha-widget {\n width: 100%;\n height: 100%;\n }\n :host #recaptcha-widget-input {\n display: none;\n }\n :host img {\n width: 256px;\n }\n :host([full-width=\"true\"]) {\n width: 100%;\n }\n .hidden {\n display: none;\n }\n `,\n this\n );\n\n this.depercatedRecaptchaEle = this.baseElement.querySelector('#recaptcha');\n this.recaptchaWidgetEle = this.baseElement.querySelector('#recaptcha-widget');\n this.recaptchaWidgetInputEle = this.baseElement.querySelector('#recaptcha-widget-input');\n this.mockRecaptchaEle = this.baseElement.querySelector('img');\n this.badge = this.shadowRoot.querySelector('.badge');\n }\n\n init() {\n super.init?.();\n\n observeChildren(this, this.updatePreview.bind(this));\n }\n\n updatePreview() {\n if (this.children.length) {\n this.depercatedRecaptchaEle.style.display = 'none';\n this.recaptchaWidgetEle.style.display = 'none';\n this.mockRecaptchaEle.style.display = 'none';\n this.badge.classList.add('hidden');\n } else {\n this.toggleRecaptchaEles(this.enabled);\n this.badge.classList.remove('hidden');\n }\n }\n\n getValidity() {\n if (!this.isWidget) {\n return {};\n }\n\n if (!this.recaptchaWidgetInputEle.value) {\n return { valueMissing: true };\n }\n\n return {};\n }\n\n checkValidity() {\n if (!this.isWidget) {\n return true;\n }\n\n return !!this.recaptchaWidgetInputEle.value;\n }\n\n get enterprise() {\n return this.getAttribute('enterprise') === 'true';\n }\n\n get siteKey() {\n return this.getAttribute('site-key');\n }\n\n get action() {\n return this.getAttribute('action') || 'load';\n }\n\n get enabled() {\n return this.getAttribute('enabled') === 'true';\n }\n\n get variant() {\n return this.getAttribute('variant') || 'text';\n }\n\n get isWidget() {\n return this.variant === 'widget';\n }\n\n get scriptURL() {\n const url = new URL('https://www.google.com/recaptcha/');\n url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;\n url.searchParams.append('onload', 'onRecaptchaLoadCallback');\n url.searchParams.append('render', 'explicit');\n return url.toString();\n }\n\n #toggleRecaptcha(enabled) {\n this.renderRecaptcha(enabled);\n if (this.isWidget) {\n // For the v2 checkbox flow, scripts are loaded/executed by the runtime (grecaptcha-v2).\n // This legacy v3/invisible path must be fully skipped.\n return;\n }\n if (enabled) {\n this.#createOnLoadScript();\n if (!document.getElementById('recaptcha-script')) {\n this.#loadRecaptchaScript();\n } else {\n window.onRecaptchaLoadCallback();\n }\n }\n }\n\n #loadRecaptchaScript() {\n const script = document.createElement('script');\n script.src = this.scriptURL;\n script.async = true;\n script.id = 'recaptcha-script';\n script.defer = true;\n document.body.appendChild(script);\n }\n\n get grecaptchaInstance() {\n return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;\n }\n\n #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {\n if (!this.isConnected) {\n return;\n }\n\n grecaptchaInstance.ready(() => {\n // clone the node and append it to the body so that it can be used by the grepcaptcha script\n const cloneNode = currentNode\n .querySelector('textarea[name^=\"g-recaptcha-response\"]')\n ?.cloneNode();\n if (cloneNode) {\n cloneNode.style.display = 'none';\n document.body.appendChild(cloneNode);\n }\n\n // cleaning up the recaptcha element we added to the body\n const removeCloneNode = () => {\n cloneNode.remove();\n };\n\n if (!this.siteKey) {\n return;\n }\n // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times\n // also calling grecaptchaInstance.reset() does not work\n const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });\n exec.then((token, e) => {\n if (e) {\n // eslint-disable-next-line no-console\n console.warn('could not execute recaptcha', e);\n } else {\n this.updateComponentsContext({\n risktoken: token,\n riskaction: this.action,\n });\n // if the component is still connected, we should try to get a new token before the token expires (2 minutes)\n if (this.isConnected) {\n setTimeout(() => {\n this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);\n }, 110000);\n }\n }\n removeCloneNode();\n });\n });\n }\n\n #createOnLoadScript() {\n window.onRecaptchaLoadCallback = () => {\n const currentNode = this.depercatedRecaptchaEle;\n\n // if there are child nodes, it means that the recaptcha was already rendered\n if (currentNode.hasChildNodes()) {\n return;\n }\n\n const { grecaptchaInstance } = this;\n\n if (!grecaptchaInstance) {\n return;\n }\n\n setTimeout(() => {\n const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {\n sitekey: this.siteKey,\n badge: 'inline',\n size: 'invisible',\n });\n this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);\n }, 0);\n };\n }\n}\n\nexport const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);\n","import { componentName, RecaptchaClass } from './RecaptchaClass';\n\ncustomElements.define(componentName, RecaptchaClass);\n\nexport { RecaptchaClass, componentName };\n"],"names":["componentName","componentHelpers","xE","observedAttributes","BaseClass","createBaseClass","q","baseSelector","RecaptchaClass","helpers","Zz","mixins","VO","concat","attributeChangedCallback","attrName","oldValue","newValue","super","this","toggleRecaptcha","updatePreview","renderRecaptcha","enabled","children","length","toggleRecaptchaEles","displayRecaptcha","isWidget","displayWidget","displayDeprecated","mockRecaptchaEle","style","display","recaptchaWidgetEle","depercatedRecaptchaEle","hideRecaptcha","constructor","attachShadow","mode","innerHTML","componentsHelpers","fz","baseElement","querySelector","recaptchaWidgetInputEle","badge","shadowRoot","init","Ge","bind","classList","add","remove","getValidity","value","valueMissing","checkValidity","enterprise","getAttribute","siteKey","action","variant","scriptURL","url","URL","pathname","searchParams","append","toString","createOnLoadScript","document","getElementById","window","onRecaptchaLoadCallback","loadRecaptchaScript","script","createElement","src","async","id","defer","body","appendChild","grecaptchaInstance","grecaptcha","getNewToken","currentNode","recaptchaWidgetId","isConnected","ready","cloneNode","exec","execute","then","token","e","console","warn","updateComponentsContext","risktoken","riskaction","setTimeout","hasChildNodes","render","sitekey","size","customElements","define"],"sourceRoot":""}
1
+ {"version":3,"file":"descope-recaptcha-index-js.js","mappings":"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","sources":["webpack://@descope/web-components-ui/./src/components/descope-recaptcha/RecaptchaClass.js","webpack://@descope/web-components-ui/./src/components/descope-recaptcha/index.js"],"sourcesContent":["import { injectStyle } from '@descope-ui/common/components-helpers';\nimport { draggableMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { compose } from '../../helpers';\nimport { getComponentName, observeChildren } from '../../helpers/componentHelpers';\n\nexport const componentName = getComponentName('recaptcha');\n\nconst observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];\n\nconst BaseClass = createBaseClass({\n componentName,\n baseSelector: ':host > div',\n});\nclass RawRecaptcha extends BaseClass {\n static get observedAttributes() {\n return observedAttributes.concat(BaseClass.observedAttributes || []);\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n if (oldValue !== newValue) {\n if (attrName === 'enabled') {\n this.#toggleRecaptcha(newValue === 'true');\n }\n\n if (attrName === 'variant') {\n this.updatePreview();\n }\n }\n }\n\n renderRecaptcha(enabled) {\n if (this.children.length) {\n this.updatePreview();\n return;\n }\n\n this.toggleRecaptchaEles(enabled);\n }\n\n displayRecaptcha() {\n if (this.isWidget) {\n this.displayWidget();\n } else {\n this.displayDeprecated();\n }\n }\n\n displayWidget() {\n this.mockRecaptchaEle.style.display = 'none';\n this.recaptchaWidgetEle.style.display = '';\n this.depercatedRecaptchaEle.style.display = 'none';\n }\n\n hideRecaptcha() {\n this.recaptchaWidgetEle.style.display = 'none';\n this.depercatedRecaptchaEle.style.display = 'none';\n this.mockRecaptchaEle.style.display = '';\n }\n\n displayDeprecated() {\n this.mockRecaptchaEle.style.display = 'none';\n this.recaptchaWidgetEle.style.display = 'none';\n this.depercatedRecaptchaEle.style.display = '';\n }\n\n toggleRecaptchaEles(enabled) {\n if (enabled) {\n this.displayRecaptcha();\n } else {\n this.hideRecaptcha();\n }\n }\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <div class=\"badge\">\n <span id=\"recaptcha\"></span>\n <span id=\"recaptcha-widget\"></span>\n <input id=\"recaptcha-widget-input\" type=\"hidden\" name=\"recaptcha-widget\" required />\n <img src=\"https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png\" alt=\"recaptcha\"/>\n </div>\n <slot></slot>\n\t`;\n\n injectStyle(\n `\n :host {\n display: inline-flex;\n }\n :host > div:not(.hidden) {\n display: flex;\n }\n :host #recaptcha .grecaptcha-badge {\n box-shadow: none !important;\n }\n :host #recaptcha .grecaptcha-logo {\n height: 100%;\n }\n :host #recaptcha {\n\t\t\t\twidth: 100%;\n height: 100%;\n\t\t\t}\n :host #recaptcha-widget {\n width: 100%;\n height: 100%;\n }\n :host #recaptcha-widget-input {\n display: none;\n }\n :host img {\n width: 256px;\n }\n :host([full-width=\"true\"]) {\n width: 100%;\n }\n .hidden {\n display: none;\n }\n `,\n this\n );\n\n this.depercatedRecaptchaEle = this.baseElement.querySelector('#recaptcha');\n this.recaptchaWidgetEle = this.baseElement.querySelector('#recaptcha-widget');\n this.recaptchaWidgetInputEle = this.baseElement.querySelector('#recaptcha-widget-input');\n this.mockRecaptchaEle = this.baseElement.querySelector('img');\n this.badge = this.shadowRoot.querySelector('.badge');\n }\n\n init() {\n super.init?.();\n\n observeChildren(this, this.updatePreview.bind(this));\n }\n\n updatePreview() {\n if (this.children.length) {\n this.depercatedRecaptchaEle.style.display = 'none';\n this.recaptchaWidgetEle.style.display = 'none';\n this.mockRecaptchaEle.style.display = 'none';\n this.badge.classList.add('hidden');\n } else {\n this.toggleRecaptchaEles(this.enabled);\n this.badge.classList.remove('hidden');\n }\n }\n\n getValidity() {\n if (!this.isWidget) {\n return {};\n }\n\n if (!this.recaptchaWidgetInputEle.value) {\n return { valueMissing: true };\n }\n\n return {};\n }\n\n checkValidity() {\n if (!this.isWidget) {\n return true;\n }\n\n return !!this.recaptchaWidgetInputEle.value;\n }\n\n get enterprise() {\n return this.getAttribute('enterprise') === 'true';\n }\n\n get siteKey() {\n return this.getAttribute('site-key');\n }\n\n get action() {\n return this.getAttribute('action') || 'load';\n }\n\n get enabled() {\n return this.getAttribute('enabled') === 'true';\n }\n\n get variant() {\n return this.getAttribute('variant') || 'text';\n }\n\n get isWidget() {\n return this.variant === 'widget';\n }\n\n get scriptURL() {\n const url = new URL('https://www.google.com/recaptcha/');\n url.pathname += `${this.enterprise ? 'enterprise' : 'api'}.js`;\n url.searchParams.append('onload', 'onRecaptchaLoadCallback');\n url.searchParams.append('render', 'explicit');\n return url.toString();\n }\n\n #toggleRecaptcha(enabled) {\n this.renderRecaptcha(enabled);\n if (this.isWidget) {\n // For the interactive widget, scripts are loaded/executed by the runtime (grecaptcha-v2 for the\n // v2 checkbox, grecaptcha for an Enterprise key). This legacy v3/invisible path must be fully\n // skipped — the runtime renders into #recaptcha-widget and fills #recaptcha-widget-input.\n return;\n }\n if (enabled) {\n this.#createOnLoadScript();\n if (!document.getElementById('recaptcha-script')) {\n this.#loadRecaptchaScript();\n } else {\n window.onRecaptchaLoadCallback();\n }\n }\n }\n\n #loadRecaptchaScript() {\n const script = document.createElement('script');\n script.src = this.scriptURL;\n script.async = true;\n script.id = 'recaptcha-script';\n script.defer = true;\n document.body.appendChild(script);\n }\n\n get grecaptchaInstance() {\n return this.enterprise ? window.grecaptcha?.enterprise : window.grecaptcha;\n }\n\n #getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId) {\n if (!this.isConnected) {\n return;\n }\n\n grecaptchaInstance.ready(() => {\n // clone the node and append it to the body so that it can be used by the grepcaptcha script\n const cloneNode = currentNode\n .querySelector('textarea[name^=\"g-recaptcha-response\"]')\n ?.cloneNode();\n if (cloneNode) {\n cloneNode.style.display = 'none';\n document.body.appendChild(cloneNode);\n }\n\n // cleaning up the recaptcha element we added to the body\n const removeCloneNode = () => {\n cloneNode.remove();\n };\n\n if (!this.siteKey) {\n return;\n }\n // we should pass recaptchaWidgetId, but this does not allow us to run execute multiple times\n // also calling grecaptchaInstance.reset() does not work\n const exec = grecaptchaInstance?.execute(recaptchaWidgetId, { action: this.action });\n exec.then((token, e) => {\n if (e) {\n // eslint-disable-next-line no-console\n console.warn('could not execute recaptcha', e);\n } else {\n this.updateComponentsContext({\n risktoken: token,\n riskaction: this.action,\n });\n // if the component is still connected, we should try to get a new token before the token expires (2 minutes)\n if (this.isConnected) {\n setTimeout(() => {\n this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);\n }, 110000);\n }\n }\n removeCloneNode();\n });\n });\n }\n\n #createOnLoadScript() {\n window.onRecaptchaLoadCallback = () => {\n const currentNode = this.depercatedRecaptchaEle;\n\n // if there are child nodes, it means that the recaptcha was already rendered\n if (currentNode.hasChildNodes()) {\n return;\n }\n\n const { grecaptchaInstance } = this;\n\n if (!grecaptchaInstance) {\n return;\n }\n\n setTimeout(() => {\n const recaptchaWidgetId = grecaptchaInstance.render(currentNode, {\n sitekey: this.siteKey,\n badge: 'inline',\n size: 'invisible',\n });\n this.#getNewToken(grecaptchaInstance, currentNode, recaptchaWidgetId);\n }, 0);\n };\n }\n}\n\nexport const RecaptchaClass = compose(draggableMixin)(RawRecaptcha);\n","import { componentName, RecaptchaClass } from './RecaptchaClass';\n\ncustomElements.define(componentName, RecaptchaClass);\n\nexport { RecaptchaClass, componentName };\n"],"names":["componentName","componentHelpers","xE","observedAttributes","BaseClass","createBaseClass","q","baseSelector","RecaptchaClass","helpers","Zz","mixins","VO","concat","attributeChangedCallback","attrName","oldValue","newValue","super","this","toggleRecaptcha","updatePreview","renderRecaptcha","enabled","children","length","toggleRecaptchaEles","displayRecaptcha","isWidget","displayWidget","displayDeprecated","mockRecaptchaEle","style","display","recaptchaWidgetEle","depercatedRecaptchaEle","hideRecaptcha","constructor","attachShadow","mode","innerHTML","componentsHelpers","fz","baseElement","querySelector","recaptchaWidgetInputEle","badge","shadowRoot","init","Ge","bind","classList","add","remove","getValidity","value","valueMissing","checkValidity","enterprise","getAttribute","siteKey","action","variant","scriptURL","url","URL","pathname","searchParams","append","toString","createOnLoadScript","document","getElementById","window","onRecaptchaLoadCallback","loadRecaptchaScript","script","createElement","src","async","id","defer","body","appendChild","grecaptchaInstance","grecaptcha","getNewToken","currentNode","recaptchaWidgetId","isConnected","ready","cloneNode","exec","execute","then","token","e","console","warn","updateComponentsContext","risktoken","riskaction","setTimeout","hasChildNodes","render","sitekey","size","customElements","define"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "3.18.5",
3
+ "version": "3.19.0",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -52,11 +52,11 @@
52
52
  "webpack-cli": "^7.0.0",
53
53
  "webpack-dev-server": "^5.0.0",
54
54
  "webpack-subresource-integrity": "5.2.0-rc.1",
55
- "eslint-plugin-no-bare-class-import": "3.18.5",
56
- "rollup-replace-plugin": "3.18.5",
57
- "test-drivers": "3.18.5",
58
- "webpack-extract-font-loader": "3.18.5",
59
- "webpack-replace-plugin": "3.18.5"
55
+ "eslint-plugin-no-bare-class-import": "3.19.0",
56
+ "rollup-replace-plugin": "3.19.0",
57
+ "test-drivers": "3.19.0",
58
+ "webpack-extract-font-loader": "3.19.0",
59
+ "webpack-replace-plugin": "3.19.0"
60
60
  },
61
61
  "dependencies": {
62
62
  "@vaadin/checkbox": "24.3.4",
@@ -80,42 +80,42 @@
80
80
  "libphonenumber-js": "^1.11.12",
81
81
  "lodash.debounce": "4.0.8",
82
82
  "lodash.merge": "4.6.2",
83
- "@descope-ui/common": "3.18.5",
84
- "@descope-ui/descope-address-field": "3.18.5",
85
- "@descope-ui/descope-country-subdivision-city-field": "3.18.5",
86
- "@descope-ui/descope-apps-list": "3.18.5",
87
- "@descope-ui/descope-autocomplete-field": "3.18.5",
88
- "@descope-ui/descope-avatar": "3.18.5",
89
- "@descope-ui/descope-badge": "3.18.5",
90
- "@descope-ui/descope-button": "3.18.5",
91
- "@descope-ui/descope-collapsible-container": "3.18.5",
92
- "@descope-ui/descope-combo-box": "3.18.5",
93
- "@descope-ui/descope-enriched-text": "3.18.5",
94
- "@descope-ui/descope-icon": "3.18.5",
95
- "@descope-ui/descope-link": "3.18.5",
96
- "@descope-ui/descope-list": "3.18.5",
97
- "@descope-ui/descope-list-item": "3.18.5",
98
- "@descope-ui/descope-image": "3.18.5",
99
- "@descope-ui/descope-month-day-field": "3.18.5",
100
- "@descope-ui/descope-month-day-field-picker": "3.18.5",
101
- "@descope-ui/descope-multi-line-mappings": "3.18.5",
102
- "@descope-ui/descope-multi-select-combo-box": "3.18.5",
103
- "@descope-ui/descope-outbound-app-button": "3.18.5",
104
- "@descope-ui/descope-password-strength": "3.18.5",
105
- "@descope-ui/descope-ponyhot": "3.18.5",
106
- "@descope-ui/descope-recovery-codes": "3.18.5",
107
- "@descope-ui/descope-text": "3.18.5",
108
- "@descope-ui/descope-outbound-apps": "3.18.5",
109
- "@descope-ui/descope-text-field": "3.18.5",
110
- "@descope-ui/descope-timer": "3.18.5",
111
- "@descope-ui/descope-trusted-devices": "3.18.5",
112
- "@descope-ui/descope-attachment": "3.18.5",
113
- "@descope-ui/descope-anchored": "3.18.5",
114
- "@descope-ui/descope-user-passkeys": "3.18.5",
115
- "@descope-ui/descope-filter": "3.18.5",
116
- "@descope-ui/descope-multi-sso": "3.18.5",
117
- "@descope-ui/descope-timer-button": "3.18.5",
118
- "@descope-ui/descope-tooltip": "3.18.5"
83
+ "@descope-ui/common": "3.19.0",
84
+ "@descope-ui/descope-country-subdivision-city-field": "3.19.0",
85
+ "@descope-ui/descope-apps-list": "3.19.0",
86
+ "@descope-ui/descope-autocomplete-field": "3.19.0",
87
+ "@descope-ui/descope-avatar": "3.19.0",
88
+ "@descope-ui/descope-badge": "3.19.0",
89
+ "@descope-ui/descope-button": "3.19.0",
90
+ "@descope-ui/descope-collapsible-container": "3.19.0",
91
+ "@descope-ui/descope-combo-box": "3.19.0",
92
+ "@descope-ui/descope-enriched-text": "3.19.0",
93
+ "@descope-ui/descope-icon": "3.19.0",
94
+ "@descope-ui/descope-link": "3.19.0",
95
+ "@descope-ui/descope-list": "3.19.0",
96
+ "@descope-ui/descope-list-item": "3.19.0",
97
+ "@descope-ui/descope-month-day-field": "3.19.0",
98
+ "@descope-ui/descope-multi-line-mappings": "3.19.0",
99
+ "@descope-ui/descope-multi-select-combo-box": "3.19.0",
100
+ "@descope-ui/descope-outbound-app-button": "3.19.0",
101
+ "@descope-ui/descope-address-field": "3.19.0",
102
+ "@descope-ui/descope-outbound-apps": "3.19.0",
103
+ "@descope-ui/descope-image": "3.19.0",
104
+ "@descope-ui/descope-month-day-field-picker": "3.19.0",
105
+ "@descope-ui/descope-password-strength": "3.19.0",
106
+ "@descope-ui/descope-ponyhot": "3.19.0",
107
+ "@descope-ui/descope-recovery-codes": "3.19.0",
108
+ "@descope-ui/descope-text": "3.19.0",
109
+ "@descope-ui/descope-text-field": "3.19.0",
110
+ "@descope-ui/descope-timer": "3.19.0",
111
+ "@descope-ui/descope-timer-button": "3.19.0",
112
+ "@descope-ui/descope-tooltip": "3.19.0",
113
+ "@descope-ui/descope-multi-sso": "3.19.0",
114
+ "@descope-ui/descope-trusted-devices": "3.19.0",
115
+ "@descope-ui/descope-attachment": "3.19.0",
116
+ "@descope-ui/descope-anchored": "3.19.0",
117
+ "@descope-ui/descope-user-passkeys": "3.19.0",
118
+ "@descope-ui/descope-filter": "3.19.0"
119
119
  },
120
120
  "overrides": {
121
121
  "@vaadin/avatar": "24.3.4",
package/src/components/descope-recaptcha/RecaptchaClass.js CHANGED
@@ -204,8 +204,9 @@ class RawRecaptcha extends BaseClass {
204
204
  #toggleRecaptcha(enabled) {
205
205
  this.renderRecaptcha(enabled);
206
206
  if (this.isWidget) {
207
- // For the v2 checkbox flow, scripts are loaded/executed by the runtime (grecaptcha-v2).
208
- // This legacy v3/invisible path must be fully skipped.
207
+ // For the interactive widget, scripts are loaded/executed by the runtime (grecaptcha-v2 for the
208
+ // v2 checkbox, grecaptcha for an Enterprise key). This legacy v3/invisible path must be fully
209
+ // skipped — the runtime renders into #recaptcha-widget and fills #recaptcha-widget-input.
209
210
  return;
210
211
  }
211
212
  if (enabled) {