@verdocs/web-sdk 1.9.20 → 1.9.22

package/dist/verdocs-web-sdk/{p-8ebd80e3.system.js → p-e0e6e79d.system.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function l(e){try{s(r.next(e))}catch(e){a(e)}}function i(e){try{s(r["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):o(e.value).then(l,i)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,l;return l={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function i(e){return function(t){return s([e,t])}}function s(l){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;o=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){n.label=l[1];break}if(l[0]===6&&n.label<a[1]){n.label=a[1];a=l;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(l);break}if(a[2])n.ops.pop();n.trys.pop();continue}l=t.call(e,n)}catch(e){l=[6,e];o=0}finally{r=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-0f6da8c7.system.js","./p-e1f005fc.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.c},function(e){n=e.i}],execute:function(){var r=this;var o=t({template:null,loadProgress:0,loading:true,pageNumbers:[],pageUris:{},roleNames:[],fields:[],dirty:false}),a=o.state,l=o.onChange;e("s",a);l("template",(function(e){return __awaiter(r,void 0,void 0,(function(){return __generator(this,(function(t){if(!e){console.log("[TEMPLATESTORE] Clearing template");a.fields=[];a.roleNames=[];a.pageNumbers=[];a.dirty=false;a.loading=false;a.loadProgress=0;return[2]}console.log("[TEMPLATESTORE] Template loaded",e);a.roleNames=e.roles.map((function(e){return e.name}));console.log("[TEMPLATESTORE] Loaded roles",a.roleNames);a.fields=[];e.roles.forEach((function(e){var t;(t=a.fields).push.apply(t,e.fields)}));console.log("[TEMPLATESTORE] Loaded fields",a.fields);a.pageNumbers=n(1,e.pages.length);return[2]}))}))}));l("fields",(function(e){console.log("[TEMPLATESTORE] Field changed",e);a.dirty=true}))}}}));
-//# sourceMappingURL=p-8ebd80e3.system.js.map
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function l(e){try{s(r.next(e))}catch(e){a(e)}}function i(e){try{s(r["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):o(e.value).then(l,i)}s((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,l;return l={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function i(e){return function(t){return s([e,t])}}function s(l){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=l[0]&2?o["return"]:l[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,l[1])).done)return a;if(o=0,a)l=[l[0]&2,a.value];switch(l[0]){case 0:case 1:a=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;o=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!a||l[1]>a[0]&&l[1]<a[3])){n.label=l[1];break}if(l[0]===6&&n.label<a[1]){n.label=a[1];a=l;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(l);break}if(a[2])n.ops.pop();n.trys.pop();continue}l=t.call(e,n)}catch(e){l=[6,e];o=0}finally{r=a=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-0f6da8c7.system.js","./p-b00c8e00.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.c},function(e){n=e.i}],execute:function(){var r=this;var o=t({template:null,loadProgress:0,loading:true,pageNumbers:[],pageUris:{},roleNames:[],fields:[],dirty:false}),a=o.state,l=o.onChange;e("s",a);l("template",(function(e){return __awaiter(r,void 0,void 0,(function(){return __generator(this,(function(t){if(!e){console.log("[TEMPLATESTORE] Clearing template");a.fields=[];a.roleNames=[];a.pageNumbers=[];a.dirty=false;a.loading=false;a.loadProgress=0;return[2]}console.log("[TEMPLATESTORE] Template loaded",e);a.roleNames=e.roles.map((function(e){return e.name}));console.log("[TEMPLATESTORE] Loaded roles",a.roleNames);a.fields=[];e.roles.forEach((function(e){var t;(t=a.fields).push.apply(t,e.fields)}));console.log("[TEMPLATESTORE] Loaded fields",a.fields);a.pageNumbers=n(1,e.pages.length);return[2]}))}))}));l("fields",(function(e){console.log("[TEMPLATESTORE] Field changed",e);a.dirty=true}))}}}));
+//# sourceMappingURL=p-e0e6e79d.system.js.map

package/dist/verdocs-web-sdk/p-e5338826.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(t,e,o,i){function n(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,r){function a(t){try{l(i.next(t))}catch(t){r(t)}}function s(t){try{l(i["throw"](t))}catch(t){r(t)}}function l(t){t.done?o(t.value):n(t.value).then(a,s)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,n,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(o)try{if(i=1,n&&(r=a[0]&2?n["return"]:a[0]?n["throw"]||((r=n["return"])&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;if(n=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:o.label++;return{value:a[1],done:false};case 5:o.label++;n=a[1];a=[0];continue;case 7:a=o.ops.pop();o.trys.pop();continue;default:if(!(r=o.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){o=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){o.label=a[1];break}if(a[0]===6&&o.label<r[1]){o.label=r[1];r=a;break}if(r&&o.label<r[2]){o.label=r[2];o.ops.push(a);break}if(r[2])o.ops.pop();o.trys.pop();continue}a=e.call(t,o)}catch(t){a=[6,t];n=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-05eb4fed.system.js","./p-b00c8e00.system.js","./p-e12b7fbc.system.js","./p-af2c2f79.system.js"],(function(t){"use strict";var e,o,i,n,r,a,s;return{setters:[function(t){e=t.r;o=t.c;i=t.h;n=t.H},function(t){r=t.g},function(t){a=t.g},function(t){s=t.c},function(){}],execute:function(){var l='verdocs-field-signature{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}';var d='<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';var c=t("verdocs_field_signature",function(){function t(t){e(this,t);this.fieldChange=o(this,"fieldChange",7);this.settingsPress=o(this,"settingsPress",7);this.field=null;this.name="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0;this.tempSignature=""}t.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.handleShow();console.log("focused",this);return[2]}))}))};t.prototype.hideDialog=function(){var t;(t=this.dialog)===null||t===void 0?void 0:t.remove();this.dialog=null};t.prototype.handleAdopt=function(t){var e;console.log("[SIGNATURE] Adopted signature");this.tempSignature=t.detail;(e=this.fieldChange)===null||e===void 0?void 0:e.emit(this.tempSignature);this.hideDialog()};t.prototype.handleShow=function(){var t=this;this.dialog=document.createElement("verdocs-signature-dialog");this.dialog.setAttribute("name",this.name);this.dialog.setAttribute("roleindex",this.roleindex);this.dialog.addEventListener("cancel",(function(){return t.hideDialog()}));this.dialog.addEventListener("next",(function(e){return t.handleAdopt(e)}));document.body.append(this.dialog)};t.prototype.render=function(){var t=this;var e,o,s;var l=a(this.field);var c=this.tempSignature||l.base64;var p=(o=(e=this.disabled)!==null&&e!==void 0?e:l.disabled)!==null&&o!==void 0?o:false;var u=this.field["rgba"]||r(this.roleindex);if(this.done){return i(n,{class:{done:this.done}},c&&i("img",{src:this.tempSignature||l.base64,alt:"Signature"}))}return i(n,{class:{required:(s=this.field)===null||s===void 0?void 0:s.required,disabled:p},style:{backgroundColor:u}},c?i("img",{src:this.tempSignature||l.base64,alt:"Signature"}):i("button",{onClick:function(){return!p&&t.handleShow()}},"Signature"),this.editable&&i("verdocs-button-panel",{icon:d},i("h6",null,"Field Settings"),i("form",null,i("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}]}),i("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:function(t){return console.log("ipt",t)}}),i("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:function(t){return console.log("ipt",t)}}))))};return t}());c.style=l;var p='verdocs-signature-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}';var u=t("verdocs_signature_dialog",function(){function t(t){e(this,t);this.next=o(this,"next",7);this.cancel=o(this,"cancel",7);this.name="";this.fontLoaded=false;this.enteredName="";this.mode="type"}t.prototype.componentWillLoad=function(){var t=this;this.enteredName=this.name;var e=new FontFace("Dancing Script","url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)");e.load().then((function(e){document.fonts.add(e);t.fontLoaded=true}))};t.prototype.componentDidLoad=function(){this.redrawSignature()};t.prototype.componentDidUpdate=function(){this.redrawSignature()};t.prototype.redrawSignature=function(){if(!this.canvasElement){return}var t=this.canvasElement.width;var e=this.canvasElement.getContext("2d");e.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);var o=100;do{o-=2;e.font="".concat(o,"px Dancing Script")}while(e.measureText(this.enteredName).width>t-32);e.textAlign="center";e.textBaseline="middle";e.font="".concat(o,"px Dancing Script");e.fillText(this.enteredName,this.canvasElement.width/2,this.canvasElement.height/2)};t.prototype.handleNameChange=function(t){this.enteredName=t.target.value};t.prototype.handleCancel=function(t){t.stopPropagation();t.preventDefault();this.cancel.emit()};t.prototype.handleAdopt=function(t){t.stopPropagation();t.preventDefault();var e=this.canvasElement.toDataURL("image/png");this.next.emit(e)};t.prototype.render=function(){var t=this;return i(n,{onClick:function(e){return t.handleCancel(e)}},i("div",{class:"dialog"},i("div",{class:"heading"},"Create Your Signature"),i("div",{class:"content"},i("verdocs-text-input",{placeholder:"Full Name...",label:"Full Name",value:this.enteredName,onInput:function(e){return t.handleNameChange(e)},onClick:function(t){return t.stopPropagation()}}),i("div",{class:"as-shown"},"As shown on driver's license or govt. ID card."),this.fontLoaded?i("canvas",{ref:function(e){return t.canvasElement=e}}):i("div",{style:{display:"none"}}),i("div",{class:"disclaimer"},"By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts — just the same as a pen-and-paper signature or initial."),i("div",{class:"buttons"},i("verdocs-button",{label:"CANCEL",size:"normal",variant:"outline",onClick:function(e){return t.handleCancel(e)}}),i("verdocs-button",{label:"Adopt & Sign",size:"normal",onClick:function(e){return t.handleAdopt(e)}})))))};return t}());u.style=p;var h='verdocs-toolbar-icon{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:10000}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}';var f=t("verdocs_toolbar_icon",function(){function t(t){e(this,t);this.text="";this.icon="";this.containerId="verdocs-toolbar-icon-".concat(Math.random().toString(36).substring(2,11))}t.prototype.componentDidLoad=function(){this.popperInstance=s(this.iconEl,this.tooltip,{})};t.prototype.disconnectedCallback=function(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}};t.prototype.show=function(){var t,e;(t=this.tooltip)===null||t===void 0?void 0:t.setAttribute("data-show","");(e=this.popperInstance)===null||e===void 0?void 0:e.update().catch((function(){}))};t.prototype.hide=function(){var t;(t=this.tooltip)===null||t===void 0?void 0:t.removeAttribute("data-show")};t.prototype.render=function(){var t=this;return i(n,{class:{}},i("div",{"aria-describedby":this.containerId,class:"icon",innerHTML:this.icon,onMouseEnter:function(){return t.show()},onFocus:function(){return t.show()},onMouseLeave:function(){return t.hide()},onBlur:function(){return t.hide()},ref:function(e){return t.iconEl=e}}),i("div",{id:this.containerId,role:"tooltip",class:"tooltip","data-popper-placement":"bottom",ref:function(e){return t.tooltip=e}},this.text,i("div",{"data-popper-arrow":"true",class:"arrow"})))};return t}());f.style=h}}}));
+//# sourceMappingURL=p-e5338826.system.entry.js.map

package/dist/verdocs-web-sdk/{p-3b4d20a3.system.entry.js.map → p-e5338826.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","exports","class_1","prototype","focusField","this","handleShow","console","log","hideDialog","_a","dialog","remove","handleAdopt","e","tempSignature","detail","fieldChange","emit","_this","document","createElement","setAttribute","name","roleindex","addEventListener","body","append","render","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","class_2","componentWillLoad","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","componentDidLoad","redrawSignature","componentDidUpdate","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","concat","measureText","textAlign","textBaseline","fillText","handleNameChange","target","handleCancel","stopPropagation","preventDefault","cancel","data","toDataURL","next","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","class_3","popperInstance","createPopper","iconEl","tooltip","disconnectedCallback","destroy","show","update","catch","hide","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","onFocus","onMouseLeave","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"6tDAAA,IAAMA,EAA2B,03CCMjC,IAAMC,EACJ,6rCAWWC,EAAqBC,EAAA,0BAAA,oIAIwB,eAKhC,iBAKK,oBAMA,oBAKA,gBAKJ,qBAKI,qBAkBL,GANRC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,aACLC,QAAQC,IAAI,UAAWH,uBAQzBH,EAAAC,UAAAM,WAAA,kBACEC,EAAAL,KAAKM,UAAM,MAAAD,SAAA,OAAA,EAAAA,EAAEE,SACbP,KAAKM,OAAS,MAGhBT,EAAAC,UAAAU,YAAA,SAAYC,SACVP,QAAQC,IAAI,iCACZH,KAAKU,cAAgBD,EAAEE,QACvBN,EAAAL,KAAKY,eAAW,MAAAP,SAAA,OAAA,EAAAA,EAAEQ,KAAKb,KAAKU,eAC5BV,KAAKI,cAGPP,EAAAC,UAAAG,WAAA,WAAA,IAAAa,EAAAd,KACEA,KAAKM,OAASS,SAASC,cAAc,4BACrChB,KAAKM,OAAOW,aAAa,OAAQjB,KAAKkB,MACtClB,KAAKM,OAAOW,aAAa,YAAajB,KAAKmB,WAC3CnB,KAAKM,OAAOc,iBAAiB,UAAU,WAAM,OAAAN,EAAKV,gBAClDJ,KAAKM,OAAOc,iBAAiB,QAAQ,SAAAX,GAAK,OAAAK,EAAKN,YAAYC,MAC3DM,SAASM,KAAKC,OAAOtB,KAAKM,SAG5BT,EAAAC,UAAAyB,OAAA,WAAA,IAAAT,EAAAd,eACE,IAAMwB,EAAWC,EAAiBzB,KAAK0B,OACvC,IAAMC,EAAQ3B,KAAKU,eAAiBc,EAASI,OAC7C,IAAMC,GAAWC,GAAAzB,EAAAL,KAAK6B,YAAQ,MAAAxB,SAAA,EAAAA,EAAImB,EAASK,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAMC,EAAkB/B,KAAK0B,MAAM,SAAWM,EAAQhC,KAAKmB,WAE3D,GAAInB,KAAKiC,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMjC,KAAKiC,OAAQN,GAASO,EAAA,MAAA,CAAKG,IAAKrC,KAAKU,eAAiBc,EAASI,OAAQU,IAAI,eAGxG,OACEJ,EAACC,EAAI,CAACC,MAAO,CAACG,UAAUC,EAAAxC,KAAK0B,SAAK,MAAAc,SAAA,OAAA,EAAAA,EAAED,SAAUV,SAAQA,GAAGY,MAAO,CAACV,gBAAeA,IAC7EJ,EAAQO,EAAA,MAAA,CAAKG,IAAKrC,KAAKU,eAAiBc,EAASI,OAAQU,IAAI,cAAiBJ,EAAA,SAAA,CAAQQ,QAAS,WAAM,OAACb,GAAYf,EAAKb,eAAY,aAEnID,KAAK2C,UACJT,EAAA,uBAAA,CAAsBU,KAAMlD,GAC1BwC,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEW,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASlB,MAAO,SACxB,CAACkB,MAAO,SAAUlB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBW,MAAM,aAAalB,MAAM,GAAGoB,YAAY,uBAAuBC,QAAS,SAAAvC,GAAK,OAAAP,QAAQC,IAAI,MAAOM,MACpHyB,EAAA,qBAAA,CAAoBW,MAAM,cAAclB,MAAM,GAAGoB,YAAY,sBAAsBC,QAAS,SAAAvC,GAAK,OAAAP,QAAQC,IAAI,MAAOM,mBAzGhG,cClBlC,IAAMwC,EAA4B,oxDCUrBC,EAAsBtD,EAAA,2BAAA,uGAMV,mBAaD,uBAES,aAEP,OAExBuD,EAAArD,UAAAsD,kBAAA,WAAA,IAAAtC,EAAAd,KACEA,KAAKqD,YAAcrD,KAAKkB,KAExB,IAAMoC,EAAK,IAAIC,SAAS,iBAAkB,oHAC1CD,EAAGE,OAAOC,MAAK,SAAAC,GACb3C,SAAS4C,MAAMC,IAAIF,GACnB5C,EAAK+C,WAAa,SAItBV,EAAArD,UAAAgE,iBAAA,WACE9D,KAAK+D,mBAGPZ,EAAArD,UAAAkE,mBAAA,WACEhE,KAAK+D,mBAGPZ,EAAArD,UAAAiE,gBAAA,WACE,IAAK/D,KAAKiE,cAAe,CACvB,OAGF,IAAMC,EAAclE,KAAKiE,cAAcE,MAEvC,IAAMC,EAAUpE,KAAKiE,cAAcI,WAAW,MAC9CD,EAAQE,UAAU,EAAG,EAAGtE,KAAKiE,cAAcE,MAAOnE,KAAKiE,cAAcM,QAErE,IAAIC,EAAW,IACf,EAAG,CACDA,GAAY,EACZJ,EAAQV,KAAO,GAAAe,OAAGD,EAAQ,2BACnBJ,EAAQM,YAAY1E,KAAKqD,aAAac,MAAQD,EAAc,IAErEE,EAAQO,UAAY,SACpBP,EAAQQ,aAAe,SACvBR,EAAQV,KAAO,GAAAe,OAAGD,EAAQ,qBAC1BJ,EAAQS,SAAS7E,KAAKqD,YAAarD,KAAKiE,cAAcE,MAAQ,EAAGnE,KAAKiE,cAAcM,OAAS,IAG/FpB,EAAArD,UAAAgF,iBAAA,SAAiBrE,GACfT,KAAKqD,YAAc5C,EAAEsE,OAAOpD,OAG9BwB,EAAArD,UAAAkF,aAAA,SAAavE,GACXA,EAAEwE,kBACFxE,EAAEyE,iBACFlF,KAAKmF,OAAOtE,QAGdsC,EAAArD,UAAAU,YAAA,SAAYC,GACVA,EAAEwE,kBACFxE,EAAEyE,iBACF,IAAME,EAAOpF,KAAKiE,cAAcoB,UAAU,aAC1CrF,KAAKsF,KAAKzE,KAAKuE,IAiKjBjC,EAAArD,UAAAyB,OAAA,WAAA,IAAAT,EAAAd,KACE,OACEkC,EAACC,EAAI,CAACO,QAAS,SAAAjC,GAAK,OAAAK,EAAKkE,aAAavE,KACpCyB,EAAA,MAAA,CAAKE,MAAM,UACTF,EAAA,MAAA,CAAKE,MAAM,WAAS,yBAEpBF,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,qBAAA,CAAoBa,YAAY,eAAeF,MAAM,YAAYlB,MAAO3B,KAAKqD,YAAaL,QAAS,SAAAvC,GAAK,OAAAK,EAAKgE,iBAAiBrE,IAAIiC,QAAS,SAAAjC,GAAK,OAAAA,EAAEwE,qBAClJ/C,EAAA,MAAA,CAAKE,MAAM,YAAU,kDAWpBpC,KAAK6D,WAAa3B,EAAA,SAAA,CAAQqD,IAAK,SAAAC,GAAE,OAAK1E,EAAKmD,cAAgBuB,KAA+BtD,EAAA,MAAA,CAAKO,MAAO,CAACgD,QAAS,UAEjHvD,EAAA,MAAA,CAAKE,MAAM,cAAY,iQAKvBF,EAAA,MAAA,CAAKE,MAAM,WACTF,EAAA,iBAAA,CAAgBW,MAAM,SAAS6C,KAAK,SAASC,QAAQ,UAAUjD,QAAS,SAAAjC,GAAK,OAAAK,EAAKkE,aAAavE,MAC/FyB,EAAA,iBAAA,CAAgBW,MAAM,eAAe6C,KAAK,SAAShD,QAAS,SAAAjC,GAAK,OAAAK,EAAKN,YAAYC,oBA5Q7D,cCVnC,IAAMmF,EAAwB,orCCYjBC,EAAkBjG,EAAA,uBAAA,6CAQN,aAKA,oBAOA,wBAAA6E,OAAwBqB,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,KAEvFC,EAAApG,UAAAgE,iBAAA,WACE9D,KAAKmG,eAAiBC,EAAapG,KAAKqG,OAAQrG,KAAKsG,QAAS,KAMhEJ,EAAApG,UAAAyG,qBAAA,WACE,GAAIvG,KAAKmG,eAAgB,CACvBnG,KAAKmG,eAAeK,UACpBxG,KAAKmG,eAAiB,OAI1BD,EAAApG,UAAA2G,KAAA,oBACEpG,EAAAL,KAAKsG,WAAO,MAAAjG,SAAA,OAAA,EAAAA,EAAEY,aAAa,YAAa,KACxCa,EAAA9B,KAAKmG,kBAAc,MAAArE,SAAA,OAAA,EAAAA,EAAE4E,SAASC,OAAM,gBAGtCT,EAAApG,UAAA8G,KAAA,kBACEvG,EAAAL,KAAKsG,WAAO,MAAAjG,SAAA,OAAA,EAAAA,EAAEwG,gBAAgB,cAOhCX,EAAApG,UAAAyB,OAAA,WAAA,IAAAT,EAAAd,KACE,OACEkC,EAACC,EAAI,CAACC,MAAO,IACXF,EAAA,MAAA,CAAA4E,mBACoB9G,KAAK+G,YACvB3E,MAAM,OACN4E,UAAWhH,KAAK4C,KAChBqE,aAAc,WAAM,OAAAnG,EAAK2F,QACzBS,QAAS,WAAM,OAAApG,EAAK2F,QACpBU,aAAc,WAAM,OAAArG,EAAK8F,QACzBQ,OAAQ,WAAM,OAAAtG,EAAK8F,QACnBrB,IAAK,SAAAC,GAAE,OAAK1E,EAAKuF,OAASb,KAE5BtD,EAAA,MAAA,CAAKmF,GAAIrH,KAAK+G,YAAaO,KAAK,UAAUlF,MAAM,UAASmF,wBAAuB,SAAShC,IAAK,SAAAC,GAAE,OAAK1E,EAAKwF,QAAUd,IACjHxF,KAAKwH,KACNtF,EAAA,MAAA,CAAAuF,oBAAuB,OAAOrF,MAAM,sBAhEf","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value && <img src={this.tempSignature || settings.base64} alt=\"Signature\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","exports","class_1","prototype","focusField","this","handleShow","console","log","hideDialog","_a","dialog","remove","handleAdopt","e","tempSignature","detail","fieldChange","emit","_this","document","createElement","setAttribute","name","roleindex","addEventListener","body","append","render","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","class_2","componentWillLoad","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","componentDidLoad","redrawSignature","componentDidUpdate","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","concat","measureText","textAlign","textBaseline","fillText","handleNameChange","target","handleCancel","stopPropagation","preventDefault","cancel","data","toDataURL","next","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","class_3","popperInstance","createPopper","iconEl","tooltip","disconnectedCallback","destroy","show","update","catch","hide","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","onFocus","onMouseLeave","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value && <img src={this.tempSignature || settings.base64} alt=\"Signature\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/p-ee3deda1.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as i,H as e}from"./p-ff1278ed.js";import{g as s}from"./p-6de76553.js";import{g as r}from"./p-80e95049.js";import{c as n}from"./p-ec26fc38.js";import"./p-21603661.js";const a='verdocs-field-signature{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}';const l='<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';const d=class{constructor(i){o(this,i);this.fieldChange=t(this,"fieldChange",7);this.settingsPress=t(this,"settingsPress",7);this.field=null;this.name="";this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0;this.tempSignature=""}async focusField(){this.handleShow();console.log("focused",this)}hideDialog(){var o;(o=this.dialog)===null||o===void 0?void 0:o.remove();this.dialog=null}handleAdopt(o){var t;console.log("[SIGNATURE] Adopted signature");this.tempSignature=o.detail;(t=this.fieldChange)===null||t===void 0?void 0:t.emit(this.tempSignature);this.hideDialog()}handleShow(){this.dialog=document.createElement("verdocs-signature-dialog");this.dialog.setAttribute("name",this.name);this.dialog.setAttribute("roleindex",this.roleindex);this.dialog.addEventListener("cancel",(()=>this.hideDialog()));this.dialog.addEventListener("next",(o=>this.handleAdopt(o)));document.body.append(this.dialog)}render(){var o,t,n;const a=r(this.field);const d=this.tempSignature||a.base64;const c=(t=(o=this.disabled)!==null&&o!==void 0?o:a.disabled)!==null&&t!==void 0?t:false;const p=this.field["rgba"]||s(this.roleindex);if(this.done){return i(e,{class:{done:this.done}},d&&i("img",{src:this.tempSignature||a.base64,alt:"Signature"}))}return i(e,{class:{required:(n=this.field)===null||n===void 0?void 0:n.required,disabled:c},style:{backgroundColor:p}},d?i("img",{src:this.tempSignature||a.base64,alt:"Signature"}):i("button",{onClick:()=>!c&&this.handleShow()},"Signature"),this.editable&&i("verdocs-button-panel",{icon:l},i("h6",null,"Field Settings"),i("form",null,i("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}]}),i("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:o=>console.log("ipt",o)}),i("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:o=>console.log("ipt",o)}))))}};d.style=a;const c='verdocs-signature-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-signature-dialog .dialog{width:100%;max-width:340px;border-radius:4px;overflow:hidden;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);background:#f9f9f9}verdocs-signature-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:20px 20px 0 20px;line-height:28px;font-size:20px;font-weight:500}verdocs-signature-dialog .content{font-size:14px;padding:20px}verdocs-signature-dialog .buttons{display:-ms-flexbox;display:flex;margin:20px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}verdocs-signature-dialog .buttons verdocs-button{margin-left:16px}verdocs-signature-dialog canvas{background:#ffffff;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto;width:300px;height:79px;max-width:100%;-webkit-box-shadow:0 0 6px 0 #0000001f;box-shadow:0 0 6px 0 #0000001f}verdocs-signature-dialog .disclaimer{text-align:justify;padding:8px 0;font-size:11px;line-height:14px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .as-shown{font-size:11px;margin:4px 0 20px 4px;color:rgba(0, 0, 0, 0.54)}verdocs-signature-dialog .tabs{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}verdocs-signature-dialog .tabs .tab{padding:8px 15px;cursor:pointer}verdocs-signature-dialog .tabs .tab.active{border-bottom:2px solid #cccccc}verdocs-signature-dialog .tabs .tab:hover{color:#55bc81}';const p=class{constructor(i){o(this,i);this.next=t(this,"next",7);this.cancel=t(this,"cancel",7);this.name="";this.fontLoaded=false;this.enteredName="";this.mode="type"}componentWillLoad(){this.enteredName=this.name;const o=new FontFace("Dancing Script","url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)");o.load().then((o=>{document.fonts.add(o);this.fontLoaded=true}))}componentDidLoad(){this.redrawSignature()}componentDidUpdate(){this.redrawSignature()}redrawSignature(){if(!this.canvasElement){return}const o=this.canvasElement.width;const t=this.canvasElement.getContext("2d");t.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);let i=100;do{i-=2;t.font=`${i}px Dancing Script`}while(t.measureText(this.enteredName).width>o-32);t.textAlign="center";t.textBaseline="middle";t.font=`${i}px Dancing Script`;t.fillText(this.enteredName,this.canvasElement.width/2,this.canvasElement.height/2)}handleNameChange(o){this.enteredName=o.target.value}handleCancel(o){o.stopPropagation();o.preventDefault();this.cancel.emit()}handleAdopt(o){o.stopPropagation();o.preventDefault();const t=this.canvasElement.toDataURL("image/png");this.next.emit(t)}render(){return i(e,{onClick:o=>this.handleCancel(o)},i("div",{class:"dialog"},i("div",{class:"heading"},"Create Your Signature"),i("div",{class:"content"},i("verdocs-text-input",{placeholder:"Full Name...",label:"Full Name",value:this.enteredName,onInput:o=>this.handleNameChange(o),onClick:o=>o.stopPropagation()}),i("div",{class:"as-shown"},"As shown on driver's license or govt. ID card."),this.fontLoaded?i("canvas",{ref:o=>this.canvasElement=o}):i("div",{style:{display:"none"}}),i("div",{class:"disclaimer"},"By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts — just the same as a pen-and-paper signature or initial."),i("div",{class:"buttons"},i("verdocs-button",{label:"CANCEL",size:"normal",variant:"outline",onClick:o=>this.handleCancel(o)}),i("verdocs-button",{label:"Adopt & Sign",size:"normal",onClick:o=>this.handleAdopt(o)})))))}};p.style=c;const h='verdocs-toolbar-icon{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:10000}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:"";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}';const g=class{constructor(t){o(this,t);this.text="";this.icon="";this.containerId=`verdocs-toolbar-icon-${Math.random().toString(36).substring(2,11)}`}componentDidLoad(){this.popperInstance=n(this.iconEl,this.tooltip,{})}disconnectedCallback(){if(this.popperInstance){this.popperInstance.destroy();this.popperInstance=null}}show(){var o,t;(o=this.tooltip)===null||o===void 0?void 0:o.setAttribute("data-show","");(t=this.popperInstance)===null||t===void 0?void 0:t.update().catch((()=>{}))}hide(){var o;(o=this.tooltip)===null||o===void 0?void 0:o.removeAttribute("data-show")}render(){return i(e,{class:{}},i("div",{"aria-describedby":this.containerId,class:"icon",innerHTML:this.icon,onMouseEnter:()=>this.show(),onFocus:()=>this.show(),onMouseLeave:()=>this.hide(),onBlur:()=>this.hide(),ref:o=>this.iconEl=o}),i("div",{id:this.containerId,role:"tooltip",class:"tooltip","data-popper-placement":"bottom",ref:o=>this.tooltip=o},this.text,i("div",{"data-popper-arrow":"true",class:"arrow"})))}};g.style=h;export{d as verdocs_field_signature,p as verdocs_signature_dialog,g as verdocs_toolbar_icon};
+//# sourceMappingURL=p-ee3deda1.entry.js.map

package/dist/verdocs-web-sdk/{p-b73576e6.entry.js.map → p-ee3deda1.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","[object Object]","this","handleShow","console","log","_a","dialog","remove","e","tempSignature","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","name","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","redrawSignature","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","measureText","textAlign","textBaseline","fillText","target","stopPropagation","preventDefault","cancel","data","toDataURL","next","handleCancel","handleNameChange","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","popperInstance","createPopper","iconEl","tooltip","destroy","update","catch","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","show","onFocus","onMouseLeave","hide","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value && <img src={this.tempSignature || settings.base64} alt=\"Signature\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-signature/verdocs-field-signature.scss?tag=verdocs-field-signature","src/components/elements/verdocs-field-signature/verdocs-field-signature.tsx","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.scss?tag=verdocs-signature-dialog","src/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog.tsx","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.scss?tag=verdocs-toolbar-icon","src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":["verdocsFieldSignatureCss","settingsIcon","VerdocsFieldSignature","[object Object]","this","handleShow","console","log","_a","dialog","remove","e","tempSignature","detail","fieldChange","emit","hideDialog","document","createElement","setAttribute","name","roleindex","addEventListener","handleAdopt","body","append","settings","getFieldSettings","field","value","base64","disabled","_b","backgroundColor","getRGBA","done","h","Host","class","src","alt","required","_c","style","onClick","editable","icon","label","options","placeholder","onInput","verdocsSignatureDialogCss","VerdocsSignatureDialog","enteredName","ds","FontFace","load","then","font","fonts","add","fontLoaded","redrawSignature","canvasElement","canvasWidth","width","context","getContext","clearRect","height","fontSize","measureText","textAlign","textBaseline","fillText","target","stopPropagation","preventDefault","cancel","data","toDataURL","next","handleCancel","handleNameChange","ref","el","display","size","variant","verdocsToolbarIconCss","VerdocsToolbarIcon","Math","random","toString","substring","popperInstance","createPopper","iconEl","tooltip","destroy","update","catch","removeAttribute","aria-describedby","containerId","innerHTML","onMouseEnter","show","onFocus","onMouseLeave","hide","onBlur","id","role","data-popper-placement","text","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-signature {\n  font-family: $verdocs-primary-font;\n  width: 83px;\n  height: 36px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  letter-spacing: 0.3px;\n  background-color: transparent;\n  transform-origin: bottom left;\n  border: 1px solid rgba(0, 0, 0, 0.2);\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  &.done {\n    border: none;\n    opacity: 1;\n  }\n\n  img {\n    display: block;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  button {\n    box-sizing: border-box;\n    border: none;\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  &.required {\n    border: 1px solid rgb(204, 0, 0);\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\n  }\n\n  verdocs-button-panel {\n    top: -3px;\n    left: -2px;\n    opacity: 0.5;\n    z-index: 1000;\n    cursor: pointer;\n    position: absolute;\n    transform: scale(0.6);\n\n    &[data-active],\n    &:hover {\n      opacity: 1;\n    }\n\n    .icon {\n      svg {\n        fill: #333333;\n      }\n\n      &:hover {\n        svg {\n          fill: #000000;\n        }\n      }\n    }\n  }\n}\n","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {Component, h, Host, Prop, Event, EventEmitter, Method, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\nconst settingsIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" width=\"20\"><path d=\"m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z\"/></svg>';\n\n/**\n * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder\n * button will be shown. Clicking the button will show a dialog to adopt a signature.\n */\n@Component({\n  tag: 'verdocs-field-signature',\n  styleUrl: 'verdocs-field-signature.scss',\n  shadow: false,\n})\nexport class VerdocsFieldSignature {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\n\n  /**\n   * If set, the signature creation dialog will be initialized with this text.\n   */\n  @Prop() name?: string = '';\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop() editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop() moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop() done?: boolean = false;\n\n  /**\n   * If set, the field will be colored using this index value to select the background color.\n   */\n  @Prop() roleindex?: number = 0;\n\n  /**\n   * Event emitted when the field has changed.\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  /**\n   * Event fired on every character entered into / deleted from the field.\n   */\n  @Event({composed: true}) settingsPress: EventEmitter;\n\n  @Method() async focusField() {\n    this.handleShow();\n    console.log('focused', this);\n  }\n\n  @State()\n  tempSignature: string = '';\n\n  private dialog?: any;\n\n  hideDialog() {\n    this.dialog?.remove();\n    this.dialog = null;\n  }\n\n  handleAdopt(e: any) {\n    console.log('[SIGNATURE] Adopted signature');\n    this.tempSignature = e.detail;\n    this.fieldChange?.emit(this.tempSignature);\n    this.hideDialog();\n  }\n\n  handleShow() {\n    this.dialog = document.createElement('verdocs-signature-dialog');\n    this.dialog.setAttribute('name', this.name);\n    this.dialog.setAttribute('roleindex', this.roleindex);\n    this.dialog.addEventListener('cancel', () => this.hideDialog());\n    this.dialog.addEventListener('next', e => this.handleAdopt(e));\n    document.body.append(this.dialog);\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const value = this.tempSignature || settings.base64;\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{value && <img src={this.tempSignature || settings.base64} alt=\"Signature\" />}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        {value ? <img src={this.tempSignature || settings.base64} alt=\"Signature\" /> : <button onClick={() => !disabled && this.handleShow()}>Signature</button>}\n\n        {this.editable && (\n          <verdocs-button-panel icon={settingsIcon}>\n            <h6>Field Settings</h6>\n            <form>\n              <verdocs-select-input\n                label=\"Recipient\"\n                options={[\n                  {label: 'Buyer', value: 'Buyer'},\n                  {label: 'Seller', value: 'Seller'},\n                ]}\n              />\n\n              <verdocs-text-input label=\"Field Name\" value=\"\" placeholder=\"Stored field name...\" onInput={e => console.log('ipt', e)} />\n              <verdocs-text-input label=\"Placeholder\" value=\"\" placeholder=\"Placeholder text...\" onInput={e => console.log('ipt', e)} />\n            </form>\n          </verdocs-button-panel>\n        )}\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-signature-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n  position: fixed;\n  z-index: 10000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0000007f;\n\n  .dialog {\n    width: 100%;\n    max-width: 340px;\n    border-radius: 4px;\n    overflow: hidden;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n    background: $dialog-bg;\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    padding: 20px 20px 0 20px;\n    line-height: 28px;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .content {\n    font-size: 14px;\n    padding: 20px;\n  }\n\n  .buttons {\n    display: flex;\n    margin: 20px 0 0 0;\n    flex-direction: row;\n    justify-content: flex-end;\n    align-items: center;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  canvas {\n    background: $verdocs-grey-4;\n    box-sizing: border-box;\n    margin: 0 auto;\n    width: 300px;\n    // TODO: The original app had an aspect ratio of (80 / 305) * (signatureBodyWidth - 20)\n    height: 79px;\n    max-width: 100%;\n    box-shadow: 0 0 6px 0 #0000001f;\n  }\n\n  .disclaimer {\n    text-align: justify;\n    padding: 8px 0;\n    font-size: 11px;\n    line-height: 14px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .as-shown {\n    font-size: 11px;\n    margin: 4px 0 20px 4px;\n    color: rgba(0, 0, 0, 0.54);\n  }\n\n  .tabs {\n    display: flex;\n    flex-direction: row;\n\n    .tab {\n      padding: 8px 15px;\n      cursor: pointer;\n\n      &.active {\n        border-bottom: 2px solid $light-border-color;\n      }\n\n      &:hover {\n        color: $primary-color;\n      }\n    }\n  }\n}\n","import {Component, Prop, h, Event, EventEmitter, State, Host} from '@stencil/core';\n\n/**\n * Display a dialog that allows the user to specify a signature image, either by using a signature-font-generated image\n * based on their full name, or by hand-drawing their signature with a mouse or tablet.\n */\n@Component({\n  tag: 'verdocs-signature-dialog',\n  styleUrl: 'verdocs-signature-dialog.scss',\n})\nexport class VerdocsSignatureDialog {\n  private canvasElement?: HTMLCanvasElement;\n\n  /**\n   * Initial signature text\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Fired when the user completes the dialog and clicks Adopt. The event detail will contain a base64-encoded string\n   * representation of the signature adopted.\n   */\n  @Event({composed: true}) next: EventEmitter<string>;\n\n  /**\n   * Fired if the user cancels the dialog.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  @State() fontLoaded = false;\n\n  @State() enteredName: string = '';\n\n  @State() mode: string = 'type';\n\n  componentWillLoad() {\n    this.enteredName = this.name;\n\n    const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');\n    ds.load().then(font => {\n      document.fonts.add(font);\n      this.fontLoaded = true;\n    });\n  }\n\n  componentDidLoad() {\n    this.redrawSignature();\n  }\n\n  componentDidUpdate() {\n    this.redrawSignature();\n  }\n\n  redrawSignature() {\n    if (!this.canvasElement) {\n      return;\n    }\n\n    const canvasWidth = this.canvasElement.width;\n\n    const context = this.canvasElement.getContext('2d');\n    context.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);\n\n    let fontSize = 100;\n    do {\n      fontSize -= 2;\n      context.font = `${fontSize}px Dancing Script`;\n    } while (context.measureText(this.enteredName).width > canvasWidth - 32); // 32px padding each side\n\n    context.textAlign = 'center';\n    context.textBaseline = 'middle';\n    context.font = `${fontSize}px Dancing Script`;\n    context.fillText(this.enteredName, this.canvasElement.width / 2, this.canvasElement.height / 2);\n  }\n\n  handleNameChange(e: any) {\n    this.enteredName = e.target.value;\n  }\n\n  handleCancel(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    this.cancel.emit();\n  }\n\n  handleAdopt(e: any) {\n    e.stopPropagation();\n    e.preventDefault();\n    const data = this.canvasElement.toDataURL('image/png');\n    this.next.emit(data);\n  }\n\n  /*\n  selColor(hex: string) {\n    this.color = hex;\n    this.animateDraw();\n  }\n\n  stopDraw() {\n    this.paint = false;\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n  draw(e) {\n    this.paint = true;\n    this.addPoints(e, false);\n    this.animateDraw();\n  }\n\n  recordPoints(e) {\n    if (this.paint) {\n      this.addPoints(e, true);\n      this.animateDraw();\n    }\n  }\n\n  animateDraw() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n\n    this.canvas.strokeStyle = this.color || '#000000';\n    this.canvas.lineJoin = 'round';\n    this.canvas.lineWidth = 3;\n\n    for (let i = 0; i < this.points.length; i++) {\n      this.canvas.beginPath();\n      if (this.points[i].drag && i) {\n        this.canvas.moveTo(this.points[i - 1].x, this.points[i - 1].y);\n        // this.canvas.arc(this.points[i - 1].x, this.points[i - 1].y, 2, 0, 2 * Math.PI, false);\n      } else {\n        this.canvas.moveTo(this.points[i].x - 1, this.points[i].y);\n        // this.canvas.arc(this.points[i].x, this.points[i].y, 2, 0, 2 * Math.PI, false);\n      }\n\n      this.canvas.lineTo(this.points[i].x, this.points[i].y);\n      this.canvas.closePath();\n      this.canvas.stroke();\n    }\n  }\n\n  drawCurve(color: string, curve: number) {\n    this.canvas.beginPath();\n  }\n\n\n\n  addPoints(e, drag: boolean) {\n    if (window) {\n      let x;\n      let y;\n      e.preventDefault();\n      if (e.touches && e.touches.length > 0) {\n        x = e.touches[0].clientX;\n      } else {\n        x = e.clientX;\n      }\n\n      if (e.touches && e.touches.length > 0) {\n        y = e.touches[0].clientY;\n      } else {\n        y = e.clientY;\n      }\n      const rect = this.signatureCanvas.nativeElement.getBoundingClientRect();\n      this.points.push({\n        x: x - rect.left,\n        y: y - rect.top,\n        drag: drag\n      });\n    }\n  }\n\n  clearPad() {\n    this.canvas.clearRect(0, 0, this.canvas.canvas.offsetWidth, this.canvas.canvas.offsetHeight);\n    this.points = [];\n    this.adoptedAndSigned = !this.hasSignature();\n  }\n\n    async adoptAndSign() {\n    try {\n      this.adoptedAndSigned = true;\n      await this.updateFullName();\n      await this.captureSignatureFromCanvas();\n      const message = this.signatureMode === 'Signature' ? 'Saving Signature' : 'Saving Initial';\n      this.snackbarService.open(message, 'OK', this.snackbarService.initConfig(null, 'bottom'));\n      this.handleMode();\n    } catch (err) {\n      this.snackbarService.open('Failed to apply signature', 'OK', this.snackbarService.initConfig(null, 'bottom'));\n    }\n  }\n\n  handleMode() {\n    let currentField;\n    switch (this.mode) {\n      case 'signerview':\n        if (this.signatureMode === 'Signature') {\n          this.signatureService.postSignatureBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateSigned(currentField.fName, true);\n              this.signatureService.toggleSig(false);\n              this.signatureService.setSignatureId(result.id);\n              this.signatureService.putSignatureField(this.envelopeId, this.fieldName, result.id).then(res => {\n                this.eventTracker.createEvent({\n                  category: 'verdoc',\n                  action: 'verdoc signed',\n                  label: `verdoc id: ${this.envelopeId}`\n                })\n                if (res && res.settings) {\n                  this.signatureService.setSignatureData(res.settings.base64);\n                  this.signatureService.setSignatureId(res.settings.signature_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_sig: res.settings.base64, sig_id: res.settings.signature_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save signature. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        } else {\n          this.signatureService.postInitialBlob().then(result => {\n            if (result && result.id && result.url) {\n              currentField = this.signatureService.currField;\n              this.signatureService.updateInitialed(currentField.fName, true);\n              this.signatureService.setInitialId(result.id);\n              this.signatureService.toggleSig(false);\n              this.signatureService.putInitialField(this.envelopeId, this.fieldName, result.id).then(res => {\n                if (res && res.settings) {\n                  this.signatureService.setInitialData(res.settings.base64);\n                  this.signatureService.setInitialId(res.settings.initial_id);\n                }\n                this.snackbarService.dismiss();\n                this.dialog.close({ status: 'saved', temp_int: res.settings.base64, int_id: res.settings.initial_id });\n              }).catch(err => {\n                this.snackbarService.open('Failed to save initial. Please try again.', 'DISMISS', {\n                  duration: 3000\n                });\n                this.adoptedAndSigned = false;\n                return err;\n              });\n            }\n          });\n        }\n        break;\n    }\n  }\n   */\n\n  render() {\n    return (\n      <Host onClick={e => this.handleCancel(e)}>\n        <div class=\"dialog\">\n          <div class=\"heading\">Create Your Signature</div>\n\n          <div class=\"content\">\n            <verdocs-text-input placeholder=\"Full Name...\" label=\"Full Name\" value={this.enteredName} onInput={e => this.handleNameChange(e)} onClick={e => e.stopPropagation()} />\n            <div class=\"as-shown\">As shown on driver's license or govt. ID card.</div>\n\n            {/*<div class=\"tabs\">*/}\n            {/*  <div class={{tab: true, active: this.mode === 'type'}} onClick={() => (this.mode = 'type')}>*/}\n            {/*    Type*/}\n            {/*  </div>*/}\n            {/*<div class={{tab: true, active: this.mode === 'draw'}} onClick={() => (this.mode = 'draw')}>*/}\n            {/*  Draw*/}\n            {/*</div>*/}\n            {/*</div>*/}\n\n            {this.fontLoaded ? <canvas ref={el => (this.canvasElement = el as HTMLCanvasElement)} /> : <div style={{display: 'none'}} />}\n\n            <div class=\"disclaimer\">\n              By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents,\n              including legally binding contracts &mdash; just the same as a pen-and-paper signature or initial.\n            </div>\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"CANCEL\" size=\"normal\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n              <verdocs-button label=\"Adopt & Sign\" size=\"normal\" onClick={e => this.handleAdopt(e)} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-toolbar-icon {\n  font-family: $verdocs-primary-font;\n  display: inline-block;\n\n  .icon {\n    display: inline-block;\n    cursor: pointer;\n\n    svg {\n      fill: $choice-available-color;\n    }\n  }\n\n  .tooltip {\n    display: none;\n    box-shadow: 0 0 10px 1px #999999;\n    background: #ffffff;\n    color: $label-color;\n    max-width: 240px;\n    font-weight: bold;\n    padding: 5px 10px;\n    font-size: 13px;\n    position: relative;\n    border-radius: 4px;\n    z-index: 10000;\n\n    .arrow,\n    .arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    .arrow {\n      visibility: hidden;\n      top: -4px;\n    }\n\n    .arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n    }\n\n    &[data-show] {\n      display: block;\n    }\n\n    &[data-popper-placement^='top'] > .arrow {\n      bottom: -4px;\n    }\n\n    &[data-popper-placement^='bottom'] > .arrow {\n      top: -4px;\n    }\n\n    &[data-popper-placement^='left'] > .arrow {\n      right: -4px;\n    }\n\n    &[data-popper-placement^='right'] > .arrow {\n      left: -4px;\n    }\n  }\n}\n","import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/{p-89d6f165.js → p-f2d637b8.js}

@@ -1,2 +1,2 @@
-import{g as t}from"./p-c2cc4492.js";import{s as e}from"./p-19418b30.js";const o=async(o,r)=>{e.template=null;if(!r){console.log(`[TEMPLATES] Missing required template ID`);return}e.loading=true;try{console.log(`[TEMPLATES] Loading template ${r}`);const a=await t(o,r,true);if(!a){console.log("[TEMPLATES] Unable to load template");return}e.template=a;e.loading=false}catch(t){console.log("[TEMPLATES] Error loading template",t);throw t}};export{o as l};
-//# sourceMappingURL=p-89d6f165.js.map
+import{g as t}from"./p-c2cc4492.js";import{s as e}from"./p-0012a455.js";const o=async(o,r)=>{e.template=null;if(!r){console.log(`[TEMPLATES] Missing required template ID`);return}e.loading=true;try{console.log(`[TEMPLATES] Loading template ${r}`);const a=await t(o,r,true);if(!a){console.log("[TEMPLATES] Unable to load template");return}e.template=a;e.loading=false}catch(t){console.log("[TEMPLATES] Error loading template",t);throw t}};export{o as l};
+//# sourceMappingURL=p-f2d637b8.js.map

package/dist/verdocs-web-sdk/p-f563a7c8.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as o,H as s,F as t,a as r}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as l}from"./p-1f1127dd.js";import{a as n,r as a,s as d}from"./p-80e95049.js";import{g as c,s as p}from"./p-96eb4665.js";import{S as v}from"./p-7a1b2643.js";import"./p-21603661.js";import"./p-5ea05a1d.js";const x='verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-view .header .inner{width:100%;max-width:1028px}verdocs-view .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-view .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-view .tools .logo{width:77.5px;margin:-6px 0 0 5px}verdocs-view .tools .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-view .document .inner{width:100%;max-width:1028px}';const f=`<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>`;const h=`<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>`;const g=class{constructor(o){e(this,o);this.sdkError=i(this,"sdkError",7);this.endpoint=l.getDefault();this.envelopeId=""}componentWillLoad(){this.endpoint.loadSession()}async componentDidLoad(){var e,i,o;if(!this.envelopeId){console.error(`[VIEW] Missing reuqired envelopeId`);return}try{await c(this.endpoint,this.envelopeId)}catch(s){(e=this.sdkError)===null||e===void 0?void 0:e.emit(new v(s.message,(i=s.response)===null||i===void 0?void 0:i.status,(o=s.response)===null||o===void 0?void 0:o.data))}}attachFieldAttributes(e,i,o){o.setAttribute("roleindex",i);o.setAttribute("xScale",e.xScale);o.setAttribute("yScale",e.yScale)}handlePageRendered(e){const i=e.detail;console.log("[SIGN] Page rendered",i);p.envelope.recipients.map((e=>{const o=e.fields.filter((e=>e.page===i.pageNumber));console.log("[SIGN] Fields on page",o);o.forEach((e=>{const o=n(p.roleNames,e.recipient_role);const s=a(e,i,o,{disabled:true,editable:false,draggable:false,done:true});if(!s){return}if(Array.isArray(s)){s.map((e=>this.attachFieldAttributes(i,o,e)))}else{this.attachFieldAttributes(i,o,s)}}))}))}render(){var e;console.log("[VIEW] Rendering",p.error,p.loading,p.envelope);if(p.loading||!p.envelope){return o(s,null,o("verdocs-loader",null))}if(p.error){return o(s,null,o("div",null,p.error))}return o(s,null,o("div",{class:"header"},o("div",{class:"inner"},o("div",{class:"toolbar"},o("div",{class:"tools"},o(t,null,o("img",{src:"https://verdocs.com/assets/white-logo.svg",alt:"Verdocs Logo",class:"logo"}),o("div",{class:"title"},p.envelope.name),o("div",{style:{flex:"1"}}),o("div",{innerHTML:f,style:{width:"24px",height:"24px",fill:"#ffffff",cursor:"pointer"},onClick:()=>window.print()}),o("div",{innerHTML:h,style:{width:"24px",height:"24px",fill:"#ffffff",cursor:"pointer",marginLeft:"16px",maginRight:"30px"},onClick:()=>d(this.endpoint,p.envelope,p.envelope.envelope_document_id).catch((()=>{}))})))))),o("div",{class:"document"},(((e=p.envelope)===null||e===void 0?void 0:e.documents)||[]).map((e=>{const i=[...(e===null||e===void 0?void 0:e.pages)||[]];i.sort(((e,i)=>e.sequence-i.sequence));return o(t,null,i.map((e=>o("verdocs-document-page",{pageImageUri:e.display_uri,virtualWidth:612,virtualHeight:792,pageNumber:e.sequence,onPageRendered:e=>this.handlePageRendered(e),layers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]}))))}))))}get component(){return r(this)}};g.style=x;export{g as verdocs_view};
+//# sourceMappingURL=p-f563a7c8.entry.js.map

package/dist/verdocs-web-sdk/p-f563a7c8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/embeds/verdocs-view/verdocs-view.scss?tag=verdocs-view","src/components/embeds/verdocs-view/verdocs-view.tsx"],"names":["verdocsViewCss","PrintIcon","DownloadIcon","VerdocsView","VerdocsEndpoint","getDefault","[object Object]","this","endpoint","loadSession","envelopeId","console","error","getEnvelopeById","e","_a","sdkError","emit","SDKError","message","_b","response","status","_c","data","pageInfo","roleIndex","el","setAttribute","xScale","yScale","detail","log","EnvelopeStore","envelope","recipients","map","recipient","fields","filter","field","page","pageNumber","forEach","getRoleIndex","roleNames","recipient_role","renderDocumentField","disabled","editable","draggable","done","Array","isArray","attachFieldAttributes","loading","h","Host","class","Fragment","src","alt","name","style","flex","innerHTML","width","height","fill","cursor","onClick","window","print","marginLeft","maginRight","savePDF","envelope_document_id","catch","documents","envelopeDocument","pages","sort","a","b","sequence","pageImageUri","display_uri","virtualWidth","virtualHeight","onPageRendered","handlePageRendered","layers","type"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-view {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  min-height: 600px;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: $verdocs-primary-font;\n\n  div,\n  canvas {\n    box-sizing: border-box;\n  }\n\n  .header {\n    flex: 0;\n    display: flex;\n    z-index: 1000;\n    align-items: center;\n    transition: all 0.25s;\n    justify-content: center;\n    background-color: $medium-bg;\n    box-shadow: 0 4px 4px 0 rgb(0 0 0 / 24%), 0 0 4px 0 rgb(0 0 0 / 12%);\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n\n  .toolbar {\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 14px;\n    position: relative;\n  }\n\n  .tools {\n    width: 100%;\n    color: #fff;\n    height: 56px;\n    display: flex;\n    font-size: 12px;\n    align-items: center;\n    flex-direction: row;\n    background-color: $medium-bg;\n\n    .logo {\n      width: 77.5px;\n      margin: -6px 0 0 5px;\n    }\n\n    .title {\n      padding-left: 16px;\n      font-size: 18px;\n      font-weight: 500;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .document {\n    flex: 1;\n    height: 100%;\n    display: flex;\n    padding: 15px;\n    row-gap: 15px;\n    min-height: 200px;\n    position: relative;\n    overflow-y: scroll;\n    align-items: center;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: center;\n\n    .inner {\n      width: 100%;\n      max-width: 1028px;\n    }\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Component, h, Element, Event, Host, Prop, EventEmitter, Fragment} from '@stencil/core';\nimport {getRoleIndex, renderDocumentField, savePDF} from '../../../utils/utils';\nimport {getEnvelopeById} from '../../../utils/Envelopes';\nimport EnvelopeStore from '../../../utils/envelopeStore';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\n\nconst PrintIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\"></path></svg>`;\n\nconst DownloadIcon = `<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\"><path d=\"M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z\"></path></svg>`;\n\n/**\n * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.\n */\n@Component({\n  tag: 'verdocs-view',\n  styleUrl: 'verdocs-view.scss',\n  shadow: false,\n})\nexport class VerdocsView {\n  @Element() component: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.\n   */\n  @Prop() envelopeId: string = '';\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  componentWillLoad() {\n    this.endpoint.loadSession();\n  }\n\n  // TODO: Handling signing vs preview-as-user cases\n  // TODO: Handle anonymous case and failure to load due to not being logged in\n  async componentDidLoad() {\n    if (!this.envelopeId) {\n      console.error(`[VIEW] Missing reuqired envelopeId`);\n      return;\n    }\n\n    try {\n      await getEnvelopeById(this.endpoint, this.envelopeId);\n    } catch (e) {\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  // Determine whether a page is \"rotated\" (in either direction)\n  // isRotated(rotation) {\n  //   return rotation !== 0 && rotation % 180 !== 0;\n  // }\n\n  // Render one document page. Note that pageNumber is 1-based.\n  // async renderPage(pageNumber: number): Promise<void> {\n  //   const domPage = this.domPages[pageNumber];\n  //\n  //   // Two async operations happen here, loading the PDF and rendering the DOM div/canvas placeholders to draw the pages on.\n  //   if (!domPage) {\n  //     console.log('[VIEW] Skipping rendering page not yet in DOM', {pageNumber});\n  //     return;\n  //   }\n  //\n  //   const pageMetrics = this.sourcePageMetrics[pageNumber];\n  //\n  //   console.log('[VIEW] Rendering page', {pageNumber, pageMetrics, domPage});\n  //   try {\n  //     // const pdfPage = await this.pdfDocument.getPage(pageNumber);\n  //     // const viewport = pdfPage.getViewport({scale: domPage.xScale});\n  //     // console.log('[VIEW] Page viewport', domPage.xScale, viewport);\n  //\n  //     // const canvas = document.getElementById(`${domPage.containerId}-page`) as HTMLCanvasElement | null;\n  //     // if (!canvas) {\n  //     //   console.log('[VIEW] Unable to find canvas element');\n  //     //   return;\n  //     // }\n  //     //\n  //     // canvas.width = domPage.renderedWidth;\n  //     // canvas.height = domPage.renderedHeight;\n  //     // const canvasContext = canvas.getContext('2d');\n  //     // canvasContext.clearRect(0, 0, domPage.renderedWidth, domPage.renderedHeight);\n  //     // await pdfPage.render({canvasContext, viewport});\n  //\n  //     this.pageRendered.emit({\n  //       renderedPage: domPage,\n  //       sourcePageMetrics: pageMetrics,\n  //       pages: this.domPages,\n  //     });\n  //   } catch (e) {\n  //     this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //     console.warn('[VIEW] Error rendering page', e);\n  //   }\n  // }\n\n  // async renderPages(): Promise<void> {\n  //   const pageNumbersToRender = integerSequence(1, this.numPages);\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     try {\n  //       await this.renderPage(pageNumber);\n  //     } catch (e) {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.warn('[VIEW] Error rendering pages', e);\n  //     }\n  //   }\n  // }\n\n  // onProgress(progress: OnProgressParameters) {\n  //   console.log(`[VIEW] Progress ${Math.floor((progress.loaded / progress.total) * 100)} (${progress.loaded} / ${progress.total})`);\n  //   this.loadProgress = Math.floor((100 * progress.loaded) / progress.total);\n  // }\n\n  // After a document is done loading, go through its pages to get their dimensions\n  // async parsePageMetrics(pdfDocument: pdfjsLib.PDFDocumentProxy) {\n  //   const pageNumbersToRender = integerSequence(1, pdfDocument.numPages);\n  //\n  //   for await (let pageNumber of pageNumbersToRender) {\n  //     const pdfPage = await pdfDocument.getPage(1);\n  //     const [pageX0, pageY0, pageX1, pageY1] = pdfPage.view;\n  //     this.sourcePageMetrics[pageNumber] = {width: pageX1 - pageX0, height: pageY1 - pageY0};\n  //   }\n  //\n  //   console.log('[VIEW] Parsed page metrics', this.sourcePageMetrics);\n  // }\n\n  // loadAndRender(src: string): void {\n  //   console.log('[VIEW] Loading', src);\n  //\n  //   const token = this.endpoint.getToken();\n  //   const httpHeaders = token ? {Authorization: `Bearer ${token}`} : {};\n  //\n  //   const source = {\n  //     url: src,\n  //     cMapUrl: CMAPS_URL,\n  //     cMapPacked: true,\n  //     httpHeaders,\n  //     withCredentials: true,\n  //     stopAtErrors: true,\n  //     verbosity: pdfjsLib.VerbosityLevel.WARNINGS,\n  //     // verbosity: pdfjsLib.VerbosityLevel.INFOS,\n  //   } as DocumentInitParameters;\n  //\n  //   // @ts-ignore\n  //   const loadingTask = pdf.getDocument(source, null, null, this.onProgress);\n  //   loadingTask.onProgress = this.onProgress;\n  //   loadingTask.promise\n  //     .then(async (pdfDocument: pdfjsLib.PDFDocumentProxy) => {\n  //       await this.parsePageMetrics(pdfDocument);\n  //\n  //       this.pdfDocument = pdfDocument;\n  //       this.numPages = pdfDocument.numPages;\n  //       this.fingerprints = pdfDocument.fingerprints;\n  //       console.log(`[VIEW] Got PDF document fingerprints \"${this.fingerprints.join(', ')}\", ${this.numPages} page(s)`);\n  //\n  //       // We don't try to render the pages here, setting loadProtress triggers that by adding the individual page entries in\n  //       // DOM in render() below. Each page then fires onPageRendered when it is ready to receive content.\n  //       this.loadProgress = 100;\n  //     })\n  //     .catch(e => {\n  //       this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n  //       console.log('[VIEW] Loading error', e);\n  //     });\n  // }\n\n  // async handlePageRendered(e: any) {\n  //   e.stopPropagation();\n  //\n  //   const domPage = e.detail as IDocumentPageInfo;\n  //   this.domPages[domPage.pageNumber] = domPage;\n  //   await this.renderPage(domPage.pageNumber);\n  // }\n\n  attachFieldAttributes(pageInfo, roleIndex, el) {\n    el.setAttribute('roleindex', roleIndex);\n    el.setAttribute('xScale', pageInfo.xScale);\n    el.setAttribute('yScale', pageInfo.yScale);\n  }\n\n  handlePageRendered(e) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    console.log('[SIGN] Page rendered', pageInfo);\n\n    EnvelopeStore.envelope.recipients.map(recipient => {\n      const fields = recipient.fields.filter(field => field.page === pageInfo.pageNumber);\n      // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);\n      console.log('[SIGN] Fields on page', fields);\n      fields.forEach(field => {\n        const roleIndex = getRoleIndex(EnvelopeStore.roleNames, field.recipient_role);\n        const el = renderDocumentField(field, pageInfo, roleIndex, {\n          disabled: true,\n          editable: false,\n          draggable: false,\n          done: true,\n        });\n        if (!el) {\n          return;\n        }\n\n        if (Array.isArray(el)) {\n          el.map(e => this.attachFieldAttributes(pageInfo, roleIndex, e));\n        } else {\n          this.attachFieldAttributes(pageInfo, roleIndex, el);\n        }\n\n        // interact(el).draggable({\n        //   listeners: {\n        //     start(event) {\n        //       console.log('[FIELDS] Drag started', event.type, event.target);\n        //     },\n        //     move(event) {\n        //       const oldX = +(event.target.getAttribute('posX') || 0);\n        //       const oldY = +(event.target.getAttribute('posY') || 0);\n        //       const xScale = +(event.target.getAttribute('xScale') || 1);\n        //       const yScale = +(event.target.getAttribute('yScale') || 1);\n        //       const newX = event.dx / xScale + oldX;\n        //       const newY = event.dy / yScale + oldY;\n        //       event.target.setAttribute('posX', newX);\n        //       event.target.setAttribute('posy', newY);\n        //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);\n        //     },\n        //     end(event) {\n        //       console.log('[FIELDS] Drag ended', event);\n        //       // event.target.setAttribute('posX', 0);\n        //       // event.target.setAttribute('posy', 0);\n        //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);\n        //     },\n        //   },\n        // });\n      });\n    });\n  }\n\n  render() {\n    console.log('[VIEW] Rendering', EnvelopeStore.error, EnvelopeStore.loading, EnvelopeStore.envelope);\n    if (EnvelopeStore.loading || !EnvelopeStore.envelope) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    if (EnvelopeStore.error) {\n      return (\n        <Host>\n          <div>{EnvelopeStore.error}</div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <div class=\"header\">\n          <div class=\"inner\">\n            <div class=\"toolbar\">\n              <div class=\"tools\">\n                <Fragment>\n                  <img src=\"https://verdocs.com/assets/white-logo.svg\" alt=\"Verdocs Logo\" class=\"logo\" />\n                  <div class=\"title\">{EnvelopeStore.envelope.name}</div>\n                  <div style={{flex: '1'}} />\n                  <div innerHTML={PrintIcon} style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer'}} onClick={() => window.print()} />\n                  <div\n                    innerHTML={DownloadIcon}\n                    style={{width: '24px', height: '24px', fill: '#ffffff', cursor: 'pointer', marginLeft: '16px', maginRight: '30px'}}\n                    onClick={() => savePDF(this.endpoint, EnvelopeStore.envelope, EnvelopeStore.envelope.envelope_document_id).catch(() => {})}\n                  />\n                </Fragment>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"document\">\n          {(EnvelopeStore.envelope?.documents || []).map(envelopeDocument => {\n            const pages = [...(envelopeDocument?.pages || [])];\n            pages.sort((a, b) => a.sequence - b.sequence);\n\n            return (\n              <Fragment>\n                {pages.map(page => (\n                  <verdocs-document-page\n                    pageImageUri={page.display_uri}\n                    virtualWidth={612}\n                    virtualHeight={792}\n                    pageNumber={page.sequence}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                ))}\n              </Fragment>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/{p-2c0e91da.system.js → p-f9915732.system.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{u(r.next(e))}catch(e){a(e)}}function l(e){try{u(r["throw"](e))}catch(e){a(e)}}function u(e){e.done?n(e.value):o(e.value).then(i,l)}u((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,i;return i={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function l(e){return function(t){return u([e,t])}}function u(i){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=i[0]&2?o["return"]:i[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,i[1])).done)return a;if(o=0,a)i=[i[0]&2,a.value];switch(i[0]){case 0:case 1:a=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;o=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!a||i[1]>a[0]&&i[1]<a[3])){n.label=i[1];break}if(i[0]===6&&n.label<a[1]){n.label=a[1];a=i;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(i);break}if(a[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];o=0}finally{r=a=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-9cecb5df.system.js","./p-8ebd80e3.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.g},function(e){n=e.s}],execute:function(){var r=this;var o=e("l",(function(e,o){return __awaiter(r,void 0,void 0,(function(){var r,a;return __generator(this,(function(i){switch(i.label){case 0:n.template=null;if(!o){console.log("[TEMPLATES] Missing required template ID");return[2]}n.loading=true;i.label=1;case 1:i.trys.push([1,3,,4]);console.log("[TEMPLATES] Loading template ".concat(o));return[4,t(e,o,true)];case 2:r=i.sent();if(!r){console.log("[TEMPLATES] Unable to load template");return[2]}n.template=r;n.loading=false;return[3,4];case 3:a=i.sent();console.log("[TEMPLATES] Error loading template",a);throw a;case 4:return[2]}}))}))}))}}}));
-//# sourceMappingURL=p-2c0e91da.system.js.map
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{u(r.next(e))}catch(e){a(e)}}function l(e){try{u(r["throw"](e))}catch(e){a(e)}}function u(e){e.done?n(e.value):o(e.value).then(i,l)}u((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,o,a,i;return i={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function l(e){return function(t){return u([e,t])}}function u(i){if(r)throw new TypeError("Generator is already executing.");while(n)try{if(r=1,o&&(a=i[0]&2?o["return"]:i[0]?o["throw"]||((a=o["return"])&&a.call(o),0):o.next)&&!(a=a.call(o,i[1])).done)return a;if(o=0,a)i=[i[0]&2,a.value];switch(i[0]){case 0:case 1:a=i;break;case 4:n.label++;return{value:i[1],done:false};case 5:n.label++;o=i[1];i=[0];continue;case 7:i=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!a||i[1]>a[0]&&i[1]<a[3])){n.label=i[1];break}if(i[0]===6&&n.label<a[1]){n.label=a[1];a=i;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(i);break}if(a[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];o=0}finally{r=a=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-9cecb5df.system.js","./p-e0e6e79d.system.js"],(function(e){"use strict";var t,n;return{setters:[function(e){t=e.g},function(e){n=e.s}],execute:function(){var r=this;var o=e("l",(function(e,o){return __awaiter(r,void 0,void 0,(function(){var r,a;return __generator(this,(function(i){switch(i.label){case 0:n.template=null;if(!o){console.log("[TEMPLATES] Missing required template ID");return[2]}n.loading=true;i.label=1;case 1:i.trys.push([1,3,,4]);console.log("[TEMPLATES] Loading template ".concat(o));return[4,t(e,o,true)];case 2:r=i.sent();if(!r){console.log("[TEMPLATES] Unable to load template");return[2]}n.template=r;n.loading=false;return[3,4];case 3:a=i.sent();console.log("[TEMPLATES] Error loading template",a);throw a;case 4:return[2]}}))}))}))}}}));
+//# sourceMappingURL=p-f9915732.system.js.map

package/dist/verdocs-web-sdk/p-fed9fd2b.system.entry.js

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function s(e){try{l(i.next(e))}catch(e){o(e)}}function a(e){try{l(i["throw"](e))}catch(e){o(e)}}function l(e){e.done?n(e.value):r(e.value).then(s,a)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=s[0]&2?r["return"]:s[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;if(r=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];r=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var i=0,r=t.length,o;i<r;i++){if(o||!(i in t)){if(!o)o=Array.prototype.slice.call(t,0,i);o[i]=t[i]}}return e.concat(o||Array.prototype.slice.call(t))};System.register(["./p-97329951.system.js","./p-b00c8e00.system.js","./p-a7433630.system.js","./p-7efdefa3.system.js","./p-cf1ed6b8.system.js","./p-112b3e2c.system.js","./p-187b20b7.system.js","./p-af2c2f79.system.js","./p-0f6da8c7.system.js"],(function(e){"use strict";var t,n,i,r,o,s,a,l,d,c,u,p,h,f,v,g,m,x,b,y;return{setters:[function(e){t=e.r;n=e.c;i=e.h;r=e.H;o=e.F},function(e){s=e.b;a=e.s;l=e.u;d=e.c;c=e.d;u=e.f;p=e.a;h=e.r;f=e.e},function(){},function(e){v=e.a;g=e.i},function(e){m=e.V},function(e){x=e.g;b=e.s},function(e){y=e.S},function(){},function(){}],execute:function(){var w=undefined&&undefined.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function s(e){try{l(i.next(e))}catch(e){o(e)}}function a(e){try{l(i["throw"](e))}catch(e){o(e)}}function l(e){e.done?n(e.value):r(e.value).then(s,a)}l((i=i.apply(e,t||[])).next())}))};var k=undefined&&undefined.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,r,o,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(e){return function(t){return l([e,t])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,r&&(o=s[0]&2?r["return"]:s[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;if(r=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];r=0}finally{i=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var I=function(e,t,n,i){return w(void 0,void 0,void 0,(function(){return k(this,(function(r){return[2,e.api.put("/envelopes/".concat(t,"/recipients/").concat(n),i).then((function(e){return e.data}))]}))}))};var _=function(e,t,n){return I(e,t,n,{action:"submit"})};var S=function(e,t,n){return I(e,t,n,{action:"decline"})};var F=function(e,t,n,i){return I(e,t,n,{action:"update",agreed:i})};var L=function(e,t,n){var i=new FormData;i.append("signature",n,t);return e.api.post("/signatures",i).then((function(e){return e.data}))};var N=function(e,t,n){var i=new FormData;i.append("initial",n,t);return e.api.post("/initials",i).then((function(e){return e.data}))};var A='verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign .header{-ms-flex:0;flex:0;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.25s;transition:all 0.25s;-ms-flex-pack:center;justify-content:center;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .inner{width:100%;max-width:1028px}verdocs-sign .intro{width:100%;height:60px;display:-ms-flexbox;display:flex;background:#ffffff;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .intro .inner{width:100%;color:#111111;padding:0 14px;font-size:20px;font-weight:500;line-height:28px;max-width:1024px}verdocs-sign .toolbar{width:100%;margin:0 auto;padding:0 14px;position:relative}verdocs-sign .tools{width:100%;color:#fff;height:56px;display:-ms-flexbox;display:flex;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;background-color:#33354c}verdocs-sign .tools .logo{width:77.5px;margin:-6px 0 0 5px}verdocs-sign .tools .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}@media print{verdocs-sign .header{display:none}}';var D='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"></path></svg>';var C='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M5 20h14v-2H5v2zM19 9h-4V3H9v6H5l7 7 7-7z"></path></svg>';var z=e("verdocs_sign",function(){function e(e){t(this,e);this.sdkError=n(this,"sdkError",7);this.envelopeLoaded=n(this,"envelopeLoaded",7);this.envelopeUpdated=n(this,"envelopeUpdated",7);this.endpoint=null;this.recipientIndex=-1;this.fields=[];this.envelopeId=null;this.roleId=null;this.inviteCode=null;this.recipient=null;this.signerToken=null;this.hasSignature=false;this.nextButtonLabel="Start";this.nextSubmits=false;this.errorMessage="";this.focusedField="";this.isDone=false;this.showDone=false;this.finishLater=false;this.showFinishLater=false}e.prototype.componentWillLoad=function(){this.endpoint=new m({sessionType:"signing"})};e.prototype.componentDidLoad=function(){return w(this,void 0,void 0,(function(){var e,t,n,i,r,o,a,l,d,c,u,p;var h=this;return k(this,(function(f){switch(f.label){case 0:if(!this.envelopeId){(e=this.sdkError)===null||e===void 0?void 0:e.emit(new y("[SIGN] Missing required envelopId",500,""));return[2]}if(!this.roleId){(t=this.sdkError)===null||t===void 0?void 0:t.emit(new y("[SIGN] Missing required roleId",500,""));return[2]}if(!this.inviteCode){(n=this.sdkError)===null||n===void 0?void 0:n.emit(new y("[SIGN] Missing required inviteCode",500,""));return[2]}f.label=1;case 1:f.trys.push([1,4,,5]);console.log("[SIGN] Processing invite code for ".concat(this.envelopeId," / ").concat(this.roleId));return[4,s(this.endpoint,{envelopeId:this.envelopeId,roleId:this.roleId,inviteCode:this.inviteCode})];case 2:l=f.sent(),d=l.session,c=l.recipient,u=l.signerToken;console.log("[SIGN] Loaded signing session ".concat(d.email," / ").concat(d.profile_id));this.recipient=c;this.signerToken=u;this.endpoint.setToken(u);if(this.recipient.agreed){this.nextButtonLabel="Next"}return[4,x(this.endpoint,this.envelopeId)];case 3:f.sent();this.recipientIndex=b.envelope.recipients.findIndex((function(e){return e.role_name==h.roleId}));if(this.recipientIndex>-1){this.recipient=b.envelope.recipients[this.recipientIndex];this.fields=this.recipient.fields}this.isDone=["submitted","canceled","declined"].includes(this.recipient.status);console.log("Done",this.isDone);(i=this.envelopeLoaded)===null||i===void 0?void 0:i.emit({endpoint:this.endpoint,envelope:b.envelope});return[3,5];case 4:p=f.sent();console.log("Error with signing session",p);(r=this.sdkError)===null||r===void 0?void 0:r.emit(new y(p.message,(o=p.response)===null||o===void 0?void 0:o.status,(a=p.response)===null||a===void 0?void 0:a.data));return[3,5];case 5:return[2]}}))}))};e.prototype.handleClickAgree=function(){var e=this;F(this.endpoint,this.envelopeId,this.roleId,true).then((function(t){var n;e.nextButtonLabel="Next";e.recipient=t;(n=e.envelopeUpdated)===null||n===void 0?void 0:n.emit({endpoint:e.endpoint,envelope:b.envelope,event:"agreed"})})).catch((function(t){var n,i,r;console.log("Update failure",t);(n=e.sdkError)===null||n===void 0?void 0:n.emit(new y(t.message,(i=t.response)===null||i===void 0?void 0:i.status,(r=t.response)===null||r===void 0?void 0:r.data))}))};e.prototype.handleOptionSelected=function(e){return w(this,void 0,void 0,(function(){var t,n;return k(this,(function(i){switch(i.label){case 0:t=e.detail.id;switch(t){case"later":return[3,1];case"claim":return[3,2];case"decline":return[3,3];case"print":return[3,5];case"download":return[3,6]}return[3,7];case 1:this.finishLater=true;this.showFinishLater=true;return[3,7];case 2:return[3,7];case 3:return[4,S(this.endpoint,this.envelopeId,this.roleId)];case 4:n=i.sent();console.log("Decline result",n);this.isDone=true;return[3,7];case 5:window.print();return[3,7];case 6:a(this.endpoint,b.envelope,b.envelope.envelope_document_id).catch((function(){}));return[3,7];case 7:return[2]}}))}))};e.prototype.saveFieldChange=function(e,t){var n=this;l(this.endpoint,this.envelopeId,e,t).catch((function(e){var t,i,r,o,s,a;if(((t=e.response)===null||t===void 0?void 0:t.status)===401&&((r=(i=e.response)===null||i===void 0?void 0:i.data)===null||r===void 0?void 0:r.error)==="jwt expired"){console.log("[SIGN] Signing session expired");n.errorMessage="Signing session expired."}else{console.log("[SIGN] Server error",e)}(o=n.sdkError)===null||o===void 0?void 0:o.emit(new y(e.message,(s=e.response)===null||s===void 0?void 0:s.status,(a=e.response)===null||a===void 0?void 0:a.data))}))};e.prototype.handleFieldChange=function(e,t){return w(this,void 0,void 0,(function(){var n,i,r,o,s,s,a,l,u;var p=this;return k(this,(function(h){switch(h.label){case 0:console.log("fieldChange",e,t,t.target.value);n=t.target,i=n.value,r=n.checked;o=e.type;switch(o){case"textbox":return[3,1];case"checkbox_group":return[3,2];case"radio_button_group":return[3,3];case"dropdown":return[3,4];case"initial":return[3,5];case"signature":return[3,8];case"date":return[3,11];case"timestamp":return[3,12]}return[3,13];case 1:return[2,this.saveFieldChange(e.name,{prepared:false,value:i})];case 2:{s=e.settings.options.map((function(e){return{id:e.id,checked:t.target.checked}}));return[2,this.saveFieldChange(e.name,{prepared:false,value:{options:s}})]}h.label=3;case 3:{s=e.settings.options.map((function(e){return{id:e.id,selected:t.target.value===e.id}}));return[2,this.saveFieldChange(e.name,{prepared:false,value:{options:s}})]}h.label=4;case 4:return[2,this.saveFieldChange(e.name,{prepared:false,value:t.detail})];case 5:return[4,fetch(t.detail)];case 6:return[4,h.sent().blob()];case 7:a=h.sent();return[2,N(this.endpoint,"initial",a).then((function(t){console.log("New initials",e.name,t);c(p.endpoint,p.envelopeId,e.name,t.id)}))];case 8:return[4,fetch(t.detail)];case 9:return[4,h.sent().blob()];case 10:l=h.sent();return[2,L(this.endpoint,"signature",l).then((function(t){console.log("New sign",e.name,t);d(p.endpoint,p.envelopeId,e.name,t.id)}))];case 11:u=t.target.getAttribute("iso");return[2,this.saveFieldChange(e.name,{prepared:false,value:u})];case 12:console.log("Updating timestamp",{value:i,ts:t.target.getAttribute("timestamp")});return[3,14];case 13:console.log("Unhandled field update",{value:i,checked:r},e);return[3,14];case 14:return[2]}}))}))};e.prototype.isFieldValid=function(e){var t,n,i,r,o,s,a;var l=e.required,d=l===void 0?false:l;var c=e.settings||{},u=c.result,p=u===void 0?"":u,h=c.value,f=h===void 0?"":h,m=c.base64,x=m===void 0?"":m;switch(e.type){case"textbox":switch(((t=e.settings)===null||t===void 0?void 0:t.validator)||""){case"email":return g(p);case"phone":return v(p);default:return!d||p!==""}case"signature":case"initial":return!d||x!=="";case"timestamp":return true;case"textarea":case"date":case"attachment":return!d||p!=="";case"dropdown":return!d||f!=="";case"checkbox_group":var b=(((i=(n=e.settings)===null||n===void 0?void 0:n.options)===null||i===void 0?void 0:i.filter((function(e){return e.checked})))||[]).length;return!d||b>=(((r=e.settings)===null||r===void 0?void 0:r.minimum_checked)||0)&&b<=(((o=e.settings)===null||o===void 0?void 0:o.maximum_checked)||999);case"radio_button_group":return!d||(((a=(s=e.settings)===null||s===void 0?void 0:s.options)===null||a===void 0?void 0:a.filter((function(e){return e.selected})))||[]).length>0;default:return false}};e.prototype.handleNext=function(){return w(this,void 0,void 0,(function(){var e,t,n,i,r,o,s,a,l,d;var c=this;return k(this,(function(u){switch(u.label){case 0:if(!this.nextSubmits)return[3,5];u.label=1;case 1:u.trys.push([1,3,,4]);return[4,_(this.endpoint,this.envelopeId,this.roleId)];case 2:t=u.sent();console.log("[SIGN] Submitted successfully",t);this.showDone=true;this.isDone=true;return[3,4];case 3:n=u.sent();console.log("Error submitting",n);return[3,4];case 4:return[2];case 5:i=this.fields.filter((function(e){return e.required}));r=i.findIndex((function(e){return e.name===c.focusedField}));o=r+1;if(o>=i.length){o=0}s=i[o];a=0;if(a<i.length&&["signature","initial"].includes(s.type)&&((e=s.settings)===null||e===void 0?void 0:e.result)==="signed"){a++;o++;if(o>=i.length){o=0}s=i[o]}if(a>=i.length){s=null}if(s){l=f(s);d=document.getElementById(l);d===null||d===void 0?void 0:d.focusField();this.focusedField=s.name}return[2]}}))}))};e.prototype.checkRecipientFields=function(){var e=this;var t=this.recipient.fields.map((function(t){return e.isFieldValid(t)})).some((function(e){return!e}));console.log({someFieldsInvalid:t});if(!t){this.nextButtonLabel="Finish";this.nextSubmits=true}else{this.nextSubmits=false}};e.prototype.attachFieldAttributes=function(e,t,n,i){var r=this;var o;i.addEventListener("input",(function(e){return r.handleFieldChange(t,e).finally((function(){return r.checkRecipientFields()}))}));i.addEventListener("fieldChange",(function(e){return r.handleFieldChange(t,e).finally((function(){return r.checkRecipientFields()}))}));i.setAttribute("roleindex",n);i.setAttribute("xScale",e.xScale);i.setAttribute("yScale",e.yScale);i.setAttribute("initials",this.recipient?u(this.recipient.full_name):"");i.setAttribute("name",((o=this.recipient)===null||o===void 0?void 0:o.full_name)||"")};e.prototype.handlePageRendered=function(e){var t=this;var n=e.detail;var i=p(b.roleNames,this.recipient.role_name);var r=this.recipient.fields.filter((function(e){return e.page===n.pageNumber}));console.log("[SIGN] Page rendered, adding fields",{pageInfo:n,roleIndex:i,recipientFields:r});r.forEach((function(e){var r=h(e,n,i,{disabled:false,editable:false,draggable:false,done:t.isDone});console.log("rendered",r);if(!r){return}if(Array.isArray(r)){r.map((function(r){return t.attachFieldAttributes(n,e,i,r)}))}else{t.attachFieldAttributes(n,e,i,r)}}));b.envelope.recipients.filter((function(e){return e.role_name!==t.recipient.role_name})).map((function(e){var i=p(b.roleNames,e.role_name);var r=e.fields.filter((function(e){return e.page===n.pageNumber}));r.forEach((function(e){var r=h(e,n,i,{disabled:true,editable:false,draggable:false,done:t.isDone});if(!r){return}r.setAttribute("roleindex",i);r.setAttribute("xScale",n.xScale);r.setAttribute("yScale",n.yScale)}))}));this.checkRecipientFields()};e.prototype.render=function(){var e=this;var t,n,s,l;if(b.loading||!b.envelope){return i(r,null,i("verdocs-loader",null))}var d=[{id:"later",label:"Finish Later"},{id:"decline",label:"Decline to Sign"},{id:"print",label:"Print Without Signing",disabled:true},{id:"download",label:"Download"}];return i(r,{class:{agreed:(t=this.recipient)===null||t===void 0?void 0:t.agreed}},!this.isDone&&!this.finishLater&&i("div",{class:"intro"},i("div",{class:"inner"},"Please review and act on these documents.")),i("div",{class:"header"},i("div",{class:"inner"},i("div",{class:"toolbar"},i("div",{class:"tools"},!this.isDone&&!this.finishLater&&i("verdocs-dropdown",{options:d,onOptionSelected:function(t){return e.handleOptionSelected(t)}}),!((n=this.recipient)===null||n===void 0?void 0:n.agreed)?i("div",{class:"agree"},i("verdocs-checkbox",{name:"agree",label:"I agree to use electronic records and signatures.",onInput:function(){return e.handleClickAgree()}})):i(o,null,i("img",{src:"https://verdocs.com/assets/white-logo.svg",alt:"Verdocs Logo",class:"logo"}),i("div",{class:"title"},b.envelope.name),i("div",{style:{flex:"1"}}),i("div",{innerHTML:D,style:{width:"24px",height:"24px",fill:"#ffffff",cursor:"pointer"},onClick:function(){return window.print()}}),i("div",{innerHTML:C,style:{width:"24px",height:"24px",fill:"#ffffff",cursor:"pointer",marginLeft:"16px",maginRight:"30px"},onClick:function(){return a(e.endpoint,b.envelope,b.envelope.envelope_document_id).catch((function(){}))}})),!this.isDone&&!this.finishLater&&i("verdocs-button",{size:"small",label:this.nextButtonLabel,disabled:!((s=this.recipient)===null||s===void 0?void 0:s.agreed),onClick:function(){return e.handleNext()}}))))),!this.isDone&&!((l=this.recipient)===null||l===void 0?void 0:l.agreed)?i("div",{class:"cover"}):i("div",{style:{display:"none"}}),i("div",{class:"document"},(b.envelope.documents||[]).map((function(t){var n=__spreadArray([],(t===null||t===void 0?void 0:t.pages)||[],true);n.sort((function(e,t){return e.sequence-t.sequence}));return i(o,null,n.map((function(t){return i("verdocs-document-page",{pageImageUri:t.display_uri,virtualWidth:612,virtualHeight:792,pageNumber:t.sequence,onPageRendered:function(t){return e.handlePageRendered(t)},layers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]})})))}))),this.showFinishLater&&i("verdocs-ok-dialog",{heading:"You've saved your document to finish later.",message:"To complete the document, use the link in the original email notification inviting you to review and finish the document.",onNext:function(){return e.showFinishLater=false}}),this.errorMessage&&i("verdocs-ok-dialog",{heading:"Network Error",message:this.errorMessage,onNext:function(){return e.errorMessage=""}}),this.showDone&&i("verdocs-ok-dialog",{heading:"You're Done!",message:"You can access the Verdoc at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.",onNext:function(){return e.showDone=false}}))};return e}());z.style=A}}}));
+//# sourceMappingURL=p-fed9fd2b.system.entry.js.map