@descope/web-components-ui 1.0.51 → 1.0.52

package/dist/umd/433.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[433],{3535:(e,t,s)=>{s.d(t,{SP:()=>i,wj:()=>n,zy:()=>l});var r=s(6225);const o=(e,...t)=>`var(${e}${t.length?` , ${o(...t)}`:""})`;class a{constructor(){this.styleMap=new Map}add(e,t,s){this.styleMap.has(e)||this.styleMap.set(e,[]),this.styleMap.set(e,[...this.styleMap.get(e),{property:t,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((e,[t,s])=>e+`${t} { \n${s.map((({property:e,value:t})=>`${e}: ${t}`)).join(";\n")} \n}\n\n`),"")}}const n=(e,t,s)=>{const n=new a;return Object.keys(s).forEach((a=>{const i=((e,t)=>{const s={selector:"",property:(0,r.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(a,s[a]),l=(0,r.Tk)(e,a);i.forEach((({selector:e,property:s})=>{n.add(((e="",t="")=>"function"==typeof t?t(e):`${e}${t}`)(t,e),s,o(l))}))})),n.toString()},i=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,r.Tk)(e,s)})),{}),l=(e={})=>[e,{...e,selector:()=>`:host${e.selector||""}`}]},9433:(e,t,s)=>{s.d(t,{Ae:()=>u,qC:()=>p,DM:()=>c,yk:()=>a,e4:()=>n,iY:()=>m,y7:()=>d});var r=s(6225),o=s(3535);const a=({mappings:e={}})=>t=>{const s=Object.keys(e).map((e=>(0,r.E3)("st",e)));return class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...s]}static get cssVarList(){return(0,o.SP)(t.componentName,e)}#e=null;constructor(){super(),this.#t(),this.#s()}#s(){this.#e=document.createElement("style"),this.#e.id="style-mixin-overrides",this.#e.innerText="* {}",this.shadowRoot.prepend(this.#e)}#r(e,s){const o=this.#e.sheet.cssRules[0].style,a=(0,r.Tk)(t.componentName,e.replace(/^st-/,""));s?o.setProperty(a,s):o.removeProperty(a)}#t(){const s=document.createElement("style");s.id="style-mixin-component",s.innerHTML=(0,o.wj)(t.componentName,this.baseSelector,e),this.shadowRoot.prepend(s)}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),s.includes(e)&&this.#r(e,r)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&Array.from(this.attributes).forEach((e=>{s.includes(e.nodeName)&&this.#r(e.nodeName,e.value)}))}}},n=e=>class extends e{#e=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#e=document.createElement("style"),this.#e.innerText=`${this.baseSelector} { cursor: inherit }`}#o(e){e?this.shadowRoot.appendChild(this.#e):this.#e.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#o("true"===s)}},i=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const r of e)"attributes"!==r.type||s.includes(r.attributeName)||t(r.attributeName)})).observe(e,{attributes:!0})},l=(e,t)=>(...s)=>{s.forEach((s=>{const r=e.getAttribute(s);null!==r?t.getAttribute(s)!==r&&t.setAttribute(s,r):t.removeAttribute(s)}))},c=({componentName:e,wrappedEleName:t,slots:s=[],style:r,excludeAttrsSync:o=[]})=>{const a=`\n\t\t<style id="create-proxy"></style>\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class n extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=a,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.baseSelector=t,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof r?r():r}connectedCallback(){var e,s,r;this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.onfocus=e=>{this.proxyElement.focus()},this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=this.proxyElement.addEventListener,e=this.proxyElement,s=this.hostElement,r=o,i(e,l(e,s),r),i(s,l(s,e),r))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return n},h=["invalid","has-error-message"],d=e=>class extends e{static get formAssociated(){return!0}#a;constructor(){super(),this.#a=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(e){const t=this.getAttribute(e);t&&this.proxyElement.setAttribute("error-message",t),h.forEach((e=>this.proxyElement.setAttribute(e,"true")))}validate(){const{valueMissing:e,patternMismatch:t,typeMismatch:s}=this.validity;e?this.setValidationAttribute("data-errormessage-value-missing"):(s||t)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){this.baseEle=this.shadowRoot.querySelector(this.baseSelector),super.connectedCallback?.(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0);const e=this.baseEle.querySelector("input")||this.baseEle.querySelector("textarea");if(!e)throw Error("no input was found");var t,s;t=e,s="value",Object.defineProperty(this,s,{set:function(e){return t[s]=e},get:function(){return t[s]},configurable:!0}),this.setSelectionRange=e.setSelectionRange.bind(e),this.validity=e.validity,this.setValidity=()=>{this.#a.setValidity(e.validity,e.validationMessage)},e.oninput=()=>{this.value=e.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>e.reportValidity()),0),this.validate()},e.oninvalid=()=>{this.validate()}}},u=e=>class extends e{#n(){const t=this.shadowRoot.host.tagName.toLowerCase();if(!e.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(t!==e.componentName)throw Error(`component name mismatch, expected "${e.componentName}", current "${t}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#n()}},m=e=>(0,r.E3)("descope",e),p=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>o,GL:()=>r,Tk:()=>a});const r=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...e)=>r(e.join("-")),a=(...e)=>`--${o(...e.filter((e=>!!e)))}`}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[433],{3535:(e,t,s)=>{s.d(t,{SP:()=>a,wj:()=>r,zy:()=>l});var n=s(6225);const o=(e,...t)=>`var(${e}${t.length?` , ${o(...t)}`:""})`;class i{constructor(){this.styleMap=new Map}add(e,t,s){this.styleMap.has(e)||this.styleMap.set(e,[]),this.styleMap.set(e,[...this.styleMap.get(e),{property:t,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((e,[t,s])=>e+`${t} { \n${s.map((({property:e,value:t})=>`${e}: ${t}`)).join(";\n")} \n}\n\n`),"")}}const r=(e,t,s)=>{const r=new i;return Object.keys(s).forEach((i=>{const a=((e,t)=>{const s={selector:"",property:(0,n.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(i,s[i]),l=(0,n.Tk)(e,i);a.forEach((({selector:e,property:s})=>{r.add(((e="",t="")=>"function"==typeof t?t(e):`${e}${t}`)(t,e),s,o(l))}))})),r.toString()},a=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,n.Tk)(e,s)})),{}),l=(e={})=>[e,{...e,selector:()=>`:host${e.selector||""}`}]},9433:(e,t,s)=>{s.d(t,{Ae:()=>m,qC:()=>p,DM:()=>c,yk:()=>i,e4:()=>r,iY:()=>u,y7:()=>d});var n=s(6225),o=s(3535);const i=({mappings:e={},nestedMappings:t={}})=>s=>{const i=Object.keys(e).map((e=>(0,n.E3)("st",e)));return class extends s{static get observedAttributes(){return[...s.observedAttributes||[],...i]}static get cssVarList(){return(0,o.SP)(s.componentName,e)}#e=null;constructor(){super(),this.#t(),this.#s()}#s(){this.#e=document.createElement("style"),this.#e.id="style-mixin-overrides",this.#e.innerText="* {}",this.shadowRoot.prepend(this.#e)}#n(e,t){const o=this.#e.sheet?.cssRules[0].style,i=(0,n.Tk)(s.componentName,e.replace(/^st-/,""));t?o?.setProperty(i,t):o?.removeProperty(i)}#t(){const t=document.createElement("style");t.id="style-mixin-component",t.innerHTML=(0,o.wj)(s.componentName,this.baseSelector,e),this.shadowRoot.prepend(t)}#o(){const e=this.shadowRoot.host.getRootNode(),n=`${s.componentName}-style-mixin-component`,i=s.componentName;if(this.shadowRoot.host.classList.add(i),e.querySelector(`style#${n}`))return;const r=document.createElement("style");r.id=n,r.innerHTML=(0,o.wj)(s.componentName,`${s.componentName}${Array(3).fill(`.${i}`).join("")}`,t),"#document"===e.nodeName?e.head.append(r):e.append(r)}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),i.includes(e)&&this.#n(e,s)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&(this.#o(),Array.from(this.attributes).forEach((e=>{i.includes(e.nodeName)&&this.#n(e.nodeName,e.value)})))}}},r=e=>class extends e{#e=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#e=document.createElement("style"),this.#e.innerText=`${this.baseSelector} { cursor: inherit }`}#i(e){e?this.shadowRoot.appendChild(this.#e):this.#e.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#i("true"===s)}},a=(e,t,s)=>{t(...Array.from(e.attributes).map((e=>e.name))),new MutationObserver((e=>{for(const n of e)"attributes"!==n.type||s.includes(n.attributeName)||t(n.attributeName)})).observe(e,{attributes:!0})},l=(e,t)=>(...s)=>{s.forEach((s=>{const n=e.getAttribute(s);null!==n?t.getAttribute(s)!==n&&t.setAttribute(s,n):t.removeAttribute(s)}))},c=({componentName:e,wrappedEleName:t,slots:s=[],style:n,excludeAttrsSync:o=[]})=>{const i=`\n\t\t<style id="create-proxy"></style>\n\t\t<${t}>\n\t\t<slot></slot>\n\t\t${s.map((e=>`<slot name="${e}" slot="${e}"></slot>`)).join("")}\n\t\t</${t}>\n\t`;class r extends HTMLElement{static get componentName(){return e}constructor(){super().attachShadow({mode:"open"}).innerHTML=i,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.baseSelector=t,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof n?n():n}connectedCallback(){var e,s,n;this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(t),this.setAttribute("tabindex","0"),this.addEventListener("focus",(()=>{this.proxyElement.focus()})),this.proxyElement.onkeydown=e=>{e.shiftKey&&9===e.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=(...e)=>this.proxyElement.addEventListener(...e),e=this.proxyElement,s=this.hostElement,n=o,a(e,l(e,s),n),a(s,l(s,e),n))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return r},h=["invalid","has-error-message"],d=e=>class extends e{static get formAssociated(){return!0}#r;constructor(){super(),this.#r=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}setValidationAttribute(e){const t=this.getAttribute(e);t&&this.proxyElement.setAttribute("error-message",t),h.forEach((e=>this.proxyElement.setAttribute(e,"true")))}validate(){const{valueMissing:e,patternMismatch:t,typeMismatch:s}=this.validity;e?this.setValidationAttribute("data-errormessage-value-missing"):(s||t)&&this.setValidationAttribute("data-errormessage-pattern-mismatch")}connectedCallback(){if(super.connectedCallback?.(),this.baseEle=this.shadowRoot.querySelector(this.baseSelector),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0),this.inputElement??=this.baseEle.shadowRoot.querySelector('slot[name="input"]')?.assignedElements()[0]||this.baseEle.shadowRoot.querySelector('slot[name="textarea"]')?.assignedElements()[0],!this.inputElement)throw Error("no input was found");var e,t;e=this.inputElement,t="value",Object.defineProperty(this,t,{set:function(s){return e[t]=s},get:function(){return e[t]},configurable:!0}),this.setSelectionRange=this.inputElement.setSelectionRange?.bind(this.inputElement),this.validity=this.inputElement.validity,this.setValidity=()=>{this.#r.setValidity(this.inputElement.validity,this.inputElement.validationMessage)},this.inputElement.oninput=()=>{this.value=this.inputElement.value,this.setValidity()},this.onfocus=()=>{setTimeout((()=>this.inputElement.reportValidity()),0),this.validate()},this.inputElement.oninvalid=()=>{this.validate()}}},m=e=>class extends e{#a(){const t=this.shadowRoot.host.tagName.toLowerCase();if(!e.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(t!==e.componentName)throw Error(`component name mismatch, expected "${e.componentName}", current "${t}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#a()}},u=e=>(0,n.E3)("descope",e),p=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>o,GL:()=>n,Tk:()=>i});const n=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),o=(...e)=>n(e.join("-")),i=(...e)=>`--${o(...e.filter((e=>!!e)))}`}}]);

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

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[247],{2798:(e,t,o)=>{o.r(t),o.d(t,{Combo:()=>d});var n=o(9433);o(3029),o(6303);const c=document.createElement("template"),s=(0,n.iY)("combo");c.innerHTML="\n  <descope-button></descope-button>\n  <descope-text-field></descope-text-field>\n";class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(c.content.cloneNode(!0))}}customElements.define(s,d)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[247],{2798:(e,t,o)=>{o.r(t),o.d(t,{Combo:()=>d});var n=o(9433);o(3029),o(9357);const c=document.createElement("template"),s=(0,n.iY)("combo");c.innerHTML="\n  <descope-button></descope-button>\n  <descope-text-field></descope-text-field>\n";class d extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).appendChild(c.content.cloneNode(!0))}}customElements.define(s,d)}}]);

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

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[841],{7361:(t,e,i)=>{i.d(e,{f:()=>r,Z:()=>u});var s=i(9433);const n=t=>{t?.focus(),t?.setSelectionRange(1,1)},r=(0,s.iY)("passcode-internal");class a extends HTMLElement{static get observedAttributes(){return["disabled","bordered","size"]}static get componentName(){return r}static get formAssociated(){return!0}#t;constructor(){super();const t=document.createElement("template"),e=[...Array(this.digits).keys()].map((t=>`\n\t\t<descope-text-field\n\t\t\tst-width="35px"\n\t\t\tdata-id=${t}\n\t\t\ttype="tel"\n\t\t\tautocomplete="none"\n\t\t></descope-text-field>\n\t`));t.innerHTML=`\n\t\t<div>\n\t\t\t${e.join("")}\n\t\t</div>\n\t\t`,this.appendChild(t.content.cloneNode(!0)),this.baseSelector=":host > div",this.#t=this.attachInternals(),this.inputs=Array.from(this.querySelectorAll("descope-text-field"))}checkValidity(){return this.#t.validity.valid?this.inputs.forEach((t=>t.removeAttribute("has-error-message"))):(this.inputs.forEach((t=>t.setAttribute("has-error-message","true"))),this.oninvalid?.()),this.#t.validity.valid}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}get value(){return this.inputs.map((({value:t})=>t)).join("")}set value(t){}get isRequired(){return this.hasAttribute("required")&&"false"!==this.getAttribute("required")}get pattern(){return`^$|^\\d{${this.digits},}$`}get valueMissingErrMsg(){return"Please fill out this field."}get patternMismatchErrMsg(){return`Must be a ${this.digits} digits number.`}get validity(){return this.#t.validity}get validationMessage(){return this.#t.validationMessage}reportValidity(){this.#t.reportValidity()}formAssociatedCallback(){this.setValidity?.()}setValidity=()=>{this.isRequired&&!this.value?this.#t.setValidity({valueMissing:!0},this.valueMissingErrMsg):this.pattern&&!new RegExp(this.pattern).test(this.value)?this.#t.setValidity({patternMismatch:!0},this.patternMismatchErrMsg):this.#t.setValidity({})};async connectedCallback(){this.setValidity(),this.initInputs(),this.onfocus=()=>{this.inputs[0].focus()}}getInputIdx(t){return Number.parseInt(t.getAttribute("data-id"),10)}getNextInput(t){const e=this.getInputIdx(t),i=Math.min(e+1,this.inputs.length-1);return this.inputs[i]}getPrevInput(t){const e=this.getInputIdx(t),i=Math.max(e-1,0);return this.inputs[i]}fillDigits(t,e){for(let i=0;i<t.length;i+=1){e.value=t[i]??"";const s=this.getNextInput(e);if(s===e)break;e=s}!e.hasAttribute("focused")&&n(e)}initInputs(){this.inputs.forEach((t=>{t.addEventListener("blur",(()=>{const t=setTimeout((()=>{this.dispatchEvent(new Event("blur"))}));this.inputs.forEach((e=>e.addEventListener("focus",(()=>clearTimeout(t)),{once:!0})))})),t.oninput=e=>{const i=(t=>{const e=t.replace(/\s/g,"");return e.match(/^\d+$/)?[...e]:[]})(t.value);i.length?this.fillDigits(i,t):t.value="",this.setValidity()},t.onkeydown=({key:e})=>{if("Backspace"===e){t.value="";const e=this.getPrevInput(t);!e.hasAttribute("focused")&&setTimeout((()=>{n(e)}))}else e.match(/^(\d)$/g)&&(t.value="");this.setValidity()}}))}attributeChangedCallback(t,e,i){e!==i&&a.observedAttributes.includes(t)&&this.inputs.forEach((e=>e.setAttribute(t,i)))}}const u=a},4775:(t,e,i)=>{i.r(e);var s=i(7361);customElements.define(s.f,s.Z)}}]);

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

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[939],{7102:(t,e,n)=>{n.r(e);var i=n(9433),a=n(4447),r=n(9063),o=n(7361);const d=(0,i.iY)("passcode"),{borderStyle:s,borderWidth:l,...p}=a.Z,c=(0,i.qC)((0,i.yk)({mappings:{...p},nestedMappings:{borderColor:{selector:` ${r.Z.componentName}`,property:r.Z.cssVarList.borderColor}}}),i.e4,i.y7,i.Ae,(t=>class extends t{constructor(){super()}get digits(){return Number.parseInt(this.getAttribute("digits"))||6}connectedCallback(){super.connectedCallback?.();const t=document.createElement("template");t.innerHTML=`\n      <${o.f} \n        bordered="true" \n        name="code" \n        tabindex="0"\n        slot="input"\n        required="${this.shadowRoot.host.getAttribute("required")}"\n        pattern="${this.shadowRoot.host.getAttribute("pattern")}"\n      ></${o.f}>\n      `;const e=Object.assign(document.createElement("slot"),{name:"input",slot:"input",part:"input"});this.proxyElement.appendChild(e),this.proxyElement._setFocused=()=>{},this.shadowRoot.host.appendChild(t.content.cloneNode(!0)),this.inputElement=this.querySelector(o.f),this.inputElement.addEventListener("blur",(()=>{this.proxyElement.validate()}))}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n    :host {\n      --vaadin-field-default-width: auto;\n    }\n\n    ::slotted([slot='input']) {\n      -webkit-mask-image: none;\n      display: flex;\n      gap: 2px;\n      align-items: center;\n      padding: 0;\n    }\n\n    vaadin-text-field::part(input-field) {\n      background-color: transparent;\n      padding: 0;\n    }\n\n    ${u}\n    `,excludeAttrsSync:["tabindex"],componentName:d})),u=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${c.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${c.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`,f=c;n(9357),n(4775),customElements.define(d,f)}}]);

package/dist/umd/descope-text-field-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{6303:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>r}),n(9789);var i=n(9433),a=n(4447);const l=(0,i.iY)("text-field");let d="";const o=(0,i.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.y7,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>d,excludeAttrsSync:["tabindex"],componentName:l}));d=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const r=o;customElements.define(l,r)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{9063:(t,e,n)=>{n.d(e,{Z:()=>r,f:()=>l});var i=n(9433),a=n(4447);const l=(0,i.iY)("text-field");let d="";const o=(0,i.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.y7,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>d,excludeAttrsSync:["tabindex"],componentName:l}));d=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const r=o},9357:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>i.Z}),n(9789);var i=n(9063);customElements.define(i.f,i.Z)}}]);

package/dist/umd/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,433,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,433,761],"./descope-combo/index.js":[2798,840,786,208,233,767,422,211,725,513,789,729,433,447,662,934,247],"./descope-container/index.js":[147,433,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,433,17],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,433,447,760],"./descope-logo/index.js":[4641,433,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,433,447,142],"./descope-password-field/index.js":[1721,840,786,208,233,767,422,211,725,56,433,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,433,739],"./descope-text-area/index.js":[178,840,786,233,422,101,433,322],"./descope-text-field/index.js":[6303,840,786,208,233,422,725,789,433,447,934],"./descope-text/index.js":[2092,433,528]};function n(e){if(!o.o(r,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],n=t[0];return Promise.all(t.slice(1).map(o.e)).then((()=>o(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,t,o)=>{const r=o(534);e.exports=r.keys().reduce(((e,t)=>(e[t.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(t),e)),{})}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,e=[],i.O=(t,o,r,n)=>{if(!o){var s=1/0;for(p=0;p<e.length;p++){for(var[o,r,n]=e[p],d=!0,c=0;c<o.length;c++)(!1&n||s>=n)&&Object.keys(i.O).every((e=>i.O[e](o[c])))?o.splice(c--,1):(d=!1,n<s&&(s=n));if(d){e.splice(p--,1);var a=r();void 0!==a&&(t=a)}}return t}n=n||0;for(var p=e.length;p>0&&e[p-1][2]>n;p--)e[p]=e[p-1];e[p]=[o,r,n]},i.F={},i.E=e=>{Object.keys(i.F).map((t=>{i.F[t](e)}))},i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,o)=>(i.f[o](e,t),t)),[])),i.u=e=>(({17:"descope-date-picker-index-js",142:"descope-number-field-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",934:"descope-text-field-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},o="DescopeUI:",i.l=(e,r,n,s)=>{if(t[e])t[e].push(r);else{var d,c;if(void 0!==n)for(var a=document.getElementsByTagName("script"),p=0;p<a.length;p++){var l=a[p];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,i.nc&&d.setAttribute("nonce",i.nc),d.setAttribute("data-webpack",o+n),d.src=e),t[e]=[r];var u=(o,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),o)return o(r)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=u.bind(null,d.onerror),d.onload=u.bind(null,d.onload),c&&document.head.appendChild(d)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var t=i.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");o.length&&(e=o[o.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={826:0};i.f.j=(t,o)=>{var r=i.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var n=new Promise(((o,n)=>r=e[t]=[o,n]));o.push(r[2]=n);var s=i.p+i.u(t),d=new Error;i.l(s,(o=>{if(i.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var n=o&&("load"===o.type?"missing":o.type),s=o&&o.target&&o.target.src;d.message="Loading chunk "+t+" failed.\n("+n+": "+s+")",d.name="ChunkLoadError",d.type=n,d.request=s,r[1](d)}}),"chunk-"+t,t)}},i.F.j=t=>{if(!i.o(e,t)||void 0===e[t]){e[t]=null;var o=document.createElement("link");i.nc&&o.setAttribute("nonce",i.nc),o.rel="prefetch",o.as="script",o.href=i.p+i.u(t),document.head.appendChild(o)}},i.O.j=t=>0===e[t];var t=(t,o)=>{var r,n,[s,d,c]=o,a=0;if(s.some((t=>0!==e[t]))){for(r in d)i.o(d,r)&&(i.m[r]=d[r]);if(c)var p=c(i)}for(t&&t(o);a<s.length;a++)n=s[a],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(p)},o=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),i.O(0,[826],(()=>{[840,767,211,513,729,433,662,786,208,515,761,233,422,725,789,447,934,247,317,54,17,437,760,984,806,142,56,320,739,101,322,528].map(i.E)}),5);var s=i(7507);return i.O(s)})()));
+!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,t,r={534:(e,o,t)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,433,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,433,761],"./descope-combo/index.js":[2798,840,786,208,233,422,767,725,211,789,513,729,433,447,934,662,247],"./descope-container/index.js":[147,433,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,433,17],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,433,447,760],"./descope-logo/index.js":[4641,433,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,433,447,142],"./descope-passcode/descope-passcode-internal/index.js":[4775,433,841],"./descope-passcode/index.js":[7102,840,786,208,233,422,725,789,433,447,934,841,939],"./descope-password-field/index.js":[1721,840,786,208,233,422,767,725,211,56,433,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,433,739],"./descope-text-area/index.js":[178,840,786,233,422,101,433,322],"./descope-text-field/index.js":[9357,840,786,208,233,422,725,789,433,447,934],"./descope-text/index.js":[2092,433,528]};function n(e){if(!t.o(r,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=r[e],n=o[0];return Promise.all(o.slice(1).map(t.e)).then((()=>t(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,o,t)=>{const r=t(534);e.exports=r.keys().reduce(((e,o)=>(e[o.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(o),e)),{})}},n={};function s(e){var o=n[e];if(void 0!==o)return o.exports;var t=n[e]={exports:{}};return r[e](t,t.exports,s),t.exports}s.m=r,e=[],s.O=(o,t,r,n)=>{if(!t){var i=1/0;for(a=0;a<e.length;a++){for(var[t,r,n]=e[a],d=!0,c=0;c<t.length;c++)(!1&n||i>=n)&&Object.keys(s.O).every((e=>s.O[e](t[c])))?t.splice(c--,1):(d=!1,n<i&&(i=n));if(d){e.splice(a--,1);var p=r();void 0!==p&&(o=p)}}return o}n=n||0;for(var a=e.length;a>0&&e[a-1][2]>n;a--)e[a]=e[a-1];e[a]=[t,r,n]},s.F={},s.E=e=>{Object.keys(s.F).map((o=>{s.F[o](e)}))},s.d=(e,o)=>{for(var t in o)s.o(o,t)&&!s.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((o,t)=>(s.f[t](e,o),o)),[])),s.u=e=>(({17:"descope-date-picker-index-js",142:"descope-number-field-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",841:"descope-passcode-descope-passcode-internal-index-js",934:"descope-text-field-index-js",939:"descope-passcode-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},t="DescopeUI:",s.l=(e,r,n,i)=>{if(o[e])o[e].push(r);else{var d,c;if(void 0!==n)for(var p=document.getElementsByTagName("script"),a=0;a<p.length;a++){var l=p[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==t+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,s.nc&&d.setAttribute("nonce",s.nc),d.setAttribute("data-webpack",t+n),d.src=e),o[e]=[r];var u=(t,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=o[e];if(delete o[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),t)return t(r)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=u.bind(null,d.onerror),d.onload=u.bind(null,d.onload),c&&document.head.appendChild(d)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;s.g.importScripts&&(e=s.g.location+"");var o=s.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var t=o.getElementsByTagName("script");t.length&&(e=t[t.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),s.p=e})(),(()=>{var e={826:0};s.f.j=(o,t)=>{var r=s.o(e,o)?e[o]:void 0;if(0!==r)if(r)t.push(r[2]);else{var n=new Promise(((t,n)=>r=e[o]=[t,n]));t.push(r[2]=n);var i=s.p+s.u(o),d=new Error;s.l(i,(t=>{if(s.o(e,o)&&(0!==(r=e[o])&&(e[o]=void 0),r)){var n=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;d.message="Loading chunk "+o+" failed.\n("+n+": "+i+")",d.name="ChunkLoadError",d.type=n,d.request=i,r[1](d)}}),"chunk-"+o,o)}},s.F.j=o=>{if(!s.o(e,o)||void 0===e[o]){e[o]=null;var t=document.createElement("link");s.nc&&t.setAttribute("nonce",s.nc),t.rel="prefetch",t.as="script",t.href=s.p+s.u(o),document.head.appendChild(t)}},s.O.j=o=>0===e[o];var o=(o,t)=>{var r,n,[i,d,c]=t,p=0;if(i.some((o=>0!==e[o]))){for(r in d)s.o(d,r)&&(s.m[r]=d[r]);if(c)var a=c(s)}for(o&&o(t);p<i.length;p++)n=i[p],s.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return s.O(a)},t=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))})(),s.O(0,[826],(()=>{[840,767,211,513,729,433,662,786,208,515,761,233,422,725,789,447,934,247,317,54,17,437,760,984,806,142,841,939,56,320,739,101,322,528].map(s.E)}),5);var i=s(7507);return s.O(i)})()));

package/package.json

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

package/src/components/descope-container/Container.js

@@ -40,7 +40,7 @@ const Container = compose(
 				{ property: 'padding-right' }
 			],
 
-			display: {},
+			display: {}, // maybe this should be hardcoded to flex
 			flexDirection: {},
 			justifyContent: {},
 			alignItems: {},

package/src/components/descope-passcode/Passcode.js

@@ -0,0 +1,141 @@
+import {
+  getComponentName,
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  inputMixin,
+  compose,
+  componentNameValidationMixin
+} from '../../componentsHelpers';
+import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
+import textFieldMappings from '../descope-text-field/textFieldMappings';
+export const componentName = getComponentName('passcode');
+import TextField from '../descope-text-field/TextField'
+import { componentName as descopeInternalComponentName } from './descope-passcode-internal/PasscodeInternal'
+
+const customMixin = (superclass) =>
+  class DraggableMixinClass extends superclass {
+    constructor() {
+      super();
+    }
+
+    get digits() {
+      return Number.parseInt(this.getAttribute('digits')) || 6
+    }
+
+    connectedCallback() {
+      super.connectedCallback?.();
+      const template = document.createElement('template');
+
+      //forward required & pattern TODO use forwardAttrs
+      template.innerHTML = `
+      <${descopeInternalComponentName} 
+        bordered="true" 
+        name="code" 
+        tabindex="0"
+        slot="input"
+        required="${this.shadowRoot.host.getAttribute('required')}"
+        pattern="${this.shadowRoot.host.getAttribute('pattern')}"
+      ></${descopeInternalComponentName}>
+      `
+
+      // we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
+      const slotEle = Object.assign(document.createElement('slot'), { name: 'input', slot: 'input', part: 'input' })
+      this.proxyElement.appendChild(slotEle)
+
+      // we want to control when the element is out of focus 
+      // so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
+      this.proxyElement._setFocused = () => { }
+
+      this.shadowRoot.host.appendChild(template.content.cloneNode(true))
+      this.inputElement = this.querySelector(descopeInternalComponentName)
+
+      // we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
+      this.inputElement.addEventListener('blur', () => {
+        this.proxyElement.validate()
+      })
+    }
+  }
+
+const { borderStyle, borderWidth, ...restTextFieldMappings } = textFieldMappings;
+
+const Passcode = compose(
+  createStyleMixin({
+    mappings: {
+      ...restTextFieldMappings,
+    },
+    nestedMappings: {
+      borderColor: {
+        selector: ` ${TextField.componentName}`,
+        property: TextField.cssVarList.borderColor
+      }
+    }
+  }),
+  draggableMixin,
+  inputMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+    :host {
+      --vaadin-field-default-width: auto;
+    }
+
+    ::slotted([slot='input']) {
+      -webkit-mask-image: none;
+      display: flex;
+      gap: 2px;
+      align-items: center;
+      padding: 0;
+    }
+
+    vaadin-text-field::part(input-field) {
+      background-color: transparent;
+      padding: 0;
+    }
+
+    ${overrides}
+    `,
+    excludeAttrsSync: ['tabindex'],
+    componentName
+  })
+);
+
+const overrides = `
+	:host {
+		display: inline-block;
+	}
+
+	vaadin-text-field {
+		margin: 0;
+		padding: 0;
+	}
+	vaadin-text-field::part(input-field) {
+		overflow: hidden;
+	}
+	vaadin-text-field[readonly] > input:placeholder-shown {
+		opacity: 1;
+	}
+
+	vaadin-text-field > label,
+	vaadin-text-field::part(input-field) {
+		cursor: pointer;
+		color: var(${Passcode.cssVarList.color});
+	}
+	vaadin-text-field::part(input-field):focus {
+		cursor: text;
+	}
+	vaadin-text-field[required]::part(required-indicator)::after {
+		font-size: "12px";
+		content: "*";
+		color: var(${Passcode.cssVarList.color});
+	}
+	vaadin-text-field[readonly]::part(input-field)::after {
+		border: 0 solid;
+	}
+`;
+
+export default Passcode;

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

@@ -0,0 +1,213 @@
+import { getComponentName } from '../../../componentsHelpers';
+import { getSanitizedCharacters, focusElement } from './helpers';
+
+export const componentName = getComponentName('passcode-internal');
+
+class PasscodeInternal extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			'disabled',
+			'bordered',
+			'size'
+		];
+	}
+
+	static get componentName() {
+		return componentName;
+	}
+
+	static get formAssociated() {
+		return true;
+	}
+
+	#internals
+
+	constructor() {
+		super();
+		const template = document.createElement('template');
+
+		const inputs = [...Array(this.digits).keys()].map((idx) => `
+		<descope-text-field
+			st-width="35px"
+			data-id=${idx}
+			type="tel"
+			autocomplete="none"
+		></descope-text-field>
+	`)
+
+		template.innerHTML = `
+		<div>
+			${inputs.join('')}
+		</div>
+		`;
+
+		this.appendChild(template.content.cloneNode(true));
+
+		this.baseSelector = ':host > div';
+
+		this.#internals = this.attachInternals();
+
+		this.inputs = Array.from(this.querySelectorAll('descope-text-field'))
+	}
+
+	checkValidity() {
+		// we need to toggle the has-error-message so the text inside the digits will become red when there is an error
+		if (this.#internals.validity.valid) {
+			this.inputs.forEach(input => input.removeAttribute('has-error-message'))
+		} else {
+			this.inputs.forEach(input => input.setAttribute('has-error-message', 'true'))
+			// we need to call it so the has-error-message with have the correct format (="true")
+			this.oninvalid?.()
+		}
+		return this.#internals.validity.valid
+	}
+
+	get digits() {
+		return Number.parseInt(this.getAttribute('digits')) || 6
+	}
+
+	get value() {
+		return this.inputs.map(({ value }) => value).join('')
+	}
+
+	set value(val) { }
+
+	get isRequired() {
+		return this.hasAttribute('required') && this.getAttribute('required') !== 'false'
+	}
+
+	get pattern() {
+		return `^$|^\\d{${this.digits},}$`
+	}
+
+	get valueMissingErrMsg() {
+		return 'Please fill out this field.'
+	}
+
+	get patternMismatchErrMsg() {
+		return `Must be a ${this.digits} digits number.`
+	}
+
+	get validity() {
+		return this.#internals.validity;
+	}
+
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+
+	reportValidity() {
+		this.#internals.reportValidity()
+	}
+
+	formAssociatedCallback() {
+		this.setValidity?.();
+	}
+
+	setValidity = () => {
+		if (this.isRequired && !this.value) {
+			this.#internals.setValidity({ valueMissing: true }, this.valueMissingErrMsg);
+		}
+		else if (this.pattern && !new RegExp(this.pattern).test(this.value)) {
+			this.#internals.setValidity({ patternMismatch: true }, this.patternMismatchErrMsg);
+		}
+		else {
+			this.#internals.setValidity({})
+		}
+	};
+
+	async connectedCallback() {
+		this.setValidity();
+		this.initInputs()
+
+		this.onfocus = () => {
+			this.inputs[0].focus();
+		}
+	}
+
+	getInputIdx(inputEle) {
+		return Number.parseInt(inputEle.getAttribute('data-id'), 10)
+	}
+
+	getNextInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput)
+		const newIdx = Math.min(currentIdx + 1, this.inputs.length - 1)
+		return this.inputs[newIdx]
+	}
+
+	getPrevInput(currInput) {
+		const currentIdx = this.getInputIdx(currInput)
+		const newIdx = Math.max(currentIdx - 1, 0)
+		return this.inputs[newIdx]
+	}
+
+	fillDigits(charArr, currentInput) {
+		for (let i = 0; i < charArr.length; i += 1) {
+			currentInput.value = charArr[i] ?? '';
+
+			const nextInput = this.getNextInput(currentInput);
+			if (nextInput === currentInput) break;
+			currentInput = nextInput;
+		}
+
+		!currentInput.hasAttribute('focused') && focusElement(currentInput);
+	};
+
+	initInputs() {
+		this.inputs.forEach((input) => {
+
+			// in order to simulate blur on the input
+			// we are checking if focus on one of the digits happened immediately after blur on another digit
+			// if not, the component is no longer focused and we should simulate blur
+			input.addEventListener('blur', () => {
+				const timerId = setTimeout(() => {
+					this.dispatchEvent(new Event('blur'))
+				});
+
+				this.inputs.forEach((ele) =>
+					ele.addEventListener('focus', () => clearTimeout(timerId), { once: true })
+				);
+			})
+
+			input.oninput = (e) => {
+				const charArr = getSanitizedCharacters(input.value);
+
+				if (!charArr.length) input.value = ''; // if we got an invalid value we want to clear the input
+				else this.fillDigits(charArr, input);
+
+				this.setValidity();
+			};
+
+			input.onkeydown = ({ key }) => {
+				if (key === 'Backspace') {
+					input.value = '';
+
+					// if the user deleted the digit we want to focus the previous digit
+					const prevInput = this.getPrevInput(input)
+
+					!prevInput.hasAttribute('focused') && setTimeout(() => {
+						focusElement(prevInput);
+					});
+				} else if (key.match(/^(\d)$/g)) { // if input is a digit
+					input.value = ''; // we are clearing the previous value so we can override it with the new value
+				}
+
+				this.setValidity()
+			};
+		})
+	}
+
+	attributeChangedCallback(
+		attrName,
+		oldValue,
+		newValue
+	) {
+		if (oldValue !== newValue &&
+			PasscodeInternal.observedAttributes.includes(attrName)) {
+			this.inputs.forEach((input) => input.setAttribute(attrName, newValue))
+		}
+	}
+}
+
+export default PasscodeInternal;
+

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

@@ -0,0 +1,14 @@
+
+export const focusElement = (ele) => {
+	ele?.focus();
+	ele?.setSelectionRange(1, 1);
+};
+
+export const getSanitizedCharacters = (str) => {
+	const pin = str.replace(/\s/g, ''); // sanitize string
+
+	// accept only numbers
+	if (!pin.match(/^\d+$/)) return [];
+
+	return [...pin]; // creating array of chars
+};

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

@@ -0,0 +1,3 @@
+import PasscodeInternal, { componentName } from "./PasscodeInternal"
+
+customElements.define(componentName, PasscodeInternal)

package/src/components/descope-passcode/index.js

@@ -0,0 +1,5 @@
+import Passcode, { componentName } from './Passcode';
+import '../descope-text-field'
+import './descope-passcode-internal'
+
+customElements.define(componentName, Passcode);

package/src/componentsHelpers/createProxy/index.js

@@ -35,9 +35,9 @@ export const createProxy = ({
 				this.setAttribute('tabindex', '0');
 
 				// we want to focus on the proxy element when focusing our WC
-				this.onfocus = (e) => {
+				this.addEventListener('focus', () => {
 					this.proxyElement.focus();
-				};
+				})
 
 				// `onkeydown` is set on `proxyElement` support proper tab-index navigation
 				// this support is needed since both proxy host and element catch `focus`/`blur` event
@@ -63,8 +63,7 @@ export const createProxy = ({
 				this.proxyElement.addEventListener('mouseover', this.mouseoverCbRef);
 
 				// sync events
-				this.addEventListener = this.proxyElement.addEventListener;
-
+				this.addEventListener = (...args) => this.proxyElement.addEventListener(...args)
 				syncAttrs(this.proxyElement, this.hostElement, excludeAttrsSync);
 			}
 		}