import{r as i,h as t,F as o,a as e}from"./p-9add63ef.js";const c="sc-verification-code{--focus-ring:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);display:block}sc-verification-code .sc-verification-code{display:flex;align-items:center;gap:var(--sc-spacing-small);margin-top:var(--sc-spacing-medium);margin-bottom:var(--sc-spacing-medium)}sc-verification-code .sc-verification-code input{flex:1;min-width:0;height:var(--sc-input-height, 48px);max-width:64px;box-sizing:border-box;font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);letter-spacing:var(--sc-input-letter-spacing);background-color:var(--sc-input-background-color);border:1px solid var(--sc-input-border-color, var(--sc-input-border));border-radius:var(--sc-input-border-radius-medium);box-shadow:var(--sc-input-box-shadow);font-size:var(--sc-input-font-size-large);transition:var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;cursor:text;text-align:center}sc-verification-code .sc-verification-code input:-webkit-autofill,sc-verification-code .sc-verification-code input:-webkit-autofill:hover,sc-verification-code .sc-verification-code input:-webkit-autofill:focus,sc-verification-code .sc-verification-code input:-webkit-autofill:active{box-shadow:0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--sc-input-color)}sc-verification-code .sc-verification-code input::placeholder{color:var(--sc-input-placeholder-color);user-select:none}sc-verification-code .sc-verification-code input:focus{outline:none;background-color:var(--sc-input-background-color-focus);border-color:var(--sc-input-border-color-focus);box-shadow:var(--focus-ring);color:var(--sc-input-color-focus);z-index:8}sc-verification-code .sc-verification-code .sc-verification-code__separator{color:var(--sc-input-help-text-color);font-size:var(--sc-font-size-large);user-select:none;display:flex;align-items:center}sc-verification-code .sc-verification-code .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";const s=c;const r=class{constructor(t){i(this,t);this.filledAllInputs=()=>this.codes.join("").trim().length===this.total;this.total=6;this.codes=Array(this.total).fill("");this.loading=false;this.onChange=undefined}handleKeyDown(i,t){if(i.key==="Backspace"||i.key==="Delete"){i.preventDefault();this.getElementByIndex(t).value="";this.codes=[...this.codes.slice(0,t),"",...this.codes.slice(t+1)];if(t>0){this.focusInput(t-1)}}}handleInput(i,t){const o=i.target;let e=o.value;if(e.length>1){const i=[...this.codes];for(let o=0;o<this.total-t&&o<e.length;o++){const c=this.getElementByIndex(t+o);c.blur();c.value=e[o];i[t+o]=e[o]}this.codes=i;t=t+e.length-1;e=e[e.length-1]}if(t<this.codes.length){this.codes=[...this.codes.slice(0,t),e,...this.codes.slice(t+1)]}if(t<this.codes.length-1&&e.length>0){this.focusInput(t+1)}if(t===this.codes.length-1&&e.length>0){this.getElementByIndex(t).blur()}if(this.filledAllInputs()){this.handleCodeChange()}}handleCodeChange(){const i=(this.codes.join("")||"").trim();if(i.length===this.total){this.onChange(i)}}focusInput(i){const t=this.getElementByIndex(i);if(t){t.focus();t.select()}}async triggerFocus(){this.focusInput(0)}getElementByIndex(i){return this.el.querySelector(`#code-input-${i}`)}handleFocus(i){const t=i.target;t.select()}reset(){var i;this.codes=Array(this.total).fill("");(i=this.getElementByIndex(0))===null||i===void 0?void 0:i.focus()}render(){return t("div",{key:"74f453ffcdab58d6a165ec948e152989740fc124",class:"sc-verification-code"},Array.from({length:this.total}).map(((i,e)=>t(o,null,e===Math.floor(this.total/2)&&t("span",{class:"sc-verification-code__separator","aria-hidden":"true"},"—"),t("input",{key:e,id:`code-input-${e}`,value:!!this.codes[e]?this.codes[e]:"",onInput:i=>this.handleInput(i,e),onKeyDown:i=>this.handleKeyDown(i,e),onFocus:i=>this.handleFocus(i),autocomplete:"one-time-code",inputmode:"numeric",pattern:"[0-9]*",autofocus:e===0,required:true,"aria-label":wp.i18n.__(`Verification code ${e+1} of ${this.total}`,"surecart")})))),t("button",{key:"e2ed6ab2f8febea2c529c8bec1744adb377a4b11",type:"submit",class:"visually-hidden",onClick:()=>this.onChange(this.codes.join(""))},wp.i18n.__("Submit","surecart")))}get el(){return e(this)}};r.style=s;export{r as sc_verification_code};
//# sourceMappingURL=p-1e7fe429.entry.js.map