preline/dist/pin-input.mjs

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

var t={615:(t,e,i)=>{i.d(e,{A:()=>s});class s{constructor(t,e,i){this.el=t,this.options=e,this.events=i,this.el=t,this.options=e,this.events={}}createCollection(t,e){var i;t.push({id:(null===(i=null==e?void 0:e.el)||void 0===i?void 0:i.id)||t.length+1,element:e})}fireEvent(t,e=null){if(this.events.hasOwnProperty(t))return this.events[t](e)}on(t,e){this.events[t]=e}}},926:(t,e,i)=>{i.d(e,{JD:()=>s});const s=(t,e,i=null)=>{const s=new CustomEvent(t,{detail:{payload:i},bubbles:!0,cancelable:!0,composed:!1});e.dispatchEvent(s)}}},e={};function i(s){var n=e[s];if(void 0!==n)return n.exports;var l=e[s]={exports:{}};return t[s](l,l.exports,i),l.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var s={};i.d(s,{A:()=>r});var n=i(926),l=i(615);
/*
 * HSPinInput
 * @version: 2.5.0
 * @author: Preline Labs Ltd.
 * @license: Licensed under MIT and Preline UI Fair Use License (https://preline.co/docs/license.html)
 * Copyright 2024 Preline Labs Ltd.
 */
class o extends l.A{constructor(t,e){super(t,e);const i=t.getAttribute("data-hs-pin-input"),s=i?JSON.parse(i):{},n=Object.assign(Object.assign({},s),e);this.items=this.el.querySelectorAll("[data-hs-pin-input-item]"),this.currentItem=null,this.currentValue=new Array(this.items.length).fill(""),this.placeholders=[],this.availableCharsRE=new RegExp((null==n?void 0:n.availableCharsRE)||"^[a-zA-Z0-9]+$"),this.init()}init(){this.createCollection(window.$hsPinInputCollection,this),this.items.length&&this.build()}build(){this.buildInputItems()}buildInputItems(){this.items.forEach(((t,e)=>{this.placeholders.push(t.getAttribute("placeholder")||""),t.hasAttribute("autofocus")&&this.onFocusIn(e),t.addEventListener("input",(t=>this.onInput(t,e))),t.addEventListener("paste",(t=>this.onPaste(t))),t.addEventListener("keydown",(t=>this.onKeydown(t,e))),t.addEventListener("focusin",(()=>this.onFocusIn(e))),t.addEventListener("focusout",(()=>this.onFocusOut(e)))}))}checkIfNumber(t){return t.match(this.availableCharsRE)}autoFillAll(t){Array.from(t).forEach(((t,e)=>{if(!(null==this?void 0:this.items[e]))return!1;this.items[e].value=t,this.items[e].dispatchEvent(new Event("input",{bubbles:!0}))}))}setCurrentValue(){this.currentValue=Array.from(this.items).map((t=>t.value))}toggleCompleted(){this.currentValue.includes("")?this.el.classList.remove("active"):this.el.classList.add("active")}onInput(t,e){const i=t.target.value;if(this.currentItem=t.target,this.currentItem.value="",this.currentItem.value=i[i.length-1],!this.checkIfNumber(this.currentItem.value))return this.currentItem.value=this.currentValue[e]||"",!1;if(this.setCurrentValue(),this.currentItem.value){if(e<this.items.length-1&&this.items[e+1].focus(),!this.currentValue.includes("")){const t={currentValue:this.currentValue};this.fireEvent("completed",t),(0,n.JD)("completed.hs.pinInput",this.el,t)}this.toggleCompleted()}else e>0&&this.items[e-1].focus()}onKeydown(t,e){"Backspace"===t.key&&e>0&&(""===this.items[e].value?(this.items[e-1].value="",this.items[e-1].focus()):this.items[e].value=""),this.setCurrentValue(),this.toggleCompleted()}onFocusIn(t){this.items[t].setAttribute("placeholder","")}onFocusOut(t){this.items[t].setAttribute("placeholder",this.placeholders[t])}onPaste(t){t.preventDefault(),this.items.forEach((e=>{document.activeElement===e&&this.autoFillAll(t.clipboardData.getData("text"))}))}static getInstance(t,e){const i=window.$hsPinInputCollection.find((e=>e.element.el===("string"==typeof t?document.querySelector(t):t)));return i?e?i:i.element:null}static autoInit(){window.$hsPinInputCollection||(window.$hsPinInputCollection=[]),document.querySelectorAll("[data-hs-pin-input]:not(.--prevent-on-load-init)").forEach((t=>{window.$hsPinInputCollection.find((e=>{var i;return(null===(i=null==e?void 0:e.element)||void 0===i?void 0:i.el)===t}))||new o(t)}))}}window.addEventListener("load",(()=>{o.autoInit()})),"undefined"!=typeof window&&(window.HSPinInput=o);const r=o;var u=s.A;export{u as default};