@descope/web-components-ui 1.0.184 → 1.0.186

package/dist/umd/descope-recaptcha-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[964],{8164:(t,e,a)=>{a.r(e),a.d(e,{RecaptchaClass:()=>p});var c=a(1e3),s=a(3874),i=a(2061);const n=(0,a(4567).iY)("recaptcha"),r=["disabled","site-key","action","enterprise"],o=(0,s.s)({componentName:n,baseSelector:":host > div"}),p=(0,i.qC)(c.e4)(class extends o{static get observedAttributes(){return r.concat(o.observedAttributes||[])}attributeChangedCallback(t,e,a){super.attributeChangedCallback?.(t,e,a),"disabled"===t&&this.#t("true"===a)}renderRecaptcha(t){t?(this.recaptchaEle.style.display="none",this.mockRecaptchaEle.style.display=""):(this.recaptchaEle.style.display="",this.mockRecaptchaEle.style.display="none")}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n\t\t\t:host #recaptcha {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%\n\t\t\t}\n      :host img {\n        width: 256px;\n      }\n\t\t\t:host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t}\n\t\t</style>\n    <div>\n      <span id="recaptcha"></span>\n      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>\n    </div>\n\t',this.recaptchaEle=this.baseElement.querySelector("#recaptcha"),this.mockRecaptchaEle=this.baseElement.querySelector("img")}get enterprise(){return"true"===this.getAttribute("enterprise")}get siteKey(){return this.getAttribute("site-key")}get action(){return this.getAttribute("action")||"load"}get disabled(){return"true"===this.getAttribute("disabled")}get scriptURL(){const t=new URL("https://www.google.com/recaptcha/");return t.pathname+=(this.enterprise?"enterprise":"api")+".js",t.searchParams.append("onload","onRecaptchaLoadCallback"),t.searchParams.append("render","explicit"),t.toString()}#t(t){this.renderRecaptcha(t),t||(this.#e(),this.#a())}#e(){if(document.getElementById("recaptcha-script"))window.onRecaptchaLoadCallback();else{const t=document.createElement("script");t.src=this.scriptURL,t.async=!0,t.id="recaptcha-script",t.defer=!0,document.body.appendChild(t)}}#a(){window.onRecaptchaLoadCallback||(window.onRecaptchaLoadCallback=()=>{const t=this.recaptchaEle;if(t.hasChildNodes())return;const e=this.enterprise?window.grecaptcha?.enterprise:window.grecaptcha;e&&setTimeout((()=>{const a=e.render(t,{sitekey:this.siteKey,badge:"inline",size:"invisible"});e.ready((()=>{const c=t.querySelector("#g-recaptcha-response")?.cloneNode();c&&(c.style.display="none",document.body.appendChild(c)),this.siteKey&&e?.execute(a,{action:this.action}).then((t=>{this.updateComponentsContext({risktoken:t,riskaction:this.action})}))}))}),0)})}connectedCallback(){super.connectedCallback?.(),this.#t(this.disabled)}});customElements.define(n,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[964],{8164:(e,t,a)=>{a.r(t),a.d(t,{RecaptchaClass:()=>p});var c=a(1e3),n=a(3874),s=a(2061);const i=(0,a(4567).iY)("recaptcha"),r=["enabled","site-key","action","enterprise"],o=(0,n.s)({componentName:i,baseSelector:":host > div"}),p=(0,s.qC)(c.e4)(class extends o{static get observedAttributes(){return r.concat(o.observedAttributes||[])}attributeChangedCallback(e,t,a){super.attributeChangedCallback?.(e,t,a),"enabled"===e&&this.#e("true"===a)}renderRecaptcha(e){e?(this.recaptchaEle.style.display="",this.mockRecaptchaEle.style.display="none"):(this.recaptchaEle.style.display="none",this.mockRecaptchaEle.style.display="")}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t<style>\n      :host {\n        display: inline-flex;\n      }\n      :host > div {\n        display: flex;\n      }\n      :host #recaptcha {\n\t\t\t\twidth: 100%;\n        height: 100%;\n\t\t\t}\n      :host img {\n        width: 256px;\n      }\n\t\t</style>\n    <div>\n      <span id="recaptcha"></span>\n      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>\n    </div>\n\t',this.recaptchaEle=this.baseElement.querySelector("#recaptcha"),this.mockRecaptchaEle=this.baseElement.querySelector("img")}get enterprise(){return"true"===this.getAttribute("enterprise")}get siteKey(){return this.getAttribute("site-key")}get action(){return this.getAttribute("action")||"load"}get enabled(){return"true"===this.getAttribute("enabled")}get scriptURL(){const e=new URL("https://www.google.com/recaptcha/");return e.pathname+=(this.enterprise?"enterprise":"api")+".js",e.searchParams.append("onload","onRecaptchaLoadCallback"),e.searchParams.append("render","explicit"),e.toString()}#e(e){this.renderRecaptcha(e),e&&(this.#t(),this.#a())}#t(){if(document.getElementById("recaptcha-script"))window.onRecaptchaLoadCallback();else{const e=document.createElement("script");e.src=this.scriptURL,e.async=!0,e.id="recaptcha-script",e.defer=!0,document.body.appendChild(e)}}#a(){window.onRecaptchaLoadCallback||(window.onRecaptchaLoadCallback=()=>{const e=this.recaptchaEle;if(e.hasChildNodes())return;const t=this.enterprise?window.grecaptcha?.enterprise:window.grecaptcha;t&&setTimeout((()=>{const a=t.render(e,{sitekey:this.siteKey,badge:"inline",size:"invisible"});t.ready((()=>{const c=e.querySelector("#g-recaptcha-response")?.cloneNode();c&&(c.style.display="none",document.body.appendChild(c)),this.siteKey&&t?.execute(a,{action:this.action}).then((e=>{this.updateComponentsContext({risktoken:e,riskaction:this.action})}))}))}),0)})}connectedCallback(){super.connectedCallback?.(),this.#e(this.enabled)}});customElements.define(i,p)}}]);

package/dist/umd/descope-upload-file-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>g});var n=i(1e3),o=i(2061),r=i(4567),s=i(3878);const a=(0,r.iY)("upload-file"),p=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],u=(0,s.P)({componentName:a,baseSelector:":host > div"}),{host:d,wrapper:l,icon:c,title:h,description:b,requiredIndicator:y}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>".icon"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},g=(0,o.qC)((0,n.yk)({componentNameOverride:(0,r.iY)("input-wrapper")}),(0,n.yk)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...d,property:"height"},hostWidth:{...d,property:"width"},hostPadding:{property:"padding"},gap:{...l},lineHeight:{...l,property:"line-height"},titleFontSize:{...h,property:"font-size"},titleFontWeight:{...h,property:"font-weight"},descriptionFontSize:{...b,property:"font-size"},labelTextColor:[{...h,property:"color"},{...b,property:"color"}],iconSize:{...c,property:"width"},requiredIndicator:{...y,property:"content"}}}),n.e4,n.Ae)(class extends u{static get observedAttributes(){return p.concat(u.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n        <slot name="icon"></slot>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class="description"></div>\n\t\t\t\t<div class="button-wrapper">\n\t\t\t\t\t<input type="file" tabindex="-1" />\n\t\t\t\t\t<descope-button></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.shadowRoot.querySelector(".wrapper"),this.inputElement=this.shadowRoot.querySelector("input"),this.button.onclick=()=>this.inputElement.click(),this.inputElement.onchange=async t=>{const e=t.target.files;var i;e.length&&(this.value=await(i=e[0],new Promise((t=>{const e=new FileReader;e.onload=e=>t(e.target.result),e.readAsDataURL(i)}))),this.updateDescription((t=>t.name.replace(/^.*\\/,""))(e[0])))},this.oninvalid=()=>{this.setAttribute("invalid","true")}}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}initInputs(){this.rootElement.querySelector("descope-button").onclick=()=>this.inputElement.click()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("title"===t?this.updateTitle(i):"description"===t?this.updateDescription(i):"button-label"===t?this.updateButtonLabel(i):"button-mode"===t?this.updateButtonMode(i):"button-variant"===t?this.updateButtonVariant(i):"size"===t?this.updateButtonSize(i):"accept"===t?this.updateInputAccept(i):"readonly"===t&&this.updateReadOnly(i))}get button(){return this.shadowRoot.querySelector("descope-button")}get input(){return this.shadowRoot.querySelector("input")}get title(){return this.shadowRoot.querySelector(".title-text")}get description(){return this.shadowRoot.querySelector(".description")}get icon(){return this.shadowRoot.querySelector(".icon")}updateTitle(t){this.title.innerHTML=t}updateDescription(t){this.description.innerHTML=t}updateButtonLabel(t){this.button.innerHTML=t}updateButtonSize(t){this.button.setAttribute("size",t)}updateButtonMode(t){this.button.setAttribute("mode",t)}updateButtonVariant(t){this.button.setAttribute("variant",t)}updateInputAccept(t){this.input.setAttribute("accept",t)}updateReadOnly(t){"true"===t?this.input.setAttribute("disabled","true"):this.input.removeAttribute("disabled")}});i(2018),customElements.define(a,g)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>g});var n=i(1e3),o=i(2061),r=i(4567),s=i(3878);const a=(0,r.iY)("upload-file"),p=["title","description","button-label","accept","readonly","button-mode","button-variant","required","size","icon"],u=(0,s.P)({componentName:a,baseSelector:":host > div"}),{host:d,wrapper:l,icon:c,title:h,description:b,requiredIndicator:y}={host:{selector:()=>":host"},wrapper:{selector:()=>":host > div"},icon:{selector:()=>"::slotted(*)"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},g=(0,o.qC)((0,n.yk)({componentNameOverride:(0,r.iY)("input-wrapper")}),(0,n.yk)({mappings:{fontSize:{},fontFamily:{},borderColor:{},borderWidth:{},borderStyle:{},borderRadius:{},hostHeight:{...d,property:"height"},hostWidth:{...d,property:"width"},hostPadding:{property:"padding"},gap:{...l},lineHeight:{...l,property:"line-height"},titleFontSize:{...h,property:"font-size"},titleFontWeight:{...h,property:"font-weight"},descriptionFontSize:{...b,property:"font-size"},labelTextColor:[{...h,property:"color"},{...b,property:"color"}],iconSize:{...c,property:"width"},requiredIndicator:{...y,property:"content"}}}),n.e4,n.Ae)(class extends u{static get observedAttributes(){return p.concat(u.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t\t:host > div {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tflex-direction: column;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t\t.button-wrapper {\n\t\t\t\tposition: relative;\n\t\t\t\twidth: fit-content;\n\t\t\t}\n\t\t\tinput {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t</style>\n\t\t\t<div>\n        <slot name="icon"></slot>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t</div>\n\t\t\t\t<div class="description"></div>\n\t\t\t\t<div class="button-wrapper">\n\t\t\t\t\t<input type="file" tabindex="-1" />\n\t\t\t\t\t<descope-button></descope-button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.shadowRoot.querySelector(".wrapper"),this.inputElement=this.shadowRoot.querySelector("input"),this.button.onclick=()=>this.inputElement.click(),this.inputElement.onchange=async t=>{const e=t.target.files;var i;e.length&&(this.value=await(i=e[0],new Promise((t=>{const e=new FileReader;e.onload=e=>t(e.target.result),e.readAsDataURL(i)}))),this.updateDescription((t=>t.name.replace(/^.*\\/,""))(e[0])))},this.oninvalid=()=>{this.setAttribute("invalid","true")}}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}initInputs(){this.rootElement.querySelector("descope-button").onclick=()=>this.inputElement.click()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&("title"===t?this.updateTitle(i):"description"===t?this.updateDescription(i):"button-label"===t?this.updateButtonLabel(i):"button-mode"===t?this.updateButtonMode(i):"button-variant"===t?this.updateButtonVariant(i):"size"===t?this.updateButtonSize(i):"accept"===t?this.updateInputAccept(i):"readonly"===t&&this.updateReadOnly(i))}get button(){return this.shadowRoot.querySelector("descope-button")}get input(){return this.shadowRoot.querySelector("input")}get title(){return this.shadowRoot.querySelector(".title-text")}get description(){return this.shadowRoot.querySelector(".description")}get icon(){return this.shadowRoot.querySelector(".icon")}updateTitle(t){this.title.innerHTML=t}updateDescription(t){this.description.innerHTML=t}updateButtonLabel(t){this.button.innerHTML=t}updateButtonSize(t){this.button.setAttribute("size",t)}updateButtonMode(t){this.button.setAttribute("mode",t)}updateButtonVariant(t){this.button.setAttribute("variant",t)}updateInputAccept(t){this.input.setAttribute("accept",t)}updateReadOnly(t){"true"===t?this.input.setAttribute("disabled","true"):this.input.removeAttribute("disabled")}});i(2018),customElements.define(a,g)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.184",
+  "version": "1.0.186",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

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

@@ -5,7 +5,7 @@ import { getComponentName } from '../../helpers/componentHelpers';
 
 export const componentName = getComponentName('recaptcha');
 
-const observedAttributes = ['disabled', 'site-key', 'action', 'enterprise'];
+const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise'];
 
 const BaseClass = createBaseClass({
   componentName,
@@ -18,18 +18,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 = '';
     }
   }
 
@@ -38,16 +38,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>
@@ -71,8 +74,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() {
@@ -83,9 +86,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();
     }
@@ -151,8 +154,7 @@ class RawRecaptcha extends BaseClass {
 
   connectedCallback() {
     super.connectedCallback?.();
-
-    this.#toggleRecaptcha(this.disabled);
+    this.#toggleRecaptcha(this.enabled);
   }
 }
 

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

@@ -184,7 +184,7 @@ class RawUploadFile extends BaseInputClass {
 const { host, wrapper, icon, title, description, requiredIndicator } = {
   host: { selector: () => ':host' },
   wrapper: { selector: () => ':host > div' },
-  icon: { selector: () => '.icon' },
+  icon: { selector: () => '::slotted(*)' },
   title: { selector: () => '.title' },
   description: { selector: () => '.description' },
   requiredIndicator: { selector: () => '.title::after' },