@smileid/web-components 11.0.3 → 11.2.0

package/dist/src/components/signature-pad/src/index.js

@@ -1,4 +1,790 @@
-(()=>{var C=Object.defineProperty;var M=(u,t,e)=>t in u?C(u,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):u[t]=e;var x=(u,t,e)=>M(u,typeof t!="symbol"?t+"":t,e);var w=class{constructor(t,e,i,s){if(isNaN(t)||isNaN(e))throw new Error("Point is invalid: (".concat(t,", ").concat(e,")"));this.x=+t,this.y=+e,this.pressure=i||0,this.time=s||Date.now()}distanceTo(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))}equals(t){return this.x===t.x&&this.y===t.y&&this.pressure===t.pressure&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}},y=class u{static fromPoints(t,e){let i=this.calculateControlPoints(t[0],t[1],t[2]).c2,s=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new u(t[1],i,s,t[2],e.start,e.end)}static calculateControlPoints(t,e,i){let s=t.x-e.x,o=t.y-e.y,n=e.x-i.x,h=e.y-i.y,a={x:(t.x+e.x)/2,y:(t.y+e.y)/2},r={x:(e.x+i.x)/2,y:(e.y+i.y)/2},c=Math.sqrt(s*s+o*o),l=Math.sqrt(n*n+h*h),m=a.x-r.x,p=a.y-r.y,d=l/(c+l),v={x:r.x+m*d,y:r.y+p*d},S=e.x-v.x,k=e.y-v.y;return{c1:new w(a.x+S,a.y+k),c2:new w(r.x+S,r.y+k)}}constructor(t,e,i,s,o,n){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=s,this.startWidth=o,this.endWidth=n}length(){let e=0,i,s;for(let o=0;o<=10;o+=1){let n=o/10,h=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),a=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(o>0){let r=h-i,c=a-s;e+=Math.sqrt(r*r+c*c)}i=h,s=a}return e}point(t,e,i,s,o){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*s*(1-t)*t*t+o*t*t*t}},b=class{constructor(){try{this._et=new EventTarget}catch(t){this._et=document}}addEventListener(t,e,i){this._et.addEventListener(t,e,i)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,i){this._et.removeEventListener(t,e,i)}};function L(u,t=250){let e=0,i=null,s,o,n,h=()=>{e=Date.now(),i=null,s=u.apply(o,n),i||(o=null,n=[])};return function(...r){let c=Date.now(),l=t-(c-e);return o=this,n=r,l<=0||l>t?(i&&(clearTimeout(i),i=null),e=c,s=u.apply(o,n),i||(o=null,n=[])):i||(i=window.setTimeout(h,l)),s}}var f=class u extends b{constructor(t,e={}){var i,s,o;super(),this.canvas=t,this._drawingStroke=!1,this._isEmpty=!0,this._lastPoints=[],this._data=[],this._lastVelocity=0,this._lastWidth=0,this._handleMouseDown=n=>{!this._isLeftButtonPressed(n,!0)||this._drawingStroke||this._strokeBegin(this._pointerEventToSignatureEvent(n))},this._handleMouseMove=n=>{if(!this._isLeftButtonPressed(n,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(n),!1);return}this._strokeMoveUpdate(this._pointerEventToSignatureEvent(n))},this._handleMouseUp=n=>{this._isLeftButtonPressed(n)||this._strokeEnd(this._pointerEventToSignatureEvent(n))},this._handleTouchStart=n=>{n.targetTouches.length!==1||this._drawingStroke||(n.cancelable&&n.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(n)))},this._handleTouchMove=n=>{if(n.targetTouches.length===1){if(n.cancelable&&n.preventDefault(),!this._drawingStroke){this._strokeEnd(this._touchEventToSignatureEvent(n),!1);return}this._strokeMoveUpdate(this._touchEventToSignatureEvent(n))}},this._handleTouchEnd=n=>{n.targetTouches.length===0&&(n.cancelable&&n.preventDefault(),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this._strokeEnd(this._touchEventToSignatureEvent(n)))},this._handlePointerDown=n=>{!this._isLeftButtonPressed(n)||this._drawingStroke||(n.preventDefault(),this._strokeBegin(this._pointerEventToSignatureEvent(n)))},this._handlePointerMove=n=>{if(!this._isLeftButtonPressed(n,!0)||!this._drawingStroke){this._strokeEnd(this._pointerEventToSignatureEvent(n),!1);return}n.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(n))},this._handlePointerUp=n=>{this._isLeftButtonPressed(n)||(n.preventDefault(),this._strokeEnd(this._pointerEventToSignatureEvent(n)))},this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle=(i=e.throttle)!==null&&i!==void 0?i:16,this.minDistance=(s=e.minDistance)!==null&&s!==void 0?s:5,this.dotSize=e.dotSize||0,this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=e.compositeOperation||"source-over",this.canvasContextOptions=(o=e.canvasContextOptions)!==null&&o!==void 0?o:{},this._strokeMoveUpdate=this.throttle?L(u.prototype._strokeUpdate,this.throttle):u.prototype._strokeUpdate,this._ctx=t.getContext("2d",this.canvasContextOptions),this.clear(),this.on()}clear(){let{_ctx:t,canvas:e}=this;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(this._getPointGroupOptions()),this._isEmpty=!0}fromDataURL(t,e={}){return new Promise((i,s)=>{let o=new Image,n=e.ratio||window.devicePixelRatio||1,h=e.width||this.canvas.width/n,a=e.height||this.canvas.height/n,r=e.xOffset||0,c=e.yOffset||0;this._reset(this._getPointGroupOptions()),o.onload=()=>{this._ctx.drawImage(o,r,c,h,a),i()},o.onerror=l=>{s(l)},o.crossOrigin="anonymous",o.src=t,this._isEmpty=!1})}toDataURL(t="image/png",e){switch(t){case"image/svg+xml":return typeof e!="object"&&(e=void 0),"data:image/svg+xml;base64,".concat(btoa(this.toSVG(e)));default:return typeof e!="number"&&(e=void 0),this.canvas.toDataURL(t,e)}}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",this.canvas.style.userSelect="none";let t=/Macintosh/.test(navigator.userAgent)&&"ontouchstart"in document;window.PointerEvent&&!t?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.style.userSelect="auto",this.canvas.removeEventListener("pointerdown",this._handlePointerDown),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this._removeMoveUpEventListeners()}_getListenerFunctions(){var t;let e=window.document===this.canvas.ownerDocument?window:(t=this.canvas.ownerDocument.defaultView)!==null&&t!==void 0?t:this.canvas.ownerDocument;return{addEventListener:e.addEventListener.bind(e),removeEventListener:e.removeEventListener.bind(e)}}_removeMoveUpEventListeners(){let{removeEventListener:t}=this._getListenerFunctions();t("pointermove",this._handlePointerMove),t("pointerup",this._handlePointerUp),t("mousemove",this._handleMouseMove),t("mouseup",this._handleMouseUp),t("touchmove",this._handleTouchMove),t("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(t,{clear:e=!0}={}){e&&this.clear(),this._fromData(t,this._drawCurve.bind(this),this._drawDot.bind(this)),this._data=this._data.concat(t)}toData(){return this._data}_isLeftButtonPressed(t,e){return e?t.buttons===1:(t.buttons&1)===1}_pointerEventToSignatureEvent(t){return{event:t,type:t.type,x:t.clientX,y:t.clientY,pressure:"pressure"in t?t.pressure:0}}_touchEventToSignatureEvent(t){let e=t.changedTouches[0];return{event:t,type:t.type,x:e.clientX,y:e.clientY,pressure:e.force}}_getPointGroupOptions(t){return{penColor:t&&"penColor"in t?t.penColor:this.penColor,dotSize:t&&"dotSize"in t?t.dotSize:this.dotSize,minWidth:t&&"minWidth"in t?t.minWidth:this.minWidth,maxWidth:t&&"maxWidth"in t?t.maxWidth:this.maxWidth,velocityFilterWeight:t&&"velocityFilterWeight"in t?t.velocityFilterWeight:this.velocityFilterWeight,compositeOperation:t&&"compositeOperation"in t?t.compositeOperation:this.compositeOperation}}_strokeBegin(t){if(!this.dispatchEvent(new CustomEvent("beginStroke",{detail:t,cancelable:!0})))return;let{addEventListener:i}=this._getListenerFunctions();switch(t.event.type){case"mousedown":i("mousemove",this._handleMouseMove),i("mouseup",this._handleMouseUp);break;case"touchstart":i("touchmove",this._handleTouchMove),i("touchend",this._handleTouchEnd);break;case"pointerdown":i("pointermove",this._handlePointerMove),i("pointerup",this._handlePointerUp);break}this._drawingStroke=!0;let s=this._getPointGroupOptions(),o=Object.assign(Object.assign({},s),{points:[]});this._data.push(o),this._reset(s),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(this._data.length===0){this._strokeBegin(t);return}this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),i=this._data[this._data.length-1],s=i.points,o=s.length>0&&s[s.length-1],n=o?e.distanceTo(o)<=this.minDistance:!1,h=this._getPointGroupOptions(i);if(!o||!(o&&n)){let a=this._addPoint(e,h);o?a&&this._drawCurve(a,h):this._drawDot(e,h),s.push({time:e.time,x:e.x,y:e.y,pressure:e.pressure})}this.dispatchEvent(new CustomEvent("afterUpdateStroke",{detail:t}))}_strokeEnd(t,e=!0){this._removeMoveUpEventListeners(),this._drawingStroke&&(e&&this._strokeUpdate(t),this._drawingStroke=!1,this.dispatchEvent(new CustomEvent("endStroke",{detail:t})))}_handlePointerEvents(){this._drawingStroke=!1,this.canvas.addEventListener("pointerdown",this._handlePointerDown)}_handleMouseEvents(){this._drawingStroke=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown)}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart)}_reset(t){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(t.minWidth+t.maxWidth)/2,this._ctx.fillStyle=t.penColor,this._ctx.globalCompositeOperation=t.compositeOperation}_createPoint(t,e,i){let s=this.canvas.getBoundingClientRect();return new w(t-s.left,e-s.top,i,new Date().getTime())}_addPoint(t,e){let{_lastPoints:i}=this;if(i.push(t),i.length>2){i.length===3&&i.unshift(i[0]);let s=this._calculateCurveWidths(i[1],i[2],e),o=y.fromPoints(i,s);return i.shift(),o}return null}_calculateCurveWidths(t,e,i){let s=i.velocityFilterWeight*e.velocityFrom(t)+(1-i.velocityFilterWeight)*this._lastVelocity,o=this._strokeWidth(s,i),n={end:o,start:this._lastWidth};return this._lastVelocity=s,this._lastWidth=o,n}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,i){let s=this._ctx;s.moveTo(t,e),s.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let i=this._ctx,s=t.endWidth-t.startWidth,o=Math.ceil(t.length())*2;i.beginPath(),i.fillStyle=e.penColor;for(let n=0;n<o;n+=1){let h=n/o,a=h*h,r=a*h,c=1-h,l=c*c,m=l*c,p=m*t.startPoint.x;p+=3*l*h*t.control1.x,p+=3*c*a*t.control2.x,p+=r*t.endPoint.x;let d=m*t.startPoint.y;d+=3*l*h*t.control1.y,d+=3*c*a*t.control2.y,d+=r*t.endPoint.y;let v=Math.min(t.startWidth+r*s,e.maxWidth);this._drawCurveSegment(p,d,v)}i.closePath(),i.fill()}_drawDot(t,e){let i=this._ctx,s=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;i.beginPath(),this._drawCurveSegment(t.x,t.y,s),i.closePath(),i.fillStyle=e.penColor,i.fill()}_fromData(t,e,i){for(let s of t){let{points:o}=s,n=this._getPointGroupOptions(s);if(o.length>1)for(let h=0;h<o.length;h+=1){let a=o[h],r=new w(a.x,a.y,a.pressure,a.time);h===0&&this._reset(n);let c=this._addPoint(r,n);c&&e(c,n)}else this._reset(n),i(o[0],n)}}toSVG({includeBackgroundColor:t=!1}={}){let e=this._data,i=Math.max(window.devicePixelRatio||1,1),s=0,o=0,n=this.canvas.width/i,h=this.canvas.height/i,a=document.createElementNS("http://www.w3.org/2000/svg","svg");if(a.setAttribute("xmlns","http://www.w3.org/2000/svg"),a.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),a.setAttribute("viewBox","".concat(s," ").concat(o," ").concat(n," ").concat(h)),a.setAttribute("width",n.toString()),a.setAttribute("height",h.toString()),t&&this.backgroundColor){let r=document.createElement("rect");r.setAttribute("width","100%"),r.setAttribute("height","100%"),r.setAttribute("fill",this.backgroundColor),a.appendChild(r)}return this._fromData(e,(r,{penColor:c})=>{let l=document.createElement("path");if(!isNaN(r.control1.x)&&!isNaN(r.control1.y)&&!isNaN(r.control2.x)&&!isNaN(r.control2.y)){let m="M ".concat(r.startPoint.x.toFixed(3),",").concat(r.startPoint.y.toFixed(3)," ")+"C ".concat(r.control1.x.toFixed(3),",").concat(r.control1.y.toFixed(3)," ")+"".concat(r.control2.x.toFixed(3),",").concat(r.control2.y.toFixed(3)," ")+"".concat(r.endPoint.x.toFixed(3),",").concat(r.endPoint.y.toFixed(3));l.setAttribute("d",m),l.setAttribute("stroke-width",(r.endWidth*2.25).toFixed(3)),l.setAttribute("stroke",c),l.setAttribute("fill","none"),l.setAttribute("stroke-linecap","round"),a.appendChild(l)}},(r,{penColor:c,dotSize:l,minWidth:m,maxWidth:p})=>{let d=document.createElement("circle"),v=l>0?l:(m+p)/2;d.setAttribute("r",v.toString()),d.setAttribute("cx",r.x.toString()),d.setAttribute("cy",r.y.toString()),d.setAttribute("fill",c),a.appendChild(d)}),a.outerHTML}};var g=class g{static getHumanSize(t){let e=["B","kB","MB","GB","TB","PB","EB","ZB","YB"],i=Math.min(Math.floor(Math.log(t)/Math.log(1024)),e.length-1),s=t/1024**i;return i===0?"".concat(t," bytes"):"".concat(s.toFixed(0)," ").concat(e[i])}static getData(t){return new Promise((e,i)=>{let s=new FileReader;s.onload=o=>{e(o.target.result)},s.onerror=()=>{i(new Error("An error occurred reading the file. Please check the file, and try again"))},s.readAsDataURL(t)})}static async retrieve(t){if(t.length>1)throw new Error("Only one file upload is permitted at a time");let e=t[0];if(!g.supportedTypes.includes(e.type))throw new Error("Unsupported file format. Please ensure that you are providing a JPG, PNG or SVG image");if(e.size>g.memoryLimit)throw new Error("".concat(e.name," is too large. Please ensure that the file is less than ").concat(g.getHumanSize(g.memoryLimit),"."));return await g.getData(e)}};x(g,"memoryLimit",2048e3),x(g,"supportedTypes",["image/jpeg","image/png","image/svg+xml"]);var E=g,_=class extends HTMLElement{connectedCallback(){let t=this.attachShadow({mode:"open"}),e=document.createElement("style");e.textContent='\n:host {\n  display: block;\n  block-size: auto;\n  inline-size: 30rem;\n  max-inline-size: 100%;\n  position: relative;\n  --color-active: #2D2B2A;\n  --color-default: #001096;\n  --color-disabled: #848282;\n}\n\n:host::part(upload) {\n  text-align: center;\n}\n\n:host::part(signature-controls) {\n  display: inline-flex;\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n:host::part(upload) svg + * {\n  margin-inline-start: .5rem;\n}\n\n:host::part(canvas) {\n  background-color: #F9F0E7;\n  --dot-bg: #F9F0E7;\n  --dot-color: black;\n  --dot-size: 1px;\n  --dot-space: 22px;\n  background:\n    linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\n    linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\n    var(--dot-color);\n  border-radius: 2rem;\n  inline-size: 30rem;\n  max-inline-size: 100%;\n  aspect-ratio: 2 / 1;\n}\n\n:host::part(upload-preview-image) {\n  max-inline-size: 10rem;\n  margin-inline: auto;\n}\n\n.visually-hidden {\n  clip: rect(0 0 0 0); \n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap; \n  width: 1px;\n}\n\nbutton,\nlabel {\n  font: inherit;\n  cursor: pointer;\n}\n\nlabel {\n  display: inline-flex;\n  text-decoration: underline;\n}\n\nlabel svg + * {\n  margin-inline-start: .5rem;\n}\n\n[type="file"] {\n  display: none;\n}\n\n.center {\n  text-align: center;\n  margin-inline: auto;\n}\n\n.color-red {\n  color: red;\n}\n\nbutton[data-variant="icon"] {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  border: 0px;\n}\n\nbutton[data-variant="text"] {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  border: 0px;\n  text-decoration: underline;\n  display: inline-flex;\n  align-items: baseline;\n}\n\nbutton[data-variant="solid"] {\n  --button-color: '.concat(this.themeColor,";\n  border-radius: 2.5rem;\n  border: 0;\n  background-color: transparent;\n  color: #fff;\n  cursor: pointer;\n  inline-size: 100%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: 600;\n  padding: .75rem 1.5rem;\n  text-align: center;\n  background-color: var(--button-color);\n  border: 2px solid var(--button-color);\n}\n\nbutton:hover,\nbutton:focus,\nbutton:active {\n  --button-color: var(--color-active);\n}\n\nbutton:disabled {\n  --button-color: var(--color-disabled);\n}\n");let i=document.createElement("div"),s=document.createElement("div");s.innerHTML='\n      <p id="error" class="color-red | center"><p>\n    ';let o=document.createElement("div");o.setAttribute("id","controls"),o.setAttribute("part","signature-controls"),o.innerHTML='\n      <button data-variant="icon" type="button" name="clear" id="clear">\n        <span class="visually-hidden">\n          Clear Signature\n        </span>\n        <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="18" viewBox="0 0 17 18">\n          <path d="M3.314 15.646a8.004 8.004 0 01-2.217-4.257 8.06 8.06 0 01.545-4.655l1.789.788a6.062 6.062 0 001.264 6.737 6.033 6.033 0 008.551 0c2.358-2.37 2.358-6.224 0-8.592a5.996 5.996 0 00-4.405-1.782l.662 2.354-3.128-.796-3.127-.796 2.25-2.324L7.748 0l.55 1.953a7.966 7.966 0 016.33 2.326 8.004 8.004 0 012.342 5.684 8.005 8.005 0 01-2.343 5.683A7.928 7.928 0 018.97 18a7.928 7.928 0 01-5.656-2.354z" fill="currentColor" />\n        </svg>\n      </button>\n    ';let n=document.createElement("canvas"),r=this.parentElement.closest(":not([hidden])").querySelector(":not([hidden])").offsetWidth,l=30*getComputedStyle(document.documentElement).fontSize.split("px")[0],m=2;n.width=r<l?r:l,n.height=(r<l?r:l)/m,n.setAttribute("id","signature-canvas"),n.setAttribute("part","canvas");let p=document.createElement("div");p.setAttribute("id","signature-upload-wrapper"),p.innerHTML='\n      <p part="upload">\n        <strong>or</strong>\n        <label>\n          <input type=\'file\' onclick=\'this.value=null;\' id=\'upload-signature\' accept=\'image/jpeg, image/png, image/svg+xml\' />\n          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">\n            <rect width="16" height="16" fill="#F9F0E7" rx="2"/>\n            <mask id="sign" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha">\n              <rect width="16" height="16" fill="#D9D9D9" rx="2"/>\n            </mask>\n            <g mask="url(#sign)">\n              <path fill="#2D2B2A" d="M0 13.333h16V16H0z"/>\n            </g>\n            <path fill="#2D2B2A" fill-rule="evenodd" d="M2.69 7.346a.23.23 0 0 1 .059-.073.275.275 0 0 1 .284-.034c.07.036.146.064.224.084h.12c0-.012.105-.048.105-.395a.796.796 0 0 1 .211-.61.667.667 0 0 1 .607-.096c.202.061.39.154.555.275.194.138.38.286.555.443.146.134.31.25.489.347l.092.047c.119.06.238-.023.185-.143l-.04-.12a.817.817 0 0 1-.066-.694.675.675 0 0 1 .244-.273.774.774 0 0 1 .364-.12c.324-.028.651 0 .964.083h.026c.027-.861.225-1.83.82-2.523.593-.694 1.478-.993 2.205-.837.726.155 1.307.73 1.307 1.602 0 1.34-.872 2.26-1.915 2.93.471.374.85.835 1.11 1.351.027.046.05.094.065.144h.014a.55.55 0 0 0 .079.203.44.44 0 0 0 .04.18c.002.025.011.05.026.07h-.013c.037.17.041.344.013.515a.955.955 0 0 1-.188.493 1.097 1.097 0 0 1-.433.344 1.346 1.346 0 0 1-1.122.012 2.194 2.194 0 0 1-.846-.67 5.024 5.024 0 0 1-.462-.681h-.026a.502.502 0 0 0-.106-.144.014.014 0 0 1-.01-.003.011.011 0 0 1-.003-.009.035.035 0 0 1-.013-.023.047.047 0 0 1-.011-.017.626.626 0 0 0-.055-.163.24.24 0 0 0-.014-.095h.014a3.477 3.477 0 0 1-.198-.49 6.318 6.318 0 0 1-.278-1.699L7.51 6.51c-.243-.07-.5-.094-.753-.071-.158.024-.198.071-.211.107-.014.036-.04.168.053.359.092.191.171.478.118.658a.45.45 0 0 1-.21.25.66.66 0 0 1-.305.06 1.521 1.521 0 0 1-.568-.19 3.533 3.533 0 0 1-.58-.42 3.54 3.54 0 0 0-.49-.394 1.49 1.49 0 0 0-.409-.203c-.053-.024-.079-.024-.092-.012H4.05c-.014.012-.066.072-.066.275 0 .395-.12.705-.423.813a.813.813 0 0 1-.41.024 1.646 1.646 0 0 1-.343-.12.237.237 0 0 1-.126-.127.208.208 0 0 1 .007-.172Zm5.731.766c.068.204.152.404.251.598.011.053.03.105.053.155.036.068.08.132.132.191.02.05.047.099.08.144.085.152.186.296.303.43.167.22.389.4.647.526a.847.847 0 0 0 .687-.011.655.655 0 0 0 .247-.204.573.573 0 0 0 .11-.287 1.435 1.435 0 0 0-.04-.454h-.014a.496.496 0 0 0-.079-.335.491.491 0 0 0-.119-.191 3.842 3.842 0 0 0-1.017-1.16l-.356.18a.253.253 0 0 1-.193.027.248.248 0 0 1-.088-.041.22.22 0 0 1-.063-.07.219.219 0 0 1-.02-.172.242.242 0 0 1 .113-.14l.172-.083a3.388 3.388 0 0 0-.463-.251l-.58-.24c.022.47.101.935.237 1.388Zm.568-1.555c.24.12.474.252.7.395 1.017-.634 1.81-1.459 1.81-2.63 0-.67-.41-1.053-.912-1.16-.502-.108-1.189.083-1.704.669-.515.586-.7 1.47-.713 2.32v.083c.251.084.515.192.819.323Z" clip-rule="evenodd"/>\n          </svg>\n          <span>upload a signature</span>\n        </label>\n      </p>\n    ';let d=document.createElement("p");d.innerHTML='\n      <button data-variant="solid" type="button" name="publish" id="publish">\n        <span>\n          Continue\n        </span>\n        <svg\n          aria-hidden="true"\n          width="25"\n          height="24"\n          fill="none"\n          xmlns="http://www.w3.org/2000/svg"\n        >\n          <path\n            d="M7 12h11m0 0-4.588-4M18 12l-4.588 4"\n            stroke="#fff"\n            stroke-width="1.5"\n            stroke-linecap="round"\n            stroke-linejoin="round"\n          />\n        </svg>\n      </button>\n    ',i.appendChild(s),i.appendChild(o),i.appendChild(n),this.allowUpload&&i.appendChild(p),i.appendChild(d),t.appendChild(e),t.appendChild(i),this.core=new f(n),this.errorMessage=s.querySelector("#error"),window&&(window.onresize=this.resizeCanvas()),this.clearSignatureButton=o.querySelector("#clear"),this.clearSignatureButton.addEventListener("click",()=>this.clearSignature()),this.uploadSignatureButton=p.querySelector("#upload-signature"),this.uploadSignatureButton.addEventListener("change",v=>this.uploadSignature(v)),this.publishSignatureButton=d.querySelector("#publish"),this.publishSignatureButton.addEventListener("click",()=>this.publishSignature())}disconnectedCallback(){this.publishSignatureButton.removeEventListener("click",()=>this.publishSignature()),this.clearSignatureButton.removeEventListener("click",()=>this.clearSignature()),this.uploadSignatureButton.removeEventListener("change",t=>this.uploadSignature(t))}resizeCanvas(){let t=this.shadowRoot.querySelector("canvas"),e=Math.max(window.devicePixelRatio||1,1);t.width=(t.offsetWidth||t.width)*e,t.height=(t.offsetHeight||t.height)*e,t.getContext("2d").scale(e,e),this.core.fromData(this.core.toData())}publishSignature(){try{this.resetErrorMessage();let t=this.shadowRoot.querySelector("img"),e=t?t.src:void 0;if(!e&&!this.core.isEmpty()&&(e=this.core.toDataURL("image/svg+xml")),e)this.dispatchEvent(new CustomEvent("signature-pad.publish",{detail:e}));else throw new Error("No signature present. ".concat(this.allowUpload?"Draw or upload":"Draw"," a signature"))}catch(t){this.handleError(t.message)}}resetErrorMessage(){this.errorMessage.textContent=""}handleError(t){this.errorMessage.textContent=t}clearSignature(){this.resetErrorMessage();let t=this.shadowRoot.querySelector("canvas"),e=this.shadowRoot.querySelector("img");e&&(e.remove(),t.removeAttribute("hidden")),this.core.clear()}previewUpload(t){let e=this.shadowRoot.querySelector("canvas"),i=this.shadowRoot.querySelector("img");i||(i=document.createElement("img")),i.src=t,i.setAttribute("part","upload-preview-image"),e.setAttribute("hidden",!0),e.insertAdjacentElement("afterend",i)}async uploadSignature(t){try{this.resetErrorMessage();let{files:e}=t.target,i=await E.retrieve(e);this.previewUpload(i)}catch(e){this.handleError(e.message)}}get allowUpload(){return this.hasAttribute("allow-upload")}get themeColor(){return this.getAttribute("theme-color")||"#001096"}};"customElements"in window&&!window.customElements.get("smileid-signature-pad")&&window.customElements.define("smileid-signature-pad",_);var P=_;var z=P;})();
+(() => {
+  var C = Object.defineProperty;
+  var M = (u, t, e) =>
+    t in u
+      ? C(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e })
+      : (u[t] = e);
+  var x = (u, t, e) => M(u, typeof t != 'symbol' ? t + '' : t, e);
+  var w = class {
+      constructor(t, e, i, s) {
+        if (isNaN(t) || isNaN(e))
+          throw new Error('Point is invalid: ('.concat(t, ', ').concat(e, ')'));
+        ((this.x = +t),
+          (this.y = +e),
+          (this.pressure = i || 0),
+          (this.time = s || Date.now()));
+      }
+      distanceTo(t) {
+        return Math.sqrt(Math.pow(this.x - t.x, 2) + Math.pow(this.y - t.y, 2));
+      }
+      equals(t) {
+        return (
+          this.x === t.x &&
+          this.y === t.y &&
+          this.pressure === t.pressure &&
+          this.time === t.time
+        );
+      }
+      velocityFrom(t) {
+        return this.time !== t.time
+          ? this.distanceTo(t) / (this.time - t.time)
+          : 0;
+      }
+    },
+    y = class u {
+      static fromPoints(t, e) {
+        let i = this.calculateControlPoints(t[0], t[1], t[2]).c2,
+          s = this.calculateControlPoints(t[1], t[2], t[3]).c1;
+        return new u(t[1], i, s, t[2], e.start, e.end);
+      }
+      static calculateControlPoints(t, e, i) {
+        let s = t.x - e.x,
+          o = t.y - e.y,
+          n = e.x - i.x,
+          h = e.y - i.y,
+          a = { x: (t.x + e.x) / 2, y: (t.y + e.y) / 2 },
+          r = { x: (e.x + i.x) / 2, y: (e.y + i.y) / 2 },
+          c = Math.sqrt(s * s + o * o),
+          l = Math.sqrt(n * n + h * h),
+          m = a.x - r.x,
+          p = a.y - r.y,
+          d = l / (c + l),
+          v = { x: r.x + m * d, y: r.y + p * d },
+          S = e.x - v.x,
+          k = e.y - v.y;
+        return { c1: new w(a.x + S, a.y + k), c2: new w(r.x + S, r.y + k) };
+      }
+      constructor(t, e, i, s, o, n) {
+        ((this.startPoint = t),
+          (this.control2 = e),
+          (this.control1 = i),
+          (this.endPoint = s),
+          (this.startWidth = o),
+          (this.endWidth = n));
+      }
+      length() {
+        let e = 0,
+          i,
+          s;
+        for (let o = 0; o <= 10; o += 1) {
+          let n = o / 10,
+            h = this.point(
+              n,
+              this.startPoint.x,
+              this.control1.x,
+              this.control2.x,
+              this.endPoint.x,
+            ),
+            a = this.point(
+              n,
+              this.startPoint.y,
+              this.control1.y,
+              this.control2.y,
+              this.endPoint.y,
+            );
+          if (o > 0) {
+            let r = h - i,
+              c = a - s;
+            e += Math.sqrt(r * r + c * c);
+          }
+          ((i = h), (s = a));
+        }
+        return e;
+      }
+      point(t, e, i, s, o) {
+        return (
+          e * (1 - t) * (1 - t) * (1 - t) +
+          3 * i * (1 - t) * (1 - t) * t +
+          3 * s * (1 - t) * t * t +
+          o * t * t * t
+        );
+      }
+    },
+    b = class {
+      constructor() {
+        try {
+          this._et = new EventTarget();
+        } catch (t) {
+          this._et = document;
+        }
+      }
+      addEventListener(t, e, i) {
+        this._et.addEventListener(t, e, i);
+      }
+      dispatchEvent(t) {
+        return this._et.dispatchEvent(t);
+      }
+      removeEventListener(t, e, i) {
+        this._et.removeEventListener(t, e, i);
+      }
+    };
+  function L(u, t = 250) {
+    let e = 0,
+      i = null,
+      s,
+      o,
+      n,
+      h = () => {
+        ((e = Date.now()),
+          (i = null),
+          (s = u.apply(o, n)),
+          i || ((o = null), (n = [])));
+      };
+    return function (...r) {
+      let c = Date.now(),
+        l = t - (c - e);
+      return (
+        (o = this),
+        (n = r),
+        l <= 0 || l > t
+          ? (i && (clearTimeout(i), (i = null)),
+            (e = c),
+            (s = u.apply(o, n)),
+            i || ((o = null), (n = [])))
+          : i || (i = window.setTimeout(h, l)),
+        s
+      );
+    };
+  }
+  var f = class u extends b {
+    constructor(t, e = {}) {
+      var i, s, o;
+      (super(),
+        (this.canvas = t),
+        (this._drawingStroke = !1),
+        (this._isEmpty = !0),
+        (this._lastPoints = []),
+        (this._data = []),
+        (this._lastVelocity = 0),
+        (this._lastWidth = 0),
+        (this._handleMouseDown = (n) => {
+          !this._isLeftButtonPressed(n, !0) ||
+            this._drawingStroke ||
+            this._strokeBegin(this._pointerEventToSignatureEvent(n));
+        }),
+        (this._handleMouseMove = (n) => {
+          if (!this._isLeftButtonPressed(n, !0) || !this._drawingStroke) {
+            this._strokeEnd(this._pointerEventToSignatureEvent(n), !1);
+            return;
+          }
+          this._strokeMoveUpdate(this._pointerEventToSignatureEvent(n));
+        }),
+        (this._handleMouseUp = (n) => {
+          this._isLeftButtonPressed(n) ||
+            this._strokeEnd(this._pointerEventToSignatureEvent(n));
+        }),
+        (this._handleTouchStart = (n) => {
+          n.targetTouches.length !== 1 ||
+            this._drawingStroke ||
+            (n.cancelable && n.preventDefault(),
+            this._strokeBegin(this._touchEventToSignatureEvent(n)));
+        }),
+        (this._handleTouchMove = (n) => {
+          if (n.targetTouches.length === 1) {
+            if ((n.cancelable && n.preventDefault(), !this._drawingStroke)) {
+              this._strokeEnd(this._touchEventToSignatureEvent(n), !1);
+              return;
+            }
+            this._strokeMoveUpdate(this._touchEventToSignatureEvent(n));
+          }
+        }),
+        (this._handleTouchEnd = (n) => {
+          n.targetTouches.length === 0 &&
+            (n.cancelable && n.preventDefault(),
+            this.canvas.removeEventListener('touchmove', this._handleTouchMove),
+            this._strokeEnd(this._touchEventToSignatureEvent(n)));
+        }),
+        (this._handlePointerDown = (n) => {
+          !this._isLeftButtonPressed(n) ||
+            this._drawingStroke ||
+            (n.preventDefault(),
+            this._strokeBegin(this._pointerEventToSignatureEvent(n)));
+        }),
+        (this._handlePointerMove = (n) => {
+          if (!this._isLeftButtonPressed(n, !0) || !this._drawingStroke) {
+            this._strokeEnd(this._pointerEventToSignatureEvent(n), !1);
+            return;
+          }
+          (n.preventDefault(),
+            this._strokeMoveUpdate(this._pointerEventToSignatureEvent(n)));
+        }),
+        (this._handlePointerUp = (n) => {
+          this._isLeftButtonPressed(n) ||
+            (n.preventDefault(),
+            this._strokeEnd(this._pointerEventToSignatureEvent(n)));
+        }),
+        (this.velocityFilterWeight = e.velocityFilterWeight || 0.7),
+        (this.minWidth = e.minWidth || 0.5),
+        (this.maxWidth = e.maxWidth || 2.5),
+        (this.throttle = (i = e.throttle) !== null && i !== void 0 ? i : 16),
+        (this.minDistance =
+          (s = e.minDistance) !== null && s !== void 0 ? s : 5),
+        (this.dotSize = e.dotSize || 0),
+        (this.penColor = e.penColor || 'black'),
+        (this.backgroundColor = e.backgroundColor || 'rgba(0,0,0,0)'),
+        (this.compositeOperation = e.compositeOperation || 'source-over'),
+        (this.canvasContextOptions =
+          (o = e.canvasContextOptions) !== null && o !== void 0 ? o : {}),
+        (this._strokeMoveUpdate = this.throttle
+          ? L(u.prototype._strokeUpdate, this.throttle)
+          : u.prototype._strokeUpdate),
+        (this._ctx = t.getContext('2d', this.canvasContextOptions)),
+        this.clear(),
+        this.on());
+    }
+    clear() {
+      let { _ctx: t, canvas: e } = this;
+      ((t.fillStyle = this.backgroundColor),
+        t.clearRect(0, 0, e.width, e.height),
+        t.fillRect(0, 0, e.width, e.height),
+        (this._data = []),
+        this._reset(this._getPointGroupOptions()),
+        (this._isEmpty = !0));
+    }
+    fromDataURL(t, e = {}) {
+      return new Promise((i, s) => {
+        let o = new Image(),
+          n = e.ratio || window.devicePixelRatio || 1,
+          h = e.width || this.canvas.width / n,
+          a = e.height || this.canvas.height / n,
+          r = e.xOffset || 0,
+          c = e.yOffset || 0;
+        (this._reset(this._getPointGroupOptions()),
+          (o.onload = () => {
+            (this._ctx.drawImage(o, r, c, h, a), i());
+          }),
+          (o.onerror = (l) => {
+            s(l);
+          }),
+          (o.crossOrigin = 'anonymous'),
+          (o.src = t),
+          (this._isEmpty = !1));
+      });
+    }
+    toDataURL(t = 'image/png', e) {
+      switch (t) {
+        case 'image/svg+xml':
+          return (
+            typeof e != 'object' && (e = void 0),
+            'data:image/svg+xml;base64,'.concat(btoa(this.toSVG(e)))
+          );
+        default:
+          return (
+            typeof e != 'number' && (e = void 0),
+            this.canvas.toDataURL(t, e)
+          );
+      }
+    }
+    on() {
+      ((this.canvas.style.touchAction = 'none'),
+        (this.canvas.style.msTouchAction = 'none'),
+        (this.canvas.style.userSelect = 'none'));
+      let t =
+        /Macintosh/.test(navigator.userAgent) && 'ontouchstart' in document;
+      window.PointerEvent && !t
+        ? this._handlePointerEvents()
+        : (this._handleMouseEvents(),
+          'ontouchstart' in window && this._handleTouchEvents());
+    }
+    off() {
+      ((this.canvas.style.touchAction = 'auto'),
+        (this.canvas.style.msTouchAction = 'auto'),
+        (this.canvas.style.userSelect = 'auto'),
+        this.canvas.removeEventListener('pointerdown', this._handlePointerDown),
+        this.canvas.removeEventListener('mousedown', this._handleMouseDown),
+        this.canvas.removeEventListener('touchstart', this._handleTouchStart),
+        this._removeMoveUpEventListeners());
+    }
+    _getListenerFunctions() {
+      var t;
+      let e =
+        window.document === this.canvas.ownerDocument
+          ? window
+          : (t = this.canvas.ownerDocument.defaultView) !== null && t !== void 0
+            ? t
+            : this.canvas.ownerDocument;
+      return {
+        addEventListener: e.addEventListener.bind(e),
+        removeEventListener: e.removeEventListener.bind(e),
+      };
+    }
+    _removeMoveUpEventListeners() {
+      let { removeEventListener: t } = this._getListenerFunctions();
+      (t('pointermove', this._handlePointerMove),
+        t('pointerup', this._handlePointerUp),
+        t('mousemove', this._handleMouseMove),
+        t('mouseup', this._handleMouseUp),
+        t('touchmove', this._handleTouchMove),
+        t('touchend', this._handleTouchEnd));
+    }
+    isEmpty() {
+      return this._isEmpty;
+    }
+    fromData(t, { clear: e = !0 } = {}) {
+      (e && this.clear(),
+        this._fromData(t, this._drawCurve.bind(this), this._drawDot.bind(this)),
+        (this._data = this._data.concat(t)));
+    }
+    toData() {
+      return this._data;
+    }
+    _isLeftButtonPressed(t, e) {
+      return e ? t.buttons === 1 : (t.buttons & 1) === 1;
+    }
+    _pointerEventToSignatureEvent(t) {
+      return {
+        event: t,
+        type: t.type,
+        x: t.clientX,
+        y: t.clientY,
+        pressure: 'pressure' in t ? t.pressure : 0,
+      };
+    }
+    _touchEventToSignatureEvent(t) {
+      let e = t.changedTouches[0];
+      return {
+        event: t,
+        type: t.type,
+        x: e.clientX,
+        y: e.clientY,
+        pressure: e.force,
+      };
+    }
+    _getPointGroupOptions(t) {
+      return {
+        penColor: t && 'penColor' in t ? t.penColor : this.penColor,
+        dotSize: t && 'dotSize' in t ? t.dotSize : this.dotSize,
+        minWidth: t && 'minWidth' in t ? t.minWidth : this.minWidth,
+        maxWidth: t && 'maxWidth' in t ? t.maxWidth : this.maxWidth,
+        velocityFilterWeight:
+          t && 'velocityFilterWeight' in t
+            ? t.velocityFilterWeight
+            : this.velocityFilterWeight,
+        compositeOperation:
+          t && 'compositeOperation' in t
+            ? t.compositeOperation
+            : this.compositeOperation,
+      };
+    }
+    _strokeBegin(t) {
+      if (
+        !this.dispatchEvent(
+          new CustomEvent('beginStroke', { detail: t, cancelable: !0 }),
+        )
+      )
+        return;
+      let { addEventListener: i } = this._getListenerFunctions();
+      switch (t.event.type) {
+        case 'mousedown':
+          (i('mousemove', this._handleMouseMove),
+            i('mouseup', this._handleMouseUp));
+          break;
+        case 'touchstart':
+          (i('touchmove', this._handleTouchMove),
+            i('touchend', this._handleTouchEnd));
+          break;
+        case 'pointerdown':
+          (i('pointermove', this._handlePointerMove),
+            i('pointerup', this._handlePointerUp));
+          break;
+      }
+      this._drawingStroke = !0;
+      let s = this._getPointGroupOptions(),
+        o = Object.assign(Object.assign({}, s), { points: [] });
+      (this._data.push(o), this._reset(s), this._strokeUpdate(t));
+    }
+    _strokeUpdate(t) {
+      if (!this._drawingStroke) return;
+      if (this._data.length === 0) {
+        this._strokeBegin(t);
+        return;
+      }
+      this.dispatchEvent(new CustomEvent('beforeUpdateStroke', { detail: t }));
+      let e = this._createPoint(t.x, t.y, t.pressure),
+        i = this._data[this._data.length - 1],
+        s = i.points,
+        o = s.length > 0 && s[s.length - 1],
+        n = o ? e.distanceTo(o) <= this.minDistance : !1,
+        h = this._getPointGroupOptions(i);
+      if (!o || !(o && n)) {
+        let a = this._addPoint(e, h);
+        (o ? a && this._drawCurve(a, h) : this._drawDot(e, h),
+          s.push({ time: e.time, x: e.x, y: e.y, pressure: e.pressure }));
+      }
+      this.dispatchEvent(new CustomEvent('afterUpdateStroke', { detail: t }));
+    }
+    _strokeEnd(t, e = !0) {
+      (this._removeMoveUpEventListeners(),
+        this._drawingStroke &&
+          (e && this._strokeUpdate(t),
+          (this._drawingStroke = !1),
+          this.dispatchEvent(new CustomEvent('endStroke', { detail: t }))));
+    }
+    _handlePointerEvents() {
+      ((this._drawingStroke = !1),
+        this.canvas.addEventListener('pointerdown', this._handlePointerDown));
+    }
+    _handleMouseEvents() {
+      ((this._drawingStroke = !1),
+        this.canvas.addEventListener('mousedown', this._handleMouseDown));
+    }
+    _handleTouchEvents() {
+      this.canvas.addEventListener('touchstart', this._handleTouchStart);
+    }
+    _reset(t) {
+      ((this._lastPoints = []),
+        (this._lastVelocity = 0),
+        (this._lastWidth = (t.minWidth + t.maxWidth) / 2),
+        (this._ctx.fillStyle = t.penColor),
+        (this._ctx.globalCompositeOperation = t.compositeOperation));
+    }
+    _createPoint(t, e, i) {
+      let s = this.canvas.getBoundingClientRect();
+      return new w(t - s.left, e - s.top, i, new Date().getTime());
+    }
+    _addPoint(t, e) {
+      let { _lastPoints: i } = this;
+      if ((i.push(t), i.length > 2)) {
+        i.length === 3 && i.unshift(i[0]);
+        let s = this._calculateCurveWidths(i[1], i[2], e),
+          o = y.fromPoints(i, s);
+        return (i.shift(), o);
+      }
+      return null;
+    }
+    _calculateCurveWidths(t, e, i) {
+      let s =
+          i.velocityFilterWeight * e.velocityFrom(t) +
+          (1 - i.velocityFilterWeight) * this._lastVelocity,
+        o = this._strokeWidth(s, i),
+        n = { end: o, start: this._lastWidth };
+      return ((this._lastVelocity = s), (this._lastWidth = o), n);
+    }
+    _strokeWidth(t, e) {
+      return Math.max(e.maxWidth / (t + 1), e.minWidth);
+    }
+    _drawCurveSegment(t, e, i) {
+      let s = this._ctx;
+      (s.moveTo(t, e),
+        s.arc(t, e, i, 0, 2 * Math.PI, !1),
+        (this._isEmpty = !1));
+    }
+    _drawCurve(t, e) {
+      let i = this._ctx,
+        s = t.endWidth - t.startWidth,
+        o = Math.ceil(t.length()) * 2;
+      (i.beginPath(), (i.fillStyle = e.penColor));
+      for (let n = 0; n < o; n += 1) {
+        let h = n / o,
+          a = h * h,
+          r = a * h,
+          c = 1 - h,
+          l = c * c,
+          m = l * c,
+          p = m * t.startPoint.x;
+        ((p += 3 * l * h * t.control1.x),
+          (p += 3 * c * a * t.control2.x),
+          (p += r * t.endPoint.x));
+        let d = m * t.startPoint.y;
+        ((d += 3 * l * h * t.control1.y),
+          (d += 3 * c * a * t.control2.y),
+          (d += r * t.endPoint.y));
+        let v = Math.min(t.startWidth + r * s, e.maxWidth);
+        this._drawCurveSegment(p, d, v);
+      }
+      (i.closePath(), i.fill());
+    }
+    _drawDot(t, e) {
+      let i = this._ctx,
+        s = e.dotSize > 0 ? e.dotSize : (e.minWidth + e.maxWidth) / 2;
+      (i.beginPath(),
+        this._drawCurveSegment(t.x, t.y, s),
+        i.closePath(),
+        (i.fillStyle = e.penColor),
+        i.fill());
+    }
+    _fromData(t, e, i) {
+      for (let s of t) {
+        let { points: o } = s,
+          n = this._getPointGroupOptions(s);
+        if (o.length > 1)
+          for (let h = 0; h < o.length; h += 1) {
+            let a = o[h],
+              r = new w(a.x, a.y, a.pressure, a.time);
+            h === 0 && this._reset(n);
+            let c = this._addPoint(r, n);
+            c && e(c, n);
+          }
+        else (this._reset(n), i(o[0], n));
+      }
+    }
+    toSVG({ includeBackgroundColor: t = !1 } = {}) {
+      let e = this._data,
+        i = Math.max(window.devicePixelRatio || 1, 1),
+        s = 0,
+        o = 0,
+        n = this.canvas.width / i,
+        h = this.canvas.height / i,
+        a = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      if (
+        (a.setAttribute('xmlns', 'http://www.w3.org/2000/svg'),
+        a.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'),
+        a.setAttribute(
+          'viewBox',
+          ''.concat(s, ' ').concat(o, ' ').concat(n, ' ').concat(h),
+        ),
+        a.setAttribute('width', n.toString()),
+        a.setAttribute('height', h.toString()),
+        t && this.backgroundColor)
+      ) {
+        let r = document.createElement('rect');
+        (r.setAttribute('width', '100%'),
+          r.setAttribute('height', '100%'),
+          r.setAttribute('fill', this.backgroundColor),
+          a.appendChild(r));
+      }
+      return (
+        this._fromData(
+          e,
+          (r, { penColor: c }) => {
+            let l = document.createElement('path');
+            if (
+              !isNaN(r.control1.x) &&
+              !isNaN(r.control1.y) &&
+              !isNaN(r.control2.x) &&
+              !isNaN(r.control2.y)
+            ) {
+              let m =
+                'M '
+                  .concat(r.startPoint.x.toFixed(3), ',')
+                  .concat(r.startPoint.y.toFixed(3), ' ') +
+                'C '
+                  .concat(r.control1.x.toFixed(3), ',')
+                  .concat(r.control1.y.toFixed(3), ' ') +
+                ''
+                  .concat(r.control2.x.toFixed(3), ',')
+                  .concat(r.control2.y.toFixed(3), ' ') +
+                ''
+                  .concat(r.endPoint.x.toFixed(3), ',')
+                  .concat(r.endPoint.y.toFixed(3));
+              (l.setAttribute('d', m),
+                l.setAttribute('stroke-width', (r.endWidth * 2.25).toFixed(3)),
+                l.setAttribute('stroke', c),
+                l.setAttribute('fill', 'none'),
+                l.setAttribute('stroke-linecap', 'round'),
+                a.appendChild(l));
+            }
+          },
+          (r, { penColor: c, dotSize: l, minWidth: m, maxWidth: p }) => {
+            let d = document.createElement('circle'),
+              v = l > 0 ? l : (m + p) / 2;
+            (d.setAttribute('r', v.toString()),
+              d.setAttribute('cx', r.x.toString()),
+              d.setAttribute('cy', r.y.toString()),
+              d.setAttribute('fill', c),
+              a.appendChild(d));
+          },
+        ),
+        a.outerHTML
+      );
+    }
+  };
+  var g = class g {
+    static getHumanSize(t) {
+      let e = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+        i = Math.min(Math.floor(Math.log(t) / Math.log(1024)), e.length - 1),
+        s = t / 1024 ** i;
+      return i === 0
+        ? ''.concat(t, ' bytes')
+        : ''.concat(s.toFixed(0), ' ').concat(e[i]);
+    }
+    static getData(t) {
+      return new Promise((e, i) => {
+        let s = new FileReader();
+        ((s.onload = (o) => {
+          e(o.target.result);
+        }),
+          (s.onerror = () => {
+            i(
+              new Error(
+                'An error occurred reading the file. Please check the file, and try again',
+              ),
+            );
+          }),
+          s.readAsDataURL(t));
+      });
+    }
+    static async retrieve(t) {
+      if (t.length > 1)
+        throw new Error('Only one file upload is permitted at a time');
+      let e = t[0];
+      if (!g.supportedTypes.includes(e.type))
+        throw new Error(
+          'Unsupported file format. Please ensure that you are providing a JPG, PNG or SVG image',
+        );
+      if (e.size > g.memoryLimit)
+        throw new Error(
+          ''
+            .concat(
+              e.name,
+              ' is too large. Please ensure that the file is less than ',
+            )
+            .concat(g.getHumanSize(g.memoryLimit), '.'),
+        );
+      return await g.getData(e);
+    }
+  };
+  (x(g, 'memoryLimit', 2048e3),
+    x(g, 'supportedTypes', ['image/jpeg', 'image/png', 'image/svg+xml']));
+  var E = g,
+    _ = class extends HTMLElement {
+      connectedCallback() {
+        let t = this.attachShadow({ mode: 'open' }),
+          e = document.createElement('style');
+        e.textContent =
+          '\n:host {\n  display: block;\n  block-size: auto;\n  inline-size: 30rem;\n  max-inline-size: 100%;\n  position: relative;\n  --color-active: #2D2B2A;\n  --color-default: #001096;\n  --color-disabled: #848282;\n}\n\n:host::part(upload) {\n  text-align: center;\n}\n\n:host::part(signature-controls) {\n  display: inline-flex;\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n}\n\n:host::part(upload) svg + * {\n  margin-inline-start: .5rem;\n}\n\n:host::part(canvas) {\n  background-color: #F9F0E7;\n  --dot-bg: #F9F0E7;\n  --dot-color: black;\n  --dot-size: 1px;\n  --dot-space: 22px;\n  background:\n    linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\n    linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\n    var(--dot-color);\n  border-radius: 2rem;\n  inline-size: 30rem;\n  max-inline-size: 100%;\n  aspect-ratio: 2 / 1;\n}\n\n:host::part(upload-preview-image) {\n  max-inline-size: 10rem;\n  margin-inline: auto;\n}\n\n.visually-hidden {\n  clip: rect(0 0 0 0); \n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap; \n  width: 1px;\n}\n\nbutton,\nlabel {\n  font: inherit;\n  cursor: pointer;\n}\n\nlabel {\n  display: inline-flex;\n  text-decoration: underline;\n}\n\nlabel svg + * {\n  margin-inline-start: .5rem;\n}\n\n[type="file"] {\n  display: none;\n}\n\n.center {\n  text-align: center;\n  margin-inline: auto;\n}\n\n.color-red {\n  color: red;\n}\n\nbutton[data-variant="icon"] {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  border: 0px;\n}\n\nbutton[data-variant="text"] {\n  appearance: none;\n  -webkit-appearance: none;\n  background-color: transparent;\n  border: 0px;\n  text-decoration: underline;\n  display: inline-flex;\n  align-items: baseline;\n}\n\nbutton[data-variant="solid"] {\n  --button-color: '.concat(
+            this.themeColor,
+            ';\n  border-radius: 2.5rem;\n  border: 0;\n  background-color: transparent;\n  color: #fff;\n  cursor: pointer;\n  inline-size: 100%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: 600;\n  padding: .75rem 1.5rem;\n  text-align: center;\n  background-color: var(--button-color);\n  border: 2px solid var(--button-color);\n}\n\nbutton:hover,\nbutton:focus,\nbutton:active {\n  --button-color: var(--color-active);\n}\n\nbutton:disabled {\n  --button-color: var(--color-disabled);\n}\n',
+          );
+        let i = document.createElement('div'),
+          s = document.createElement('div');
+        s.innerHTML =
+          '\n      <p id="error" class="color-red | center"><p>\n    ';
+        let o = document.createElement('div');
+        (o.setAttribute('id', 'controls'),
+          o.setAttribute('part', 'signature-controls'),
+          (o.innerHTML =
+            '\n      <button data-variant="icon" type="button" name="clear" id="clear">\n        <span class="visually-hidden">\n          Clear Signature\n        </span>\n        <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="18" viewBox="0 0 17 18">\n          <path d="M3.314 15.646a8.004 8.004 0 01-2.217-4.257 8.06 8.06 0 01.545-4.655l1.789.788a6.062 6.062 0 001.264 6.737 6.033 6.033 0 008.551 0c2.358-2.37 2.358-6.224 0-8.592a5.996 5.996 0 00-4.405-1.782l.662 2.354-3.128-.796-3.127-.796 2.25-2.324L7.748 0l.55 1.953a7.966 7.966 0 016.33 2.326 8.004 8.004 0 012.342 5.684 8.005 8.005 0 01-2.343 5.683A7.928 7.928 0 018.97 18a7.928 7.928 0 01-5.656-2.354z" fill="currentColor" />\n        </svg>\n      </button>\n    '));
+        let n = document.createElement('canvas'),
+          r = this.parentElement
+            .closest(':not([hidden])')
+            .querySelector(':not([hidden])').offsetWidth,
+          l =
+            30 *
+            getComputedStyle(document.documentElement).fontSize.split('px')[0],
+          m = 2;
+        ((n.width = r < l ? r : l),
+          (n.height = (r < l ? r : l) / m),
+          n.setAttribute('id', 'signature-canvas'),
+          n.setAttribute('part', 'canvas'));
+        let p = document.createElement('div');
+        (p.setAttribute('id', 'signature-upload-wrapper'),
+          (p.innerHTML =
+            '\n      <p part="upload">\n        <strong>or</strong>\n        <label>\n          <input type=\'file\' onclick=\'this.value=null;\' id=\'upload-signature\' accept=\'image/jpeg, image/png, image/svg+xml\' />\n          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none">\n            <rect width="16" height="16" fill="#F9F0E7" rx="2"/>\n            <mask id="sign" width="16" height="16" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha">\n              <rect width="16" height="16" fill="#D9D9D9" rx="2"/>\n            </mask>\n            <g mask="url(#sign)">\n              <path fill="#2D2B2A" d="M0 13.333h16V16H0z"/>\n            </g>\n            <path fill="#2D2B2A" fill-rule="evenodd" d="M2.69 7.346a.23.23 0 0 1 .059-.073.275.275 0 0 1 .284-.034c.07.036.146.064.224.084h.12c0-.012.105-.048.105-.395a.796.796 0 0 1 .211-.61.667.667 0 0 1 .607-.096c.202.061.39.154.555.275.194.138.38.286.555.443.146.134.31.25.489.347l.092.047c.119.06.238-.023.185-.143l-.04-.12a.817.817 0 0 1-.066-.694.675.675 0 0 1 .244-.273.774.774 0 0 1 .364-.12c.324-.028.651 0 .964.083h.026c.027-.861.225-1.83.82-2.523.593-.694 1.478-.993 2.205-.837.726.155 1.307.73 1.307 1.602 0 1.34-.872 2.26-1.915 2.93.471.374.85.835 1.11 1.351.027.046.05.094.065.144h.014a.55.55 0 0 0 .079.203.44.44 0 0 0 .04.18c.002.025.011.05.026.07h-.013c.037.17.041.344.013.515a.955.955 0 0 1-.188.493 1.097 1.097 0 0 1-.433.344 1.346 1.346 0 0 1-1.122.012 2.194 2.194 0 0 1-.846-.67 5.024 5.024 0 0 1-.462-.681h-.026a.502.502 0 0 0-.106-.144.014.014 0 0 1-.01-.003.011.011 0 0 1-.003-.009.035.035 0 0 1-.013-.023.047.047 0 0 1-.011-.017.626.626 0 0 0-.055-.163.24.24 0 0 0-.014-.095h.014a3.477 3.477 0 0 1-.198-.49 6.318 6.318 0 0 1-.278-1.699L7.51 6.51c-.243-.07-.5-.094-.753-.071-.158.024-.198.071-.211.107-.014.036-.04.168.053.359.092.191.171.478.118.658a.45.45 0 0 1-.21.25.66.66 0 0 1-.305.06 1.521 1.521 0 0 1-.568-.19 3.533 3.533 0 0 1-.58-.42 3.54 3.54 0 0 0-.49-.394 1.49 1.49 0 0 0-.409-.203c-.053-.024-.079-.024-.092-.012H4.05c-.014.012-.066.072-.066.275 0 .395-.12.705-.423.813a.813.813 0 0 1-.41.024 1.646 1.646 0 0 1-.343-.12.237.237 0 0 1-.126-.127.208.208 0 0 1 .007-.172Zm5.731.766c.068.204.152.404.251.598.011.053.03.105.053.155.036.068.08.132.132.191.02.05.047.099.08.144.085.152.186.296.303.43.167.22.389.4.647.526a.847.847 0 0 0 .687-.011.655.655 0 0 0 .247-.204.573.573 0 0 0 .11-.287 1.435 1.435 0 0 0-.04-.454h-.014a.496.496 0 0 0-.079-.335.491.491 0 0 0-.119-.191 3.842 3.842 0 0 0-1.017-1.16l-.356.18a.253.253 0 0 1-.193.027.248.248 0 0 1-.088-.041.22.22 0 0 1-.063-.07.219.219 0 0 1-.02-.172.242.242 0 0 1 .113-.14l.172-.083a3.388 3.388 0 0 0-.463-.251l-.58-.24c.022.47.101.935.237 1.388Zm.568-1.555c.24.12.474.252.7.395 1.017-.634 1.81-1.459 1.81-2.63 0-.67-.41-1.053-.912-1.16-.502-.108-1.189.083-1.704.669-.515.586-.7 1.47-.713 2.32v.083c.251.084.515.192.819.323Z" clip-rule="evenodd"/>\n          </svg>\n          <span>upload a signature</span>\n        </label>\n      </p>\n    '));
+        let d = document.createElement('p');
+        ((d.innerHTML =
+          '\n      <button data-variant="solid" type="button" name="publish" id="publish">\n        <span>\n          Continue\n        </span>\n        <svg\n          aria-hidden="true"\n          width="25"\n          height="24"\n          fill="none"\n          xmlns="http://www.w3.org/2000/svg"\n        >\n          <path\n            d="M7 12h11m0 0-4.588-4M18 12l-4.588 4"\n            stroke="#fff"\n            stroke-width="1.5"\n            stroke-linecap="round"\n            stroke-linejoin="round"\n          />\n        </svg>\n      </button>\n    '),
+          i.appendChild(s),
+          i.appendChild(o),
+          i.appendChild(n),
+          this.allowUpload && i.appendChild(p),
+          i.appendChild(d),
+          t.appendChild(e),
+          t.appendChild(i),
+          (this.core = new f(n)),
+          (this.errorMessage = s.querySelector('#error')),
+          window && (window.onresize = this.resizeCanvas()),
+          (this.clearSignatureButton = o.querySelector('#clear')),
+          this.clearSignatureButton.addEventListener('click', () =>
+            this.clearSignature(),
+          ),
+          (this.uploadSignatureButton = p.querySelector('#upload-signature')),
+          this.uploadSignatureButton.addEventListener('change', (v) =>
+            this.uploadSignature(v),
+          ),
+          (this.publishSignatureButton = d.querySelector('#publish')),
+          this.publishSignatureButton.addEventListener('click', () =>
+            this.publishSignature(),
+          ));
+      }
+      disconnectedCallback() {
+        (this.publishSignatureButton.removeEventListener('click', () =>
+          this.publishSignature(),
+        ),
+          this.clearSignatureButton.removeEventListener('click', () =>
+            this.clearSignature(),
+          ),
+          this.uploadSignatureButton.removeEventListener('change', (t) =>
+            this.uploadSignature(t),
+          ));
+      }
+      resizeCanvas() {
+        let t = this.shadowRoot.querySelector('canvas'),
+          e = Math.max(window.devicePixelRatio || 1, 1);
+        ((t.width = (t.offsetWidth || t.width) * e),
+          (t.height = (t.offsetHeight || t.height) * e),
+          t.getContext('2d').scale(e, e),
+          this.core.fromData(this.core.toData()));
+      }
+      publishSignature() {
+        try {
+          this.resetErrorMessage();
+          let t = this.shadowRoot.querySelector('img'),
+            e = t ? t.src : void 0;
+          if (
+            (!e &&
+              !this.core.isEmpty() &&
+              (e = this.core.toDataURL('image/svg+xml')),
+            e)
+          )
+            this.dispatchEvent(
+              new CustomEvent('signature-pad.publish', { detail: e }),
+            );
+          else
+            throw new Error(
+              'No signature present. '.concat(
+                this.allowUpload ? 'Draw or upload' : 'Draw',
+                ' a signature',
+              ),
+            );
+        } catch (t) {
+          this.handleError(t.message);
+        }
+      }
+      resetErrorMessage() {
+        this.errorMessage.textContent = '';
+      }
+      handleError(t) {
+        this.errorMessage.textContent = t;
+      }
+      clearSignature() {
+        this.resetErrorMessage();
+        let t = this.shadowRoot.querySelector('canvas'),
+          e = this.shadowRoot.querySelector('img');
+        (e && (e.remove(), t.removeAttribute('hidden')), this.core.clear());
+      }
+      previewUpload(t) {
+        let e = this.shadowRoot.querySelector('canvas'),
+          i = this.shadowRoot.querySelector('img');
+        (i || (i = document.createElement('img')),
+          (i.src = t),
+          i.setAttribute('part', 'upload-preview-image'),
+          e.setAttribute('hidden', !0),
+          e.insertAdjacentElement('afterend', i));
+      }
+      async uploadSignature(t) {
+        try {
+          this.resetErrorMessage();
+          let { files: e } = t.target,
+            i = await E.retrieve(e);
+          this.previewUpload(i);
+        } catch (e) {
+          this.handleError(e.message);
+        }
+      }
+      get allowUpload() {
+        return this.hasAttribute('allow-upload');
+      }
+      get themeColor() {
+        return this.getAttribute('theme-color') || '#001096';
+      }
+    };
+  'customElements' in window &&
+    !window.customElements.get('smileid-signature-pad') &&
+    window.customElements.define('smileid-signature-pad', _);
+  var P = _;
+  var z = P;
+})();
 /*! Bundled license information:
 
 signature_pad/dist/signature_pad.js: