diff --git a/index.html b/index.html index 415c914..090cdc9 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ - svelte-pincode \ No newline at end of file + svelte-pincode \ No newline at end of file diff --git a/s.cb50c81e.js b/s.cb50c81e.js new file mode 100644 index 0000000..08d764b --- /dev/null +++ b/s.cb50c81e.js @@ -0,0 +1 @@ +var app=function(){"use strict";function n(){}function s(n,s){for(const a in s)n[a]=s[a];return n}function a(n){return n()}function t(){return Object.create(null)}function e(n){n.forEach(a)}function p(n){return"function"==typeof n}function o(n,s){return n!=n?s==s:n!==s}function c(s,...a){if(null==s)return n;const t=s.subscribe(...a);return t.unsubscribe?()=>t.unsubscribe():t}function l(n,a,t,e){return n[1]&&e?s(t.ctx.slice(),n[1](e(a))):t.ctx}function u(n){const s={};for(const a in n)"$"!==a[0]&&(s[a]=n[a]);return s}function i(n,s){const a={};s=new Set(s);for(const t in n)s.has(t)||"$"===t[0]||(a[t]=n[t]);return a}function r(n,s){n.appendChild(s)}function k(n,s,a){const t=function(n){if(!n)return document;const s=n.getRootNode?n.getRootNode():n.ownerDocument;if(s&&s.host)return s;return n.ownerDocument}(n);if(!t.getElementById(s)){const n=f("style");n.id=s,n.textContent=a,function(n,s){r(n.head||n,s),s.sheet}(t,n)}}function d(n,s,a){n.insertBefore(s,a||null)}function g(n){n.parentNode&&n.parentNode.removeChild(n)}function f(n){return document.createElement(n)}function m(n){return document.createTextNode(n)}function $(){return m(" ")}function h(n,s,a,t){return n.addEventListener(s,a,t),()=>n.removeEventListener(s,a,t)}function v(n,s,a){null==a?n.removeAttribute(s):n.getAttribute(s)!==a&&n.setAttribute(s,a)}const y=["width","height"];function x(n,s){const a=Object.getOwnPropertyDescriptors(n.__proto__);for(const t in s)null==s[t]?n.removeAttribute(t):"style"===t?n.style.cssText=s[t]:"__value"===t?n.value=n[t]=s[t]:a[t]&&a[t].set&&-1===y.indexOf(t)?n[t]=s[t]:v(n,t,s[t])}function b(n,s){s=""+s,n.data!==s&&(n.data=s)}function w(n,s,a){n.classList[a?"add":"remove"](s)}let P;function I(n){P=n}function T(){if(!P)throw new Error("Function called outside component initialization");return P}function C(){const n=T();return(s,a,{cancelable:t=!1}={})=>{const e=n.$$.callbacks[s];if(e){const p=function(n,s,{bubbles:a=!1,cancelable:t=!1}={}){const e=document.createEvent("CustomEvent");return e.initCustomEvent(n,a,t,s),e}(s,a,{cancelable:t});return e.slice().forEach((s=>{s.call(n,p)})),!p.defaultPrevented}return!0}}function L(n,s){const a=n.$$.callbacks[s.type];a&&a.slice().forEach((n=>n.call(this,s)))}const M=[],j=[];let H=[];const O=[],N=Promise.resolve();let E=!1;function S(n){H.push(n)}function _(n){O.push(n)}const F=new Set;let A=0;function q(){if(0!==A)return;const n=P;do{try{for(;A{z.delete(n),t&&(a&&n.d(1),t())})),n.o(s)}else t&&t()}function V(n,s){const a={},t={},e={$$scope:1};let p=n.length;for(;p--;){const o=n[p],c=s[p];if(c){for(const n in o)n in c||(t[n]=1);for(const n in c)e[n]||(a[n]=c[n],e[n]=1);n[p]=c}else for(const n in o)e[n]=1}for(const n in t)n in a||(a[n]=void 0);return a}function U(n,s,a){const t=n.$$.props[s];void 0!==t&&(n.$$.bound[t]=a,a(n.$$.ctx[t]))}function G(n){n&&n.c()}function Z(n,s,t,o){const{fragment:c,after_update:l}=n.$$;c&&c.m(s,t),o||S((()=>{const s=n.$$.on_mount.map(a).filter(p);n.$$.on_destroy?n.$$.on_destroy.push(...s):e(s),n.$$.on_mount=[]})),l.forEach(S)}function K(n,s){const a=n.$$;null!==a.fragment&&(!function(n){const s=[],a=[];H.forEach((t=>-1===n.indexOf(t)?s.push(t):a.push(t))),a.forEach((n=>n())),H=s}(a.after_update),e(a.on_destroy),a.fragment&&a.fragment.d(s),a.on_destroy=a.fragment=null,a.ctx=[])}function Y(n,s){-1===n.$$.dirty[0]&&(M.push(n),E||(E=!0,N.then(q)),n.$$.dirty.fill(0)),n.$$.dirty[s/31|0]|=1<{const e=t.length?t[0]:a;return k.ctx&&c(k.ctx[n],k.ctx[n]=e)&&(!k.skip_bound&&k.bound[n]&&k.bound[n](e),d&&Y(s,n)),a})):[],k.update(),d=!0,e(k.before_update),k.fragment=!!o&&o(k.ctx),a.target){if(a.hydrate){const n=function(n){return Array.from(n.childNodes)}(a.target);k.fragment&&k.fragment.l(n),n.forEach(g)}else k.fragment&&k.fragment.c();a.intro&&J(s.$$.fragment),Z(s,a.target,a.anchor,a.customElement),q()}I(r)}class W{$destroy(){K(this,1),this.$destroy=n}$on(s,a){if(!p(a))return n;const t=this.$$.callbacks[s]||(this.$$.callbacks[s]=[]);return t.push(a),()=>{const n=t.indexOf(a);-1!==n&&t.splice(n,1)}}$set(n){var s;this.$$set&&(s=n,0!==Object.keys(s).length)&&(this.$$.skip_bound=!0,this.$$set(n),this.$$.skip_bound=!1)}}const X=[];function nn(s,a=n){let t;const e=new Set;function p(n){if(p=n,((a=s)!=a?p==p:a!==p||a&&"object"==typeof a||"function"==typeof a)&&(s=n,t)){const n=!X.length;for(const n of e)n[1](),X.push(n,s);if(n){for(let n=0;n{e.delete(l),0===e.size&&t&&(t(),t=null)}}}}function sn(s,a,t){const o=!Array.isArray(s),l=o?[s]:s,u=a.length<2;return i=s=>{let t=!1;const i=[];let r=0,k=n;const d=()=>{if(r)return;k();const t=a(o?i[0]:i,s);u?s(t):k=p(t)?t:n},g=l.map(((n,s)=>c(n,(n=>{i[s]=n,r&=~(1<{r|=1<32){const s=[],a=n.ctx.length/32;for(let n=0;nt(14,p=n),n.$$.on_destroy.push(c(v,y));const x=sn(h,(n=>n.reduce(((n,s)=>({...n,[s.id]:s.value})),{}))),b=nn(g),w=nn(m);let P=null,I=d;function L(){t(5,k=p.map((n=>n.value||"")))}function M(n){const s=P.querySelectorAll("input")[n+1];s&&s.focus()}var H,O,N;return H="Pincode",O={_type:b,_selectTextOnFocus:w,_valuesById:x,focusNextInput:n=>{M(p.map((n=>n.id)).indexOf(n))},add:(n,s)=>{let a=[...k];h.update((t=>(void 0===k[t.length]?a[t.length]=s:a[t.length]=a[t.length]||s,[...t,{id:n,value:k[t.length]||s}]))),t(5,k=a)},remove:n=>{h.update((s=>s.filter((s=>s.id!==n)))),L()},update:async(n,s)=>{const a=p.map((n=>n.id)).indexOf(n);h.update((n=>n.map(((n,t)=>t===a?{...n,value:s}:n)))),L(),M(a)},clear:n=>{const s=p.map((n=>n.id)).indexOf(n);if(!p[s].value){const n=P.querySelectorAll("input")[s-1];n&&(n.focus(),n.select())}h.update((n=>n.map(((n,a)=>a===s?{...n,value:""}:n)))),L()}},T().$$.context.set(H,O),N=()=>{f&&$("complete",{code:k,value:d})},T().$$.after_update.push(N),n.$$set=n=>{a=s(s({},a),u(n)),t(4,o=i(a,e)),"code"in n&&t(5,k=n.code),"value"in n&&t(6,d=n.value),"type"in n&&t(8,g=n.type),"complete"in n&&t(7,f=n.complete),"selectTextOnFocus"in n&&t(9,m=n.selectTextOnFocus),"$$scope"in n&&t(15,r=n.$$scope)},n.$$.update=()=>{256&n.$$.dirty&&b.set(g),512&n.$$.dirty&&w.set(m),32&n.$$.dirty&&t(6,d=k.join("")),16416&n.$$.dirty&&t(7,f=k.filter(Boolean).length===p.length),32&n.$$.dirty&&k&&h.update((n=>n.map(((n,s)=>({...n,value:k[s]}))))),32&n.$$.dirty&&0===k.length&&h.update((n=>n.map((n=>({...n,value:""}))))),8256&n.$$.dirty&&(I!==d&&0===d.length&&$("clear"),t(13,I=d))},[P,h,function(n){let s=n.data||n.target.value;s&&(s=s.trim(),1!==s.length&&s.length===p.length&&t(5,k=s.split("")))},function(n){n.preventDefault(),t(5,k=n.clipboardData.getData("text").split("").filter((n=>" "!==n)))},o,k,d,f,g,m,()=>{P.querySelector("input").focus()},()=>{for(const n of P.querySelectorAll("input"))if(0===n.value.length){n.focus();break}},()=>{P.querySelector("input:last-of-type").focus()},I,p,r,l,function(n){j[n?"unshift":"push"]((()=>{P=n,t(0,P)}))}]}class pn extends W{constructor(n){super(),Q(this,n,en,tn,o,{code:5,value:6,type:8,complete:7,selectTextOnFocus:9,focusFirstInput:10,focusNextEmptyInput:11,focusLastInput:12},an)}get focusFirstInput(){return this.$$.ctx[10]}get focusNextEmptyInput(){return this.$$.ctx[11]}get focusLastInput(){return this.$$.ctx[12]}}function on(n){k(n,"svelte-1cexha","input.svelte-1cexha{width:3rem;padding:0.5rem 1rem;margin:0;border:0;border-radius:0;text-align:center}input.svelte-1cexha:focus{z-index:1}input.svelte-1cexha:not(:last-of-type){border-right:1px solid #e0e0e0}")}function cn(a){let t,p,o,c,l,u,i=[a[8],{type:p="numeric"===a[3]?"number":"text"},{inputmode:o="numeric"===a[3]?"numeric":"text"},{pattern:c="numeric"===a[3]?"[0-9]{1}":"^[a-zA-Z0-9]$"},{maxlength:"1"},{value:a[0]}],r={};for(let n=0;n{t(3,p=n)})),m=d._selectTextOnFocus.subscribe((n=>{t(4,o=n)})),$={CONTROL:"Control",COMMAND:"Meta",V:"v",TAB:"Tab",BACKSPACE:"Backspace"};let h,v=!1;var y;y=()=>(d.add(r,l),h=d._valuesById.subscribe((n=>{t(0,l=n[r]||"")})),()=>{d.remove(r),h(),f(),m()}),T().$$.on_mount.push(y);return n.$$set=n=>{a=s(s({},a),u(n)),t(8,c=i(a,e)),"value"in n&&t(0,l=n.value),"id"in n&&t(2,r=n.id),"ref"in n&&t(1,k=n.ref)},[l,k,r,p,o,v,d,$,c,function(s){L.call(this,n,s)},function(s){L.call(this,n,s)},function(s){L.call(this,n,s)},function(n){j[n?"unshift":"push"]((()=>{k=n,t(1,k)}))},()=>{o&&k.select()},n=>{if(n.key===$.BACKSPACE)return n.preventDefault(),d.clear(r);n.key!=$.CONTROL&&n.key!=$.COMMAND||t(5,v=!0),n.key==$.V&&v||n.key!==$.TAB&&(n.preventDefault(),"numeric"===p&&/^[0-9]$/.test(n.key)&&d.update(r,n.key),"alphanumeric"===p&&/^[a-zA-Z0-9]$/.test(n.key)&&d.update(r,n.key))},n=>{n.key!=$.CONTROL&&n.key!=$.COMMAND||t(5,v=!1)}]}class un extends W{constructor(n){super(),Q(this,n,ln,cn,o,{value:0,id:2,ref:1},on)}}function rn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function kn(n){let s,a,t,e,p,o,c,l,u;function i(s){n[14](s)}let r={value:"0"};return void 0!==n[5]&&(r.ref=n[5]),s=new un({props:r}),j.push((()=>U(s,"ref",i))),e=new un({}),o=new un({}),l=new un({}),{c(){G(s.$$.fragment),t=$(),G(e.$$.fragment),p=$(),G(o.$$.fragment),c=$(),G(l.$$.fragment)},m(n,a){Z(s,n,a),d(n,t,a),Z(e,n,a),d(n,p,a),Z(o,n,a),d(n,c,a),Z(l,n,a),u=!0},p(n,t){const e={};!a&&32&t&&(a=!0,e.ref=n[5],_((()=>a=!1))),s.$set(e)},i(n){u||(J(s.$$.fragment,n),J(e.$$.fragment,n),J(o.$$.fragment,n),J(l.$$.fragment,n),u=!0)},o(n){R(s.$$.fragment,n),R(e.$$.fragment,n),R(o.$$.fragment,n),R(l.$$.fragment,n),u=!1},d(n){K(s,n),n&&g(t),K(e,n),n&&g(p),K(o,n),n&&g(c),K(l,n)}}}function dn(n){let s,a,t,e,p,o,c,l,u;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment),l=$()},m(n,i){Z(s,n,i),d(n,a,i),Z(t,n,i),d(n,e,i),Z(p,n,i),d(n,o,i),Z(c,n,i),d(n,l,i),u=!0},i(n){u||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),u=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),u=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n),n&&g(l)}}}function gn(s){let a,t,e,p,o,c,l,u;return a=new un({}),e=new un({props:{value:"2"}}),o=new un({}),l=new un({}),{c(){G(a.$$.fragment),t=$(),G(e.$$.fragment),p=$(),G(o.$$.fragment),c=$(),G(l.$$.fragment)},m(n,s){Z(a,n,s),d(n,t,s),Z(e,n,s),d(n,p,s),Z(o,n,s),d(n,c,s),Z(l,n,s),u=!0},p:n,i(n){u||(J(a.$$.fragment,n),J(e.$$.fragment,n),J(o.$$.fragment,n),J(l.$$.fragment,n),u=!0)},o(n){R(a.$$.fragment,n),R(e.$$.fragment,n),R(o.$$.fragment,n),R(l.$$.fragment,n),u=!1},d(n){K(a,n),n&&g(t),K(e,n),n&&g(p),K(o,n),n&&g(c),K(l,n)}}}function fn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function mn(n){let s,a,t,e=Pn.length-n[0].length+"";return{c(){s=m("Enter "),a=m(e),t=m(" more digit(s)...")},m(n,e){d(n,s,e),d(n,a,e),d(n,t,e)},p(n,s){1&s&&e!==(e=Pn.length-n[0].length+"")&&b(a,e)},d(n){n&&g(s),n&&g(a),n&&g(t)}}}function $n(n){let s;return{c(){s=m("Correct code")},m(n,a){d(n,s,a)},d(n){n&&g(s)}}}function hn(n){let s;return{c(){s=m("Incorrect code")},m(n,a){d(n,s,a)},d(n){n&&g(s)}}}function vn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function yn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function xn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function bn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function wn(n){let s,a,t,o,c,l,u,i,k,y,x,P,I,T,C,L,M,H,O,N,E,S,F,A,q,D,z,B,V,Y,Q,W,X,nn,sn,an,tn,en,on,cn,ln,un,wn,Pn,In,Tn,Cn,Ln,Mn,jn,Hn,On,Nn,En,Sn,_n,Fn,An,qn,Dn,zn,Bn,Jn,Rn,Vn,Un,Gn,Zn,Kn,Yn,Qn,Wn,Xn,ns,ss,as,ts,es,ps,os,cs,ls,us,is,rs,ks,ds,gs,fs,ms,$s,hs,vs,ys,xs,bs,ws,Ps,Is,Ts,Cs,Ls,Ms,js,Hs,Os,Ns,Es,Ss,_s,Fs,As,qs,Ds,zs,Bs,Js,Rs,Vs,Us,Gs,Zs,Ks,Ys,Qs,Ws,Xs,na,sa,aa,ta,ea,pa,oa,ca,la,ua,ia,ra,ka,da,ga,fa,ma,$a,ha,va,ya,xa,ba,wa,Pa,Ia,Ta,Ca,La,Ma,ja,Ha,Oa,Na,Ea,Sa,_a,Fa,Aa,qa,Da,za,Ba,Ja,Ra,Va,Ua,Ga,Za,Ka,Ya,Qa,Wa,Xa,nt,st,at,tt,et,pt,ot,ct,lt,ut,it,rt,kt,dt,gt,ft,mt,$t,ht,vt,yt,xt,bt=JSON.stringify(n[3])+"",wt=JSON.stringify(n[4])+"",Pt=JSON.stringify(n[6])+"",It=JSON.stringify(n[7])+"";function Tt(s){n[12](s)}function Ct(s){n[13](s)}let Lt={$$slots:{default:[rn]},$$scope:{ctx:n}};function Mt(s){n[16](s)}void 0!==n[3]&&(Lt.code=n[3]),void 0!==n[4]&&(Lt.value=n[4]),W=new pn({props:Lt}),j.push((()=>U(W,"code",Tt))),j.push((()=>U(W,"value",Ct))),On=new pn({props:{selectTextOnFocus:!0,$$slots:{default:[kn]},$$scope:{ctx:n}}}),Rn=new pn({props:{type:"numeric",$$slots:{default:[dn]},$$scope:{ctx:n}}});let jt={$$slots:{default:[gn]},$$scope:{ctx:n}};function Ht(s){n[17](s)}function Ot(s){n[18](s)}void 0!==n[6]&&(jt.code=n[6]),Wn=new pn({props:jt}),j.push((()=>U(Wn,"code",Mt)));let Nt={$$slots:{default:[fn]},$$scope:{ctx:n}};void 0!==n[1]&&(Nt.complete=n[1]),void 0!==n[0]&&(Nt.value=n[0]),gs=new pn({props:Nt}),j.push((()=>U(gs,"complete",Ht))),j.push((()=>U(gs,"value",Ot)));let Et=!n[1]&&mn(n),St=n[2]&&$n(),_t=n[11]&&hn();function Ft(s){n[19](s)}let At={$$slots:{default:[vn]},$$scope:{ctx:n}};return void 0!==n[7]&&(At.code=n[7]),Ss=new pn({props:At}),j.push((()=>U(Ss,"code",Ft))),Xs=new pn({props:{$$slots:{default:[yn]},$$scope:{ctx:n}}}),n[22](Xs),ua=new pn({props:{code:["9","9"],$$slots:{default:[xn]},$$scope:{ctx:n}}}),n[23](ua),va=new pn({props:{$$slots:{default:[bn]},$$scope:{ctx:n}}}),n[24](va),{c(){s=f("main"),a=f("h1"),a.textContent="svelte-pincode",t=$(),o=f("p"),o.innerHTML='NPM',c=$(),l=f("blockquote"),l.innerHTML="

Declarative pin code component for Svelte.

",u=$(),i=f("p"),i.innerHTML='GitHub repo',k=$(),y=f("p"),y.textContent="A pin code is a short sequence of characters (usually numeric) used for verification. It differs from a password in that it is typically ephemeral and is not predetermined by the user.",x=$(),P=f("p"),P.innerHTML='Try it in the Svelte REPL.',I=$(),T=f("hr"),C=$(),L=f("p"),L.innerHTML="Table of Contents",M=f("ul"),M.innerHTML='
  • Installation
    • \n
  • Usage
    • \n
  • Styling
    • \n
  • API
    • \n
  • Changelog
    • \n
  • License
    • ',H=$(),O=f("h2"),O.textContent="Installation",N=$(),E=f("pre"),S=$(),F=f("h2"),F.textContent="Usage",A=$(),q=f("h3"),q.textContent="Basic",D=$(),z=f("p"),z.innerHTML="Bind to either the code or value prop.",B=$(),V=f("ul"),V.innerHTML="
  • code (string[]): Array of input values. An empty string represents an undefined value.
    • \n
  • value (string): code joined as a string.
    • ",Y=$(),Q=f("div"),G(W.$$.fragment),sn=$(),an=f("div"),tn=m("code: "),en=f("code"),on=m(bt),cn=$(),ln=f("div"),un=m("value: "),wn=f("code"),Pn=m(wt),In=f("pre"),Tn=$(),Cn=f("h3"),Cn.textContent="Select text on focus",Ln=$(),Mn=f("p"),Mn.innerHTML="Set selectTextOnFocus to true for the input value text to be selected when focused.",jn=$(),Hn=f("div"),G(On.$$.fragment),Nn=$(),En=f("button"),En.textContent="Focus input\n",Sn=f("pre"),_n=$(),Fn=f("h3"),Fn.textContent="Numeric variant",An=$(),qn=f("p"),qn.textContent="By default, this component accepts alphanumeric values.",Dn=$(),zn=f("p"),zn.innerHTML="Set type to "numeric" to only allow numbers.",Bn=$(),Jn=f("div"),G(Rn.$$.fragment),Vn=f("pre"),Un=$(),Gn=f("h3"),Gn.textContent="Initial values",Zn=$(),Kn=f("p"),Kn.innerHTML="Define intitial input values by using the code prop or value prop on PincodeInput.",Yn=$(),Qn=f("div"),G(Wn.$$.fragment),ns=$(),ss=f("div"),as=m("code: "),ts=f("code"),es=m(Pt),ps=f("pre"),os=$(),cs=f("h3"),cs.textContent="Validating upon completion",ls=$(),us=f("p"),us.textContent="Actual validation is left to the consumer.",is=$(),rs=f("p"),rs.innerHTML="This example illustrates how you can validate the code once all inputs have a value by binding to the complete prop.",ks=$(),ds=f("div"),G(gs.$$.fragment),$s=$(),hs=f("div"),Et&&Et.c(),vs=$(),St&&St.c(),ys=$(),_t&&_t.c(),xs=$(),bs=f("pre"),ws=$(),Ps=f("p"),Ps.innerHTML="Use the dispatched “complete” event as an alternative to binding the complete prop.",Is=$(),Ts=f("pre"),Cs=$(),Ls=f("h3"),Ls.textContent="Programmatic usage",Ms=$(),js=f("p"),js.innerHTML="code can be set programmatically.",Hs=$(),Os=f("p"),Os.textContent="In the following example, type some initial values and try setting or clearing the code.",Ns=$(),Es=f("div"),G(Ss.$$.fragment),Fs=$(),As=f("div"),qs=m("code: "),Ds=f("code"),zs=m(It),Bs=$(),Js=f("button"),Js.textContent="Set code",Rs=$(),Vs=f("button"),Vs.textContent="Clear code\n",Us=f("pre"),Gs=$(),Zs=f("h3"),Zs.textContent="Focusing the first input",Ks=$(),Ys=f("p"),Ys.innerHTML="To programmatically focus the first input, invoke the focusFirstInput method in a component reference.",Qs=$(),Ws=f("div"),G(Xs.$$.fragment),na=$(),sa=f("button"),sa.textContent="Focus first input\n",aa=f("pre"),ta=$(),ea=f("h3"),ea.textContent="Focusing the next empty input",pa=$(),oa=f("p"),oa.innerHTML="To focus the next input with no value, invoke the focusNextEmptyInput method.",ca=$(),la=f("div"),G(ua.$$.fragment),ia=$(),ra=f("button"),ra.textContent="Focus next empty input\n",ka=f("pre"),da=$(),ga=f("h3"),ga.textContent="Focusing the last input",fa=$(),ma=f("p"),ma.innerHTML="To focus the last input, invoke the focusLastInput method.",$a=$(),ha=f("div"),G(va.$$.fragment),ya=$(),xa=f("button"),xa.textContent="Focus last input\n",ba=f("pre"),wa=$(),Pa=f("h2"),Pa.textContent="Styling",Ia=$(),Ta=f("h3"),Ta.textContent="Customization",Ca=$(),La=f("p"),La.innerHTML="This component is minimally styled; override the default styles by targeting the data-pincode selector:",Ma=$(),ja=f("pre"),Ha=$(),Oa=f("h3"),Oa.textContent="Unstyled components",Na=$(),Ea=f("p"),Ea.innerHTML="Use the unstyled components located in the svelte/src/unstyled folder if you prefer to style the components from scratch.",Sa=$(),_a=f("pre"),Fa=$(),Aa=f("h2"),Aa.textContent="API",qa=$(),Da=f("h3"),Da.textContent="Pincode",za=$(),Ba=f("h4"),Ba.textContent="Props",Ja=$(),Ra=f("table"),Ra.innerHTML='Name \nType \nDefault value \ncode \nstring[] \n[] \nvalue \nstring \n"" \ntype \n"alphanumeric" or "numeric" \n"alphanumeric" \nselectTextOnFocus \nboolean \nfalse',Va=$(),Ua=f("h4"),Ua.textContent="Accessors",Ga=$(),Za=f("ul"),Za.innerHTML="
  • focusFirstInput
    • \n
  • focusNextEmptyInput
    • \n
  • focusLastInput
    • ",Ka=$(),Ya=f("h4"),Ya.textContent="Dispatched Events",Qa=$(),Wa=f("ul"),Wa.innerHTML="
  • on:complete: fired when all inputs have a value
    • \n
  • on:clear: fired when no inputs have a value
    • ",Xa=$(),nt=f("pre"),st=$(),at=f("h3"),at.textContent="PincodeInput",tt=$(),et=f("h4"),et.textContent="Props",pt=$(),ot=f("table"),ot.innerHTML='Name \nType \nDefault value \nid \nstring \n"input" + Math.random().toString(36) \nref \nHTMLInputElement \nnull',ct=$(),lt=f("h4"),lt.textContent="Forwarded Events",ut=$(),it=f("ul"),it.innerHTML="
  • on:focus
    • \n
  • on:blur
    • \n
  • on:keydown
    • ",rt=$(),kt=f("h2"),kt.textContent="Changelog",dt=$(),gt=f("p"),gt.innerHTML='CHANGELOG.md',ft=$(),mt=f("h2"),mt.textContent="License",$t=$(),ht=f("p"),ht.innerHTML='MIT',v(a,"id","svelte-pincode"),v(O,"id","installation"),v(E,"class","language-bash"),v(F,"id","usage"),v(q,"id","basic"),v(Q,"class","code-fence"),v(In,"class","language-svelte"),v(In,"data-svelte",""),v(Cn,"id","select-text-on-focus"),v(Hn,"class","code-fence"),v(Sn,"class","language-svelte"),v(Sn,"data-svelte",""),v(Fn,"id","numeric-variant"),v(Jn,"class","code-fence"),v(Vn,"class","language-svelte"),v(Vn,"data-svelte",""),v(Gn,"id","initial-values"),v(Qn,"class","code-fence"),v(ps,"class","language-svelte"),v(ps,"data-svelte",""),v(cs,"id","validating-upon-completion"),w(hs,"complete",n[1]),w(hs,"success",n[2]),w(hs,"error",n[11]),v(ds,"class","code-fence"),v(bs,"class","language-svelte"),v(bs,"data-svelte",""),v(Ts,"class","language-svelte"),v(Ls,"id","programmatic-usage"),v(Es,"class","code-fence"),v(Us,"class","language-svelte"),v(Us,"data-svelte",""),v(Zs,"id","focusing-the-first-input"),v(Ws,"class","code-fence"),v(aa,"class","language-svelte"),v(aa,"data-svelte",""),v(ea,"id","focusing-the-next-empty-input"),v(la,"class","code-fence"),v(ka,"class","language-svelte"),v(ka,"data-svelte",""),v(ga,"id","focusing-the-last-input"),v(ha,"class","code-fence"),v(ba,"class","language-svelte"),v(ba,"data-svelte",""),v(Pa,"id","styling"),v(Ta,"id","customization"),v(ja,"class","language-css"),v(Oa,"id","unstyled-components"),v(_a,"class","language-html"),v(Aa,"id","api"),v(Da,"id","pincode"),v(Ba,"id","props"),v(Ua,"id","accessors"),v(Ya,"id","dispatched-events"),v(nt,"class","language-svelte"),v(at,"id","pincodeinput"),v(et,"id","props-1"),v(lt,"id","forwarded-events"),v(kt,"id","changelog"),v(mt,"id","license"),v(s,"class","markdown-body")},m(e,g){d(e,s,g),r(s,a),r(s,t),r(s,o),r(s,c),r(s,l),r(s,u),r(s,i),r(s,k),r(s,y),r(s,x),r(s,P),r(s,I),r(s,T),r(s,C),r(s,L),r(s,M),r(s,H),r(s,O),r(s,N),r(s,E),E.innerHTML='# npm\nnpm i -D svelte-pincode\n\n# pnpm\npnpm i -D svelte-pincode\n\n# Bun\nbun i -D svelte-pincode\n\n# Yarn\nyarn add -D svelte-pincode\n',r(s,S),r(s,F),r(s,A),r(s,q),r(s,D),r(s,z),r(s,B),r(s,V),r(s,Y),r(s,Q),Z(W,Q,null),r(Q,sn),r(Q,an),r(an,tn),r(an,en),r(en,on),r(Q,cn),r(Q,ln),r(ln,un),r(ln,wn),r(wn,Pn),r(s,In),In.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let code = [];\n let value = "";\n</script>\n\n<Pincode bind:code bind:value>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div>code: <code>{JSON.stringify(code)}</code></div>\n<div>value: <code>{JSON.stringify(value)}</code></div>\n',r(s,Tn),r(s,Cn),r(s,Ln),r(s,Mn),r(s,jn),r(s,Hn),Z(On,Hn,null),r(Hn,Nn),r(Hn,En),r(s,Sn),Sn.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let input;\n</script>\n\n<Pincode selectTextOnFocus>\n <PincodeInput bind:ref={input} value="0" />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={() => input.focus()}> Focus input </button>\n',r(s,_n),r(s,Fn),r(s,An),r(s,qn),r(s,Dn),r(s,zn),r(s,Bn),r(s,Jn),Z(Rn,Jn,null),r(s,Vn),Vn.innerHTML='<Pincode type="numeric">\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n',r(s,Un),r(s,Gn),r(s,Zn),r(s,Kn),r(s,Yn),r(s,Qn),Z(Wn,Qn,null),r(Qn,ns),r(Qn,ss),r(ss,as),r(ss,ts),r(ts,es),r(s,ps),ps.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let pincode = ["1", "", "3"];\n</script>\n\n<Pincode bind:code={pincode}>\n <PincodeInput />\n <PincodeInput value="2" />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div>code: <code>{JSON.stringify(pincode)}</code></div>\n',r(s,os),r(s,cs),r(s,ls),r(s,us),r(s,is),r(s,rs),r(s,ks),r(s,ds),Z(gs,ds,null),r(ds,$s),r(ds,hs),Et&&Et.m(hs,null),r(hs,vs),St&&St.m(hs,null),r(hs,ys),_t&&_t.m(hs,null),r(hs,xs),r(s,bs),bs.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n const correctCode = "1234";\n\n let inputValue = "";\n let complete = false;\n\n $: success = complete && inputValue === correctCode;\n $: error = complete && !success;\n</script>\n\n<Pincode bind:complete bind:value={inputValue}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div class:complete class:success class:error>\n {#if !complete}\n Enter {correctCode.length - inputValue.length} more digit(s)...\n {/if}\n {#if success}Correct code{/if}\n {#if error}Incorrect code{/if}\n</div>\n',r(s,ws),r(s,Ps),r(s,Is),r(s,Ts),Ts.innerHTML='<Pincode\n on:complete={(e) => {\n console.log(e.detail); // { code: string[]; value: string; }\n }}\n/>\n',r(s,Cs),r(s,Ls),r(s,Ms),r(s,js),r(s,Hs),r(s,Os),r(s,Ns),r(s,Es),Z(Ss,Es,null),r(Es,Fs),r(Es,As),r(As,qs),r(As,Ds),r(Ds,zs),r(Es,Bs),r(Es,Js),r(Es,Rs),r(Es,Vs),r(s,Us),Us.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let passcode = [];\n</script>\n\n<Pincode bind:code={passcode}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div>code: <code>{JSON.stringify(passcode)}</code></div>\n\n<button on:click={() => (passcode = ["1", "2", "3", "4"])}> Set code </button>\n\n<button on:click={() => (passcode = ["", "", "", ""])}> Clear code </button>\n',r(s,Gs),r(s,Zs),r(s,Ks),r(s,Ys),r(s,Qs),r(s,Ws),Z(Xs,Ws,null),r(Ws,na),r(Ws,sa),r(s,aa),aa.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let ref;\n</script>\n\n<Pincode bind:this={ref}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={ref.focusFirstInput}> Focus first input </button>\n',r(s,ta),r(s,ea),r(s,pa),r(s,oa),r(s,ca),r(s,la),Z(ua,la,null),r(la,ia),r(la,ra),r(s,ka),ka.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let pincodeRef;\n</script>\n\n<Pincode code={["9", "9"]} bind:this={pincodeRef}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={pincodeRef.focusNextEmptyInput}>\n Focus next empty input\n</button>\n',r(s,da),r(s,ga),r(s,fa),r(s,ma),r(s,$a),r(s,ha),Z(va,ha,null),r(ha,ya),r(ha,xa),r(s,ba),ba.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let passcodeRef;\n</script>\n\n<Pincode bind:this={passcodeRef}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={passcodeRef.focusLastInput}> Focus last input </button>\n',r(s,wa),r(s,Pa),r(s,Ia),r(s,Ta),r(s,Ca),r(s,La),r(s,Ma),r(s,ja),ja.innerHTML='/** Pincode **/\n:global([data-pincode]) {\n display: inline-flex;\n border: 1px solid #e0e0e0;\n}\n\n/** PincodeInput */\n:global([data-pincode] input) {\n width: 3rem;\n padding: 0.5rem 1rem;\n margin: 0;\n border: 0;\n border-radius: 0;\n text-align: center;\n}\n\n:global([data-pincode] input:focus) {\n z-index: 1;\n}\n\n:global([data-pincode] input:not(:last-of-type)) {\n border-right: 1px solid #e0e0e0;\n}\n',r(s,Ha),r(s,Oa),r(s,Na),r(s,Ea),r(s,Sa),r(s,_a),_a.innerHTML='<script>\n import Pincode from "svelte-pincode/src/unstyled/Pincode.svelte";\n import PincodeInput from "svelte-pincode/src/unstyled/PincodeInput.svelte";\n</script>\n',r(s,Fa),r(s,Aa),r(s,qa),r(s,Da),r(s,za),r(s,Ba),r(s,Ja),r(s,Ra),r(s,Va),r(s,Ua),r(s,Ga),r(s,Za),r(s,Ka),r(s,Ya),r(s,Qa),r(s,Wa),r(s,Xa),r(s,nt),nt.innerHTML='<Pincode\n on:complete={(e) => {\n console.log(e.detail); // { code: string[]; value: string; }\n }}\n on:clear\n/>\n',r(s,st),r(s,at),r(s,tt),r(s,et),r(s,pt),r(s,ot),r(s,ct),r(s,lt),r(s,ut),r(s,it),r(s,rt),r(s,kt),r(s,dt),r(s,gt),r(s,ft),r(s,mt),r(s,$t),r(s,ht),vt=!0,yt||(xt=[h(En,"click",n[15]),h(Js,"click",n[20]),h(Vs,"click",n[21]),h(sa,"click",(function(){p(n[8].focusFirstInput)&&n[8].focusFirstInput.apply(this,arguments)})),h(ra,"click",(function(){p(n[9].focusNextEmptyInput)&&n[9].focusNextEmptyInput.apply(this,arguments)})),h(xa,"click",(function(){p(n[10].focusLastInput)&&n[10].focusLastInput.apply(this,arguments)}))],yt=!0)},p(s,[a]){n=s;const t={};33554432&a&&(t.$$scope={dirty:a,ctx:n}),!X&&8&a&&(X=!0,t.code=n[3],_((()=>X=!1))),!nn&&16&a&&(nn=!0,t.value=n[4],_((()=>nn=!1))),W.$set(t),(!vt||8&a)&&bt!==(bt=JSON.stringify(n[3])+"")&&b(on,bt),(!vt||16&a)&&wt!==(wt=JSON.stringify(n[4])+"")&&b(Pn,wt);const e={};33554464&a&&(e.$$scope={dirty:a,ctx:n}),On.$set(e);const p={};33554432&a&&(p.$$scope={dirty:a,ctx:n}),Rn.$set(p);const o={};33554432&a&&(o.$$scope={dirty:a,ctx:n}),!Xn&&64&a&&(Xn=!0,o.code=n[6],_((()=>Xn=!1))),Wn.$set(o),(!vt||64&a)&&Pt!==(Pt=JSON.stringify(n[6])+"")&&b(es,Pt);const c={};33554432&a&&(c.$$scope={dirty:a,ctx:n}),!fs&&2&a&&(fs=!0,c.complete=n[1],_((()=>fs=!1))),!ms&&1&a&&(ms=!0,c.value=n[0],_((()=>ms=!1))),gs.$set(c),n[1]?Et&&(Et.d(1),Et=null):Et?Et.p(n,a):(Et=mn(n),Et.c(),Et.m(hs,vs)),n[2]?St||(St=$n(),St.c(),St.m(hs,ys)):St&&(St.d(1),St=null),n[11]?_t||(_t=hn(),_t.c(),_t.m(hs,xs)):_t&&(_t.d(1),_t=null),(!vt||2&a)&&w(hs,"complete",n[1]),(!vt||4&a)&&w(hs,"success",n[2]),(!vt||2048&a)&&w(hs,"error",n[11]);const l={};33554432&a&&(l.$$scope={dirty:a,ctx:n}),!_s&&128&a&&(_s=!0,l.code=n[7],_((()=>_s=!1))),Ss.$set(l),(!vt||128&a)&&It!==(It=JSON.stringify(n[7])+"")&&b(zs,It);const u={};33554432&a&&(u.$$scope={dirty:a,ctx:n}),Xs.$set(u);const i={};33554432&a&&(i.$$scope={dirty:a,ctx:n}),ua.$set(i);const r={};33554432&a&&(r.$$scope={dirty:a,ctx:n}),va.$set(r)},i(n){vt||(J(W.$$.fragment,n),J(On.$$.fragment,n),J(Rn.$$.fragment,n),J(Wn.$$.fragment,n),J(gs.$$.fragment,n),J(Ss.$$.fragment,n),J(Xs.$$.fragment,n),J(ua.$$.fragment,n),J(va.$$.fragment,n),vt=!0)},o(n){R(W.$$.fragment,n),R(On.$$.fragment,n),R(Rn.$$.fragment,n),R(Wn.$$.fragment,n),R(gs.$$.fragment,n),R(Ss.$$.fragment,n),R(Xs.$$.fragment,n),R(ua.$$.fragment,n),R(va.$$.fragment,n),vt=!1},d(a){a&&g(s),K(W),K(On),K(Rn),K(Wn),K(gs),Et&&Et.d(),St&&St.d(),_t&&_t.d(),K(Ss),n[22](null),K(Xs),n[23](null),K(ua),n[24](null),K(va),yt=!1,e(xt)}}}const Pn="1234";function In(n,s,a){let t,e,p,o,c,l,u=[],i="",r=["1","","3"],k="",d=!1,g=[];return n.$$.update=()=>{3&n.$$.dirty&&a(2,t=d&&k===Pn),6&n.$$.dirty&&a(11,e=d&&!t)},[k,d,t,u,i,p,r,g,o,c,l,e,function(n){u=n,a(3,u)},function(n){i=n,a(4,i)},function(n){p=n,a(5,p)},()=>p.focus(),function(n){r=n,a(6,r)},function(n){d=n,a(1,d)},function(n){k=n,a(0,k)},function(n){g=n,a(7,g)},()=>a(7,g=["1","2","3","4"]),()=>a(7,g=["","","",""]),function(n){j[n?"unshift":"push"]((()=>{o=n,a(8,o)}))},function(n){j[n?"unshift":"push"]((()=>{c=n,a(9,c)}))},function(n){j[n?"unshift":"push"]((()=>{l=n,a(10,l)}))}]}return new class extends W{constructor(n){super(),Q(this,n,In,wn,o,{})}}({target:document.body})}(); diff --git a/s.e7c19a16.js b/s.e7c19a16.js deleted file mode 100644 index 0c6815d..0000000 --- a/s.e7c19a16.js +++ /dev/null @@ -1 +0,0 @@ -var app=function(){"use strict";function n(){}function s(n,s){for(const a in s)n[a]=s[a];return n}function a(n){return n()}function t(){return Object.create(null)}function e(n){n.forEach(a)}function p(n){return"function"==typeof n}function o(n,s){return n!=n?s==s:n!==s}function c(s,...a){if(null==s)return n;const t=s.subscribe(...a);return t.unsubscribe?()=>t.unsubscribe():t}function l(n,a,t,e){return n[1]&&e?s(t.ctx.slice(),n[1](e(a))):t.ctx}function u(n){const s={};for(const a in n)"$"!==a[0]&&(s[a]=n[a]);return s}function i(n,s){const a={};s=new Set(s);for(const t in n)s.has(t)||"$"===t[0]||(a[t]=n[t]);return a}function r(n,s){n.appendChild(s)}function k(n,s,a){const t=function(n){if(!n)return document;const s=n.getRootNode?n.getRootNode():n.ownerDocument;if(s&&s.host)return s;return n.ownerDocument}(n);if(!t.getElementById(s)){const n=f("style");n.id=s,n.textContent=a,function(n,s){r(n.head||n,s),s.sheet}(t,n)}}function d(n,s,a){n.insertBefore(s,a||null)}function g(n){n.parentNode&&n.parentNode.removeChild(n)}function f(n){return document.createElement(n)}function m(n){return document.createTextNode(n)}function $(){return m(" ")}function h(n,s,a,t){return n.addEventListener(s,a,t),()=>n.removeEventListener(s,a,t)}function v(n,s,a){null==a?n.removeAttribute(s):n.getAttribute(s)!==a&&n.setAttribute(s,a)}const y=["width","height"];function x(n,s){const a=Object.getOwnPropertyDescriptors(n.__proto__);for(const t in s)null==s[t]?n.removeAttribute(t):"style"===t?n.style.cssText=s[t]:"__value"===t?n.value=n[t]=s[t]:a[t]&&a[t].set&&-1===y.indexOf(t)?n[t]=s[t]:v(n,t,s[t])}function b(n,s){s=""+s,n.data!==s&&(n.data=s)}function w(n,s,a){n.classList[a?"add":"remove"](s)}let P;function I(n){P=n}function T(){if(!P)throw new Error("Function called outside component initialization");return P}function C(){const n=T();return(s,a,{cancelable:t=!1}={})=>{const e=n.$$.callbacks[s];if(e){const p=function(n,s,{bubbles:a=!1,cancelable:t=!1}={}){const e=document.createEvent("CustomEvent");return e.initCustomEvent(n,a,t,s),e}(s,a,{cancelable:t});return e.slice().forEach((s=>{s.call(n,p)})),!p.defaultPrevented}return!0}}function L(n,s){const a=n.$$.callbacks[s.type];a&&a.slice().forEach((n=>n.call(this,s)))}const M=[],H=[];let j=[];const O=[],N=Promise.resolve();let S=!1;function E(n){j.push(n)}function _(n){O.push(n)}const F=new Set;let A=0;function q(){if(0!==A)return;const n=P;do{try{for(;A{z.delete(n),t&&(a&&n.d(1),t())})),n.o(s)}else t&&t()}function V(n,s){const a={},t={},e={$$scope:1};let p=n.length;for(;p--;){const o=n[p],c=s[p];if(c){for(const n in o)n in c||(t[n]=1);for(const n in c)e[n]||(a[n]=c[n],e[n]=1);n[p]=c}else for(const n in o)e[n]=1}for(const n in t)n in a||(a[n]=void 0);return a}function U(n,s,a){const t=n.$$.props[s];void 0!==t&&(n.$$.bound[t]=a,a(n.$$.ctx[t]))}function G(n){n&&n.c()}function Z(n,s,t,o){const{fragment:c,after_update:l}=n.$$;c&&c.m(s,t),o||E((()=>{const s=n.$$.on_mount.map(a).filter(p);n.$$.on_destroy?n.$$.on_destroy.push(...s):e(s),n.$$.on_mount=[]})),l.forEach(E)}function K(n,s){const a=n.$$;null!==a.fragment&&(!function(n){const s=[],a=[];j.forEach((t=>-1===n.indexOf(t)?s.push(t):a.push(t))),a.forEach((n=>n())),j=s}(a.after_update),e(a.on_destroy),a.fragment&&a.fragment.d(s),a.on_destroy=a.fragment=null,a.ctx=[])}function Y(n,s){-1===n.$$.dirty[0]&&(M.push(n),S||(S=!0,N.then(q)),n.$$.dirty.fill(0)),n.$$.dirty[s/31|0]|=1<{const e=t.length?t[0]:a;return k.ctx&&c(k.ctx[n],k.ctx[n]=e)&&(!k.skip_bound&&k.bound[n]&&k.bound[n](e),d&&Y(s,n)),a})):[],k.update(),d=!0,e(k.before_update),k.fragment=!!o&&o(k.ctx),a.target){if(a.hydrate){const n=function(n){return Array.from(n.childNodes)}(a.target);k.fragment&&k.fragment.l(n),n.forEach(g)}else k.fragment&&k.fragment.c();a.intro&&J(s.$$.fragment),Z(s,a.target,a.anchor,a.customElement),q()}I(r)}class W{$destroy(){K(this,1),this.$destroy=n}$on(s,a){if(!p(a))return n;const t=this.$$.callbacks[s]||(this.$$.callbacks[s]=[]);return t.push(a),()=>{const n=t.indexOf(a);-1!==n&&t.splice(n,1)}}$set(n){var s;this.$$set&&(s=n,0!==Object.keys(s).length)&&(this.$$.skip_bound=!0,this.$$set(n),this.$$.skip_bound=!1)}}const X=[];function nn(s,a=n){let t;const e=new Set;function p(n){if(p=n,((a=s)!=a?p==p:a!==p||a&&"object"==typeof a||"function"==typeof a)&&(s=n,t)){const n=!X.length;for(const n of e)n[1](),X.push(n,s);if(n){for(let n=0;n{e.delete(l),0===e.size&&t&&(t(),t=null)}}}}function sn(s,a,t){const o=!Array.isArray(s),l=o?[s]:s,u=a.length<2;return i=s=>{let t=!1;const i=[];let r=0,k=n;const d=()=>{if(r)return;k();const t=a(o?i[0]:i,s);u?s(t):k=p(t)?t:n},g=l.map(((n,s)=>c(n,(n=>{i[s]=n,r&=~(1<{r|=1<32){const s=[],a=n.ctx.length/32;for(let n=0;nt(14,p=n),n.$$.on_destroy.push(c(v,y));const x=sn(h,(n=>n.reduce(((n,s)=>({...n,[s.id]:s.value})),{}))),b=nn(g),w=nn(m);let P=null,I=d;function L(){t(5,k=p.map((n=>n.value||"")))}function M(n){const s=P.querySelectorAll("input")[n+1];s&&s.focus()}var j,O,N;return j="Pincode",O={_type:b,_selectTextOnFocus:w,_valuesById:x,focusNextInput:n=>{M(p.map((n=>n.id)).indexOf(n))},add:(n,s)=>{let a=[...k];h.update((t=>(void 0===k[t.length]?a[t.length]=s:a[t.length]=a[t.length]||s,[...t,{id:n,value:k[t.length]||s}]))),t(5,k=a)},remove:n=>{h.update((s=>s.filter((s=>s.id!==n)))),L()},update:async(n,s)=>{const a=p.map((n=>n.id)).indexOf(n);h.update((n=>n.map(((n,t)=>t===a?{...n,value:s}:n)))),L(),M(a)},clear:n=>{const s=p.map((n=>n.id)).indexOf(n);if(!p[s].value){const n=P.querySelectorAll("input")[s-1];n&&(n.focus(),n.select())}h.update((n=>n.map(((n,a)=>a===s?{...n,value:""}:n)))),L()}},T().$$.context.set(j,O),N=()=>{f&&$("complete",{code:k,value:d})},T().$$.after_update.push(N),n.$$set=n=>{a=s(s({},a),u(n)),t(4,o=i(a,e)),"code"in n&&t(5,k=n.code),"value"in n&&t(6,d=n.value),"type"in n&&t(8,g=n.type),"complete"in n&&t(7,f=n.complete),"selectTextOnFocus"in n&&t(9,m=n.selectTextOnFocus),"$$scope"in n&&t(15,r=n.$$scope)},n.$$.update=()=>{256&n.$$.dirty&&b.set(g),512&n.$$.dirty&&w.set(m),32&n.$$.dirty&&t(6,d=k.join("")),16416&n.$$.dirty&&t(7,f=k.filter(Boolean).length===p.length),32&n.$$.dirty&&k&&h.update((n=>n.map(((n,s)=>({...n,value:k[s]}))))),32&n.$$.dirty&&0===k.length&&h.update((n=>n.map((n=>({...n,value:""}))))),8256&n.$$.dirty&&(I!==d&&0===d.length&&$("clear"),t(13,I=d))},[P,h,function(n){let s=n.data||n.target.value;s&&(s=s.trim(),1!==s.length&&s.length===p.length&&t(5,k=s.split("")))},function(n){n.preventDefault(),t(5,k=n.clipboardData.getData("text").split("").filter((n=>" "!==n)))},o,k,d,f,g,m,()=>{P.querySelector("input").focus()},()=>{for(const n of P.querySelectorAll("input"))if(0===n.value.length){n.focus();break}},()=>{P.querySelector("input:last-of-type").focus()},I,p,r,l,function(n){H[n?"unshift":"push"]((()=>{P=n,t(0,P)}))}]}class pn extends W{constructor(n){super(),Q(this,n,en,tn,o,{code:5,value:6,type:8,complete:7,selectTextOnFocus:9,focusFirstInput:10,focusNextEmptyInput:11,focusLastInput:12},an)}get focusFirstInput(){return this.$$.ctx[10]}get focusNextEmptyInput(){return this.$$.ctx[11]}get focusLastInput(){return this.$$.ctx[12]}}function on(n){k(n,"svelte-1cexha","input.svelte-1cexha{width:3rem;padding:0.5rem 1rem;margin:0;border:0;border-radius:0;text-align:center}input.svelte-1cexha:focus{z-index:1}input.svelte-1cexha:not(:last-of-type){border-right:1px solid #e0e0e0}")}function cn(a){let t,p,o,c,l,u,i=[a[8],{type:p="numeric"===a[3]?"number":"text"},{inputmode:o="numeric"===a[3]?"numeric":"text"},{pattern:c="numeric"===a[3]?"[0-9]{1}":"^[a-zA-Z0-9]$"},{maxlength:"1"},{value:a[0]}],r={};for(let n=0;n{t(3,p=n)})),m=d._selectTextOnFocus.subscribe((n=>{t(4,o=n)})),$={CONTROL:"Control",COMMAND:"Meta",V:"v",TAB:"Tab",BACKSPACE:"Backspace"};let h,v=!1;var y;y=()=>(d.add(r,l),h=d._valuesById.subscribe((n=>{t(0,l=n[r]||"")})),()=>{d.remove(r),h(),f(),m()}),T().$$.on_mount.push(y);return n.$$set=n=>{a=s(s({},a),u(n)),t(8,c=i(a,e)),"value"in n&&t(0,l=n.value),"id"in n&&t(2,r=n.id),"ref"in n&&t(1,k=n.ref)},[l,k,r,p,o,v,d,$,c,function(s){L.call(this,n,s)},function(s){L.call(this,n,s)},function(s){L.call(this,n,s)},function(n){H[n?"unshift":"push"]((()=>{k=n,t(1,k)}))},()=>{o&&k.select()},n=>{if(n.key===$.BACKSPACE)return n.preventDefault(),d.clear(r);n.key!=$.CONTROL&&n.key!=$.COMMAND||t(5,v=!0),n.key==$.V&&v||n.key!==$.TAB&&(n.preventDefault(),"numeric"===p&&/^[0-9]$/.test(n.key)&&d.update(r,n.key),"alphanumeric"===p&&/^[a-zA-Z0-9]$/.test(n.key)&&d.update(r,n.key))},n=>{n.key!=$.CONTROL&&n.key!=$.COMMAND||t(5,v=!1)}]}class un extends W{constructor(n){super(),Q(this,n,ln,cn,o,{value:0,id:2,ref:1},on)}}function rn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function kn(n){let s,a,t,e,p,o,c,l,u;function i(s){n[14](s)}let r={value:"0"};return void 0!==n[5]&&(r.ref=n[5]),s=new un({props:r}),H.push((()=>U(s,"ref",i))),e=new un({}),o=new un({}),l=new un({}),{c(){G(s.$$.fragment),t=$(),G(e.$$.fragment),p=$(),G(o.$$.fragment),c=$(),G(l.$$.fragment)},m(n,a){Z(s,n,a),d(n,t,a),Z(e,n,a),d(n,p,a),Z(o,n,a),d(n,c,a),Z(l,n,a),u=!0},p(n,t){const e={};!a&&32&t&&(a=!0,e.ref=n[5],_((()=>a=!1))),s.$set(e)},i(n){u||(J(s.$$.fragment,n),J(e.$$.fragment,n),J(o.$$.fragment,n),J(l.$$.fragment,n),u=!0)},o(n){R(s.$$.fragment,n),R(e.$$.fragment,n),R(o.$$.fragment,n),R(l.$$.fragment,n),u=!1},d(n){K(s,n),n&&g(t),K(e,n),n&&g(p),K(o,n),n&&g(c),K(l,n)}}}function dn(n){let s,a,t,e,p,o,c,l,u;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment),l=$()},m(n,i){Z(s,n,i),d(n,a,i),Z(t,n,i),d(n,e,i),Z(p,n,i),d(n,o,i),Z(c,n,i),d(n,l,i),u=!0},i(n){u||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),u=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),u=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n),n&&g(l)}}}function gn(s){let a,t,e,p,o,c,l,u;return a=new un({}),e=new un({props:{value:"2"}}),o=new un({}),l=new un({}),{c(){G(a.$$.fragment),t=$(),G(e.$$.fragment),p=$(),G(o.$$.fragment),c=$(),G(l.$$.fragment)},m(n,s){Z(a,n,s),d(n,t,s),Z(e,n,s),d(n,p,s),Z(o,n,s),d(n,c,s),Z(l,n,s),u=!0},p:n,i(n){u||(J(a.$$.fragment,n),J(e.$$.fragment,n),J(o.$$.fragment,n),J(l.$$.fragment,n),u=!0)},o(n){R(a.$$.fragment,n),R(e.$$.fragment,n),R(o.$$.fragment,n),R(l.$$.fragment,n),u=!1},d(n){K(a,n),n&&g(t),K(e,n),n&&g(p),K(o,n),n&&g(c),K(l,n)}}}function fn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function mn(n){let s,a,t,e=Pn.length-n[0].length+"";return{c(){s=m("Enter "),a=m(e),t=m(" more digit(s)...")},m(n,e){d(n,s,e),d(n,a,e),d(n,t,e)},p(n,s){1&s&&e!==(e=Pn.length-n[0].length+"")&&b(a,e)},d(n){n&&g(s),n&&g(a),n&&g(t)}}}function $n(n){let s;return{c(){s=m("Correct code")},m(n,a){d(n,s,a)},d(n){n&&g(s)}}}function hn(n){let s;return{c(){s=m("Incorrect code")},m(n,a){d(n,s,a)},d(n){n&&g(s)}}}function vn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function yn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function xn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function bn(n){let s,a,t,e,p,o,c,l;return s=new un({}),t=new un({}),p=new un({}),c=new un({}),{c(){G(s.$$.fragment),a=$(),G(t.$$.fragment),e=$(),G(p.$$.fragment),o=$(),G(c.$$.fragment)},m(n,u){Z(s,n,u),d(n,a,u),Z(t,n,u),d(n,e,u),Z(p,n,u),d(n,o,u),Z(c,n,u),l=!0},i(n){l||(J(s.$$.fragment,n),J(t.$$.fragment,n),J(p.$$.fragment,n),J(c.$$.fragment,n),l=!0)},o(n){R(s.$$.fragment,n),R(t.$$.fragment,n),R(p.$$.fragment,n),R(c.$$.fragment,n),l=!1},d(n){K(s,n),n&&g(a),K(t,n),n&&g(e),K(p,n),n&&g(o),K(c,n)}}}function wn(n){let s,a,t,o,c,l,u,i,k,y,x,P,I,T,C,L,M,j,O,N,S,E,F,A,q,D,z,B,V,Y,Q,W,X,nn,sn,an,tn,en,on,cn,ln,un,wn,Pn,In,Tn,Cn,Ln,Mn,Hn,jn,On,Nn,Sn,En,_n,Fn,An,qn,Dn,zn,Bn,Jn,Rn,Vn,Un,Gn,Zn,Kn,Yn,Qn,Wn,Xn,ns,ss,as,ts,es,ps,os,cs,ls,us,is,rs,ks,ds,gs,fs,ms,$s,hs,vs,ys,xs,bs,ws,Ps,Is,Ts,Cs,Ls,Ms,Hs,js,Os,Ns,Ss,Es,_s,Fs,As,qs,Ds,zs,Bs,Js,Rs,Vs,Us,Gs,Zs,Ks,Ys,Qs,Ws,Xs,na,sa,aa,ta,ea,pa,oa,ca,la,ua,ia,ra,ka,da,ga,fa,ma,$a,ha,va,ya,xa,ba,wa,Pa,Ia,Ta,Ca,La,Ma,Ha,ja,Oa,Na,Sa,Ea,_a,Fa,Aa,qa,Da,za,Ba,Ja,Ra,Va,Ua,Ga,Za,Ka,Ya,Qa,Wa,Xa,nt,st,at,tt,et,pt,ot,ct,lt,ut,it,rt,kt,dt,gt,ft,mt,$t,ht,vt,yt,xt,bt,wt,Pt,It,Tt,Ct,Lt,Mt,Ht,jt,Ot,Nt,St,Et,_t=JSON.stringify(n[3])+"",Ft=JSON.stringify(n[4])+"",At=JSON.stringify(n[6])+"",qt=JSON.stringify(n[7])+"";function Dt(s){n[12](s)}function zt(s){n[13](s)}let Bt={$$slots:{default:[rn]},$$scope:{ctx:n}};function Jt(s){n[16](s)}void 0!==n[3]&&(Bt.code=n[3]),void 0!==n[4]&&(Bt.value=n[4]),un=new pn({props:Bt}),H.push((()=>U(un,"code",Dt))),H.push((()=>U(un,"value",zt))),Bn=new pn({props:{selectTextOnFocus:!0,$$slots:{default:[kn]},$$scope:{ctx:n}}}),ns=new pn({props:{type:"numeric",$$slots:{default:[dn]},$$scope:{ctx:n}}});let Rt={$$slots:{default:[gn]},$$scope:{ctx:n}};function Vt(s){n[17](s)}function Ut(s){n[18](s)}void 0!==n[6]&&(Rt.code=n[6]),ls=new pn({props:Rt}),H.push((()=>U(ls,"code",Jt)));let Gt={$$slots:{default:[fn]},$$scope:{ctx:n}};void 0!==n[1]&&(Gt.complete=n[1]),void 0!==n[0]&&(Gt.value=n[0]),Ps=new pn({props:Gt}),H.push((()=>U(Ps,"complete",Vt))),H.push((()=>U(Ps,"value",Ut)));let Zt=!n[1]&&mn(n),Kt=n[2]&&$n(),Yt=n[11]&&hn();function Qt(s){n[19](s)}let Wt={$$slots:{default:[vn]},$$scope:{ctx:n}};return void 0!==n[7]&&(Wt.code=n[7]),Vs=new pn({props:Wt}),H.push((()=>U(Vs,"code",Qt))),ua=new pn({props:{$$slots:{default:[yn]},$$scope:{ctx:n}}}),n[22](ua),va=new pn({props:{code:["9","9"],$$slots:{default:[xn]},$$scope:{ctx:n}}}),n[23](va),Ma=new pn({props:{$$slots:{default:[bn]},$$scope:{ctx:n}}}),n[24](Ma),{c(){s=f("main"),a=f("h1"),a.textContent="svelte-pincode",t=$(),o=f("p"),o.innerHTML='NPM',c=$(),l=f("blockquote"),l.innerHTML="

    Declarative pin code component for Svelte.

    ",u=$(),i=f("p"),i.innerHTML='GitHub repo',k=$(),y=f("p"),y.textContent="A pin code is a short sequence of characters (usually numeric) used for verification. It differs from a password in that it is typically ephemeral and is not predetermined by the user.",x=$(),P=f("p"),P.innerHTML='Try it in the Svelte REPL.',I=$(),T=f("hr"),C=$(),L=f("p"),L.innerHTML="Table of Contents",M=f("ul"),M.innerHTML='
  • Installation
    • \n
  • Usage
    • \n
  • Styling
    • \n
  • API
    • \n
  • TypeScript
    • \n
  • Changelog
    • \n
  • License
    • ',j=$(),O=f("h2"),O.textContent="Installation",N=$(),S=f("p"),S.innerHTML="Yarn",E=$(),F=f("pre"),A=$(),q=f("p"),q.innerHTML="NPM",D=$(),z=f("pre"),B=$(),V=f("p"),V.innerHTML="pnpm",Y=$(),Q=f("pre"),W=$(),X=f("h2"),X.textContent="Usage",nn=$(),sn=f("h3"),sn.textContent="Basic",an=$(),tn=f("p"),tn.innerHTML="Bind to either the code or value prop.",en=$(),on=f("ul"),on.innerHTML="
  • code (string[]): Array of input values. An empty string represents an undefined value.
    • \n
  • value (string): code joined as a string.
    • ",cn=$(),ln=f("div"),G(un.$$.fragment),In=$(),Tn=f("div"),Cn=m("code: "),Ln=f("code"),Mn=m(_t),Hn=$(),jn=f("div"),On=m("value: "),Nn=f("code"),Sn=m(Ft),En=f("pre"),_n=$(),Fn=f("h3"),Fn.textContent="Select text on focus",An=$(),qn=f("p"),qn.innerHTML="Set selectTextOnFocus to true for the input value text to be selected when focused.",Dn=$(),zn=f("div"),G(Bn.$$.fragment),Jn=$(),Rn=f("button"),Rn.textContent="Focus input\n",Vn=f("pre"),Un=$(),Gn=f("h3"),Gn.textContent="Numeric variant",Zn=$(),Kn=f("p"),Kn.textContent="By default, this component accepts alphanumeric values.",Yn=$(),Qn=f("p"),Qn.innerHTML="Set type to "numeric" to only allow numbers.",Wn=$(),Xn=f("div"),G(ns.$$.fragment),ss=f("pre"),as=$(),ts=f("h3"),ts.textContent="Initial values",es=$(),ps=f("p"),ps.innerHTML="Define intitial input values by using the code prop or value prop on PincodeInput.",os=$(),cs=f("div"),G(ls.$$.fragment),is=$(),rs=f("div"),ks=m("code: "),ds=f("code"),gs=m(At),fs=f("pre"),ms=$(),$s=f("h3"),$s.textContent="Validating upon completion",hs=$(),vs=f("p"),vs.textContent="Actual validation is left to the consumer.",ys=$(),xs=f("p"),xs.innerHTML="This example illustrates how you can validate the code once all inputs have a value by binding to the complete prop.",bs=$(),ws=f("div"),G(Ps.$$.fragment),Cs=$(),Ls=f("div"),Zt&&Zt.c(),Ms=$(),Kt&&Kt.c(),Hs=$(),Yt&&Yt.c(),js=$(),Os=f("pre"),Ns=$(),Ss=f("p"),Ss.innerHTML="Use the dispatched “complete” event as an alternative to binding the complete prop.",Es=$(),_s=f("pre"),Fs=$(),As=f("h3"),As.textContent="Programmatic usage",qs=$(),Ds=f("p"),Ds.innerHTML="code can be set programmatically.",zs=$(),Bs=f("p"),Bs.textContent="In the following example, type some initial values and try setting or clearing the code.",Js=$(),Rs=f("div"),G(Vs.$$.fragment),Gs=$(),Zs=f("div"),Ks=m("code: "),Ys=f("code"),Qs=m(qt),Ws=$(),Xs=f("button"),Xs.textContent="Set code",na=$(),sa=f("button"),sa.textContent="Clear code\n",aa=f("pre"),ta=$(),ea=f("h3"),ea.textContent="Focusing the first input",pa=$(),oa=f("p"),oa.innerHTML="To programmatically focus the first input, invoke the focusFirstInput method in a component reference.",ca=$(),la=f("div"),G(ua.$$.fragment),ia=$(),ra=f("button"),ra.textContent="Focus first input\n",ka=f("pre"),da=$(),ga=f("h3"),ga.textContent="Focusing the next empty input",fa=$(),ma=f("p"),ma.innerHTML="To focus the next input with no value, invoke the focusNextEmptyInput method.",$a=$(),ha=f("div"),G(va.$$.fragment),ya=$(),xa=f("button"),xa.textContent="Focus next empty input\n",ba=f("pre"),wa=$(),Pa=f("h3"),Pa.textContent="Focusing the last input",Ia=$(),Ta=f("p"),Ta.innerHTML="To focus the last input, invoke the focusLastInput method.",Ca=$(),La=f("div"),G(Ma.$$.fragment),Ha=$(),ja=f("button"),ja.textContent="Focus last input\n",Oa=f("pre"),Na=$(),Sa=f("h2"),Sa.textContent="Styling",Ea=$(),_a=f("h3"),_a.textContent="Customization",Fa=$(),Aa=f("p"),Aa.innerHTML="This component is minimally styled; override the default styles by targeting the data-pincode selector:",qa=$(),Da=f("pre"),za=$(),Ba=f("h3"),Ba.textContent="Unstyled components",Ja=$(),Ra=f("p"),Ra.innerHTML="Use the unstyled components located in the svelte/src/unstyled folder if you prefer to style the components from scratch.",Va=$(),Ua=f("pre"),Ga=$(),Za=f("h2"),Za.textContent="API",Ka=$(),Ya=f("h3"),Ya.textContent="Pincode",Qa=$(),Wa=f("h4"),Wa.textContent="Props",Xa=$(),nt=f("table"),nt.innerHTML='Name \nType \nDefault value \ncode \nstring[] \n[] \nvalue \nstring \n"" \ntype \n"alphanumeric" or "numeric" \n"alphanumeric" \nselectTextOnFocus \nboolean \nfalse',st=$(),at=f("h4"),at.textContent="Accessors",tt=$(),et=f("ul"),et.innerHTML="
  • focusFirstInput
    • \n
  • focusNextEmptyInput
    • \n
  • focusLastInput
    • ",pt=$(),ot=f("h4"),ot.textContent="Dispatched Events",ct=$(),lt=f("ul"),lt.innerHTML="
  • on:complete: fired when all inputs have a value
    • \n
  • on:clear: fired when no inputs have a value
    • ",ut=$(),it=f("pre"),rt=$(),kt=f("h3"),kt.textContent="PincodeInput",dt=$(),gt=f("h4"),gt.textContent="Props",ft=$(),mt=f("table"),mt.innerHTML='Name \nType \nDefault value \nid \nstring \n"input" + Math.random().toString(36) \nref \nHTMLInputElement \nnull',$t=$(),ht=f("h4"),ht.textContent="Forwarded Events",vt=$(),yt=f("ul"),yt.innerHTML="
  • on:focus
    • \n
  • on:blur
    • \n
  • on:keydown
    • ",xt=$(),bt=f("h2"),bt.textContent="TypeScript",wt=$(),Pt=f("p"),Pt.textContent="Svelte version 3.31 or greater is required to use this component with TypeScript.",It=$(),Tt=f("h2"),Tt.textContent="Changelog",Ct=$(),Lt=f("p"),Lt.innerHTML='CHANGELOG.md',Mt=$(),Ht=f("h2"),Ht.textContent="License",jt=$(),Ot=f("p"),Ot.innerHTML='MIT',v(a,"id","svelte-pincode"),v(O,"id","installation"),v(F,"class","language-bash"),v(z,"class","language-bash"),v(Q,"class","language-bash"),v(X,"id","usage"),v(sn,"id","basic"),v(ln,"class","code-fence"),v(En,"class","language-svelte"),v(En,"data-svelte",""),v(Fn,"id","select-text-on-focus"),v(zn,"class","code-fence"),v(Vn,"class","language-svelte"),v(Vn,"data-svelte",""),v(Gn,"id","numeric-variant"),v(Xn,"class","code-fence"),v(ss,"class","language-svelte"),v(ss,"data-svelte",""),v(ts,"id","initial-values"),v(cs,"class","code-fence"),v(fs,"class","language-svelte"),v(fs,"data-svelte",""),v($s,"id","validating-upon-completion"),w(Ls,"complete",n[1]),w(Ls,"success",n[2]),w(Ls,"error",n[11]),v(ws,"class","code-fence"),v(Os,"class","language-svelte"),v(Os,"data-svelte",""),v(_s,"class","language-svelte"),v(As,"id","programmatic-usage"),v(Rs,"class","code-fence"),v(aa,"class","language-svelte"),v(aa,"data-svelte",""),v(ea,"id","focusing-the-first-input"),v(la,"class","code-fence"),v(ka,"class","language-svelte"),v(ka,"data-svelte",""),v(ga,"id","focusing-the-next-empty-input"),v(ha,"class","code-fence"),v(ba,"class","language-svelte"),v(ba,"data-svelte",""),v(Pa,"id","focusing-the-last-input"),v(La,"class","code-fence"),v(Oa,"class","language-svelte"),v(Oa,"data-svelte",""),v(Sa,"id","styling"),v(_a,"id","customization"),v(Da,"class","language-css"),v(Ba,"id","unstyled-components"),v(Ua,"class","language-html"),v(Za,"id","api"),v(Ya,"id","pincode"),v(Wa,"id","props"),v(at,"id","accessors"),v(ot,"id","dispatched-events"),v(it,"class","language-svelte"),v(kt,"id","pincodeinput"),v(gt,"id","props-1"),v(ht,"id","forwarded-events"),v(bt,"id","typescript"),v(Tt,"id","changelog"),v(Ht,"id","license"),v(s,"class","markdown-body")},m(e,g){d(e,s,g),r(s,a),r(s,t),r(s,o),r(s,c),r(s,l),r(s,u),r(s,i),r(s,k),r(s,y),r(s,x),r(s,P),r(s,I),r(s,T),r(s,C),r(s,L),r(s,M),r(s,j),r(s,O),r(s,N),r(s,S),r(s,E),r(s,F),F.innerHTML='yarn add -D svelte-pincode\n',r(s,A),r(s,q),r(s,D),r(s,z),z.innerHTML='npm i -D svelte-pincode\n',r(s,B),r(s,V),r(s,Y),r(s,Q),Q.innerHTML='pnpm i -D svelte-pincode\n',r(s,W),r(s,X),r(s,nn),r(s,sn),r(s,an),r(s,tn),r(s,en),r(s,on),r(s,cn),r(s,ln),Z(un,ln,null),r(ln,In),r(ln,Tn),r(Tn,Cn),r(Tn,Ln),r(Ln,Mn),r(ln,Hn),r(ln,jn),r(jn,On),r(jn,Nn),r(Nn,Sn),r(s,En),En.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let code = [];\n let value = "";\n</script>\n\n<Pincode bind:code bind:value>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div>code: <code>{JSON.stringify(code)}</code></div>\n<div>value: <code>{JSON.stringify(value)}</code></div>\n',r(s,_n),r(s,Fn),r(s,An),r(s,qn),r(s,Dn),r(s,zn),Z(Bn,zn,null),r(zn,Jn),r(zn,Rn),r(s,Vn),Vn.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let input;\n</script>\n\n<Pincode selectTextOnFocus>\n <PincodeInput bind:ref={input} value="0" />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={() => input.focus()}> Focus input </button>\n',r(s,Un),r(s,Gn),r(s,Zn),r(s,Kn),r(s,Yn),r(s,Qn),r(s,Wn),r(s,Xn),Z(ns,Xn,null),r(s,ss),ss.innerHTML='<Pincode type="numeric">\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n',r(s,as),r(s,ts),r(s,es),r(s,ps),r(s,os),r(s,cs),Z(ls,cs,null),r(cs,is),r(cs,rs),r(rs,ks),r(rs,ds),r(ds,gs),r(s,fs),fs.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let pincode = ["1", "", "3"];\n</script>\n\n<Pincode bind:code={pincode}>\n <PincodeInput />\n <PincodeInput value="2" />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div>code: <code>{JSON.stringify(pincode)}</code></div>\n',r(s,ms),r(s,$s),r(s,hs),r(s,vs),r(s,ys),r(s,xs),r(s,bs),r(s,ws),Z(Ps,ws,null),r(ws,Cs),r(ws,Ls),Zt&&Zt.m(Ls,null),r(Ls,Ms),Kt&&Kt.m(Ls,null),r(Ls,Hs),Yt&&Yt.m(Ls,null),r(Ls,js),r(s,Os),Os.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n const correctCode = "1234";\n\n let inputValue = "";\n let complete = false;\n\n $: success = complete && inputValue === correctCode;\n $: error = complete && !success;\n</script>\n\n<Pincode bind:complete bind:value={inputValue}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div class:complete class:success class:error>\n {#if !complete}\n Enter {correctCode.length - inputValue.length} more digit(s)...\n {/if}\n {#if success}Correct code{/if}\n {#if error}Incorrect code{/if}\n</div>\n',r(s,Ns),r(s,Ss),r(s,Es),r(s,_s),_s.innerHTML='<Pincode\n on:complete={(e) => {\n console.log(e.detail); // { code: string[]; value: string; }\n }}\n/>\n',r(s,Fs),r(s,As),r(s,qs),r(s,Ds),r(s,zs),r(s,Bs),r(s,Js),r(s,Rs),Z(Vs,Rs,null),r(Rs,Gs),r(Rs,Zs),r(Zs,Ks),r(Zs,Ys),r(Ys,Qs),r(Rs,Ws),r(Rs,Xs),r(Rs,na),r(Rs,sa),r(s,aa),aa.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let passcode = [];\n</script>\n\n<Pincode bind:code={passcode}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<div>code: <code>{JSON.stringify(passcode)}</code></div>\n\n<button on:click={() => (passcode = ["1", "2", "3", "4"])}> Set code </button>\n\n<button on:click={() => (passcode = ["", "", "", ""])}> Clear code </button>\n',r(s,ta),r(s,ea),r(s,pa),r(s,oa),r(s,ca),r(s,la),Z(ua,la,null),r(la,ia),r(la,ra),r(s,ka),ka.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let ref;\n</script>\n\n<Pincode bind:this={ref}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={ref.focusFirstInput}> Focus first input </button>\n',r(s,da),r(s,ga),r(s,fa),r(s,ma),r(s,$a),r(s,ha),Z(va,ha,null),r(ha,ya),r(ha,xa),r(s,ba),ba.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let pincodeRef;\n</script>\n\n<Pincode code={["9", "9"]} bind:this={pincodeRef}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={pincodeRef.focusNextEmptyInput}>\n Focus next empty input\n</button>\n',r(s,wa),r(s,Pa),r(s,Ia),r(s,Ta),r(s,Ca),r(s,La),Z(Ma,La,null),r(La,Ha),r(La,ja),r(s,Oa),Oa.innerHTML='<script>\n import { Pincode, PincodeInput } from "svelte-pincode";\n\n let passcodeRef;\n</script>\n\n<Pincode bind:this={passcodeRef}>\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n <PincodeInput />\n</Pincode>\n\n<button on:click={passcodeRef.focusLastInput}> Focus last input </button>\n',r(s,Na),r(s,Sa),r(s,Ea),r(s,_a),r(s,Fa),r(s,Aa),r(s,qa),r(s,Da),Da.innerHTML='/** Pincode **/\n:global([data-pincode]) {\n display: inline-flex;\n border: 1px solid #e0e0e0;\n}\n\n/** PincodeInput */\n:global([data-pincode] input) {\n width: 3rem;\n padding: 0.5rem 1rem;\n margin: 0;\n border: 0;\n border-radius: 0;\n text-align: center;\n}\n\n:global([data-pincode] input:focus) {\n z-index: 1;\n}\n\n:global([data-pincode] input:not(:last-of-type)) {\n border-right: 1px solid #e0e0e0;\n}\n',r(s,za),r(s,Ba),r(s,Ja),r(s,Ra),r(s,Va),r(s,Ua),Ua.innerHTML='<script>\n import Pincode from "svelte-pincode/src/unstyled/Pincode.svelte";\n import PincodeInput from "svelte-pincode/src/unstyled/PincodeInput.svelte";\n</script>\n',r(s,Ga),r(s,Za),r(s,Ka),r(s,Ya),r(s,Qa),r(s,Wa),r(s,Xa),r(s,nt),r(s,st),r(s,at),r(s,tt),r(s,et),r(s,pt),r(s,ot),r(s,ct),r(s,lt),r(s,ut),r(s,it),it.innerHTML='<Pincode\n on:complete={(e) => {\n console.log(e.detail); // { code: string[]; value: string; }\n }}\n on:clear\n/>\n',r(s,rt),r(s,kt),r(s,dt),r(s,gt),r(s,ft),r(s,mt),r(s,$t),r(s,ht),r(s,vt),r(s,yt),r(s,xt),r(s,bt),r(s,wt),r(s,Pt),r(s,It),r(s,Tt),r(s,Ct),r(s,Lt),r(s,Mt),r(s,Ht),r(s,jt),r(s,Ot),Nt=!0,St||(Et=[h(Rn,"click",n[15]),h(Xs,"click",n[20]),h(sa,"click",n[21]),h(ra,"click",(function(){p(n[8].focusFirstInput)&&n[8].focusFirstInput.apply(this,arguments)})),h(xa,"click",(function(){p(n[9].focusNextEmptyInput)&&n[9].focusNextEmptyInput.apply(this,arguments)})),h(ja,"click",(function(){p(n[10].focusLastInput)&&n[10].focusLastInput.apply(this,arguments)}))],St=!0)},p(s,[a]){n=s;const t={};33554432&a&&(t.$$scope={dirty:a,ctx:n}),!wn&&8&a&&(wn=!0,t.code=n[3],_((()=>wn=!1))),!Pn&&16&a&&(Pn=!0,t.value=n[4],_((()=>Pn=!1))),un.$set(t),(!Nt||8&a)&&_t!==(_t=JSON.stringify(n[3])+"")&&b(Mn,_t),(!Nt||16&a)&&Ft!==(Ft=JSON.stringify(n[4])+"")&&b(Sn,Ft);const e={};33554464&a&&(e.$$scope={dirty:a,ctx:n}),Bn.$set(e);const p={};33554432&a&&(p.$$scope={dirty:a,ctx:n}),ns.$set(p);const o={};33554432&a&&(o.$$scope={dirty:a,ctx:n}),!us&&64&a&&(us=!0,o.code=n[6],_((()=>us=!1))),ls.$set(o),(!Nt||64&a)&&At!==(At=JSON.stringify(n[6])+"")&&b(gs,At);const c={};33554432&a&&(c.$$scope={dirty:a,ctx:n}),!Is&&2&a&&(Is=!0,c.complete=n[1],_((()=>Is=!1))),!Ts&&1&a&&(Ts=!0,c.value=n[0],_((()=>Ts=!1))),Ps.$set(c),n[1]?Zt&&(Zt.d(1),Zt=null):Zt?Zt.p(n,a):(Zt=mn(n),Zt.c(),Zt.m(Ls,Ms)),n[2]?Kt||(Kt=$n(),Kt.c(),Kt.m(Ls,Hs)):Kt&&(Kt.d(1),Kt=null),n[11]?Yt||(Yt=hn(),Yt.c(),Yt.m(Ls,js)):Yt&&(Yt.d(1),Yt=null),(!Nt||2&a)&&w(Ls,"complete",n[1]),(!Nt||4&a)&&w(Ls,"success",n[2]),(!Nt||2048&a)&&w(Ls,"error",n[11]);const l={};33554432&a&&(l.$$scope={dirty:a,ctx:n}),!Us&&128&a&&(Us=!0,l.code=n[7],_((()=>Us=!1))),Vs.$set(l),(!Nt||128&a)&&qt!==(qt=JSON.stringify(n[7])+"")&&b(Qs,qt);const u={};33554432&a&&(u.$$scope={dirty:a,ctx:n}),ua.$set(u);const i={};33554432&a&&(i.$$scope={dirty:a,ctx:n}),va.$set(i);const r={};33554432&a&&(r.$$scope={dirty:a,ctx:n}),Ma.$set(r)},i(n){Nt||(J(un.$$.fragment,n),J(Bn.$$.fragment,n),J(ns.$$.fragment,n),J(ls.$$.fragment,n),J(Ps.$$.fragment,n),J(Vs.$$.fragment,n),J(ua.$$.fragment,n),J(va.$$.fragment,n),J(Ma.$$.fragment,n),Nt=!0)},o(n){R(un.$$.fragment,n),R(Bn.$$.fragment,n),R(ns.$$.fragment,n),R(ls.$$.fragment,n),R(Ps.$$.fragment,n),R(Vs.$$.fragment,n),R(ua.$$.fragment,n),R(va.$$.fragment,n),R(Ma.$$.fragment,n),Nt=!1},d(a){a&&g(s),K(un),K(Bn),K(ns),K(ls),K(Ps),Zt&&Zt.d(),Kt&&Kt.d(),Yt&&Yt.d(),K(Vs),n[22](null),K(ua),n[23](null),K(va),n[24](null),K(Ma),St=!1,e(Et)}}}const Pn="1234";function In(n,s,a){let t,e,p,o,c,l,u=[],i="",r=["1","","3"],k="",d=!1,g=[];return n.$$.update=()=>{3&n.$$.dirty&&a(2,t=d&&k===Pn),6&n.$$.dirty&&a(11,e=d&&!t)},[k,d,t,u,i,p,r,g,o,c,l,e,function(n){u=n,a(3,u)},function(n){i=n,a(4,i)},function(n){p=n,a(5,p)},()=>p.focus(),function(n){r=n,a(6,r)},function(n){d=n,a(1,d)},function(n){k=n,a(0,k)},function(n){g=n,a(7,g)},()=>a(7,g=["1","2","3","4"]),()=>a(7,g=["","","",""]),function(n){H[n?"unshift":"push"]((()=>{o=n,a(8,o)}))},function(n){H[n?"unshift":"push"]((()=>{c=n,a(9,c)}))},function(n){H[n?"unshift":"push"]((()=>{l=n,a(10,l)}))}]}return new class extends W{constructor(n){super(),Q(this,n,In,wn,o,{})}}({target:document.body})}();