"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[3359],{3393(t,e,i){i.d(e,{y:()=>a});var n=i(9696),s=i(79365),r=i(81365);const a=(...t)=>(0,n.Zz)(s.XX,s._$,s.yF,s.jd)((0,r.q)(...t))},47168(t,e,i){i.d(e,{A:()=>h,T:()=>p});var n=i(68049),s=i.n(n),r=i(3393),a=i(97810),u=i(18280),l=i(25964);const p=(0,a.xE)("passcode-internal"),d=["digits","loading"],o=["disabled","bordered","size","invalid","readonly","aria-labelledby"],c=(0,r.y)({componentName:p,baseSelector:"div"}),h=class extends c{static get observedAttributes(){return d.concat(c.observedAttributes||[])}constructor(){super(),this.innerHTML='\n\t\t<div class="wrapper"></div>\n\t\t<div class="loader-container">\n      <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>\n    </div>\n\t\t',this.wrapperEle=this.querySelector(".wrapper"),this.loaderContainer=this.querySelector(".loader-container")}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()}handleLoadingState(t){t?this.setAttribute("inert","true"):this.removeAttribute("inert")}get digits(){return Number.parseInt(this.getAttribute("digits"),10)||6}get value(){return this.inputs?.map(({value:t})=>t).join("")||""}set value(t){t!==this.value&&this.parseInputValue(this.inputs[0],(0,u.zj)(t))}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),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 n=this.getNextInput(e);if(n===e)break;e=n}(0,u.pW)(e)}parseInputValue(t,e=""){const i=e.split("");i.length?this.fillDigits(i,t):t.value=""}initInputs(){this.inputs.forEach(t=>{(0,l.fz)(`\n        vaadin-text-field::part(input-field)::before {\n          ${u.vz}: '';\n          content: var(${u._B}, var(${u.vz}));\n          position: absolute;\n          width: 100%;\n          height: 100%;\n          display: var(${u.n6}, none);\n          align-items: center;\n          justify-content: center;\n        }`,t);const e=s()(e=>{this.parseInputValue(t,e),(0,u.Z)(t)},0,{trailing:!0});t.addEventListener("input",i=>{t.value=(0,u.zj)(t.value),t.value&&(0,u.Z)(t,t.value[0]),setTimeout(()=>{"deleteContentBackward"===i?.inputType&&(0,u.pW)(this.getPrevInput(t))}),e(t.value)}),t.onkeydown=({key:e})=>{"Backspace"===e?t.value?t.setSelectionRange(1,1):setTimeout(()=>(0,u.pW)(this.getPrevInput(t)),0):1===e.length&&(t.value="")},(0,a.EA)(this,t,{includeAttrs:o}),t.shadowRoot.querySelector("input").setAttribute("aria-label","passcode digit")}),this.handleFocusEventsDispatching(this.inputs),this.handleInputEventDispatching()}attributeChangedCallback(t,e,i){super.attributeChangedCallback?.(t,e,i),e!==i&&d.includes(t)&&("digits"===t&&this.renderInputs(),"loading"===t&&this.handleLoadingState("true"===i))}get pattern(){return`^$|^\\d{${this.digits},}$`}}},18280(t,e,i){i.d(e,{Z:()=>l,_B:()=>n,n6:()=>s,pW:()=>a,vz:()=>r,zj:()=>u});const n="--descope-input-mask-content",s="--descope-input-mask-display",r="--descope-input-mask-fallback",a=t=>{t?.focus(),t?.setSelectionRange?.(1,1)},u=t=>t.replace(/\D/g,"")||"",l=(t,e)=>{e?(t.style.setProperty(n,`"${e}"`),t.style.setProperty(s,"flex")):(t.style.removeProperty(n),t.style.removeProperty(s))}},59053(t,e,i){i.r(e);var n=i(47168);customElements.define(n.T,n.A)}}]);
//# sourceMappingURL=descope-passcode-descope-passcode-internal-index-js.js.map