@descope/web-components-ui 1.0.164 → 1.0.165
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1 +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)}}]);
|
|
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)}}]);
|
package/package.json
CHANGED