var PatternLock=function(){"use strict";class t{constructor(){this.listeners={}}on(t,e){return t=t.toLowerCase(),this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e),this}off(t,e){var s;return t=t.toLowerCase(),this.listeners[t]=null===(s=this.listeners[t])||void 0===s?void 0:s.filter((t=>t!=e)),this}passthrough(t,e){return this.on(t,((...s)=>e.emit.apply(e,[t,...s]))),this}emit(t,...e){var s;t=t.toLowerCase(),null===(s=this.listeners[t])||void 0===s||s.forEach((t=>{setTimeout((()=>t.apply(this,e)))}))}}class e{static on(t,e,s){e.split(" ").forEach((e=>t.addEventListener(e,s)))}static once(t,e,s){e.split(" ").forEach((e=>{let i=r=>{t.removeEventListener(e,i),s(r)};t.addEventListener(e,i)}))}static off(t,e,s){e.split(" ").forEach((e=>t.removeEventListener(e,s)))}}var s="touchmove mousemove",i="http://www.w3.org/2000/svg";class r extends t{constructor(t){super(),this.svg=t,this.selectedDots=[],this.availableDots=[],this.availableDots=Array.from(t.querySelectorAll(".lock-dots circle")),this.lineCanvas=t.querySelector(".lock-lines"),this.markerCanvas=t.querySelector(".lock-actives"),this.pt=this.svg.createSVGPoint()}startTracking(){this.discoverDotHandler=t=>this.discoverDot(t),e.on(this.svg,s,this.discoverDotHandler)}endTracking(){this.stopTrack(this.currentline),this.currentline&&this.currentline.remove(),e.off(this.svg,s,this.discoverDotHandler)}clear(){this.currentline=void 0,this.updateLinePosHandler=void 0,this.selectedDots=[],this.lineCanvas.innerHTML="",this.markerCanvas.innerHTML=""}isUsed(t){return this.selectedDots.some((e=>e===t))}isAvailable(t){return this.availableDots.some((e=>e===t))}getUpdateLinePosHandler(t){return e=>{if(e.preventDefault(),this.currentline!==t)return;let s=this.svgPosition(e.target,e);return t.setAttribute("x2",s.x.toString()),t.setAttribute("y2",s.y.toString()),!1}}discoverDot(t){let e=t.target;if("touchmove"==t.type){let{x:s,y:i}=n(t);e=document.elementFromPoint(s,i)}this.isAvailable(e)&&!this.isUsed(e)&&(this.stopTrack(this.currentline,e),this.currentline=this.beginTrack(e))}beginTrack(t){this.selectedDots.push(t),this.emit("select",Array.prototype.indexOf.call(t.parentElement.children,t),t);let s=t.getAttribute("cx"),r=t.getAttribute("cy");var n=function(t,e,s,r){var n=document.createElementNS(i,"line");n.setAttribute("x1",t.toString()),n.setAttribute("y1",e),void 0===s||null==r?(n.setAttribute("x2",t),n.setAttribute("y2",e)):(n.setAttribute("x2",s),n.setAttribute("y2",r));return n}(s,r),o=function(t,e){var s=document.createElementNS(i,"circle");return s.setAttribute("cx",t),s.setAttribute("cy",e),s.setAttribute("r","6"),s}(s,r);return this.markerCanvas.appendChild(o),this.updateLinePosHandler=this.getUpdateLinePosHandler(n),e.on(this.svg,"touchmove mousemove",this.updateLinePosHandler),this.lineCanvas.appendChild(n),n}stopTrack(t,s){if(this.updateLinePosHandler&&(e.off(this.svg,"touchmove mousemove",this.updateLinePosHandler),this.updateLinePosHandler=void 0),void 0===t||void 0===s)return;let i=s.getAttribute("cx"),r=s.getAttribute("cy");t.setAttribute("x2",i),t.setAttribute("y2",r)}svgPosition(t,e){let{x:s,y:i}=n(e);return this.pt.x=s,this.pt.y=i,this.pt.matrixTransform(t.getScreenCTM().inverse())}}function n(t){const e=t;return{x:e.clientX||e.touches[0].clientX,y:e.clientY||e.touches[0].clientY}}const o='\n<svg class="pattern-lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">\n    <g class="lock-actives"></g>\n    <g class="lock-lines"></g>\n    <g class="lock-dots">\n        <circle cx="20" cy="20" r="2"/>\n        <circle cx="50" cy="20" r="2"/>\n        <circle cx="80" cy="20" r="2"/>\n        <circle cx="20" cy="50" r="2"/>\n        <circle cx="50" cy="50" r="2"/>\n        <circle cx="80" cy="50" r="2"/>\n        <circle cx="20" cy="80" r="2"/>\n        <circle cx="50" cy="80" r="2"/>\n        <circle cx="80" cy="80" r="2"/>\n    </g>\n</svg>\n',c=t=>t.preventDefault(),l=()=>{window.addEventListener("DOMMouseScroll",c,!1),window.onwheel=c,window.onmousewheel=c,window.ontouchmove=c},a=()=>{window.removeEventListener("DOMMouseScroll",c,!1),window.onmousewheel=null,window.onwheel=null,window.ontouchmove=null};return class extends t{constructor(t){super(),this.selectedDotIndexes=[],this.options=Object.assign({vibrate:!1},t)}render(t){if(this.lineCanvas)throw new Error("PatternLock rendered already");return t.innerHTML=o,this.svg=t.firstElementChild,this.lineCanvas=new r(this.svg),this.lineCanvas.passthrough("select",this),this.on("select",((t,e)=>{this.selectedDotIndexes.push(t),this.options.vibrate&&window.navigator.vibrate(25)})),this.initEvents(),this}getPattern(){return parseInt(this.selectedDotIndexes.map((t=>t+1)).join(""))}clear(){return this.selectedDotIndexes=[],this.svg.classList.remove("success","error"),this.lineCanvas.clear(),this.emit("clear"),this}success(){return this.svg.classList.remove("error"),this.svg.classList.add("success"),this}failure(){return this.svg.classList.add("error"),this.svg.classList.remove("success"),this}initEvents(){e.on(this.svg,"touchstart mousedown",(t=>{this.emit("selectionStart"),this.clear(),t.preventDefault(),l(),this.lineCanvas.startTracking();let s="touchstart"==t.type?"touchend":"mouseup";e.once(document,s,(t=>{this.emit("selectionEnd"),a(),this.lineCanvas.endTracking(),this.selectedDotIndexes.length&&this.emit("complete",this.getPattern())}))}))}}}();