@verdocs/web-sdk 1.9.31 → 1.9.32

package/dist/esm-es5/verdocs-upload-dialog.entry.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{s(r.next(e))}catch(e){a(e)}}function l(e){try{s(r["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):o(e.value).then(i,l)}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,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 s([e,t])}}function s(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}}};var __spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var r=0,o=t.length,a;r<o;r++){if(a||!(r in t)){if(!a)a=Array.prototype.slice.call(t,0,r);a[r]=t[r]}}return e.concat(a||Array.prototype.slice.call(t))};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-f78d163d.js";var fileToDataUrl=function(e){return new Promise((function(t,n){var r=new FileReader;r.onload=function(){return t({lastModified:e.lastModified,size:e.size,type:e.type,name:e.name,data:r.result})};r.onerror=n;if(e){r.readAsDataURL(e)}else{n(new Error("Invalid file"))}}))};var verdocsUploadDialogCss='verdocs-upload-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;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-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-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)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}';var TrashIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>';var PaperclipIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>';var VerdocsUploadDialog=function(){function e(e){registerInstance(this,e);this.cancel=createEvent(this,"cancel",7);this.next=createEvent(this,"next",7);this.draggingOver=false;this.decodedFiles=[]}e.prototype.handleCancel=function(){this.cancel.emit()};e.prototype.handleDismiss=function(e){if(e.target.className==="background-overlay"){e.preventDefault();this.handleCancel()}};e.prototype.handleDone=function(){this.next.emit(this.decodedFiles)};e.prototype.handleDragOver=function(e){e.preventDefault();this.draggingOver=true};e.prototype.handleDragLeave=function(e){e.preventDefault();this.draggingOver=false};e.prototype.handleDrop=function(e){return __awaiter(this,void 0,void 0,(function(){var t,n,r,o;return __generator(this,(function(a){switch(a.label){case 0:e.preventDefault();this.draggingOver=false;t=[];if(e.dataTransfer.items){for(n=0;n<e.dataTransfer.items.length;n++){if(e.dataTransfer.items[n].kind==="file"){r=e.dataTransfer.items[n].getAsFile();t.push(r)}}}else{t=e.dataTransfer.files}o=this;return[4,Promise.all(t.map(fileToDataUrl))];case 1:o.decodedFiles=a.sent();return[2]}}))}))};e.prototype.handleRemoveAttachment=function(e){var t=__spreadArray([],this.decodedFiles,true);t.splice(e,1);this.decodedFiles=t};e.prototype.handleSelectFile=function(){var e;(e=this.fileInput)===null||e===void 0?void 0:e.click()};e.prototype.handleFileChange=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,r,o;return __generator(this,(function(a){switch(a.label){case 0:n=[];for(r=0;r<((e=this.fileInput)===null||e===void 0?void 0:e.files.length);r++){n.push((t=this.fileInput)===null||t===void 0?void 0:t.files[r])}o=this;return[4,Promise.all(n.map(fileToDataUrl))];case 1:o.decodedFiles=a.sent();return[2]}}))}))};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{class:"background-overlay",onClick:function(t){return e.handleDismiss(t)}},h("div",{class:"dialog"},h("div",{class:"heading"},"Upload attachment"),this.decodedFiles.length<1?h("div",{class:{"drop-target":true,"dragging-over":this.draggingOver},onDragOver:function(t){return e.handleDragOver(t)},onDragLeave:function(t){return e.handleDragLeave(t)},onDrop:function(t){return e.handleDrop(t)}},h("p",null,"Drag and drop a file here..."),h("p",null,"- or -"),h("verdocs-button",{label:"Select a file...",onClick:function(){return e.handleSelectFile()}}),h("input",{type:"file",ref:function(t){return e.fileInput=t},style:{display:"none"},onChange:function(){return e.handleFileChange()}})):h("div",{class:"attachments"},this.decodedFiles.map((function(t,n){return h("div",{class:"attachment"},h("div",{class:"icon",innerHTML:PaperclipIcon}),h("div",{class:"name"},t.name),h("div",{class:"icon trash",innerHTML:TrashIcon,onClick:function(){return e.handleRemoveAttachment(n)}}))}))),h("div",{class:"buttons"},h("verdocs-button",{label:"Cancel",variant:"outline",onClick:function(){return e.handleCancel()}}),h("verdocs-button",{label:"Done",onClick:function(){return e.handleDone()},disabled:this.decodedFiles.length<1})))))};return e}();VerdocsUploadDialog.style=verdocsUploadDialogCss;export{VerdocsUploadDialog as verdocs_upload_dialog};
+var __awaiter=this&&this.__awaiter||function(e,t,n,o){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function i(e){try{s(o.next(e))}catch(e){a(e)}}function l(e){try{s(o["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):r(e.value).then(i,l)}s((o=o.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:[]},o,r,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 s([e,t])}}function s(i){if(o)throw new TypeError("Generator is already executing.");while(n)try{if(o=1,r&&(a=i[0]&2?r["return"]:i[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,i[1])).done)return a;if(r=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++;r=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];r=0}finally{o=a=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t,n){if(n||arguments.length===2)for(var o=0,r=t.length,a;o<r;o++){if(a||!(o in t)){if(!a)a=Array.prototype.slice.call(t,0,o);a[o]=t[o]}}return e.concat(a||Array.prototype.slice.call(t))};import{r as registerInstance,c as createEvent,h,H as Host}from"./index-f78d163d.js";import{f as fileToDataUrl}from"./Files-70a192df.js";var verdocsUploadDialogCss='verdocs-upload-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;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-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-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)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}';var TrashIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>';var PaperclipIcon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>';var VerdocsUploadDialog=function(){function e(e){registerInstance(this,e);this.cancel=createEvent(this,"cancel",7);this.next=createEvent(this,"next",7);this.draggingOver=false;this.decodedFiles=[]}e.prototype.handleCancel=function(){this.cancel.emit()};e.prototype.handleDismiss=function(e){if(e.target.className==="background-overlay"){e.preventDefault();this.handleCancel()}};e.prototype.handleDone=function(){this.next.emit(this.decodedFiles)};e.prototype.handleDragOver=function(e){e.preventDefault();this.draggingOver=true};e.prototype.handleDragLeave=function(e){e.preventDefault();this.draggingOver=false};e.prototype.handleDrop=function(e){return __awaiter(this,void 0,void 0,(function(){var t,n,o,r;return __generator(this,(function(a){switch(a.label){case 0:e.preventDefault();this.draggingOver=false;t=[];if(e.dataTransfer.items){for(n=0;n<e.dataTransfer.items.length;n++){if(e.dataTransfer.items[n].kind==="file"){o=e.dataTransfer.items[n].getAsFile();t.push(o)}}}else{t=e.dataTransfer.files}r=this;return[4,Promise.all(t.map(fileToDataUrl))];case 1:r.decodedFiles=a.sent();return[2]}}))}))};e.prototype.handleRemoveAttachment=function(e){var t=__spreadArray([],this.decodedFiles,true);t.splice(e,1);this.decodedFiles=t};e.prototype.handleSelectFile=function(){var e;(e=this.fileInput)===null||e===void 0?void 0:e.click()};e.prototype.handleFileChange=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,o,r;return __generator(this,(function(a){switch(a.label){case 0:n=[];for(o=0;o<((e=this.fileInput)===null||e===void 0?void 0:e.files.length);o++){n.push((t=this.fileInput)===null||t===void 0?void 0:t.files[o])}r=this;return[4,Promise.all(n.map(fileToDataUrl))];case 1:r.decodedFiles=a.sent();return[2]}}))}))};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{class:"background-overlay",onClick:function(t){return e.handleDismiss(t)}},h("div",{class:"dialog"},h("div",{class:"heading"},"Upload attachment"),this.decodedFiles.length<1?h("div",{class:{"drop-target":true,"dragging-over":this.draggingOver},onDragOver:function(t){return e.handleDragOver(t)},onDragLeave:function(t){return e.handleDragLeave(t)},onDrop:function(t){return e.handleDrop(t)}},h("p",null,"Drag and drop a file here..."),h("p",null,"- or -"),h("verdocs-button",{label:"Select a file...",onClick:function(){return e.handleSelectFile()}}),h("input",{type:"file",ref:function(t){return e.fileInput=t},style:{display:"none"},onChange:function(){return e.handleFileChange()}})):h("div",{class:"attachments"},this.decodedFiles.map((function(t,n){return h("div",{class:"attachment"},h("div",{class:"icon",innerHTML:PaperclipIcon}),h("div",{class:"name"},t.name),h("div",{class:"icon trash",innerHTML:TrashIcon,onClick:function(){return e.handleRemoveAttachment(n)}}))}))),h("div",{class:"buttons"},h("verdocs-button",{label:"Cancel",variant:"outline",onClick:function(){return e.handleCancel()}}),h("verdocs-button",{label:"Done",onClick:function(){return e.handleDone()},disabled:this.decodedFiles.length<1})))))};return e}();VerdocsUploadDialog.style=verdocsUploadDialogCss;export{VerdocsUploadDialog as verdocs_upload_dialog};
 //# sourceMappingURL=verdocs-upload-dialog.entry.js.map

package/dist/esm-es5/verdocs-upload-dialog.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["node_modules/@verdocs/js-sdk/Utils/Files.js","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"names":["fileToDataUrl","file","Promise","resolve","reject","reader","FileReader","onload","lastModified","size","type","name","data","result","onerror","readAsDataURL","Error","verdocsUploadDialogCss","TrashIcon","PaperclipIcon","VerdocsUploadDialog","class_1","prototype","handleCancel","this","cancel","emit","handleDismiss","e","target","className","preventDefault","handleDone","next","decodedFiles","handleDragOver","draggingOver","handleDragLeave","handleDrop","droppedFiles","dataTransfer","items","i","length","kind","getAsFile","push","files","_c","all","map","_d","sent","handleRemoveAttachment","index","newFiles","__spreadArray","splice","handleSelectFile","_a","fileInput","click","handleFileChange","_b","render","_this","h","Host","class","onClick","drop-target","dragging-over","onDragOver","onDragLeave","onDrop","label","ref","el","style","display","onChange","innerHTML","variant","disabled"],"mappings":"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","sourcesContent":["/**\n * Given a File, extract the file's content as a base64 encoded data URL. The response will have a prefix that\n * includes the MIME type of the file, e.g. \"data:image/jpeg;base64,iVBORw0K......\"\n */\nexport var fileToDataUrl = function (file) {\n    return new Promise(function (resolve, reject) {\n        var reader = new FileReader();\n        reader.onload = function () {\n            return resolve({\n                lastModified: file.lastModified,\n                size: file.size,\n                type: file.type,\n                name: file.name,\n                data: reader.result,\n            });\n        };\n        reader.onerror = reject;\n        if (file) {\n            reader.readAsDataURL(file);\n        }\n        else {\n            reject(new Error('Invalid file'));\n        }\n    });\n};\n","@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\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\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Event fired when the dialog is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.decodedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"names":["verdocsUploadDialogCss","TrashIcon","PaperclipIcon","VerdocsUploadDialog","class_1","prototype","handleCancel","this","cancel","emit","handleDismiss","e","target","className","preventDefault","handleDone","next","decodedFiles","handleDragOver","draggingOver","handleDragLeave","handleDrop","droppedFiles","dataTransfer","items","i","length","kind","file","getAsFile","push","files","_c","Promise","all","map","fileToDataUrl","_d","sent","handleRemoveAttachment","index","newFiles","__spreadArray","splice","handleSelectFile","_a","fileInput","click","handleFileChange","_b","render","_this","h","Host","class","onClick","drop-target","dragging-over","onDragOver","onDragLeave","onDrop","label","type","ref","el","style","display","onChange","innerHTML","name","variant","disabled"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\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\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Event fired when the dialog is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.decodedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/types/utils/utils.d.ts

@@ -2,8 +2,6 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { ITemplateField } from '@verdocs/js-sdk/Templates/Types';
 import { IDocumentField, IEnvelope } from '@verdocs/js-sdk/Envelopes/Types';
 import { IDocumentPageInfo } from './Types';
-export declare const integerSequence: (start: number, count: number) => number[];
-export declare const fullNameToInitials: (name: string) => string;
 export declare const defaultWidth: (field: ITemplateField | IDocumentField) => 24 | 14 | 82 | 150;
 export declare const defaultHeight: (field: ITemplateField | IDocumentField) => 24 | 14 | 41 | 50;
 export declare const setControlStyles: (el: HTMLElement, field: ITemplateField | IDocumentField, xScale: number, yScale: number, option?: number) => void;

package/dist/verdocs-web-sdk/p-008f67ce.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as i,H as t}from"./p-ff1278ed.js";import{f as a}from"./p-aa124212.js";const l='verdocs-upload-dialog{font-family:"Barlow", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{position:absolute;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-upload-dialog .dialog{width:300px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-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)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-size:20px;font-weight:500}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{padding:30px 15px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#f5f5f5;border:2px dashed #979797;min-height:260px;text-align:center;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;color:rgba(0, 0, 0, 0.54);opacity:1;margin:20px 0}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:0 8px;font-size:14px;font-weight:400}';const s=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;const n=`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;const d=class{constructor(i){e(this,i);this.cancel=o(this,"cancel",7);this.next=o(this,"next",7);this.draggingOver=false;this.decodedFiles=[]}handleCancel(){this.cancel.emit()}handleDismiss(e){if(e.target.className==="background-overlay"){e.preventDefault();this.handleCancel()}}handleDone(){this.next.emit(this.decodedFiles)}handleDragOver(e){e.preventDefault();this.draggingOver=true}handleDragLeave(e){e.preventDefault();this.draggingOver=false}async handleDrop(e){e.preventDefault();this.draggingOver=false;let o=[];if(e.dataTransfer.items){for(let i=0;i<e.dataTransfer.items.length;i++){if(e.dataTransfer.items[i].kind==="file"){const t=e.dataTransfer.items[i].getAsFile();o.push(t)}}}else{o=e.dataTransfer.files}this.decodedFiles=await Promise.all(o.map(a))}handleRemoveAttachment(e){const o=[...this.decodedFiles];o.splice(e,1);this.decodedFiles=o}handleSelectFile(){var e;(e=this.fileInput)===null||e===void 0?void 0:e.click()}async handleFileChange(){var e,o;let i=[];for(let t=0;t<((e=this.fileInput)===null||e===void 0?void 0:e.files.length);t++){i.push((o=this.fileInput)===null||o===void 0?void 0:o.files[t])}this.decodedFiles=await Promise.all(i.map(a))}render(){return i(t,null,i("div",{class:"background-overlay",onClick:e=>this.handleDismiss(e)},i("div",{class:"dialog"},i("div",{class:"heading"},"Upload attachment"),this.decodedFiles.length<1?i("div",{class:{"drop-target":true,"dragging-over":this.draggingOver},onDragOver:e=>this.handleDragOver(e),onDragLeave:e=>this.handleDragLeave(e),onDrop:e=>this.handleDrop(e)},i("p",null,"Drag and drop a file here..."),i("p",null,"- or -"),i("verdocs-button",{label:"Select a file...",onClick:()=>this.handleSelectFile()}),i("input",{type:"file",ref:e=>this.fileInput=e,style:{display:"none"},onChange:()=>this.handleFileChange()})):i("div",{class:"attachments"},this.decodedFiles.map(((e,o)=>i("div",{class:"attachment"},i("div",{class:"icon",innerHTML:n}),i("div",{class:"name"},e.name),i("div",{class:"icon trash",innerHTML:s,onClick:()=>this.handleRemoveAttachment(o)}))))),i("div",{class:"buttons"},i("verdocs-button",{label:"Cancel",variant:"outline",onClick:()=>this.handleCancel()}),i("verdocs-button",{label:"Done",onClick:()=>this.handleDone(),disabled:this.decodedFiles.length<1})))))}};d.style=l;export{d as verdocs_upload_dialog};
+//# sourceMappingURL=p-008f67ce.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.scss?tag=verdocs-upload-dialog","src/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.tsx"],"names":["verdocsUploadDialogCss","TrashIcon","PaperclipIcon","VerdocsUploadDialog","[object Object]","this","cancel","emit","e","target","className","preventDefault","handleCancel","next","decodedFiles","draggingOver","droppedFiles","dataTransfer","items","i","length","kind","file","getAsFile","push","files","Promise","all","map","fileToDataUrl","index","newFiles","splice","_a","fileInput","click","_b","h","Host","class","onClick","handleDismiss","drop-target","dragging-over","onDragOver","handleDragOver","onDragLeave","handleDragLeave","onDrop","handleDrop","label","handleSelectFile","type","ref","el","style","display","onChange","handleFileChange","innerHTML","name","handleRemoveAttachment","variant","handleDone","disabled"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-upload-dialog {\n  font-family: $primary-font;\n  box-sizing: border-box;\n\n  div {\n    box-sizing: border-box;\n  }\n\n  .background-overlay {\n    position: absolute;\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\n  .dialog {\n    width: 300px;\n    display: flex;\n    flex-direction: column;\n    border-radius: 4px;\n    overflow: hidden;\n    background: $verdocs-grey-4;\n    padding: 16px;\n    box-shadow: 3px 3px 5px 1px rgba(40, 40, 40, 0.4);\n  }\n\n  .heading {\n    display: flex;\n    flex-direction: row;\n    font-size: 20px;\n    font-weight: 500;\n  }\n\n  .buttons {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n    justify-content: flex-end;\n\n    verdocs-button {\n      margin-left: 16px;\n    }\n  }\n\n  .drop-target {\n    padding: 30px 15px;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    background-color: #f5f5f5;\n    border: 2px dashed #979797;\n    min-height: 260px;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    color: rgba(0, 0, 0, 0.54);\n    opacity: 1;\n    margin: 20px 0;\n\n    p {\n      margin: 12px 0;\n    }\n\n    &.dragging-over {\n      border: 5px solid $verdocs-deep-blue;\n    }\n\n    > verdocs-button {\n      margin: 12px 0;\n      display: inline-block;\n    }\n  }\n\n  .attachments {\n    height: 56px;\n    font-size: 0;\n    margin: 20px 0;\n    padding: 0 16px;\n    line-height: 56px;\n    white-space: normal;\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 12%), 0 0 2px 0 rgb(0 0 0 / 14%);\n\n    .attachment {\n      display: flex;\n      align-items: center;\n      flex-direction: row;\n\n      .icon {\n        width: 18px;\n        height: 18px;\n        line-height: 18px;\n\n        &.trash {\n          cursor: pointer;\n        }\n      }\n\n      .name {\n        flex: 1;\n        display: flex;\n        padding: 0 8px;\n        font-size: 14px;\n        font-weight: 400;\n      }\n    }\n  }\n}\n","import {Component, h, Event, EventEmitter, Host, State} from '@stencil/core';\nimport {fileToDataUrl, FileWithData} from '@verdocs/js-sdk/Utils/Files';\n\nconst TrashIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\" /></svg>`;\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\n/**\n * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by\n * callers with a variety of workflows. Instead, data about the chosen file will be passed to the\n * caller via the onNext event handler.\n */\n@Component({\n  tag: 'verdocs-upload-dialog',\n  styleUrl: 'verdocs-upload-dialog.scss',\n})\nexport class VerdocsUploadDialog {\n  private fileInput?: HTMLInputElement;\n\n  /**\n   * Event fired when the dialog is cancelled.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\n\n  /**\n   * Event fired when the dialog is closed. The event data will contain the file selected.\n   */\n  @Event({composed: true}) next: EventEmitter<FileWithData[]>;\n\n  @State() draggingOver = false;\n\n  @State() decodedFiles = [] as FileWithData[];\n\n  handleCancel() {\n    this.cancel.emit();\n  }\n\n  // We need a separate event handler for clicking the background because it can receive events \"through\" other child components\n  handleDismiss(e: any) {\n    if (e.target.className === 'background-overlay') {\n      e.preventDefault();\n      this.handleCancel();\n    }\n  }\n\n  handleDone() {\n    this.next.emit(this.decodedFiles);\n  }\n\n  handleDragOver(e) {\n    e.preventDefault();\n    this.draggingOver = true;\n  }\n\n  handleDragLeave(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n  }\n\n  async handleDrop(e) {\n    e.preventDefault();\n    this.draggingOver = false;\n\n    // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.\n    let droppedFiles = [] as File[];\n    if (e.dataTransfer.items) {\n      for (let i = 0; i < e.dataTransfer.items.length; i++) {\n        if (e.dataTransfer.items[i].kind === 'file') {\n          const file = e.dataTransfer.items[i].getAsFile();\n          droppedFiles.push(file);\n        }\n      }\n    } else {\n      droppedFiles = e.dataTransfer.files;\n    }\n\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  handleRemoveAttachment(index: number) {\n    const newFiles = [...this.decodedFiles];\n    newFiles.splice(index, 1);\n    this.decodedFiles = newFiles;\n  }\n\n  handleSelectFile() {\n    this.fileInput?.click();\n  }\n\n  async handleFileChange() {\n    let droppedFiles = [] as File[];\n    for (let i = 0; i < this.fileInput?.files.length; i++) {\n      droppedFiles.push(this.fileInput?.files[i]);\n    }\n    this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"background-overlay\" onClick={e => this.handleDismiss(e)}>\n          <div class=\"dialog\">\n            <div class=\"heading\">Upload attachment</div>\n\n            {this.decodedFiles.length < 1 ? (\n              <div\n                class={{'drop-target': true, 'dragging-over': this.draggingOver}}\n                onDragOver={e => this.handleDragOver(e)}\n                onDragLeave={e => this.handleDragLeave(e)}\n                onDrop={e => this.handleDrop(e)}\n              >\n                <p>Drag and drop a file here...</p>\n                <p>- or -</p>\n\n                <verdocs-button label=\"Select a file...\" onClick={() => this.handleSelectFile()} />\n                <input type=\"file\" ref={el => (this.fileInput = el as HTMLInputElement)} style={{display: 'none'}} onChange={() => this.handleFileChange()} />\n              </div>\n            ) : (\n              <div class=\"attachments\">\n                {this.decodedFiles.map((file, index) => (\n                  <div class=\"attachment\">\n                    <div class=\"icon\" innerHTML={PaperclipIcon} />\n                    <div class=\"name\">{file.name}</div>\n                    <div class=\"icon trash\" innerHTML={TrashIcon} onClick={() => this.handleRemoveAttachment(index)} />\n                  </div>\n                ))}\n              </div>\n            )}\n\n            <div class=\"buttons\">\n              <verdocs-button label=\"Cancel\" variant=\"outline\" onClick={() => this.handleCancel()} />\n              <verdocs-button label=\"Done\" onClick={() => this.handleDone()} disabled={this.decodedFiles.length < 1} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,2 @@
+var __awaiter=this&&this.__awaiter||function(e,t,i,n){function o(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function l(e){try{a(n.next(e))}catch(e){r(e)}}function s(e){try{a(n["throw"](e))}catch(e){r(e)}}function a(e){e.done?i(e.value):o(e.value).then(l,s)}a((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,o,r,l;return l={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function s(e){return function(t){return a([e,t])}}function a(l){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,o&&(r=l[0]&2?o["return"]:l[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,l[1])).done)return r;if(o=0,r)l=[l[0]&2,r.value];switch(l[0]){case 0:case 1:r=l;break;case 4:i.label++;return{value:l[1],done:false};case 5:i.label++;o=l[1];l=[0];continue;case 7:l=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(l[0]===6||l[0]===2)){i=0;continue}if(l[0]===3&&(!r||l[1]>r[0]&&l[1]<r[3])){i.label=l[1];break}if(l[0]===6&&i.label<r[1]){i.label=r[1];r=l;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(l);break}if(r[2])i.ops.pop();i.trys.pop();continue}l=t.call(e,i)}catch(e){l=[6,e];o=0}finally{n=r=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-05eb4fed.system.js","./p-831ee1b6.system.js","./p-51a3ea62.system.js","./p-af2c2f79.system.js","./p-327858f0.system.js"],(function(e){"use strict";var t,i,n,o,r,l;return{setters:[function(e){t=e.r;i=e.h;n=e.H},function(e){o=e.g},function(e){r=e.g},function(e){l=e.f},function(){},function(){}],execute:function(){var s='verdocs-field-timestamp{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;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:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp 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-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}';var a='<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 d=e("verdocs_field_timestamp",function(){function e(e){t(this,e);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}e.prototype.focusField=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.el.focus();return[2]}))}))};e.prototype.render=function(){var e=this;var t,s,d;var u=r(this.field);var c=(s=(t=this.disabled)!==null&&t!==void 0?t:u.disabled)!==null&&s!==void 0?s:false;var f=this.field["rgba"]||o(this.roleindex);var p=u.value||(new Date).toISOString();var v=new Date(p);var h=l(v,"MMM d, y");if(this.done){return i(n,{class:{done:this.done}},h)}return i(n,{class:{required:(d=this.field)===null||d===void 0?void 0:d.required,disabled:c},style:{backgroundColor:f}},i("input",{type:"text",placeholder:u===null||u===void 0?void 0:u.placeholder,tabIndex:u===null||u===void 0?void 0:u.order,value:h,disabled:true,ref:function(t){return e.el=t}}),this.editable&&i("verdocs-button-panel",{icon:a},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(e){return console.log("ipt",e)}}),i("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:function(e){return console.log("ipt",e)}}))))};return e}());d.style=s}}}));
+//# sourceMappingURL=p-016521f8.system.entry.js.map

package/dist/verdocs-web-sdk/{p-6896b64c.system.entry.js.map → p-016521f8.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":["verdocsFieldTimestampCss","settingsIcon","VerdocsFieldTimestamp","exports","class_1","prototype","focusField","this","el","focus","render","_this","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","value","Date","toISOString","dt","formatted","format","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","ref","editable","icon","label","options","onInput","e","console","log"],"mappings":"2vDAAA,IAAMA,EAA2B,kuCCOjC,IAAMC,EACJ,6rCAUWC,EAAqBC,EAAA,0BAAA,8CAMwB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,GAAGC,yBAGVL,EAAAC,UAAAK,OAAA,WAAA,IAAAC,EAAAJ,eACE,IAAMK,EAAWC,EAAiBN,KAAKO,OACvC,IAAMC,GAAWC,GAAAC,EAAAV,KAAKQ,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBX,KAAKO,MAAM,SAAWK,EAAQZ,KAAKa,WAC3D,IAAMC,EAAQT,EAASS,QAAS,IAAIC,MAAOC,cAE3C,IAAMC,EAAK,IAAIF,KAAKD,GACpB,IAAMI,EAAYC,EAAOF,EAAI,YAE7B,GAAIjB,KAAKoB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMpB,KAAKoB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAzB,KAAKO,SAAK,MAAAkB,SAAA,OAAA,EAAAA,EAAED,SAAUhB,SAAQA,GAAGkB,MAAO,CAACf,gBAAeA,IAC9EU,EAAA,QAAA,CACEM,KAAK,OACLC,YAAavB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUuB,YACvBC,SAAUxB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUyB,MAGpBhB,MAAOI,EACPV,SAAU,KACVuB,IAAK,SAAA9B,GAAE,OAAKG,EAAKH,GAAKA,KAGvBD,KAAKgC,UACJX,EAAA,uBAAA,CAAsBY,KAAMvC,GAC1B2B,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEa,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASpB,MAAO,SACxB,CAACoB,MAAO,SAAUpB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBa,MAAM,aAAapB,MAAM,GAAGc,YAAY,uBAAuBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,MACpHhB,EAAA,qBAAA,CAAoBa,MAAM,cAAcpB,MAAM,GAAGc,YAAY,sBAAsBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,mBA7EhG","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 10px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  opacity: 0.5;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    box-sizing: border-box;\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: 10px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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 {format} from 'date-fns';\nimport {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, Method} 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 * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings.value || new Date().toISOString();\n\n    const dt = new Date(value);\n    const formatted = format(dt, 'MMM d, y');\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n          // is encoded in a ton of existing entries in the database and is hard to change.\n          value={formatted}\n          disabled={true}\n          ref={el => (this.el = el)}\n        />\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"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":["verdocsFieldTimestampCss","settingsIcon","VerdocsFieldTimestamp","exports","class_1","prototype","focusField","this","el","focus","render","_this","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","value","Date","toISOString","dt","formatted","format","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","ref","editable","icon","label","options","onInput","e","console","log"],"mappings":"iyDAAA,IAAMA,EAA2B,kuCCOjC,IAAMC,EACJ,6rCAUWC,EAAqBC,EAAA,0BAAA,8CAMwB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEbC,EAAAC,UAAAC,WAAN,gGACRC,KAAKC,GAAGC,yBAGVL,EAAAC,UAAAK,OAAA,WAAA,IAAAC,EAAAJ,eACE,IAAMK,EAAWC,EAAiBN,KAAKO,OACvC,IAAMC,GAAWC,GAAAC,EAAAV,KAAKQ,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,IAAME,EAAkBX,KAAKO,MAAM,SAAWK,EAAQZ,KAAKa,WAC3D,IAAMC,EAAQT,EAASS,QAAS,IAAIC,MAAOC,cAE3C,IAAMC,EAAK,IAAIF,KAAKD,GACpB,IAAMI,EAAYC,EAAOF,EAAI,YAE7B,GAAIjB,KAAKoB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMpB,KAAKoB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAzB,KAAKO,SAAK,MAAAkB,SAAA,OAAA,EAAAA,EAAED,SAAUhB,SAAQA,GAAGkB,MAAO,CAACf,gBAAeA,IAC9EU,EAAA,QAAA,CACEM,KAAK,OACLC,YAAavB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUuB,YACvBC,SAAUxB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUyB,MAGpBhB,MAAOI,EACPV,SAAU,KACVuB,IAAK,SAAA9B,GAAE,OAAKG,EAAKH,GAAKA,KAGvBD,KAAKgC,UACJX,EAAA,uBAAA,CAAsBY,KAAMvC,GAC1B2B,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEa,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASpB,MAAO,SACxB,CAACoB,MAAO,SAAUpB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBa,MAAM,aAAapB,MAAM,GAAGc,YAAY,uBAAuBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,MACpHhB,EAAA,qBAAA,CAAoBa,MAAM,cAAcpB,MAAM,GAAGc,YAAY,sBAAsBQ,QAAS,SAAAC,GAAK,OAAAC,QAAQC,IAAI,MAAOF,mBA7EhG","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 10px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  opacity: 0.5;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    box-sizing: border-box;\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: 10px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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 {format} from 'date-fns';\nimport {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, Method} 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 * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings.value || new Date().toISOString();\n\n    const dt = new Date(value);\n    const formatted = format(dt, 'MMM d, y');\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n          // is encoded in a ton of existing entries in the database and is hard to change.\n          value={formatted}\n          disabled={true}\n          ref={el => (this.el = el)}\n        />\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"]}

package/dist/verdocs-web-sdk/p-08800f26.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as o}from"./p-ff1278ed.js";import{g as l}from"./p-6de76553.js";import{g as s}from"./p-417ee5e0.js";import"./p-21603661.js";import"./p-aa124212.js";const i='verdocs-field-textarea{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;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;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';const r='<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 a=class{constructor(t){e(this,t);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}async focusField(){this.el.focus()}render(){var e,i;const a=s(this.field);const n=(i=(e=this.disabled)!==null&&e!==void 0?e:a.disabled)!==null&&i!==void 0?i:false;const d=this.field["rgba"]||l(this.roleindex);if(this.done){return t(o,{class:{done:this.done}},a.value)}return t(o,{class:{required:a.required,disabled:n},style:{backgroundColor:d}},t("textarea",{placeholder:a.placeholder||"",tabIndex:a.order,value:a.value,disabled:n,required:a.required,ref:e=>this.el=e}),this.editable&&t("verdocs-button-panel",{icon:r},t("h6",null,"Field Settings"),t("form",null,t("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}],onChange:e=>{console.log("select changed",e)}}),t("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:e=>console.log("ipt",e)}),t("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:e=>console.log("ipt",e)}))))}};a.style=i;export{a as verdocs_field_textarea};
+//# sourceMappingURL=p-08800f26.entry.js.map

package/dist/verdocs-web-sdk/{p-8c2cdcc4.entry.js.map → p-08800f26.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"names":["verdocsFieldTextareaCss","settingsIcon","VerdocsFieldTextarea","[object Object]","this","el","focus","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","done","h","Host","class","value","required","style","placeholder","tabIndex","order","ref","editable","icon","label","options","onChange","e","console","log","onInput"],"mappings":"kJAAA,MAAMA,EAA0B,2yBCMhC,MAAMC,EACJ,+rCAUWC,EAAoB,0CAMyB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEnBC,mBACRC,KAAKC,GAAGC,QAGVH,iBACE,MAAMI,EAAWC,EAAiBJ,KAAKK,OACvC,MAAMC,GAAWC,GAAAC,EAAAR,KAAKM,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBT,KAAKK,MAAM,SAAWK,EAAQV,KAAKW,WAE3D,GAAIX,KAAKY,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMZ,KAAKY,OAAQT,EAASa,OAGnD,OACEH,EAACC,EAAI,CAACC,MAAO,CAACE,SAAUd,EAASc,SAAUX,SAAAA,GAAWY,MAAO,CAACT,gBAAAA,IAC5DI,EAAA,WAAA,CACEM,YAAahB,EAASgB,aAAe,GACrCC,SAAUjB,EAASkB,MACnBL,MAAOb,EAASa,MAChBV,SAAUA,EACVW,SAAUd,EAASc,SACnBK,IAAKrB,GAAOD,KAAKC,GAAKA,IAGvBD,KAAKuB,UACJV,EAAA,uBAAA,CAAsBW,KAAM3B,GAC1BgB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEY,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAAST,MAAO,SACxB,CAACS,MAAO,SAAUT,MAAO,WAE3BW,SAAUC,IACRC,QAAQC,IAAI,iBAAkBF,MAIlCf,EAAA,qBAAA,CAAoBY,MAAM,aAAaT,MAAM,GAAGG,YAAY,uBAAuBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF,KACpHf,EAAA,qBAAA,CAAoBY,MAAM,cAAcT,MAAM,GAAGG,YAAY,sBAAsBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  textarea {\n    box-sizing: border-box;\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    border: 1px solid rgba(0, 0, 0, 0.2);\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","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\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 * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\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}}>{settings.value}</Host>;\n    }\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n        />\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                onChange={e => {\n                  console.log('select changed', e);\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"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-textarea/verdocs-field-textarea.scss?tag=verdocs-field-textarea","src/components/elements/verdocs-field-textarea/verdocs-field-textarea.tsx"],"names":["verdocsFieldTextareaCss","settingsIcon","VerdocsFieldTextarea","[object Object]","this","el","focus","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","done","h","Host","class","value","required","style","placeholder","tabIndex","order","ref","editable","icon","label","options","onChange","e","console","log","onInput"],"mappings":"0KAAA,MAAMA,EAA0B,2yBCMhC,MAAMC,EACJ,+rCAUWC,EAAoB,0CAMyB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEnBC,mBACRC,KAAKC,GAAGC,QAGVH,iBACE,MAAMI,EAAWC,EAAiBJ,KAAKK,OACvC,MAAMC,GAAWC,GAAAC,EAAAR,KAAKM,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBT,KAAKK,MAAM,SAAWK,EAAQV,KAAKW,WAE3D,GAAIX,KAAKY,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMZ,KAAKY,OAAQT,EAASa,OAGnD,OACEH,EAACC,EAAI,CAACC,MAAO,CAACE,SAAUd,EAASc,SAAUX,SAAAA,GAAWY,MAAO,CAACT,gBAAAA,IAC5DI,EAAA,WAAA,CACEM,YAAahB,EAASgB,aAAe,GACrCC,SAAUjB,EAASkB,MACnBL,MAAOb,EAASa,MAChBV,SAAUA,EACVW,SAAUd,EAASc,SACnBK,IAAKrB,GAAOD,KAAKC,GAAKA,IAGvBD,KAAKuB,UACJV,EAAA,uBAAA,CAAsBW,KAAM3B,GAC1BgB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEY,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAAST,MAAO,SACxB,CAACS,MAAO,SAAUT,MAAO,WAE3BW,SAAUC,IACRC,QAAQC,IAAI,iBAAkBF,MAIlCf,EAAA,qBAAA,CAAoBY,MAAM,aAAaT,MAAM,GAAGG,YAAY,uBAAuBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF,KACpHf,EAAA,qBAAA,CAAoBY,MAAM,cAAcT,MAAM,GAAGG,YAAY,sBAAsBY,QAASH,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-textarea {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  textarea {\n    box-sizing: border-box;\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    border: 1px solid rgba(0, 0, 0, 0.2);\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","import {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {Component, h, Host, Prop, Method} from '@stencil/core';\nimport {IDocumentField} from '@verdocs/js-sdk/Envelopes/Types';\nimport {ITemplateField} from '@verdocs/js-sdk/Templates/Types';\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 * Display a multi-line text input field.\n */\n@Component({\n  tag: 'verdocs-field-textarea',\n  styleUrl: 'verdocs-field-textarea.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTextarea {\n  private el: HTMLTextAreaElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\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}}>{settings.value}</Host>;\n    }\n\n    return (\n      <Host class={{required: settings.required, disabled}} style={{backgroundColor}}>\n        <textarea\n          placeholder={settings.placeholder || ''}\n          tabIndex={settings.order}\n          value={settings.value}\n          disabled={disabled}\n          required={settings.required}\n          ref={el => (this.el = el)}\n        />\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                onChange={e => {\n                  console.log('select changed', e);\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"]}

package/dist/verdocs-web-sdk/{p-458b639d.js → p-11ab1bd0.js}

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

package/dist/verdocs-web-sdk/{p-6d858f25.entry.js → p-12fd1696.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as t,h as s,H as i}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as o}from"./p-5e67c42f.js";import{l as n}from"./p-458b639d.js";import{S as l}from"./p-7a1b2643.js";import"./p-21603661.js";import"./p-c2cc4492.js";import"./p-3ce35714.js";import"./p-5ea05a1d.js";import"./p-ff3b285c.js";const r='verdocs-build{display:-ms-flexbox;display:flex;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}';const a=class{constructor(s){e(this,s);this.sdkError=t(this,"sdkError",7);this.fields=[];this.endpoint=o.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}async componentWillLoad(){var e,t,s;this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return}if(!this.templateId){console.log(`[BUILD] No template ID specified, showing upload option`);this.step="create";return}try{console.log(`[BUILD] Loading template ${this.templateId}`);await n(this.endpoint,this.templateId);this.step="fields"}catch(i){console.log("[BUILD] Error loading template",i);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new l(i.message,(t=i.response)===null||t===void 0?void 0:t.status,(s=i.response)===null||s===void 0?void 0:s.data))}}handleCancel(e){console.log("Cancel",e.detail);this.step=""}handleTemplateCreated(e){console.log("Created",e.detail);this.step="properties"}handlePropertiesUpdated(e){console.log("updated",e.detail);this.step="recipients"}handleRecipientsUpdated(e){console.log("updated",e.detail);this.step="fields"}render(){return s(i,null,this.step==="create"&&s("verdocs-template-create",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handleTemplateCreated(e)}),this.step==="properties"&&s("verdocs-template-properties",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handlePropertiesUpdated(e)}),this.step==="recipients"&&s("verdocs-template-recipients",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handleRecipientsUpdated(e)}),this.step==="fields"&&s("verdocs-template-fields",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handleCancel(e)}))}};a.style=r;export{a as verdocs_build};
-//# sourceMappingURL=p-6d858f25.entry.js.map
+import{r as e,c as t,h as s,H as i}from"./p-ff1278ed.js";import"./p-8efc9749.js";import{V as o}from"./p-5e67c42f.js";import{l as n}from"./p-11ab1bd0.js";import{S as l}from"./p-7a1b2643.js";import"./p-21603661.js";import"./p-c2cc4492.js";import"./p-e53f969c.js";import"./p-5ea05a1d.js";import"./p-7291906c.js";const r='verdocs-build{display:-ms-flexbox;display:flex;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}';const a=class{constructor(s){e(this,s);this.sdkError=t(this,"sdkError",7);this.fields=[];this.endpoint=o.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}async componentWillLoad(){var e,t,s;this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return}if(!this.templateId){console.log(`[BUILD] No template ID specified, showing upload option`);this.step="create";return}try{console.log(`[BUILD] Loading template ${this.templateId}`);await n(this.endpoint,this.templateId);this.step="fields"}catch(i){console.log("[BUILD] Error loading template",i);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new l(i.message,(t=i.response)===null||t===void 0?void 0:t.status,(s=i.response)===null||s===void 0?void 0:s.data))}}handleCancel(e){console.log("Cancel",e.detail);this.step=""}handleTemplateCreated(e){console.log("Created",e.detail);this.step="properties"}handlePropertiesUpdated(e){console.log("updated",e.detail);this.step="recipients"}handleRecipientsUpdated(e){console.log("updated",e.detail);this.step="fields"}render(){return s(i,null,this.step==="create"&&s("verdocs-template-create",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handleTemplateCreated(e)}),this.step==="properties"&&s("verdocs-template-properties",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handlePropertiesUpdated(e)}),this.step==="recipients"&&s("verdocs-template-recipients",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handleRecipientsUpdated(e)}),this.step==="fields"&&s("verdocs-template-fields",{onCancel:e=>this.handleCancel(e),onNext:e=>this.handleCancel(e)}))}};a.style=r;export{a as verdocs_build};
+//# sourceMappingURL=p-12fd1696.entry.js.map

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

@@ -0,0 +1,2 @@
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,n=1,i=arguments.length;n<i;n++){t=arguments[n];for(var s in t)if(Object.prototype.hasOwnProperty.call(t,s))e[s]=t[s]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,n,i){function s(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function l(e){try{a(i.next(e))}catch(e){o(e)}}function r(e){try{a(i["throw"](e))}catch(e){o(e)}}function a(e){e.done?n(e.value):s(e.value).then(l,r)}a((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,s,o,l;return l={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function r(e){return function(t){return a([e,t])}}function a(l){if(i)throw new TypeError("Generator is already executing.");while(n)try{if(i=1,s&&(o=l[0]&2?s["return"]:l[0]?s["throw"]||((o=s["return"])&&o.call(s),0):s.next)&&!(o=o.call(s,l[1])).done)return o;if(s=0,o)l=[l[0]&2,o.value];switch(l[0]){case 0:case 1:o=l;break;case 4:n.label++;return{value:l[1],done:false};case 5:n.label++;s=l[1];l=[0];continue;case 7:l=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(l[0]===6||l[0]===2)){n=0;continue}if(l[0]===3&&(!o||l[1]>o[0]&&l[1]<o[3])){n.label=l[1];break}if(l[0]===6&&n.label<o[1]){n.label=o[1];o=l;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(l);break}if(o[2])n.ops.pop();n.trys.pop();continue}l=t.call(e,n)}catch(e){l=[6,e];s=0}finally{i=o=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-9cecb5df.system.js","./p-a7433630.system.js","./p-7efdefa3.system.js","./p-05eb4fed.system.js","./p-7a6c829f.system.js","./p-831ee1b6.system.js","./p-af2c2f79.system.js","./p-327858f0.system.js"],(function(e){"use strict";var t,n,i,s,o,l,r,a,c,d;return{setters:[function(e){t=e.r;n=e.c;i=e.h;s=e.H},function(e){o=e.g},function(){},function(e){l=e.i;r=e.a},function(e){a=e.g},function(e){c=e.V},function(e){d=e.a},function(){},function(){}],execute:function(){var p='verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}';var u='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';var f='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z"></path></svg>';var h='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"></path></svg>';var v='<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z"></path></svg>';var x=e("verdocs_send",function(){function e(e){t(this,e);this.send=n(this,"send",7);this.cancel=n(this,"cancel",7);this.sdkError=n(this,"sdkError",7);this.levels=[];this.endpoint=c.getDefault();this.templateId=null;this.template=null;this.pdfUrl=null;this.containerId="verdocs-send-".concat(Math.random().toString(36).substring(2,11));this.rolesAtLevel={};this.showPickerForId="";this.sessionContacts=[];this.recipientsAssigned={}}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n;return __generator(this,(function(i){switch(i.label){case 0:this.sessionContacts=[];i.label=1;case 1:i.trys.push([1,3,,4]);return[4,this.endpoint.loadSession()];case 2:t=i.sent();if((e=t.session)===null||e===void 0?void 0:e.profile){this.sessionContacts.push({id:t.session.profile.id,name:"".concat(t.session.profile.first_name," ").concat(t.session.profile.last_name),email:t.session.profile.email,phone:t.session.profile.phone})}return[3,4];case 3:n=i.sent();console.log("Error loading session",n);return[3,4];case 4:return[2]}}))}))};e.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n;return __generator(this,(function(i){switch(i.label){case 0:console.log("[SEND] Showing template",this.templateId);i.label=1;case 1:i.trys.push([1,3,,4]);console.log("[SEND] Loading template ".concat(this.templateId));return[4,o(this.endpoint,this.templateId)];case 2:e=i.sent();console.log("[SEND] Got template",e);this.template=e;if(e===null||e===void 0?void 0:e.roles){t={};e.roles.forEach((function(e){var n=e.sequence-1;t[n]||(t[n]=[]);var i="r-".concat(n,"-").concat(t[n].length);t[n].push(__assign(__assign({},e),{id:i}))}));this.rolesAtLevel=t;this.levels=Object.keys(t).map((function(e){return+e}));this.levels.sort((function(e,t){return e-t}))}return[3,4];case 3:n=i.sent();console.log("[SEND] Error getting template",n);return[3,4];case 4:return[2]}}))}))};e.prototype.getLevelIcon=function(e){if(e<0){return i("div",{class:"level-icon",innerHTML:f})}else if(e>=this.levels.length){return i("div",{class:"level-icon",innerHTML:v})}else{return i("div",{class:"level-icon",innerHTML:h})}};e.prototype.handleSelectContact=function(e,t){e.preventDefault();this.recipientsAssigned[t.id]=__assign(__assign({},t),e.detail);this.showPickerForId=""};e.prototype.handleClickRole=function(e,t){e.stopPropagation();this.showPickerForId=t.id};e.prototype.handleSend=function(e){var t;e.stopPropagation();(t=this.send)===null||t===void 0?void 0:t.emit({recipientsAssigned:Object.values(this.recipientsAssigned)})};e.prototype.handleCancel=function(e){var t;e.stopPropagation();(t=this.cancel)===null||t===void 0?void 0:t.emit()};e.prototype.render=function(){var e=this;var t,n,o;var c=((n=(t=this.template)===null||t===void 0?void 0:t.roles)===null||n===void 0?void 0:n.map((function(e){return e.name})))||[];var p=Object.values(this.recipientsAssigned).filter((function(e){console.log("valid email",l(e.email),e.email);console.log("valid phone",r(e.phone),e.phone);return l(e.email)||r(e.phone)})).length>=((o=this.template)===null||o===void 0?void 0:o.roles.length);console.log("assigned",p);return i(s,{class:{}},i("div",{class:"recipients"},i("div",{class:"left-line"}),i("div",{class:"level level-start"},this.getLevelIcon(-1),i("div",{class:"complete"},"Send Document")),this.levels.map((function(t){return i("div",{class:"level level-".concat(t)},e.getLevelIcon(t),e.rolesAtLevel[t].map((function(t){var n,s,o;return i("div",{class:"recipient",style:{backgroundColor:a(d(c,t.name))},onClick:function(n){return e.handleClickRole(n,t)}},(s=(n=e.recipientsAssigned[t.id])===null||n===void 0?void 0:n.full_name)!==null&&s!==void 0?s:t.name,i("div",{class:"icon",innerHTML:u}),e.showPickerForId===t.id&&i("verdocs-contact-picker",{onCancel:function(){return e.showPickerForId=""},onNext:function(n){return e.handleSelectContact(n,t)},contactSuggestions:e.sessionContacts,templateRole:(o=e.recipientsAssigned[t.id])!==null&&o!==void 0?o:t,onSearchContacts:function(e){return console.log("Search",e.detail)}}))})))})),i("div",{class:"level level-done"},this.getLevelIcon(this.levels.length),i("div",{class:"complete"},"Document Complete"))),i("div",{class:"buttons"},i("verdocs-button",{label:"Cancel",size:"small",variant:"outline",onClick:function(t){return e.handleCancel(t)}}),i("verdocs-button",{label:"Send",size:"small",disabled:!p,onClick:function(t){return e.handleSend(t)}})))};return e}());x.style=p}}}));
+//# sourceMappingURL=p-14513fd8.system.entry.js.map

package/dist/verdocs-web-sdk/{p-bd6175d9.system.entry.js.map → p-14513fd8.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"names":["verdocsSendCss","editIcon","startIcon","stepIcon","doneIcon","VerdocsSend","exports","this","levels","VerdocsEndpoint","getDefault","concat","Math","random","toString","substring","class_1","prototype","componentWillLoad","sessionContacts","endpoint","loadSession","result","_d","sent","_a","session","profile","push","id","name","first_name","last_name","email","phone","console","log","e_1","componentDidLoad","templateId","getTemplate","template","roles","rolesAtLevel_1","forEach","role","level","sequence","length","__assign","rolesAtLevel","Object","keys","map","levelStr","sort","a","b","e_2","getLevelIcon","h","class","innerHTML","handleSelectContact","e","preventDefault","recipientsAssigned","detail","showPickerForId","handleClickRole","stopPropagation","handleSend","send","emit","values","handleCancel","cancel","render","_this","roleNames","_b","allRecipientsAssigned","filter","recipient","isValidEmail","isValidPhone","_c","Host","style","backgroundColor","getRGBA","getRoleIndex","onClick","full_name","onCancel","onNext","contactSuggestions","templateRole","onSearchContacts","label","size","variant","disabled"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n  display: flex;\n  padding: 10px;\n  position: relative;\n  background: #ffffff;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .recipients {\n    position: relative;\n  }\n\n  // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n  // background obscures the horizontal lines.\n  .left-line {\n    top: 32px;\n    left: 20px;\n    z-index: 1;\n    width: 12px;\n    bottom: 30px;\n    position: absolute;\n    background: #ffffff;\n    border-left: 3px dotted #9b9b9b;\n  }\n\n  .level {\n    display: flex;\n    column-gap: 10px;\n    margin-left: 50px;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 0 4px 0;\n    border-bottom: 1px solid #97979744;\n\n    .level-icon {\n      top: 14px;\n      z-index: 2;\n      left: -40px;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      background: #ffffff;\n\n      svg {\n        fill: #00000089;\n      }\n    }\n\n    .recipient {\n      height: 30px;\n      display: flex;\n      flex: 0 0 30px;\n      color: #000000;\n      cursor: pointer;\n      font-size: 14px;\n      align-items: center;\n      border-radius: 30px;\n      flex-direction: row;\n      background: #dddddd;\n      white-space: nowrap;\n      padding: 2px 10px 2px 14px;\n\n      .icon {\n        width: 22px;\n        height: 22px;\n        flex: 0 0 22px;\n        margin: 0 0 0 10px;\n\n        svg {\n          width: 22px;\n          height: 22px;\n          fill: #333333;\n          outline: none;\n        }\n      }\n    }\n\n    .complete {\n      flex: 1;\n      height: 30px;\n      display: flex;\n      color: #000000;\n      font-size: 14px;\n      align-items: center;\n      flex-direction: row;\n      padding: 3px 10px 3px 2px;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    column-gap: 15px;\n    flex-direction: row;\n  }\n\n  verdocs-contact-picker {\n    left: 0;\n    top: 41px;\n    z-index: 10;\n    position: absolute;\n    border: 1px solid #dddddd;\n    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/**\n * Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\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 ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n  /**\n   * The user canceled the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\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  @State() template: ITemplate | null = null;\n\n  @State() pdfUrl = null;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n  @State() showPickerForId = '';\n\n  @State() sessionContacts = [];\n\n  @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n  levels: number[] = [];\n\n  async componentWillLoad() {\n    this.sessionContacts = [];\n    try {\n      const result = await this.endpoint.loadSession();\n\n      if (result.session?.profile) {\n        this.sessionContacts.push({\n          id: result.session.profile.id,\n          name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n          email: result.session.profile.email,\n          phone: result.session.profile.phone,\n        });\n      }\n    } catch (e) {\n      console.log('Error loading session', e);\n    }\n  }\n\n  async componentDidLoad() {\n    console.log('[SEND] Showing template', this.templateId);\n\n    try {\n      console.log(`[SEND] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[SEND] Got template', template);\n      this.template = template;\n\n      if (template?.roles) {\n        const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n        template.roles.forEach(role => {\n          const level = role.sequence - 1;\n          rolesAtLevel[level] ||= [];\n          const id = `r-${level}-${rolesAtLevel[level].length}`;\n          rolesAtLevel[level].push({...role, id});\n        });\n\n        this.rolesAtLevel = rolesAtLevel;\n        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n        this.levels.sort((a, b) => a - b);\n      }\n    } catch (e) {\n      console.log('[SEND] Error getting template', e);\n    }\n  }\n\n  getLevelIcon(level: number) {\n    if (level < 0) {\n      return <div class=\"level-icon\" innerHTML={startIcon} />;\n    } else if (level >= this.levels.length) {\n      return <div class=\"level-icon\" innerHTML={doneIcon} />;\n    } else {\n      return <div class=\"level-icon\" innerHTML={stepIcon} />;\n    }\n  }\n\n  handleSelectContact(e: any, role: TAnnotatedRole) {\n    e.preventDefault();\n    e.detail; // IContactSelectEvent\n    this.recipientsAssigned[role.id] = {...role, ...e.detail};\n    this.showPickerForId = '';\n  }\n\n  handleClickRole(e: any, role: TAnnotatedRole) {\n    e.stopPropagation();\n    this.showPickerForId = role.id;\n  }\n\n  handleSend(e) {\n    e.stopPropagation();\n    this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  render() {\n    const roleNames = this.template?.roles?.map(role => role.name) || [];\n    const allRecipientsAssigned =\n      Object.values(this.recipientsAssigned).filter(recipient => {\n        console.log('valid email', isValidEmail(recipient.email), recipient.email);\n        console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n        return isValidEmail(recipient.email) || isValidPhone(recipient.phone);\n      }).length >= this.template?.roles.length;\n    console.log('assigned', allRecipientsAssigned);\n\n    return (\n      <Host class={{}}>\n        <div class=\"recipients\">\n          <div class=\"left-line\" />\n          <div class={`level level-start`}>\n            {this.getLevelIcon(-1)}\n            <div class=\"complete\">Send Document</div>\n          </div>\n\n          {this.levels.map(level => (\n            <div class={`level level-${level}`}>\n              {this.getLevelIcon(level)}\n\n              {this.rolesAtLevel[level].map(role => (\n                <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n                  {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n                  <div class=\"icon\" innerHTML={editIcon} />\n                  {this.showPickerForId === role.id && (\n                    <verdocs-contact-picker\n                      onCancel={() => (this.showPickerForId = '')}\n                      onNext={e => this.handleSelectContact(e, role)}\n                      contactSuggestions={this.sessionContacts}\n                      templateRole={this.recipientsAssigned[role.id] ?? role}\n                      onSearchContacts={e => console.log('Search', e.detail)}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          <div class={`level level-done`}>\n            {this.getLevelIcon(this.levels.length)}\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onClick={e => this.handleSend(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/embeds/verdocs-send/verdocs-send.scss?tag=verdocs-send","src/components/embeds/verdocs-send/verdocs-send.tsx"],"names":["verdocsSendCss","editIcon","startIcon","stepIcon","doneIcon","VerdocsSend","exports","this","levels","VerdocsEndpoint","getDefault","concat","Math","random","toString","substring","class_1","prototype","componentWillLoad","sessionContacts","endpoint","loadSession","result","_d","sent","_a","session","profile","push","id","name","first_name","last_name","email","phone","console","log","e_1","componentDidLoad","templateId","getTemplate","template","roles","rolesAtLevel_1","forEach","role","level","sequence","length","__assign","rolesAtLevel","Object","keys","map","levelStr","sort","a","b","e_2","getLevelIcon","h","class","innerHTML","handleSelectContact","e","preventDefault","recipientsAssigned","detail","showPickerForId","handleClickRole","stopPropagation","handleSend","send","emit","values","handleCancel","cancel","render","_this","roleNames","_b","allRecipientsAssigned","filter","recipient","isValidEmail","isValidPhone","_c","Host","style","backgroundColor","getRGBA","getRoleIndex","onClick","full_name","onCancel","onNext","contactSuggestions","templateRole","onSearchContacts","label","size","variant","disabled"],"mappings":"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","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-send {\n  display: flex;\n  padding: 10px;\n  position: relative;\n  background: #ffffff;\n  flex-direction: column;\n  font-family: $verdocs-primary-font;\n\n  .recipients {\n    position: relative;\n  }\n\n  // To avoid the need to compute things like heights, this layer is simply displayed \"on top\" of all the level rows. Its\n  // background obscures the horizontal lines.\n  .left-line {\n    top: 32px;\n    left: 20px;\n    z-index: 1;\n    width: 12px;\n    bottom: 30px;\n    position: absolute;\n    background: #ffffff;\n    border-left: 3px dotted #9b9b9b;\n  }\n\n  .level {\n    display: flex;\n    column-gap: 10px;\n    margin-left: 50px;\n    position: relative;\n    flex-direction: row;\n    padding: 8px 0 4px 0;\n    border-bottom: 1px solid #97979744;\n\n    .level-icon {\n      top: 14px;\n      z-index: 2;\n      left: -40px;\n      width: 24px;\n      height: 24px;\n      position: absolute;\n      background: #ffffff;\n\n      svg {\n        fill: #00000089;\n      }\n    }\n\n    .recipient {\n      height: 30px;\n      display: flex;\n      flex: 0 0 30px;\n      color: #000000;\n      cursor: pointer;\n      font-size: 14px;\n      align-items: center;\n      border-radius: 30px;\n      flex-direction: row;\n      background: #dddddd;\n      white-space: nowrap;\n      padding: 2px 10px 2px 14px;\n\n      .icon {\n        width: 22px;\n        height: 22px;\n        flex: 0 0 22px;\n        margin: 0 0 0 10px;\n\n        svg {\n          width: 22px;\n          height: 22px;\n          fill: #333333;\n          outline: none;\n        }\n      }\n    }\n\n    .complete {\n      flex: 1;\n      height: 30px;\n      display: flex;\n      color: #000000;\n      font-size: 14px;\n      align-items: center;\n      flex-direction: row;\n      padding: 3px 10px 3px 2px;\n    }\n  }\n\n  .buttons {\n    display: flex;\n    margin-top: 10px;\n    column-gap: 15px;\n    flex-direction: row;\n  }\n\n  verdocs-contact-picker {\n    left: 0;\n    top: 41px;\n    z-index: 10;\n    position: absolute;\n    border: 1px solid #dddddd;\n    box-shadow: 0 0 6px 3px rgb(0 0 0 / 10%);\n  }\n}\n","import {VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {getRGBA} from '@verdocs/js-sdk/Utils/Colors';\nimport {getTemplate} from '@verdocs/js-sdk/Templates/Templates';\nimport {IRole, ITemplate} from '@verdocs/js-sdk/Templates/Types';\nimport {isValidEmail, isValidPhone} from '@verdocs/js-sdk/Templates/Validators';\nimport {Component, Prop, State, h, Event, EventEmitter, Host} from '@stencil/core';\nimport {getRoleIndex} from '../../../utils/utils';\nimport {SDKError} from '../../../utils/errors';\n\n// TODO: Evaluating this pattern for simple icons vs. importing external SVG files. Try to standardize on an approach soon.\nconst editIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"></path></svg>';\n\nconst startIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M2 12C2 6.48 6.48 2 12 2s10 4.48 10 10-4.48 10-10 10S2 17.52 2 12zm10 6c3.31 0 6-2.69 6-6s-2.69-6-6-6-6 2.69-6 6 2.69 6 6 6z\"></path></svg>';\n\nconst stepIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"></path></svg>';\n\nconst doneIcon =\n  '<svg focusable=\"false\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" tabindex=\"-1\"><path d=\"m18 7-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41 6 19l1.41-1.41L1.83 12 .41 13.41z\"></path></svg>';\n\ntype TAnnotatedRole = IRole & {id: string};\n\n/**\n * Display a form to collect recipient information for a new Document. If used anonymously, the specified `templateId` must be public.\n * If the user is authenticated\n */\n@Component({\n  tag: 'verdocs-send',\n  styleUrl: 'verdocs-send.scss',\n  shadow: false,\n})\nexport class VerdocsSend {\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 ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * The user completed the form and clicked send.\n   */\n  @Event({composed: true}) send: EventEmitter<{recipientsAssigned: IRole[]}>;\n\n  /**\n   * The user canceled the process.\n   */\n  @Event({composed: true}) cancel: EventEmitter;\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  @State() template: ITemplate | null = null;\n\n  @State() pdfUrl = null;\n\n  @State() containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;\n\n  @State() rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n  @State() showPickerForId = '';\n\n  @State() sessionContacts = [];\n\n  @State() recipientsAssigned: Record<string, TAnnotatedRole> = {};\n\n  levels: number[] = [];\n\n  async componentWillLoad() {\n    this.sessionContacts = [];\n    try {\n      const result = await this.endpoint.loadSession();\n\n      if (result.session?.profile) {\n        this.sessionContacts.push({\n          id: result.session.profile.id,\n          name: `${result.session.profile.first_name} ${result.session.profile.last_name}`,\n          email: result.session.profile.email,\n          phone: result.session.profile.phone,\n        });\n      }\n    } catch (e) {\n      console.log('Error loading session', e);\n    }\n  }\n\n  async componentDidLoad() {\n    console.log('[SEND] Showing template', this.templateId);\n\n    try {\n      console.log(`[SEND] Loading template ${this.templateId}`);\n      const template = await getTemplate(this.endpoint, this.templateId);\n\n      console.log('[SEND] Got template', template);\n      this.template = template;\n\n      if (template?.roles) {\n        const rolesAtLevel: Record<number, TAnnotatedRole[]> = {};\n\n        template.roles.forEach(role => {\n          const level = role.sequence - 1;\n          rolesAtLevel[level] ||= [];\n          const id = `r-${level}-${rolesAtLevel[level].length}`;\n          rolesAtLevel[level].push({...role, id});\n        });\n\n        this.rolesAtLevel = rolesAtLevel;\n        this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);\n        this.levels.sort((a, b) => a - b);\n      }\n    } catch (e) {\n      console.log('[SEND] Error getting template', e);\n    }\n  }\n\n  getLevelIcon(level: number) {\n    if (level < 0) {\n      return <div class=\"level-icon\" innerHTML={startIcon} />;\n    } else if (level >= this.levels.length) {\n      return <div class=\"level-icon\" innerHTML={doneIcon} />;\n    } else {\n      return <div class=\"level-icon\" innerHTML={stepIcon} />;\n    }\n  }\n\n  handleSelectContact(e: any, role: TAnnotatedRole) {\n    e.preventDefault();\n    e.detail; // IContactSelectEvent\n    this.recipientsAssigned[role.id] = {...role, ...e.detail};\n    this.showPickerForId = '';\n  }\n\n  handleClickRole(e: any, role: TAnnotatedRole) {\n    e.stopPropagation();\n    this.showPickerForId = role.id;\n  }\n\n  handleSend(e) {\n    e.stopPropagation();\n    this.send?.emit({recipientsAssigned: Object.values(this.recipientsAssigned)});\n  }\n\n  handleCancel(e) {\n    e.stopPropagation();\n    this.cancel?.emit();\n  }\n\n  render() {\n    const roleNames = this.template?.roles?.map(role => role.name) || [];\n    const allRecipientsAssigned =\n      Object.values(this.recipientsAssigned).filter(recipient => {\n        console.log('valid email', isValidEmail(recipient.email), recipient.email);\n        console.log('valid phone', isValidPhone(recipient.phone), recipient.phone);\n        return isValidEmail(recipient.email) || isValidPhone(recipient.phone);\n      }).length >= this.template?.roles.length;\n    console.log('assigned', allRecipientsAssigned);\n\n    return (\n      <Host class={{}}>\n        <div class=\"recipients\">\n          <div class=\"left-line\" />\n          <div class={`level level-start`}>\n            {this.getLevelIcon(-1)}\n            <div class=\"complete\">Send Document</div>\n          </div>\n\n          {this.levels.map(level => (\n            <div class={`level level-${level}`}>\n              {this.getLevelIcon(level)}\n\n              {this.rolesAtLevel[level].map(role => (\n                <div class=\"recipient\" style={{backgroundColor: getRGBA(getRoleIndex(roleNames, role.name))}} onClick={e => this.handleClickRole(e, role)}>\n                  {this.recipientsAssigned[role.id]?.full_name ?? role.name}\n                  <div class=\"icon\" innerHTML={editIcon} />\n                  {this.showPickerForId === role.id && (\n                    <verdocs-contact-picker\n                      onCancel={() => (this.showPickerForId = '')}\n                      onNext={e => this.handleSelectContact(e, role)}\n                      contactSuggestions={this.sessionContacts}\n                      templateRole={this.recipientsAssigned[role.id] ?? role}\n                      onSearchContacts={e => console.log('Search', e.detail)}\n                    />\n                  )}\n                </div>\n              ))}\n            </div>\n          ))}\n\n          <div class={`level level-done`}>\n            {this.getLevelIcon(this.levels.length)}\n            <div class=\"complete\">Document Complete</div>\n          </div>\n        </div>\n\n        <div class=\"buttons\">\n          <verdocs-button label=\"Cancel\" size=\"small\" variant=\"outline\" onClick={e => this.handleCancel(e)} />\n          <verdocs-button label=\"Send\" size=\"small\" disabled={!allRecipientsAssigned} onClick={e => this.handleSend(e)} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/verdocs-web-sdk/{p-7d1a5bc5.system.entry.js → p-14c69e28.system.entry.js}

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function i(e){try{l(s.next(e))}catch(e){r(e)}}function a(e){try{l(s["throw"](e))}catch(e){r(e)}}function l(e){e.done?n(e.value):o(e.value).then(i,a)}l((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},s,o,r,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(e){return function(t){return l([e,t])}}function l(i){if(s)throw new TypeError("Generator is already executing.");while(n)try{if(s=1,o&&(r=i[0]&2?o["return"]:i[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,i[1])).done)return r;if(o=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=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(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){n.label=i[1];break}if(i[0]===6&&n.label<r[1]){n.label=r[1];r=i;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(i);break}if(r[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];o=0}finally{s=r=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-a7433630.system.js","./p-7a6c829f.system.js","./p-6d8b9e75.system.js","./p-187b20b7.system.js","./p-af2c2f79.system.js","./p-9cecb5df.system.js","./p-30fcf18d.system.js","./p-0f6da8c7.system.js","./p-58c4b767.system.js"],(function(e){"use strict";var t,n,s,o,r,i,a;return{setters:[function(e){t=e.r;n=e.c;s=e.h;o=e.H},function(){},function(e){r=e.V},function(e){i=e.l},function(e){a=e.S},function(){},function(){},function(){},function(){},function(){}],execute:function(){var l='verdocs-build{display:-ms-flexbox;display:flex;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}';var c=e("verdocs_build",function(){function e(e){t(this,e);this.sdkError=n(this,"sdkError",7);this.fields=[];this.endpoint=r.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,s;return __generator(this,(function(o){switch(o.label){case 0:this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return[2]}if(!this.templateId){console.log("[BUILD] No template ID specified, showing upload option");this.step="create";return[2]}o.label=1;case 1:o.trys.push([1,3,,4]);console.log("[BUILD] Loading template ".concat(this.templateId));return[4,i(this.endpoint,this.templateId)];case 2:o.sent();this.step="fields";return[3,4];case 3:s=o.sent();console.log("[BUILD] Error loading template",s);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new a(s.message,(t=s.response)===null||t===void 0?void 0:t.status,(n=s.response)===null||n===void 0?void 0:n.data));return[3,4];case 4:return[2]}}))}))};e.prototype.handleCancel=function(e){console.log("Cancel",e.detail);this.step=""};e.prototype.handleTemplateCreated=function(e){console.log("Created",e.detail);this.step="properties"};e.prototype.handlePropertiesUpdated=function(e){console.log("updated",e.detail);this.step="recipients"};e.prototype.handleRecipientsUpdated=function(e){console.log("updated",e.detail);this.step="fields"};e.prototype.render=function(){var e=this;return s(o,null,this.step==="create"&&s("verdocs-template-create",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleTemplateCreated(t)}}),this.step==="properties"&&s("verdocs-template-properties",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handlePropertiesUpdated(t)}}),this.step==="recipients"&&s("verdocs-template-recipients",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleRecipientsUpdated(t)}}),this.step==="fields"&&s("verdocs-template-fields",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleCancel(t)}}))};return e}());c.style=l}}}));
-//# sourceMappingURL=p-7d1a5bc5.system.entry.js.map
+var __awaiter=this&&this.__awaiter||function(e,t,n,s){function o(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,r){function i(e){try{l(s.next(e))}catch(e){r(e)}}function a(e){try{l(s["throw"](e))}catch(e){r(e)}}function l(e){e.done?n(e.value):o(e.value).then(i,a)}l((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},s,o,r,i;return i={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function a(e){return function(t){return l([e,t])}}function l(i){if(s)throw new TypeError("Generator is already executing.");while(n)try{if(s=1,o&&(r=i[0]&2?o["return"]:i[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,i[1])).done)return r;if(o=0,r)i=[i[0]&2,r.value];switch(i[0]){case 0:case 1:r=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(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(i[0]===6||i[0]===2)){n=0;continue}if(i[0]===3&&(!r||i[1]>r[0]&&i[1]<r[3])){n.label=i[1];break}if(i[0]===6&&n.label<r[1]){n.label=r[1];r=i;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(i);break}if(r[2])n.ops.pop();n.trys.pop();continue}i=t.call(e,n)}catch(e){i=[6,e];o=0}finally{s=r=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};System.register(["./p-97329951.system.js","./p-a7433630.system.js","./p-7a6c829f.system.js","./p-c8e8732b.system.js","./p-187b20b7.system.js","./p-af2c2f79.system.js","./p-9cecb5df.system.js","./p-a74a9c6b.system.js","./p-0f6da8c7.system.js","./p-d50523fd.system.js"],(function(e){"use strict";var t,n,s,o,r,i,a;return{setters:[function(e){t=e.r;n=e.c;s=e.h;o=e.H},function(){},function(e){r=e.V},function(e){i=e.l},function(e){a=e.S},function(){},function(){},function(){},function(){},function(){}],execute:function(){var l='verdocs-build{display:-ms-flexbox;display:flex;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}';var c=e("verdocs_build",function(){function e(e){t(this,e);this.sdkError=n(this,"sdkError",7);this.fields=[];this.endpoint=r.getDefault();this.templateId=null;this.step="create";this.pdfUrl=null;this.template=null}e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e,t,n,s;return __generator(this,(function(o){switch(o.label){case 0:this.endpoint.loadSession();if(!this.endpoint.session){console.log("[BUILD] Unable to start builder session, must be authenticated");return[2]}if(!this.templateId){console.log("[BUILD] No template ID specified, showing upload option");this.step="create";return[2]}o.label=1;case 1:o.trys.push([1,3,,4]);console.log("[BUILD] Loading template ".concat(this.templateId));return[4,i(this.endpoint,this.templateId)];case 2:o.sent();this.step="fields";return[3,4];case 3:s=o.sent();console.log("[BUILD] Error loading template",s);(e=this.sdkError)===null||e===void 0?void 0:e.emit(new a(s.message,(t=s.response)===null||t===void 0?void 0:t.status,(n=s.response)===null||n===void 0?void 0:n.data));return[3,4];case 4:return[2]}}))}))};e.prototype.handleCancel=function(e){console.log("Cancel",e.detail);this.step=""};e.prototype.handleTemplateCreated=function(e){console.log("Created",e.detail);this.step="properties"};e.prototype.handlePropertiesUpdated=function(e){console.log("updated",e.detail);this.step="recipients"};e.prototype.handleRecipientsUpdated=function(e){console.log("updated",e.detail);this.step="fields"};e.prototype.render=function(){var e=this;return s(o,null,this.step==="create"&&s("verdocs-template-create",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleTemplateCreated(t)}}),this.step==="properties"&&s("verdocs-template-properties",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handlePropertiesUpdated(t)}}),this.step==="recipients"&&s("verdocs-template-recipients",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleRecipientsUpdated(t)}}),this.step==="fields"&&s("verdocs-template-fields",{onCancel:function(t){return e.handleCancel(t)},onNext:function(t){return e.handleCancel(t)}}))};return e}());c.style=l}}}));
+//# sourceMappingURL=p-14c69e28.system.entry.js.map

package/dist/verdocs-web-sdk/p-194a9ea7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as o}from"./p-ff1278ed.js";import{g as i}from"./p-6de76553.js";import{g as s}from"./p-417ee5e0.js";import{f as l}from"./p-ab01f71e.js";import"./p-21603661.js";import"./p-aa124212.js";const r='verdocs-field-timestamp{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;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:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp 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-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}';const a='<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 n=class{constructor(t){e(this,t);this.field=null;this.disabled=false;this.editable=false;this.moveable=false;this.done=false;this.roleindex=0}async focusField(){this.el.focus()}render(){var e,r,n;const d=s(this.field);const p=(r=(e=this.disabled)!==null&&e!==void 0?e:d.disabled)!==null&&r!==void 0?r:false;const c=this.field["rgba"]||i(this.roleindex);const m=d.value||(new Date).toISOString();const f=new Date(m);const v=l(f,"MMM d, y");if(this.done){return t(o,{class:{done:this.done}},v)}return t(o,{class:{required:(n=this.field)===null||n===void 0?void 0:n.required,disabled:p},style:{backgroundColor:c}},t("input",{type:"text",placeholder:d===null||d===void 0?void 0:d.placeholder,tabIndex:d===null||d===void 0?void 0:d.order,value:v,disabled:true,ref:e=>this.el=e}),this.editable&&t("verdocs-button-panel",{icon:a},t("h6",null,"Field Settings"),t("form",null,t("verdocs-select-input",{label:"Recipient",options:[{label:"Buyer",value:"Buyer"},{label:"Seller",value:"Seller"}]}),t("verdocs-text-input",{label:"Field Name",value:"",placeholder:"Stored field name...",onInput:e=>console.log("ipt",e)}),t("verdocs-text-input",{label:"Placeholder",value:"",placeholder:"Placeholder text...",onInput:e=>console.log("ipt",e)}))))}};n.style=r;export{n as verdocs_field_timestamp};
+//# sourceMappingURL=p-194a9ea7.entry.js.map

package/dist/verdocs-web-sdk/{p-455c2dd9.entry.js.map → p-194a9ea7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":["verdocsFieldTimestampCss","settingsIcon","VerdocsFieldTimestamp","[object Object]","this","el","focus","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","value","Date","toISOString","dt","formatted","format","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","ref","editable","icon","label","options","onInput","e","console","log"],"mappings":"sLAAA,MAAMA,EAA2B,kuCCOjC,MAAMC,EACJ,+rCAUWC,EAAqB,0CAMwB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEnBC,mBACRC,KAAKC,GAAGC,QAGVH,mBACE,MAAMI,EAAWC,EAAiBJ,KAAKK,OACvC,MAAMC,GAAWC,GAAAC,EAAAR,KAAKM,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBT,KAAKK,MAAM,SAAWK,EAAQV,KAAKW,WAC3D,MAAMC,EAAQT,EAASS,QAAS,IAAIC,MAAOC,cAE3C,MAAMC,EAAK,IAAIF,KAAKD,GACpB,MAAMI,EAAYC,EAAOF,EAAI,YAE7B,GAAIf,KAAKkB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMlB,KAAKkB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAvB,KAAKK,SAAK,MAAAkB,SAAA,OAAA,EAAAA,EAAED,SAAUhB,SAAAA,GAAWkB,MAAO,CAACf,gBAAAA,IAC/DU,EAAA,QAAA,CACEM,KAAK,OACLC,YAAavB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUuB,YACvBC,SAAUxB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUyB,MAGpBhB,MAAOI,EACPV,SAAU,KACVuB,IAAK5B,GAAOD,KAAKC,GAAKA,IAGvBD,KAAK8B,UACJX,EAAA,uBAAA,CAAsBY,KAAMlC,GAC1BsB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEa,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASpB,MAAO,SACxB,CAACoB,MAAO,SAAUpB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBa,MAAM,aAAapB,MAAM,GAAGc,YAAY,uBAAuBQ,QAASC,GAAKC,QAAQC,IAAI,MAAOF,KACpHhB,EAAA,qBAAA,CAAoBa,MAAM,cAAcpB,MAAM,GAAGc,YAAY,sBAAsBQ,QAASC,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 10px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  opacity: 0.5;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    box-sizing: border-box;\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: 10px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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 {format} from 'date-fns';\nimport {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, Method} 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 * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings.value || new Date().toISOString();\n\n    const dt = new Date(value);\n    const formatted = format(dt, 'MMM d, y');\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n          // is encoded in a ton of existing entries in the database and is hard to change.\n          value={formatted}\n          disabled={true}\n          ref={el => (this.el = el)}\n        />\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"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.scss?tag=verdocs-field-timestamp","src/components/elements/verdocs-field-timestamp/verdocs-field-timestamp.tsx"],"names":["verdocsFieldTimestampCss","settingsIcon","VerdocsFieldTimestamp","[object Object]","this","el","focus","settings","getFieldSettings","field","disabled","_b","_a","backgroundColor","getRGBA","roleindex","value","Date","toISOString","dt","formatted","format","done","h","Host","class","required","_c","style","type","placeholder","tabIndex","order","ref","editable","icon","label","options","onInput","e","console","log"],"mappings":"8MAAA,MAAMA,EAA2B,kuCCOjC,MAAMC,EACJ,+rCAUWC,EAAqB,0CAMwB,mBAK3B,oBAMA,oBAKA,gBAKJ,qBAKI,EAEnBC,mBACRC,KAAKC,GAAGC,QAGVH,mBACE,MAAMI,EAAWC,EAAiBJ,KAAKK,OACvC,MAAMC,GAAWC,GAAAC,EAAAR,KAAKM,YAAQ,MAAAE,SAAA,EAAAA,EAAIL,EAASG,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvD,MAAME,EAAkBT,KAAKK,MAAM,SAAWK,EAAQV,KAAKW,WAC3D,MAAMC,EAAQT,EAASS,QAAS,IAAIC,MAAOC,cAE3C,MAAMC,EAAK,IAAIF,KAAKD,GACpB,MAAMI,EAAYC,EAAOF,EAAI,YAE7B,GAAIf,KAAKkB,KAAM,CACb,OAAOC,EAACC,EAAI,CAACC,MAAO,CAACH,KAAMlB,KAAKkB,OAAQF,GAG1C,OACEG,EAACC,EAAI,CAACC,MAAO,CAACC,UAAUC,EAAAvB,KAAKK,SAAK,MAAAkB,SAAA,OAAA,EAAAA,EAAED,SAAUhB,SAAAA,GAAWkB,MAAO,CAACf,gBAAAA,IAC/DU,EAAA,QAAA,CACEM,KAAK,OACLC,YAAavB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUuB,YACvBC,SAAUxB,IAAQ,MAARA,SAAQ,OAAA,EAARA,EAAUyB,MAGpBhB,MAAOI,EACPV,SAAU,KACVuB,IAAK5B,GAAOD,KAAKC,GAAKA,IAGvBD,KAAK8B,UACJX,EAAA,uBAAA,CAAsBY,KAAMlC,GAC1BsB,EAAA,KAAA,KAAA,kBACAA,EAAA,OAAA,KACEA,EAAA,uBAAA,CACEa,MAAM,YACNC,QAAS,CACP,CAACD,MAAO,QAASpB,MAAO,SACxB,CAACoB,MAAO,SAAUpB,MAAO,aAI7BO,EAAA,qBAAA,CAAoBa,MAAM,aAAapB,MAAM,GAAGc,YAAY,uBAAuBQ,QAASC,GAAKC,QAAQC,IAAI,MAAOF,KACpHhB,EAAA,qBAAA,CAAoBa,MAAM,cAAcpB,MAAM,GAAGc,YAAY,sBAAsBQ,QAASC,GAAKC,QAAQC,IAAI,MAAOF","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-timestamp {\n  font-family: $verdocs-primary-font;\n  width: 150px;\n  height: 15px;\n  display: block;\n  font-size: 10px;\n  position: relative;\n  background-color: transparent;\n  transform-origin: bottom left;\n  opacity: 0.5;\n\n  &.done {\n    opacity: 1;\n  }\n\n  input {\n    box-sizing: border-box;\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: 10px;\n    border: 1px solid rgba(0, 0, 0, 0.2);\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 {format} from 'date-fns';\nimport {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, Method} 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 * Display a timestamp field.\n */\n@Component({\n  tag: 'verdocs-field-timestamp',\n  styleUrl: 'verdocs-field-timestamp.scss',\n  shadow: false,\n})\nexport class VerdocsFieldTimestamp {\n  private el: HTMLInputElement;\n\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Method() async focusField() {\n    this.el.focus();\n  }\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n    const value = settings.value || new Date().toISOString();\n\n    const dt = new Date(value);\n    const formatted = format(dt, 'MMM d, y');\n\n    if (this.done) {\n      return <Host class={{done: this.done}}>{formatted}</Host>;\n    }\n\n    return (\n      <Host class={{required: this.field?.required, disabled}} style={{backgroundColor}}>\n        <input\n          type=\"text\"\n          placeholder={settings?.placeholder}\n          tabIndex={settings?.order}\n          // TODO: It would really make more sense to show the date and time but the default width of 64px for this field\n          // is encoded in a ton of existing entries in the database and is hard to change.\n          value={formatted}\n          disabled={true}\n          ref={el => (this.el = el)}\n        />\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"]}

package/dist/verdocs-web-sdk/p-210606ed.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t,H as s}from"./p-ff1278ed.js";import{g as n}from"./p-6de76553.js";import{g as o}from"./p-417ee5e0.js";import"./p-21603661.js";import"./p-aa124212.js";const a='verdocs-field-payment{font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{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-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}';const r=class{constructor(t){e(this,t);this.signatureComplete=i(this,"signatureComplete",7);this.initialComplete=i(this,"initialComplete",7);this._fields=[];this.signatureFile=null;this.initialFile=null;this.focusOrderNumber=-1;this.focusFieldName="";this.activeElement=null;this.showError={pageNum:-1,fieldIndex:-1,type:null};this.dialogOpened=false;this.closeAllErrors=false;this.fieldsMap={};this.fieldsForCurrentSigner=[];this.fontSize=11;this.averageFontWidth=5;this.requiredFields=[];this.field=null;this.disabled=false;this.fields=undefined;this.pageNum=undefined;this.roleName=undefined;this.fieldId=undefined;this.recipients=undefined;this.selectedRoleName=undefined;this.pdfPages=undefined;this.currentSignature=undefined;this.currentSignatureId=undefined;this.currentInitial=undefined;this.currentInitialId=undefined;this.focused=false;this.signed=false;this.preparedMessage=undefined;this.signatureUrl="";this.roleindex=0}componentWillLoad(){console.log("sign field",this.field);if(this.recipients&&this.recipients.length>0){const e=this.recipients.find((e=>e.type==="preparer"));console.log("Found preparer",e);if(e){this.preparedMessage=`Prepared by ${e["full_name"]}`}}}render(){var e,i;const a=o(this.field);const r=(i=(e=this.disabled)!==null&&e!==void 0?e:a.disabled)!==null&&i!==void 0?i:false;console.log("Payment field",a);const d=this.field["rgba"]||n(this.roleindex);return t(s,{class:{focused:this.focused,disabled:r},style:{backgroundColor:d}},t("button",{class:{hide:this.signed}},"$"),this.signed?t("div",{class:"frame"}):t("div",{style:{display:"none"}}),t("img",{width:"100%",height:"100%",src:this.signatureUrl}))}};r.style=a;export{r as verdocs_field_payment};
+//# sourceMappingURL=p-210606ed.entry.js.map

package/dist/verdocs-web-sdk/{p-cc30f8c8.entry.js.map → p-210606ed.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/elements/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","src/components/elements/verdocs-field-payment/verdocs-field-payment.tsx"],"names":["verdocsFieldPaymentCss","VerdocsFieldPayment","this","_fields","signatureFile","initialFile","focusOrderNumber","focusFieldName","activeElement","showError","pageNum","fieldIndex","type","dialogOpened","closeAllErrors","fieldsMap","fieldsForCurrentSigner","fontSize","averageFontWidth","requiredFields","[object Object]","console","log","field","recipients","length","preparer","find","r","preparedMessage","settings","getFieldSettings","disabled","_b","_a","backgroundColor","getRGBA","roleindex","h","Host","class","focused","style","hide","signed","display","width","height","src","signatureUrl"],"mappings":"yJAAA,MAAMA,EAAyB,m8CCelBC,EAAmB,qIAqC9BC,KAAAC,QAAiB,GAEjBD,KAAAE,cAAqB,KACrBF,KAAAG,YAAmB,KAEnBH,KAAAI,kBAAoB,EACpBJ,KAAAK,eAAyB,GAEzBL,KAAAM,cAAgB,KAChBN,KAAAO,UAAY,CACVC,SAAU,EACVC,YAAa,EACbC,KAAM,MAERV,KAAAW,aAAe,MACfX,KAAAY,eAAiB,MACjBZ,KAAAa,UAAiB,GAGjBb,KAAAc,uBAAgC,GAGhCd,KAAAe,SAAW,GACXf,KAAAgB,iBAAmB,EACnBhB,KAAAiB,eAAwB,cAzDgC,mBAK3B,iUAaF,kBACD,uDAOM,kBAKH,EA4B7BC,oBAIEC,QAAQC,IAAI,aAAcpB,KAAKqB,OAE/B,GAAIrB,KAAKsB,YAActB,KAAKsB,WAAWC,OAAS,EAAG,CACjD,MAAMC,EAAWxB,KAAKsB,WAAWG,MAAKC,GAAKA,EAAEhB,OAAS,aACtDS,QAAQC,IAAI,iBAAkBI,GAC9B,GAAIA,EAAU,CACZxB,KAAK2B,gBAAkB,eAAeH,EAAS,iBAsCrDN,iBACE,MAAMU,EAAWC,EAAiB7B,KAAKqB,OACvC,MAAMS,GAAWC,GAAAC,EAAAhC,KAAK8B,YAAQ,MAAAE,SAAA,EAAAA,EAAIJ,EAASE,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvDZ,QAAQC,IAAI,gBAAiBQ,GAC7B,MAAMK,EAAkBjC,KAAKqB,MAAM,SAAWa,EAAQlC,KAAKmC,WAE3D,OACEC,EAACC,EAAI,CAACC,MAAO,CAACC,QAASvC,KAAKuC,QAAST,SAAAA,GAAWU,MAAO,CAACP,gBAAAA,IACtDG,EAAA,SAAA,CAAQE,MAAO,CAACG,KAAMzC,KAAK0C,SAAO,KACjC1C,KAAK0C,OAASN,EAAA,MAAA,CAAKE,MAAM,UAAaF,EAAA,MAAA,CAAKI,MAAO,CAACG,QAAS,UAC7DP,EAAA,MAAA,CAAKQ,MAAM,OAAOC,OAAO,OAAOC,IAAK9C,KAAK+C","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\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, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() focused: boolean = false;\n  @Prop() signed: boolean = false;\n\n  @Event({composed: true}) signatureComplete: EventEmitter<string>;\n\n  @Event({composed: true}) initialComplete: EventEmitter<string>;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\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  _fields: any[] = [];\n  // envelopeFieldsFormGroup: FormGroup;\n  signatureFile: any = null;\n  initialFile: any = null;\n  today: string;\n  focusOrderNumber = -1;\n  focusFieldName: string = '';\n  timer: any;\n  activeElement = null;\n  showError = {\n    pageNum: -1,\n    fieldIndex: -1,\n    type: null,\n  };\n  dialogOpened = false;\n  closeAllErrors = false;\n  fieldsMap: any = {};\n  mode: string;\n\n  fieldsForCurrentSigner: any[] = [];\n\n  validators;\n  fontSize = 11;\n  averageFontWidth = 5;\n  requiredFields: any[] = [];\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    console.log('sign field', this.field);\n\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find(r => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  // [tabIndex]=\"field.role !== roleName ? -1 : 1\"\n  // [ngStyle]=\"field.element_style\"\n  // [value]=\"field.value\"\n  // (click)=\"initiateSign(field)\"\n  // (blur)=\"validateChanges(field)\"\n  // [disabled]=\"field.role!==roleName\"\n  // [id]=\"field.key\"\n\n  // <button _ngcontent-app-root-c342=\"\" class=\"envelope__field\" tabindex=\"1\" ng-reflect-ng-style=\"[object Object]\"\n  // ng-reflect-ng-class=\"[object Object]\" value=\"\" id=\"signatureP5-1\"\n  // style=\"height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);\"> Signature </button>\n\n  //     bottom: 229.333\n  // px\n  // ;\n  //     left: 169.333\n  // px\n  // ;\n  //     height: 41\n  // px\n  // ;\n  //     width: 82\n  // px\n  // ;\n  //     background-color: rgba(156, 39, 176, 0.4);\n  //     transform: scale(1.33333, 1.33333);\n  // }\n  // <style>\n  // .envelope__item[_ngcontent-app-root-c342] {\n  //     position: absolute;\n  //     transform-origin: bottom left;\n  //     opacity: 1;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    console.log('Payment field', settings);\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, disabled}} style={{backgroundColor}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/elements/verdocs-field-payment/verdocs-field-payment.scss?tag=verdocs-field-payment","src/components/elements/verdocs-field-payment/verdocs-field-payment.tsx"],"names":["verdocsFieldPaymentCss","VerdocsFieldPayment","this","_fields","signatureFile","initialFile","focusOrderNumber","focusFieldName","activeElement","showError","pageNum","fieldIndex","type","dialogOpened","closeAllErrors","fieldsMap","fieldsForCurrentSigner","fontSize","averageFontWidth","requiredFields","[object Object]","console","log","field","recipients","length","preparer","find","r","preparedMessage","settings","getFieldSettings","disabled","_b","_a","backgroundColor","getRGBA","roleindex","h","Host","class","focused","style","hide","signed","display","width","height","src","signatureUrl"],"mappings":"iLAAA,MAAMA,EAAyB,m8CCelBC,EAAmB,qIAqC9BC,KAAAC,QAAiB,GAEjBD,KAAAE,cAAqB,KACrBF,KAAAG,YAAmB,KAEnBH,KAAAI,kBAAoB,EACpBJ,KAAAK,eAAyB,GAEzBL,KAAAM,cAAgB,KAChBN,KAAAO,UAAY,CACVC,SAAU,EACVC,YAAa,EACbC,KAAM,MAERV,KAAAW,aAAe,MACfX,KAAAY,eAAiB,MACjBZ,KAAAa,UAAiB,GAGjBb,KAAAc,uBAAgC,GAGhCd,KAAAe,SAAW,GACXf,KAAAgB,iBAAmB,EACnBhB,KAAAiB,eAAwB,cAzDgC,mBAK3B,iUAaF,kBACD,uDAOM,kBAKH,EA4B7BC,oBAIEC,QAAQC,IAAI,aAAcpB,KAAKqB,OAE/B,GAAIrB,KAAKsB,YAActB,KAAKsB,WAAWC,OAAS,EAAG,CACjD,MAAMC,EAAWxB,KAAKsB,WAAWG,MAAKC,GAAKA,EAAEhB,OAAS,aACtDS,QAAQC,IAAI,iBAAkBI,GAC9B,GAAIA,EAAU,CACZxB,KAAK2B,gBAAkB,eAAeH,EAAS,iBAsCrDN,iBACE,MAAMU,EAAWC,EAAiB7B,KAAKqB,OACvC,MAAMS,GAAWC,GAAAC,EAAAhC,KAAK8B,YAAQ,MAAAE,SAAA,EAAAA,EAAIJ,EAASE,YAAQ,MAAAC,SAAA,EAAAA,EAAI,MACvDZ,QAAQC,IAAI,gBAAiBQ,GAC7B,MAAMK,EAAkBjC,KAAKqB,MAAM,SAAWa,EAAQlC,KAAKmC,WAE3D,OACEC,EAACC,EAAI,CAACC,MAAO,CAACC,QAASvC,KAAKuC,QAAST,SAAAA,GAAWU,MAAO,CAACP,gBAAAA,IACtDG,EAAA,SAAA,CAAQE,MAAO,CAACG,KAAMzC,KAAK0C,SAAO,KACjC1C,KAAK0C,OAASN,EAAA,MAAA,CAAKE,MAAM,UAAaF,EAAA,MAAA,CAAKI,MAAO,CAACG,QAAS,UAC7DP,EAAA,MAAA,CAAKQ,MAAM,OAAOC,OAAO,OAAOC,IAAK9C,KAAK+C","sourcesContent":["@import '../../../theme.scss';\n\nverdocs-field-payment {\n  font-family: $verdocs-primary-font;\n  width: 24px;\n  height: 24px;\n  display: block;\n  font-size: 11px;\n  position: relative;\n  border: 1px solid #cfa;\n  background-color: transparent;\n  transform-origin: bottom left;\n\n  &.disabled {\n    opacity: 0.5;\n  }\n\n  button,\n  div {\n    box-sizing: border-box;\n  }\n\n  button {\n    color: rgba(0, 0, 0, 0.87);\n    font-weight: 500;\n    transform-origin: 0 0;\n    //background-color: rgba(225, 255, 255, 0.5);\n    height: 100%;\n    width: 100%;\n    background: none;\n    font-size: 11px;\n\n    &.hide {\n      display: none;\n    }\n  }\n\n  input {\n    float: left;\n    font-family: Arial, sans-serif;\n  }\n\n  select {\n    position: absolute;\n    font-family: Arial, sans-serif;\n    background: linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);\n    background-position: calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;\n    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;\n    background-repeat: no-repeat;\n    appearance: none;\n  }\n\n  .frame {\n    width: 100%;\n    height: 100%;\n    background-size: contain;\n    text-align: left;\n\n    img {\n      position: absolute;\n      height: auto;\n      width: 100%;\n    }\n  }\n\n  &.focused {\n    animation: verdocs-field-pulse 0.75s 2;\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, State} from '@stencil/core';\nimport {getFieldSettings} from '../../../utils/utils';\n\n/**\n * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as\n * input types like text and checkbox.\n */\n@Component({\n  tag: 'verdocs-field-payment',\n  styleUrl: 'verdocs-field-payment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldPayment {\n  /**\n   * The document or template field to display.\n   */\n  @Prop() field: IDocumentField | ITemplateField | null = null;\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  @Prop() fields: any[];\n  @Prop() pageNum: number;\n  @Prop() roleName: string;\n  @Prop() fieldId: string;\n  @Prop() recipients: any;\n  @Prop() selectedRoleName: string;\n  @Prop() pdfPages: any[];\n  @Prop() currentSignature: string;\n  @Prop() currentSignatureId: string;\n  @Prop() currentInitial: string;\n  @Prop() currentInitialId: string;\n  @Prop() focused: boolean = false;\n  @Prop() signed: boolean = false;\n\n  @Event({composed: true}) signatureComplete: EventEmitter<string>;\n\n  @Event({composed: true}) initialComplete: EventEmitter<string>;\n\n  @State() preparedMessage: string;\n  @State() signatureUrl: string = '';\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  _fields: any[] = [];\n  // envelopeFieldsFormGroup: FormGroup;\n  signatureFile: any = null;\n  initialFile: any = null;\n  today: string;\n  focusOrderNumber = -1;\n  focusFieldName: string = '';\n  timer: any;\n  activeElement = null;\n  showError = {\n    pageNum: -1,\n    fieldIndex: -1,\n    type: null,\n  };\n  dialogOpened = false;\n  closeAllErrors = false;\n  fieldsMap: any = {};\n  mode: string;\n\n  fieldsForCurrentSigner: any[] = [];\n\n  validators;\n  fontSize = 11;\n  averageFontWidth = 5;\n  requiredFields: any[] = [];\n\n  componentWillLoad() {\n    // Load validators\n    // Load fields\n    // Get role names\n    console.log('sign field', this.field);\n\n    if (this.recipients && this.recipients.length > 0) {\n      const preparer = this.recipients.find(r => r.type === 'preparer');\n      console.log('Found preparer', preparer);\n      if (preparer) {\n        this.preparedMessage = `Prepared by ${preparer['full_name']}`;\n      }\n    }\n  }\n\n  // [tabIndex]=\"field.role !== roleName ? -1 : 1\"\n  // [ngStyle]=\"field.element_style\"\n  // [value]=\"field.value\"\n  // (click)=\"initiateSign(field)\"\n  // (blur)=\"validateChanges(field)\"\n  // [disabled]=\"field.role!==roleName\"\n  // [id]=\"field.key\"\n\n  // <button _ngcontent-app-root-c342=\"\" class=\"envelope__field\" tabindex=\"1\" ng-reflect-ng-style=\"[object Object]\"\n  // ng-reflect-ng-class=\"[object Object]\" value=\"\" id=\"signatureP5-1\"\n  // style=\"height: 100%; width: 100%; background: none; font-size: 11px; border: 1px solid rgb(204, 0, 0);\"> Signature </button>\n\n  //     bottom: 229.333\n  // px\n  // ;\n  //     left: 169.333\n  // px\n  // ;\n  //     height: 41\n  // px\n  // ;\n  //     width: 82\n  // px\n  // ;\n  //     background-color: rgba(156, 39, 176, 0.4);\n  //     transform: scale(1.33333, 1.33333);\n  // }\n  // <style>\n  // .envelope__item[_ngcontent-app-root-c342] {\n  //     position: absolute;\n  //     transform-origin: bottom left;\n  //     opacity: 1;\n\n  render() {\n    const settings = getFieldSettings(this.field);\n    const disabled = this.disabled ?? settings.disabled ?? false;\n    console.log('Payment field', settings);\n    const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);\n\n    return (\n      <Host class={{focused: this.focused, disabled}} style={{backgroundColor}}>\n        <button class={{hide: this.signed}}>$</button>\n        {this.signed ? <div class=\"frame\" /> : <div style={{display: 'none'}} />}\n        <img width=\"100%\" height=\"100%\" src={this.signatureUrl} />\n      </Host>\n    );\n  }\n}\n"]}