@descope/web-components-ui 1.0.163 → 1.0.165

package/dist/umd/descope-passcode-descope-passcode-internal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,s)=>{s.d(e,{f:()=>u,Z:()=>h});var i=s(3878),n=s(4567);const r=t=>{t?.focus(),t?.setSelectionRange(1,1)},a=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},u=(0,n.iY)("passcode-internal"),p=["digits"],l=["disabled","bordered","size","invalid","readonly"],d=(0,i.P)({componentName:u,baseSelector:"div"}),h=class extends d{static get observedAttributes(){return p.concat(d.observedAttributes||[])}static get componentName(){return u}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<style>\n\t\t\t.wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector("div")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){if(t===this.value)return;const e=a(t);e.length&&this.fillDigits(e,this.inputs[0])}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),s=Math.min(e+1,this.inputs.length-1);return this.inputs[s]}getPrevInput(t){const e=this.getInputIdx(t),s=Math.max(e-1,0);return this.inputs[s]}fillDigits(t,e){for(let s=0;s<t.length;s+=1){e.value=t[s]??"";const i=this.getNextInput(e);if(i===e)break;e=i}r(e)}parseInputValue(t){const e=a(t.value);e.length?this.fillDigits(e,t):t.value=""}initInputs(){let t;this.inputs.forEach((e=>{e.addEventListener("change",(s=>{t!==s.target&&this.parseInputValue(e)})),e.addEventListener("input",(s=>{t=s.target,setTimeout((()=>{t=null,"deleteContentBackward"===s.inputType&&r(this.getPrevInput(e))})),this.parseInputValue(e)})),e.onkeydown=({key:t})=>{"Backspace"===t?e.value?e.setSelectionRange(1,1):setTimeout((()=>r(this.getPrevInput(e))),0):1===t.length&&(e.value="")},(0,n.oP)(this,e,{includeAttrs:l})})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&p.includes(t)&&"digits"===t&&this.renderInputs()}get pattern(){return`^$|^\\d{${this.digits},}$`}}},4775:(t,e,s)=>{s.r(e);var i=s(7361);customElements.define(i.f,i.Z)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1841],{7361:(t,e,s)=>{s.d(e,{f:()=>u,Z:()=>h});var i=s(3878),n=s(4567);const r=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},a=t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]},u=(0,n.iY)("passcode-internal"),p=["digits"],l=["disabled","bordered","size","invalid","readonly"],d=(0,i.P)({componentName:u,baseSelector:"div"}),h=class extends d{static get observedAttributes(){return p.concat(d.observedAttributes||[])}static get componentName(){return u}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<style>\n\t\t\t.wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\twidth: 100%;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\t\t</style>\n\t\t',this.wrapperEle=this.querySelector("div")}renderInputs(){const t=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="one-time-code"\n\t\t\tinputMode="numeric"\n\t\t></descope-text-field>\n\t`));this.wrapperEle.innerHTML=t.join(""),this.inputs=Array.from(this.querySelectorAll("descope-text-field")),this.initInputs()}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map((({value:t})=>t)).join("")||""}set value(t){if(t===this.value)return;const e=a(t);e.length&&this.fillDigits(e,this.inputs[0])}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:this.pattern&&!new RegExp(this.pattern).test(this.value)?{patternMismatch:!0}:{}}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.inputs[0].focus()})),super.init?.(),this.renderInputs()}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),s=Math.min(e+1,this.inputs.length-1);return this.inputs[s]}getPrevInput(t){const e=this.getInputIdx(t),s=Math.max(e-1,0);return this.inputs[s]}fillDigits(t,e){for(let s=0;s<t.length;s+=1){e.value=t[s]??"";const i=this.getNextInput(e);if(i===e)break;e=i}r(e)}parseInputValue(t){const e=a(t.value);e.length?this.fillDigits(e,t):t.value=""}initInputs(){let t;this.inputs.forEach((e=>{e.addEventListener("change",(s=>{t!==s.target&&this.parseInputValue(e)})),e.addEventListener("input",(s=>{t=s.target,setTimeout((()=>{t=null,"deleteContentBackward"===s.inputType&&r(this.getPrevInput(e))})),this.parseInputValue(e)})),e.onkeydown=({key:t})=>{"Backspace"===t?e.value?e.setSelectionRange(1,1):setTimeout((()=>r(this.getPrevInput(e))),0):1===t.length&&(e.value="")},(0,n.oP)(this,e,{includeAttrs:l})})),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,s){super.attributeChangedCallback?.(t,e,s),e!==s&&p.includes(t)&&"digits"===t&&this.renderInputs()}get pattern(){return`^$|^\\d{${this.digits},}$`}}},4775:(t,e,s)=>{s.r(e);var i=s(7361);customElements.define(i.f,i.Z)}}]);

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:()=>y});var n=i(1e3),o=i(2061),r=i(4567),s=i(3878);const p=(0,r.iY)("upload-file"),a=["title","description","button-label","accept","button-mode","button-variant","required","size"],d=(0,s.P)({componentName:p,baseSelector:":host > div.wrapper"}),{host:u,icon:c,title:l,description:h,requiredIndicator:b}={host:{selector:()=>".wrapper"},icon:{selector:()=>".icon"},title:{selector:()=>".title"},description:{selector:()=>".description"},requiredIndicator:{selector:()=>".title::after"}},y=(0,o.qC)((0,n.yk)({componentNameOverride:(0,r.iY)("input-wrapper")}),(0,n.yk)({mappings:{fontSize:{},fontFamily:{},hostWidth:{...u,property:"width"},hostHeight:{...u,property:"height"},hostPadding:{...u,property:"padding"},gap:{...u},lineHeight:{...u,property:"line-height"},borderColor:{...u,property:"border-color"},borderWidth:{...u,property:"border-width"},borderStyle:{...u,property:"border-style"},borderRadius:{...u,property:"border-radius"},titleFontSize:{...l,property:"font-size"},titleFontWeight:{...l,property:"font-weight"},descriptionFontSize:{...h,property:"font-size"},labelTextColor:[{...l,property:"color"},{...h,property:"color"}],icon:{...c,property:"content"},iconSize:{...c,property:"width"},requiredIndicator:{...b,property:"content"}}}),n.e4,n.Ae)(class extends d{static get observedAttributes(){return a.concat(d.observedAttributes||[])}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n\t\t\t<style>\n\t\t\t.wrapper {\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}\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 class="wrapper">\n\t\t\t\t<div class="icon"></div>\n\t\t\t\t<div class="title">\n\t\t\t\t\t<span class="title-text"></span>\n\t\t\t\t\t<span class="required-indicator"></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))}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")}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)}});i(5545),customElements.define(p,y)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5874],{6667:(t,e,i)=>{i.r(e),i.d(e,{UploadFileClass:()=>v});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"}},v=(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\t\t\t\t<div class="icon"></div>\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):"icon"===t&&this.updateIcon(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")}updateIcon(t){this.icon.style.content=`url(${t})`}});i(5545),customElements.define(a,v)}}]);

package/package.json

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

package/src/components/descope-passcode/descope-passcode-internal/helpers.js

@@ -1,6 +1,6 @@
 export const focusElement = (ele) => {
   ele?.focus();
-  ele?.setSelectionRange(1, 1);
+  ele?.setSelectionRange?.(1, 1);
 };
 
 export const getSanitizedCharacters = (str) => {

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

@@ -11,13 +11,15 @@ const observedAttributes = [
   'description',
   'button-label',
   'accept',
+  'readonly',
   'button-mode',
   'button-variant',
   'required',
   'size',
+  'icon',
 ];
 
-const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div.wrapper' });
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });
 
 class RawUploadFile extends BaseInputClass {
   static get observedAttributes() {
@@ -29,12 +31,16 @@ class RawUploadFile extends BaseInputClass {
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
 			<style>
-			.wrapper {
+			:host {
+				display: flex;
+			}
+			:host > div {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				text-align: center;
 				flex-direction: column;
+				width: 100%;
 			}
 			.button-wrapper {
 				position: relative;
@@ -47,11 +53,10 @@ class RawUploadFile extends BaseInputClass {
 				opacity: 0;
 			}
 			</style>
-			<div class="wrapper">
+			<div>
 				<div class="icon"></div>
 				<div class="title">
 					<span class="title-text"></span>
-					<span class="required-indicator"></span>
 				</div>
 				<div class="description"></div>
 				<div class="button-wrapper">
@@ -113,6 +118,10 @@ class RawUploadFile extends BaseInputClass {
         this.updateButtonSize(newValue);
       } else if (attrName === 'accept') {
         this.updateInputAccept(newValue);
+      } else if (attrName === 'readonly') {
+        this.updateReadOnly(newValue);
+      } else if (attrName === 'icon') {
+        this.updateIcon(newValue);
       }
     }
   }
@@ -133,6 +142,10 @@ class RawUploadFile extends BaseInputClass {
     return this.shadowRoot.querySelector('.description');
   }
 
+  get icon() {
+    return this.shadowRoot.querySelector('.icon');
+  }
+
   updateTitle(val) {
     this.title.innerHTML = val;
   }
@@ -160,10 +173,23 @@ class RawUploadFile extends BaseInputClass {
   updateInputAccept(val) {
     this.input.setAttribute('accept', val);
   }
+
+  updateReadOnly(val) {
+    if (val === 'true') {
+      this.input.setAttribute('disabled', 'true');
+    } else {
+      this.input.removeAttribute('disabled');
+    }
+  }
+
+  updateIcon(val) {
+    this.icon.style.content = `url(${val})`;
+  }
 }
 
-const { host, icon, title, description, requiredIndicator } = {
-  host: { selector: () => '.wrapper' },
+const { host, wrapper, icon, title, description, requiredIndicator } = {
+  host: { selector: () => ':host' },
+  wrapper: { selector: () => ':host > div' },
   icon: { selector: () => '.icon' },
   title: { selector: () => '.title' },
   description: { selector: () => '.description' },
@@ -176,15 +202,15 @@ export const UploadFileClass = compose(
     mappings: {
       fontSize: {},
       fontFamily: {},
-      hostWidth: { ...host, property: 'width' },
+      borderColor: {},
+      borderWidth: {},
+      borderStyle: {},
+      borderRadius: {},
       hostHeight: { ...host, property: 'height' },
-      hostPadding: { ...host, property: 'padding' },
-      gap: { ...host },
-      lineHeight: { ...host, property: 'line-height' },
-      borderColor: { ...host, property: 'border-color' },
-      borderWidth: { ...host, property: 'border-width' },
-      borderStyle: { ...host, property: 'border-style' },
-      borderRadius: { ...host, property: 'border-radius' },
+      hostWidth: { ...host, property: 'width' },
+      hostPadding: { property: 'padding' },
+      gap: { ...wrapper },
+      lineHeight: { ...wrapper, property: 'line-height' },
       titleFontSize: { ...title, property: 'font-size' },
       titleFontWeight: { ...title, property: 'font-weight' },
       descriptionFontSize: { ...description, property: 'font-size' },
@@ -192,7 +218,6 @@ export const UploadFileClass = compose(
         { ...title, property: 'color' },
         { ...description, property: 'color' },
       ],
-      icon: { ...icon, property: 'content' },
       iconSize: { ...icon, property: 'width' },
       requiredIndicator: { ...requiredIndicator, property: 'content' },
     },

package/src/theme/components/uploadFile.js

@@ -5,10 +5,8 @@ const vars = UploadFileClass.cssVarList;
 
 const uploadFile = {
   [vars.labelTextColor]: refs.labelTextColor,
-  [vars.requiredIndicator]: refs.requiredIndicator,
   [vars.fontFamily]: refs.fontFamily,
 
-  [vars.icon]: 'url(https://imgs.descope.com/components/upload-file-outlined.svg)',
   [vars.iconSize]: '2em',
 
   [vars.hostPadding]: '0.75em',
@@ -23,6 +21,10 @@ const uploadFile = {
   [vars.borderRadius]: refs.borderRadius,
   [vars.borderStyle]: 'dashed',
 
+  _required: {
+    [vars.requiredIndicator]: refs.requiredIndicator,
+  },
+
   size: {
     xs: {
       [vars.hostHeight]: '196px',
@@ -53,6 +55,10 @@ const uploadFile = {
       [vars.lineHeight]: '1.75em',
     },
   },
+
+  _fullWidth: {
+    [vars.hostWidth]: refs.width,
+  },
 };
 
 export default uploadFile;