1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8088],{48088:(t,e,a)=>{a.r(e),a.d(e,{Signature:()=>p});var s=a(85664),n=a(63276),i=class{constructor(t,e,a,s){if(isNaN(t)||isNaN(e))throw Error(`Point is invalid: (${t}, ${e})`);this.x=+t,this.y=+e,this.pressure=a||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}},o=class t{static fromPoints(e,a){let s=this.calculateControlPoints(e[0],e[1],e[2]).c2,n=this.calculateControlPoints(e[1],e[2],e[3]).c1;return new t(e[1],s,n,e[2],a.start,a.end)}static calculateControlPoints(t,e,a){let s=t.x-e.x,n=t.y-e.y,o=e.x-a.x,l=e.y-a.y,r={x:(t.x+e.x)/2,y:(t.y+e.y)/2},d={x:(e.x+a.x)/2,y:(e.y+a.y)/2},h=Math.sqrt(s*s+n*n),u=Math.sqrt(o*o+l*l),p=r.x-d.x,c=r.y-d.y,y=h+u==0?0:u/(h+u),v={x:d.x+p*y,y:d.y+c*y},x=e.x-v.x,b=e.y-v.y;return{c1:new i(r.x+x,r.y+b),c2:new i(d.x+x,d.y+b)}}constructor(t,e,a,s,n,i){this.startPoint=t,this.control2=e,this.control1=a,this.endPoint=s,this.startWidth=n,this.endWidth=i}length(){let t=0,e,a;for(let s=0;s<=10;s+=1){let n=s/10,i=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),o=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(s>0){let s=i-e,n=o-a;t+=Math.sqrt(s*s+n*n)}e=i,a=o}return t}point(t,e,a,s,n){return e*(1-t)*(1-t)*(1-t)+3*a*(1-t)*(1-t)*t+3*s*(1-t)*t*t+n*t*t*t}},l=class{constructor(){try{this._et=new EventTarget}catch{this._et=document}}addEventListener(t,e,a){this._et.addEventListener(t,e,a)}dispatchEvent(t){return this._et.dispatchEvent(t)}removeEventListener(t,e,a){this._et.removeEventListener(t,e,a)}},r=class t extends l{constructor(e,a={}){var s,n,i;super(),this.canvas=e,this._drawingStroke=!1,this._isEmpty=!0,this._lastPoints=[],this._data=[],this._lastVelocity=0,this._lastWidth=0,this._handleMouseDown=t=>{!this._isLeftButtonPressed(t,!0)||this._drawingStroke||this._strokeBegin(this._pointerEventToSignatureEvent(t))},this._handleMouseMove=t=>{if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke)return void this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))},this._handleMouseUp=t=>{this._isLeftButtonPressed(t)||this._strokeEnd(this._pointerEventToSignatureEvent(t))},this._handleTouchStart=t=>{1!==t.targetTouches.length||this._drawingStroke||(t.cancelable&&t.preventDefault(),this._strokeBegin(this._touchEventToSignatureEvent(t)))},this._handleTouchMove=t=>{if(1===t.targetTouches.length){if(t.cancelable&&t.preventDefault(),!this._drawingStroke)return void this._strokeEnd(this._touchEventToSignatureEvent(t),!1);this._strokeMoveUpdate(this._touchEventToSignatureEvent(t))}},this._handleTouchEnd=t=>{0===t.targetTouches.length&&(t.cancelable&&t.preventDefault(),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this._strokeEnd(this._touchEventToSignatureEvent(t)))},this._handlePointerDown=t=>{!this._isLeftButtonPressed(t)||this._drawingStroke||(t.preventDefault(),this._strokeBegin(this._pointerEventToSignatureEvent(t)))},this._handlePointerMove=t=>{if(!this._isLeftButtonPressed(t,!0)||!this._drawingStroke)return void this._strokeEnd(this._pointerEventToSignatureEvent(t),!1);t.preventDefault(),this._strokeMoveUpdate(this._pointerEventToSignatureEvent(t))},this._handlePointerUp=t=>{this._isLeftButtonPressed(t)||(t.preventDefault(),this._strokeEnd(this._pointerEventToSignatureEvent(t)))},this.velocityFilterWeight=a.velocityFilterWeight||.7,this.minWidth=a.minWidth||.5,this.maxWidth=a.maxWidth||2.5,this.throttle=null!=(s=a.throttle)?s:16,this.minDistance=null!=(n=a.minDistance)?n:5,this.dotSize=a.dotSize||0,this.penColor=a.penColor||"black",this.backgroundColor=a.backgroundColor||"rgba(0,0,0,0)",this.compositeOperation=a.compositeOperation||"source-over",this.canvasContextOptions=null!=(i=a.canvasContextOptions)?i:{},this._strokeMoveUpdate=this.throttle?function(t,e=250){let a=0,s=null,n,i,o,l=()=>{a=Date.now(),s=null,n=t.apply(i,o),s||(i=null,o=[])};return function(...r){let d=Date.now(),h=e-(d-a);return i=this,o=r,h<=0||h>e?(s&&(clearTimeout(s),s=null),a=d,n=t.apply(i,o),s||(i=null,o=[])):s||(s=window.setTimeout(l,h)),n}}(t.prototype._strokeUpdate,this.throttle):t.prototype._strokeUpdate,this._ctx=e.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((a,s)=>{let n=new Image,i=e.ratio||window.devicePixelRatio||1,o=e.width||this.canvas.width/i,l=e.height||this.canvas.height/i,r=e.xOffset||0,d=e.yOffset||0;this._reset(this._getPointGroupOptions()),n.onload=()=>{this._ctx.drawImage(n,r,d,o,l),a()},n.onerror=t=>{s(t)},n.crossOrigin="anonymous",n.src=t,this._isEmpty=!1})}toDataURL(t="image/png",e){return"image/svg+xml"===t?("object"!=typeof e&&(e=void 0),`data:image/svg+xml;base64,${btoa(this.toSVG(e))}`):("number"!=typeof e&&(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:null!=(t=this.canvas.ownerDocument.defaultView)?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("mou
1semove",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?1===t.buttons:(1&t.buttons)==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:e}=this._getListenerFunctions();switch(t.event.type){case"mousedown":e("mousemove",this._handleMouseMove),e("mouseup",this._handleMouseUp);break;case"touchstart":e("touchmove",this._handleTouchMove),e("touchend",this._handleTouchEnd);break;case"pointerdown":e("pointermove",this._handlePointerMove),e("pointerup",this._handlePointerUp)}this._drawingStroke=!0;let a=this._getPointGroupOptions(),s=Object.assign(Object.assign({},a),{points:[]});this._data.push(s),this._reset(a),this._strokeUpdate(t)}_strokeUpdate(t){if(!this._drawingStroke)return;if(0===this._data.length)return void this._strokeBegin(t);this.dispatchEvent(new CustomEvent("beforeUpdateStroke",{detail:t}));let e=this._createPoint(t.x,t.y,t.pressure),a=this._data[this._data.length-1],s=a.points,n=s.length>0&&s[s.length-1],i=!!n&&e.distanceTo(n)<=this.minDistance,o=this._getPointGroupOptions(a);if(!n||!(n&&i)){let t=this._addPoint(e,o);n?t&&this._drawCurve(t,o):this._drawDot(e,o),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,a){let s=this.canvas.getBoundingClientRect();return new i(t-s.left,e-s.top,a,new Date().getTime())}_addPoint(t,e){let{_lastPoints:a}=this;if(a.push(t),a.length>2){3===a.length&&a.unshift(a[0]);let t=this._calculateCurveWidths(a[1],a[2],e),s=o.fromPoints(a,t);return a.shift(),s}return null}_calculateCurveWidths(t,e,a){let s=a.velocityFilterWeight*e.velocityFrom(t)+(1-a.velocityFilterWeight)*this._lastVelocity,n=this._strokeWidth(s,a),i={end:n,start:this._lastWidth};return this._lastVelocity=s,this._lastWidth=n,i}_strokeWidth(t,e){return Math.max(e.maxWidth/(t+1),e.minWidth)}_drawCurveSegment(t,e,a){let s=this._ctx;s.moveTo(t,e),s.arc(t,e,a,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve(t,e){let a=this._ctx,s=t.endWidth-t.startWidth,n=2*Math.ceil(t.length());a.beginPath(),a.fillStyle=e.penColor;for(let a=0;a<n;a+=1){let i=a/n,o=i*i,l=o*i,r=1-i,d=r*r,h=d*r,u=h*t.startPoint.x;u+=3*d*i*t.control1.x+3*r*o*t.control2.x+l*t.endPoint.x;let p=h*t.startPoint.y;p+=3*d*i*t.control1.y+3*r*o*t.control2.y+l*t.endPoint.y;let c=Math.min(t.startWidth+l*s,e.maxWidth);this._drawCurveSegment(u,p,c)}a.closePath(),a.fill()}_drawDot(t,e){let a=this._ctx,s=e.dotSize>0?e.dotSize:(e.minWidth+e.maxWidth)/2;a.beginPath(),this._drawCurveSegment(t.x,t.y,s),a.closePath(),a.fillStyle=e.penColor,a.fill()}_fromData(t,e,a){for(let s of t){let{points:t}=s,n=this._getPointGroupOptions(s);if(t.length>1)for(let a=0;a<t.length;a+=1){let s=t[a],o=new i(s.x,s.y,s.pressure,s.time);0===a&&this._reset(n);let l=this._addPoint(o,n);l&&e(l,n)}else this._reset(n),a(t[0],n)}}
1toSVG({includeBackgroundColor:t=!1}={}){let e=this._data,a=Math.max(window.devicePixelRatio||1,1),s=this.canvas.width/a,n=this.canvas.height/a,i=document.createElementNS("http://www.w3.org/2000/svg","svg");if(i.setAttribute("xmlns","http://www.w3.org/2000/svg"),i.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink"),i.setAttribute("viewBox",`0 0 ${s} ${n}`),i.setAttribute("width",s.toString()),i.setAttribute("height",n.toString()),t&&this.backgroundColor){let t=document.createElement("rect");t.setAttribute("width","100%"),t.setAttribute("height","100%"),t.setAttribute("fill",this.backgroundColor),i.appendChild(t)}return this._fromData(e,(t,{penColor:e})=>{let a=document.createElement("path");if(!isNaN(t.control1.x)&&!isNaN(t.control1.y)&&!isNaN(t.control2.x)&&!isNaN(t.control2.y)){let s=`M ${t.startPoint.x.toFixed(3)},${t.startPoint.y.toFixed(3)} C ${t.control1.x.toFixed(3)},${t.control1.y.toFixed(3)} ${t.control2.x.toFixed(3)},${t.control2.y.toFixed(3)} ${t.endPoint.x.toFixed(3)},${t.endPoint.y.toFixed(3)}`;a.setAttribute("d",s),a.setAttribute("stroke-width",(2.25*t.endWidth).toFixed(3)),a.setAttribute("stroke",e),a.setAttribute("fill","none"),a.setAttribute("stroke-linecap","round"),i.appendChild(a)}},(t,{penColor:e,dotSize:a,minWidth:s,maxWidth:n})=>{let o=document.createElement("circle");o.setAttribute("r",(a>0?a:(s+n)/2).toString()),o.setAttribute("cx",t.x.toString()),o.setAttribute("cy",t.y.toString()),o.setAttribute("fill",e),i.appendChild(o)}),i.outerHTML}},d=class extends HTMLElement{static DEFAULT_STYLES={controlButtonsContainer:"display: flex; align-items: center; justify-content: space-between; text-align: center; margin: 1rem 0;",saveButton:"color: #ffffff; font-family: ui-sans-serif, system-ui, sans-serif font-size: 16px; font-weight: 600; line-height: 24px; padding: 0px 16px; text-transform: uppercase; background-color: #222222; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; text-decoration-line: none; width: 100%; border: 1px solid #222222;",saveButtonDisabled:"background-color: #D3D3D3; color: #808080; cursor: not-allowed; border: 0;",undoButton:"color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;",clearButton:"color: #222222; background-color: transparent; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 14px; padding: 0px 12px; text-transform: uppercase; appearance: button; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 32px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;",canvas:"display: block; vertical-align: middle; width: 100%; border-radius: 8px; background-color: #ffffff; padding: 1px; touch-action: none; user-select: none; text-align: center; line-height: 24px; border: 1px solid #D3D3D3;",textInput:"color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 24px; font-weight: 400; line-height: 32px; margin: 0px 0px 16px; padding: 0px 16px; background-color: #ffffff; border-radius: 8px; flex-shrink: 1; height: 56px; outline: #222222 none 0px; outline-offset: 0px; width: 100%; text-align: start; border: 1px solid #D3D3D3;",typeButtonsContainer:"margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem;",drawTypeButton:"color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;",drawTypeButtonActive:"color: #fff; background-color: #222222; font-weight: 500;",textTypeButton:"color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;",textTypeButtonActive:"color: #fff; background-color: #222222; font-weight: 500;",uploadTypeButton:"color: #222222; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 24px; padding: 0px 40px; text-transform: uppercase; background-color: transparent; cursor: pointer; align-items: center; border-radius: 8px; gap: 8px; display: inline-flex; flex-shrink: 0; flex-wrap: wrap; height: 48px; justify-content: center; outline-color: #222222; text-align: center; border: 1px solid #222222;",uploadTypeButtonActive:"color: #fff; background-color: #222222; font-weight: 500;"};static DEFAULT_LABELS={drawTypeButton:"Draw",textTypeButton:"Type",uploadTypeButton:"Upload",undoButton:"Undo",clearButton:"Clear",saveButton:"Submit",textInputPlaceholder:"Type signature here"};constructor(){super(),this.isMounted=!1}static observedAttributes=["data-download-on-save","data-with-typed","data-with-drawn","data-with-upload","data-with-color-select","data-with-submit","data-control-buttons-container-class","data-control-buttons-container-style","data-save-button-text","data-save-button-class","data-save-button-style","data-save-button-disabled-class","data-save-button-disabled-style","data-undo-button-text","data-undo-button-class","data-undo-button-style","data-clear-button-text","data-clear-button-class","data-clear-button-style","data-text-input-placeholder","data-text-input-class","data-text-input-style","data-canvas-class","data-canvas-style","data-type-buttons-container-class","data-type-buttons-container-style","data-draw-type-button-text","data-draw-type-button-class","data-draw-type-button-style","data-draw-type-button-active-class","data-draw-type-button-active-style","data-text-type-button-text","data-text-type-button-class","data-text-type-button-style","data-text-type-button-active-class","data-text-type-button-active-style","data-upload-type-button-text","data-upload-type-button-class","data-upload-type-button-style","data-upload-type-button-active-class","data-upload-type-button-active-style"];get defaultStyles(){return this.constructor.DEFAULT_STYLES}get defaultLabels(){return this.constructor.DEFAULT_LABELS}get clearButton(){return this.querySelector('[data-target="clearButton"]')}get undoButton(){return this.querySelector('[data-target="undoButton"]')}get controlButtonsContainer(){return this.querySelector('[data-target="controlButtonsContainer"]')}get typeButtonsContainer(){return this.querySelector('[data-target="typeButtonsContainer"]')}get drawTypeButton(){return this.querySelector('[data-target="drawTypeButton"]')}get textTypeButton(){return this.querySelector('[data-target="textTypeButton"]')}get uploadTypeButton(){return this.querySelector('[data-target="uploadTypeButton"]')}get textInput(){return this.querySelector('[data-target="textInput"]')}get fileInput(){return this.querySelector('[data-target="fileInput"]')}get saveButton(){return this.querySelector('[data-target="saveButton"]')}get canvas(){return this.querySelector('[data-target="canvas"]')}get colorSelect(){return this.querySelector('[data-target="colorSelect"]')}get colorInputs(){return[...this.querySelectorAll('[data-target="colorInput"]')]}get setters(){return{"data-with-typed":this.setDisplayType,"data-with-drawn":this.setDisplayType,"data-with-upload":this.setDisplayType,"data-with-color-select":this.setDisplayColorSelect,"data-with-submit":this.setDisplaySubmit,"data-control-buttons-container-class":this.setControlButtonsContainerClassAndStyle,"data-control-buttons-container-style":this.setControlButtonsContainerClassAndStyle,"data-save-button-text":this.setSaveButtonText,"data-save-button-class":this.setSaveButtonClassAndStyle,"data-save-button-style":this.setSaveButtonClassAndStyle,"data-save-button-disabled-class":this.setSaveButtonClassAndStyle,"data-save-button-disabled-style":this.setSaveButtonClassAndStyle,"data-undo-button-text":this.setUndoButtonText,"data-undo-button-class":this.setUndoButtonClassAndStyle,"data-undo-button-style":this.setUndoButtonClassAndStyle,"data-clear-button-text":this.setCleaButtonText,"data-clear-button-class":this.setClearButtonClassAndStyle,"data-clear-button-style":this.setClearButtonClassAndStyle,"data-canvas-class":this.setCanvasClassAndStyle,"data-canvas-style":this.setCanvasClassAndStyle,"data-text-input-placeholder":this.setTextInputPlaceholder,"data-text-input-class":this.setTextInputClassAndStyle,"data-text-input-style":this.setTextInputClassAndStyle,"data-type-buttons-container-class":this.setTypeButtonsContainerClassAndStyle,"data-type-buttons-container-style":this.setTypeButtonsContainerClassAndStyle,"data-draw-type-button-text":this.setDrawTypeButtonText,"data-draw-type-button-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-style":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-class":this.setDrawTypeButtonClassAndStyle,"data-draw-type-button-active-style":this.setDrawTypeButtonClassAndStyle,"data-text-type-button-text":this.setTextTypeButtonText,"data-text-type-button-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-style":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-class":this.setTextTypeButtonClassAndStyle,"data-text-type-button-active-style":this.setTextTypeButtonClassAndStyle,"data-upload-type-button-text":this.setUploadTypeButtonText,"data-upload-type-button-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-style":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-class":this.setUploadTypeButtonClassAndStyle,"data-upload-type-button-active-style":this.setUploadTypeButtonClassAndStyle}}get isDrawTypeSelected(){return this.drawTypeButton.querySelector("input").checked}get isTextTypeSelected(){return this.textTypeButton.querySelector("input").checked}get isUploadTypeSelected(){return this.uploadTypeButton.querySelector("input").checked}get isSaveButtonDisabled(){return this.saveButton.disabled}get isDownloadOnSaveSettingEnabled(){return"true"===this.dataset.downloadOnSave}get isColorSelectSettingEnabled(){return"false"!==this.dataset.withColorSelect}get isSubmitButtonSettingEnabled(){return"false"!==this.dataset.withSubmit}
1setDisplayType=()=>{let t=[this.dataset.withDrawn,this.dataset.withTyped,this.dataset.withUpload].filter(t=>"false"===t);this.textTypeButton.parentNode.style.display="false"===this.dataset.withTyped?"none":"inherit",this.drawTypeButton.parentNode.style.display="false"===this.dataset.withDrawn?"none":"inherit",this.uploadTypeButton.parentNode.style.display="false"===this.dataset.withUpload?"none":"inherit",this.typeButtonsContainer.parentNode.style.display=t.length>1&&"false"===this.dataset.withUpload?"none":"inherit",3===t.length?console.error('At least one of the "with-typed", "with-drawn", or "with-upload" attributes must be set to "true".'):"false"!==this.dataset.withDrawn?this.enableDrawPanel():"false"!==this.dataset.withTyped?this.enableTextPanel():"false"!==this.dataset.withUpload&&this.enableUploadPanel()};setDisplayColorSelect=()=>{this.colorSelect.style.visibility="false"===this.dataset.withColorSelect?"hidden":"visible"};setDisplaySubmit=()=>{this.saveButton.parentNode.style.display="false"===this.dataset.withSubmit?"none":"inherit"};setControlButtonsContainerClassAndStyle=()=>{let t=this.dataset.controlButtonsContainerClass||"",e=this.dataset.controlButtonsContainerStyle||(t?"":this.defaultStyles.controlButtonsContainer);this.controlButtonsContainer.setAttribute("style",e),this.controlButtonsContainer.setAttribute("class",t)};setSaveButtonText=()=>{let t=this.saveButton.querySelector("span");t&&(t.innerText=this.dataset.saveButtonText||this.defaultLabels.saveButton)};setSaveButtonClassAndStyle=()=>{let t=this.dataset.saveButtonClass||"",e=this.dataset.saveButtonStyle||(t?"":this.defaultStyles.saveButton);this.isSaveButtonDisabled&&(t&&this.dataset.saveButtonDisabledClass&&(t=this.combineStrings(t,this.dataset.saveButtonDisabledClass)),e&&this.dataset.saveButtonDisabledStyle?e=this.combineStrings(e,this.dataset.saveButtonDisabledStyle):t||(e=this.combineStrings(e,this.defaultStyles.saveButtonDisabled))),this.saveButton.setAttribute("class",t),this.saveButton.setAttribute("style",e)};setUndoButtonText=()=>{let t=this.undoButton.querySelector("span");t&&(t.innerText=this.dataset.undoButtonText||this.defaultLabels.undoButton)};setUndoButtonClassAndStyle=()=>{let t=this.dataset.undoButtonClass||"",e=this.dataset.undoButtonStyle||(t?"":this.defaultStyles.undoButton);this.undoButton.setAttribute("class",t),this.undoButton.setAttribute("style",e)};setCleaButtonText=()=>{let t=this.clearButton.querySelector("span");t&&(t.innerText=this.dataset.clearButtonText||this.defaultLabels.clearButton)};setClearButtonClassAndStyle=()=>{let t=this.dataset.clearButtonClass||"",e=this.dataset.clearButtonStyle||(t?"":this.defaultStyles.clearButton);this.clearButton.setAttribute("class",t),this.clearButton.setAttribute("style",e)};setCanvasClassAndStyle=()=>{let t=this.dataset.canvasClass||"",e=this.dataset.canvasStyle||(t?"padding: 1px; touch-action: none; user-select: none;":this.defaultStyles.canvas);this.canvas.setAttribute("class",t),this.canvas.setAttribute("style",e)};setTypeButtonsContainerClassAndStyle=()=>{let t=this.dataset.typeButtonsContainerClass||"",e=this.dataset.typeButtonsContainerStyle||(t?"":this.defaultStyles.typeButtonsContainer);this.typeButtonsContainer.setAttribute("style",e),this.typeButtonsContainer.setAttribute("class",t)};setTextInputPlaceholder=()=>{this.textInput.setAttribute("placeholder",this.dataset.textInputPlaceholder||this.defaultLabels.textInputPlaceholder)};setTextInputClassAndStyle=()=>{let t=this.dataset.textInputClass||"",e=this.dataset.textInputStyle||(t?"":this.defaultStyles.textInput);this.textInput.setAttribute("class",t),this.textInput.setAttribute("style",e)};setDrawTypeButtonText=()=>{let t=this.drawTypeButton.querySelector("span");t&&(t.innerText=this.dataset.drawTypeButtonText||this.defaultLabels.drawTypeButton)};setDrawTypeButtonClassAndStyle=()=>{let t=this.dataset.drawTypeButtonClass||"",e=this.dataset.drawTypeButtonStyle||(t?"":this.defaultStyles.drawTypeButton);this.isDrawTypeSelected&&(t&&this.dataset.drawTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.drawTypeButtonActiveClass)),e&&this.dataset.drawTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.drawTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.drawTypeButtonActive))),this.drawTypeButton.setAttribute("class",t),this.drawTypeButton.setAttribute("style",e)};setTextTypeButtonText=()=>{let t=this.textTypeButton.querySelector("span");t&&(t.innerText=this.dataset.textTypeButtonText||this.defaultLabels.textTypeButton)};setTextTypeButtonClassAndStyle=()=>{let t=this.dataset.textTypeButtonClass||"",e=this.dataset.textTypeButtonStyle||t?"":this.defaultStyles.textTypeButton;this.isTextTypeSelected&&(t&&this.dataset.textTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.textTypeButtonActiveClass)),e&&this.dataset.textTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.textTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.textTypeButtonActive))),this.textTypeButton.setAttribute("class",t),this.textTypeButton.setAttribute("style",e)};setUploadTypeButtonText=()=>{let t=this.uploadTypeButton.querySelector("span");t&&(t.innerText=this.dataset.uploadTypeButtonText||this.defaultLabels.uploadTypeButton)};setUploadTypeButtonClassAndStyle=()=>{let t=this.dataset.uploadTypeButtonClass||"",e=this.dataset.uploadTypeButtonStyle||t?"":this.defaultStyles.uploadTypeButton;this.isUploadTypeSelected&&(t&&this.dataset.uploadTypeButtonActiveClass&&(t=this.combineStrings(t,this.dataset.uploadTypeButtonActiveClass)),e&&this.dataset.uploadTypeButtonActiveStyle?e=this.combineStrings(e,this.dataset.uploadTypeButtonActiveStyle):t||(e=this.combineStrings(e,this.defaultStyles.uploadTypeButtonActive))),this.uploadTypeButton.setAttribute("class",t),this.uploadTypeButton.setAttribute("style",e)};
1combineStrings(t,e){return[t,e].filter(Boolean).join(" ")}attributeChangedCallback(t,e,a){this.isMounted&&this.setters[t]&&e!==a&&this.setters[t]()}connectedCallback(){"complete"!==document.readyState?document.addEventListener("DOMContentLoaded",()=>this.init()):this.init()}init(){for(let t in this.style.display="block",this.childrenNode=document.createElement("div"),this.appendChild(this.childrenNode),Array.from(this.childNodes).map(t=>{this.childrenNode!==t&&this.childrenNode.appendChild(t)}),this.childrenNode.style.display="none",this.fieldNode=document.createElement("div"),this.fieldNode.innerHTML=this.tempalte,this.appendChild(this.fieldNode),this.pad=new r(this.canvas),this.isMounted=!0,this.setters)this.setters.hasOwnProperty(t)&&this.setters[t]();this.scale=2,this.isFontLoaded=!1,this.canvas.width=this.canvas.parentNode.parentNode.clientWidth,this.canvas.height=this.canvas.parentNode.parentNode.clientWidth/this.scale,"false"!==this.dataset.withDrawn?this.enableDrawPanel():"false"!==this.dataset.withTyped?this.enableTextPanel():"false"!==this.dataset.withUpload?this.enableUploadPanel():this.enableDrawPanel(),this.pad.addEventListener("endStroke",()=>{this.handleDownloadState()}),this.clearButton.addEventListener("click",t=>{t.preventDefault(),this.cleaSignaturePad(),this.clearTextInput()}),this.undoButton.addEventListener("click",t=>{t.preventDefault();let e=this.pad.toData();e&&(e.pop(),this.pad.fromData(e),this.handleDownloadState())}),this.drawTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableDrawPanel()}),this.textTypeButton.addEventListener("click",t=>{t.preventDefault(),this.enableTextPanel()}),this.uploadTypeButton.addEventListener("click",()=>{this.uploadTypeButton.querySelector('input[type="radio"]').checked=!0,this.enableUploadPanel()}),this.fileInput.addEventListener("change",t=>{this.drawOnCanvas(t.target.files[0]).then(()=>{this.handleDownloadState()}).catch(t=>{alert(t.message)})}),this.colorInputs.forEach(t=>{t.addEventListener("change",t=>{""!==this.textInput.value&&(this.canvas.getContext("2d").fillStyle=t.target.value,this.drawText()),this.pad.penColor=t.target.value})}),this.textInput.addEventListener("input",()=>{this.drawText(),this.handleDownloadState()}),this.saveButton.addEventListener("click",t=>{t.preventDefault(),this.disableSaveButton(),this.cropCanvas(this.canvas).then(t=>{this.isDownloadOnSaveSettingEnabled&&this.downloadBlob(t,`signature-${Date.now()}.png`),this.convertBlobToBase64(t).then(e=>{this.dispatchEvent(new CustomEvent("save",{detail:{base64:e,blob:t}}))}).catch(t=>{console.error("Failed to convert blob to base64:",t)})}).then(()=>{this.enableSaveButton()}).catch(t=>{console.error("Download failed:",t),this.disableSaveButton()})}),this.intersectionObserver=new IntersectionObserver((t,e)=>{t.forEach(t=>{var e;t.isIntersecting&&(this.canvas.width=this.canvas.parentNode.clientWidth*this.scale,this.canvas.height=this.canvas.parentNode.clientWidth*this.scale/3,this.canvas.getContext("2d").scale(this.scale,this.scale),null==(e=this.intersectionObserver)||e.disconnect())})}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t){let t=e.contentRect.width<576;this.drawTypeButton.getElementsByTagName("span")[0].style.display=t?"none":"inline-block",this.textTypeButton.getElementsByTagName("span")[0].style.display=t?"none":"inline-block",this.uploadTypeButton.getElementsByTagName("span")[0].style.display=t?"none":"inline-block"}}),this.resizeObserver.observe(this),this.intersectionObserver.observe(this.canvas)}enableDrawPanel(){this.drawTypeButton.querySelector("input").checked=!0,this.textTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="inline-block",this.pad.on(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableTextPanel(){this.drawTypeButton.querySelector("input").checked=!1,this.uploadTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!0,this.textInput.parentNode.style.display="inherit",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="visible"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.loadFont(),this.clearTextInput(),this.clearFileInput()}
1enableUploadPanel(){this.uploadTypeButton.querySelector("input").checked=!0,this.drawTypeButton.querySelector("input").checked=!1,this.textTypeButton.querySelector("input").checked=!1,this.textInput.parentNode.style.display="none",this.undoButton.parentNode.style.display="none",this.pad.off(),this.isColorSelectSettingEnabled&&(this.colorSelect.style.visibility="hidden"),this.setTextTypeButtonClassAndStyle(),this.setDrawTypeButtonClassAndStyle(),this.setUploadTypeButtonClassAndStyle(),this.cleaSignaturePad(),this.clearTextInput(),this.clearFileInput()}enableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!1,this.setSaveButtonClassAndStyle())}disableSaveButton(){this.isSubmitButtonSettingEnabled&&(this.saveButton.disabled=!0,this.setSaveButtonClassAndStyle())}drawText(){let t=this.canvas,e=t.getContext("2d");e.font="italic 58px SignatureFont",e.textAlign="center",e.clearRect(0,0,t.width/this.scale,t.height/this.scale),e.fillText(this.textInput.value,t.width/2/this.scale,t.height/2/this.scale+11)}drawOnCanvas(t){return new Promise((e,a)=>{if(t&&t.type.match("image.*")){let s=new FileReader,n=this.canvas;s.onload=t=>{let s=new Image;s.src=t.target.result,s.onload=()=>{let t=n.getContext("2d"),a=s.width/s.height,i=n.width/this.scale,o=n.height/this.scale,l=i,r=o;if(i/o>a?l=o*a:r=i/a,r>l){let t=r/l;l*=t,r*=t}let d=(i-l)/2,h=(o-r)/2;setTimeout(()=>{t.clearRect(0,0,i,o),t.drawImage(s,d,h,l,r),this.pad.fromDataURL(""),e()},50)},s.onerror=()=>a(Error("Failed to load image"))},s.onerror=()=>a(Error("Failed to read file")),s.readAsDataURL(t)}else a(Error("Invalid file type"))})}clearTextInput(){this.textInput&&(this.textInput.value="",this.handleDownloadState())}cleaSignaturePad(){this.pad.clear(),this.handleDownloadState()}clearFileInput(){this.fileInput&&(this.fileInput.value="",this.handleDownloadState())}handleDownloadState(){this.pad.isEmpty()&&""===this.textInput.value?(this.distributeSignatureData(null),this.disableSaveButton()):(this.cropCanvas(this.canvas).then(t=>{this.distributeSignatureData(t)}).catch(t=>{console.error("Failed to create a PNG blob:",t)}),this.enableSaveButton())}distributeSignatureData(t){let e=this.childrenNode.querySelector('input[type="file"]');
1if(t){if(this.convertBlobToBase64(t).then(e=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:e,blob:t}}))}).catch(t=>{this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),console.error("Failed to convert blob to base64:",t)}),e){let a=new File([t],`signature-${Date.now()}.png`,{type:t.type,lastModified:new Date}),s=new DataTransfer;s.items.add(a),e.files=s.files}}else this.dispatchEvent(new CustomEvent("change",{detail:{base64:null,blob:null}})),e&&(e.value="")}convertBlobToBase64(t){return new Promise((e,a)=>{let s=new FileReader;s.onloadend=()=>{e(s.result.split(",")[1])},s.onerror=t=>{a(t)},s.readAsDataURL(t)})}loadFont(){if(!this.isFontLoaded){let t=this.dataset.fontUrl||"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/files/dancing-script-latin-400-normal.woff";new FontFace("SignatureFont",`url(${t})`).load().then(t=>{document.fonts.add(t),this.isFontLoaded=!0}).catch(t=>{console.error("Font loading failed:",t)})}}downloadBlob(t,e){let a=window.URL.createObjectURL(t),s=document.createElement("a");return s.style="display: none",s.href=a,s.download=e,document.body.appendChild(s),s.click(),window.URL.revokeObjectURL(a),new Promise(t=>{t()})}cropCanvas(t){let e=t.getContext("2d"),a=t.width,s=t.height,n=s,i=0,o=a,l=0,r=e.getImageData(0,0,a,s).data;for(let t=0;t<s;t++)for(let e=0;e<a;e++)0!==r[(t*a+e)*4+3]&&(n=Math.min(n,t),i=Math.max(i,t),o=Math.min(o,e),l=Math.max(l,e));let d=l-o+1,h=i-n+1,u=document.createElement("canvas");return u.width=d,u.height=h,u.getContext("2d").drawImage(t,o,n,d,h,0,0,d,h),new Promise((t,e)=>{u.toBlob(a=>{a?t(a):e(Error("Failed to create a PNG blob."))},"image/png")})}disconnectedCallback(){this.fieldNode.remove(),this.resizeObserver&&this.resizeObserver.unobserve(this),this.intersectionObserver&&this.intersectionObserver.unobserve(this.canvas)}get tempalte(){return` 2 <div> 3 <div> 4 <div data-target="typeButtonsContainer"> 5 <div> 6 <label data-target="drawTypeButton"> 7 <svg xmlns="http://www.w3.org/2000/svg" style="width: 1.5rem; height: 1.5rem;" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> 8 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 9 <path d="M3 19c3.333 -2 5 -4 5 -6c0 -3 -1 -3 -2 -3s-2.032 1.085 -2 3c.034 2.048 1.658 2.877 2.5 4c1.5 2 2.5 2.5 3.5 1c.667 -1 1.167 -1.833 1.5 -2.5c1 2.333 2.333 3.5 4 3.5h2.5"></path> 10 <path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z"></path> 11 <path d="M16 7h4"></path> 12 </svg> 13 <span>${this.defaultLabels.drawTypeButton}</span> 14 <input type="radio" name="type_option" id="draw_radio" value="draw" style="display: none;"> 15 </label> 16 </div> 17 <div> 18 <label data-target="textTypeButton"> 19 <svg xmlns="http://www.w3.org/2000/svg" style="width: 1.5rem; height: 1.5rem;" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> 20 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 21 <path d="M3 7v-2h13v2"></path> 22 <path d="M10 5v14"></path> 23 <path d="M12 19h-4"></path> 24 <path d="M15 13v-1h6v1"></path> 25 <path d="M18 12v7"></path> 26 <path d="M17 19h2"></path> 27 </svg> 28 <span>${this.defaultLabels.textTypeButton}</span> 29 <input type="radio" name="type_option" id="text_radio" value="draw" style="display: none;"> 30 </label> 31 </div> 32 <div> 33 <label data-target="uploadTypeButton" for="signature_file_upload"> 34 <svg xmlns="http://www.w3.org/2000/svg" style="width: 1.5rem; height: 1.5rem;" width="16" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> 35 <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2"></path> 36 <path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path> 37 </svg>
38 <span>${this.defaultLabels.uploadTypeButton}</span> 39 <input data-target="fileInput" id="signature_file_upload" type="file" accept="image/*" style="display: none;"> 40 <input type="radio" name="type_option" id="upload_radio" value="upload" style="display: none;"> 41 </label> 42 </div> 43 </div> 44 </div 45 <div> 46 <div> 47 <input placeholder="${this.defaultLabels.textInputPlaceholder}" data-target="textInput"> 48 </div> 49 <div> 50 <canvas data-target="canvas"></canvas> 51 </div> 52 <div data-target="controlButtonsContainer"> 53 <div data-target="colorSelect" style="display: flex; gap: 1rem;"> 54 <input aria-label="Black" type="radio" data-target="colorInput" name="color" value="#000000" style="accent-color: #000000; transform: scale(1.5);" checked> 55 <input aria-label="Blue" type="radio" data-target="colorInput" name="color" value="#3B82F6" style="accent-color: #3B82F6; transform: scale(1.5);"> 56 <input aria-label="Green" type="radio" data-target="colorInput" name="color" value="#008000" style="accent-color: #008000; transform: scale(1.5);"> 57 <input aria-label="Red" type="radio" data-target="colorInput" name="color" value="#EF4444" style="accent-color: #EF4444; transform: scale(1.5);"> 58 </div> 59 <div> 60 <span> 61 <button aria-label="Undo" data-target="undoButton"> 62 <svg xmlns="http://www.w3.org/2000/svg" style="width: 1rem; height: 1rem;" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> 63 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 64 <path d="M9 14l-4 -4l4 -4"></path> 65 <path d="M5 10h11a4 4 0 1 1 0 8h-1"></path> 66 </svg> 67 <span>${this.defaultLabels.undoButton}</span> 68 </button> 69 </span> 70 <span> 71 <button aria-label="Clear" data-target="clearButton"> 72 <svg xmlns="http://www.w3.org/2000/svg" style="width: 1rem; height: 1rem;" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> 73 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> 74 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path> 75 <path d="M20 4v5h-5"></path> 76 </svg> 77 <span>${this.defaultLabels.clearButton}</span> 78 </button> 79 </span> 80 </div> 81 </div> 82 <div> 83 <button data-target="saveButton"> 84 <span>${this.defaultLabels.saveButton}</span> 85 </button> 86 </div> 87 </div> 88 </div> 89 `}};if("u">typeof window&&window.customElements&&!window.customElements.get("signature-maker"))window.customElements.define("signature-maker",d);else throw Error("signature-maker-js can only be used in a browser environment.");var h=({downloadOnSave:t=!1,withTyped:e=!0,withDrawn:a=!0,withUpload:s=!0,withColorSelect:i=!0,withSubmit:o=!0,controlButtonsContainerClass:l="",controlButtonsContainerStyle:r="",saveButtonText:d="",saveButtonClass:h="",saveButtonStyle:u="",saveButtonDisabledClass:p="",saveButtonsDisabledStyle:c="",undoButtonText:y="",undoButtonClass:v="",undoButtonStyle:x="",clearButtonText:b="",clearButtonClass:g="",clearButtonStyle:w="",textInputPlaceholder:f="",textInputClass:S="",textInputStyle:B="",canvasClass:m="",canvasStyle:T="",typeButtonsContainerClass:C="",typeButtonsContainerStyle:_="",drawTypeButtonText:E="",drawTypeButtonClass:k="",drawTypeButtonStyle:A="",drawTypeButtonActiveClass:D="",drawTypeButtonActiveStyle:P="",textTypeButtonText:L="",textTypeButtonClass:M="",textTypeButtonStyle:U="",textTypeButtonActiveClass:I="",textTypeButtonActiveStyle:F="",uploadTypeButtonText:N="",uploadTypeButtonClass:W="",uploadTypeButtonStyle:O="",uploadTypeButtonActiveClass:q="",uploadTypeButtonActiveStyle:z="",fontUrl:R="",className:$="",style:j={},onSave:G=()=>{},onChange:H=()=>{}})=>{if(typeof window>"u")return n.createElement("div",{},"SignatureMaker component is not supported on the server side");{let V=n.useRef(null);return n.useEffect(()=>{let t=null==V?void 0:V.current,e=t=>G&&G(t.detail);return t&&t.addEventListener("save",e),()=>{t&&t.removeEventListener("save",e)}
89},[G]),n.useEffect(()=>{let t=null==V?void 0:V.current,e=t=>H&&H(t.detail);return t&&t.addEventListener("change",e),()=>{t&&t.removeEventListener("change",e)}},[H]),n.createElement("signature-maker",{"data-download-on-save":t,"data-with-typed":e,"data-with-drawn":a,"data-with-upload":s,"data-with-color-select":i,"data-with-submit":o,"data-control-buttons-container-class":l,"data-control-buttons-container-style":r,"data-save-button-text":d,"data-save-button-class":h,"data-save-button-style":u,"data-save-button-disabled-class":p,"data-save-button-disabled-style":c,"data-undo-button-text":y,"data-undo-button-class":v,"data-undo-button-style":x,"data-clear-button-text":b,"data-clear-button-class":g,"data-clear-button-style":w,"data-text-input-placeholder":f,"data-text-input-class":S,"data-text-input-style":B,"data-canvas-class":m,"data-canvas-style":T,"data-type-buttons-container-class":C,"data-type-buttons-container-style":_,"data-draw-type-button-text":E,"data-draw-type-button-class":k,"data-draw-type-button-style":A,"data-draw-type-button-active-class":D,"data-draw-type-button-active-style":P,"data-text-type-button-text":L,"data-text-type-button-class":M,"data-text-type-button-style":U,"data-text-type-button-active-class":I,"data-text-type-button-active-style":F,"data-upload-type-button-text":N,"data-upload-type-button-class":W,"data-upload-type-button-style":O,"data-upload-type-button-active-class":q,"data-upload-type-button-active-style":z,"data-font-url":R,ref:V,className:$,style:j})}},u=a(96777);function p(t){let{onChange:e,theme:a}=t;return(0,s.jsx)(h,{canvasClass:(0,u.cn)("w-full border border-bordergray bg-white","duplex"===a||"beam"===a?"rounded-8":"rounded-none"),onChange:t=>{var a;e(null!=(a=t.base64)?a:"")},withColorSelect:!1,withSubmit:!1,withTyped:!1,withUpload:!1})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.