@verdocs/web-sdk 1.9.31 → 1.9.33

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-1be6f38a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t,H as s,F as n}from"./p-ff1278ed.js";import{b as o,s as r,u as a,c as l,d,e as c,a as h,r as u,f}from"./p-417ee5e0.js";import"./p-8efc9749.js";import{a as v,i as p}from"./p-e662f81b.js";import{f as g}from"./p-7291906c.js";import{V as x}from"./p-5e67c42f.js";import{g as m,s as b}from"./p-8c0aa0e9.js";import{S as w}from"./p-7a1b2643.js";import"./p-21603661.js";import"./p-aa124212.js";import"./p-5ea05a1d.js";import"./p-c2cc4492.js";var y=undefined&&undefined.__awaiter||function(e,i,t,s){function n(e){return e instanceof t?e:new t((function(i){i(e)}))}return new(t||(t=Promise))((function(t,o){function r(e){try{l(s.next(e))}catch(e){o(e)}}function a(e){try{l(s["throw"](e))}catch(e){o(e)}}function l(e){e.done?t(e.value):n(e.value).then(r,a)}l((s=s.apply(e,i||[])).next())}))};var k=undefined&&undefined.__generator||function(e,i){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},s,n,o,r;return r={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function a(e){return function(i){return l([e,i])}}function l(r){if(s)throw new TypeError("Generator is already executing.");while(t)try{if(s=1,n&&(o=r[0]&2?n["return"]:r[0]?n["throw"]||((o=n["return"])&&o.call(n),0):n.next)&&!(o=o.call(n,r[1])).done)return o;if(n=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;n=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){t.label=r[1];break}if(r[0]===6&&t.label<o[1]){t.label=o[1];o=r;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(r);break}if(o[2])t.ops.pop();t.trys.pop();continue}r=i.call(e,t)}catch(e){r=[6,e];n=0}finally{s=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var S=function(e,i,t,s){return y(void 0,void 0,void 0,(function(){return k(this,(function(n){return[2,e.api.put("/envelopes/".concat(i,"/recipients/").concat(t),s).then((function(e){return e.data}))]}))}))};var I=function(e,i,t){return S(e,i,t,{action:"submit"})};var N=function(e,i,t){return S(e,i,t,{action:"decline"})};var j=function(e,i,t,s){return S(e,i,t,{action:"update",agreed:s})};var F=function(e,i,t){var s=new FormData;s.append("signature",t,i);return e.api.post("/signatures",s).then((function(e){return e.data}))};var G=function(e,i,t){var s=new FormData;s.append("initial",t,i);return e.api.post("/initials",s).then((function(e){return e.data}))};const z='verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign .header{color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}verdocs-sign .header .logo{width:80px;margin:-6px 0 0 10px}verdocs-sign .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-sign .intro{width:100%;display:-ms-flexbox;display:flex;-ms-flex:0 0 60px;flex:0 0 60px;color:#111111;padding:0 15px;font-size:18px;font-weight:500;line-height:28px;-ms-flex-direction:row;flex-direction:row;background:#ffffff;-ms-flex-align:center;align-items:center}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;z-index:999;position:absolute;background:rgba(0, 0, 0, 0.5)}verdocs-sign .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}verdocs-sign .document .inner{width:100%;max-width:1028px}verdocs-sign .agree{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0 15px}verdocs-sign .agree .intro{display:none}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}@media print{verdocs-sign .header{display:none}}';const P=[{id:"later",label:"Finish Later"},{id:"decline",label:"Decline to Sign"},{id:"print",label:"Print Without Signing"},{id:"download",label:"Download"}];const D=[{id:"print",label:"Print"},{id:"download",label:"Download"}];const C=class{constructor(t){e(this,t);this.sdkError=i(this,"sdkError",7);this.envelopeLoaded=i(this,"envelopeLoaded",7);this.envelopeUpdated=i(this,"envelopeUpdated",7);this.endpoint=null;this.recipientIndex=-1;this.envelopeId=null;this.roleId=null;this.inviteCode=null;this.recipient=null;this.signerToken=null;this.hasSignature=false;this.nextButtonLabel="Start";this.nextSubmits=false;this.errorMessage="";this.focusedField="";this.isDone=false;this.showDone=false;this.finishLater=false;this.showFinishLater=false;this.agreed=false}componentWillLoad(){this.endpoint=new x({sessionType:"signing"})}async componentDidLoad(){var e,i,t,s,n,r,a;if(!this.envelopeId){(e=this.sdkError)===null||e===void 0?void 0:e.emit(new w("[SIGN] Missing required envelopId",500,""));return}if(!this.roleId){(i=this.sdkError)===null||i===void 0?void 0:i.emit(new w("[SIGN] Missing required roleId",500,""));return}if(!this.inviteCode){(t=this.sdkError)===null||t===void 0?void 0:t.emit(new w("[SIGN] Missing required inviteCode",500,""));return}try{console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);const{session:e,recipient:i,signerToken:t}=await o(this.endpoint,{envelopeId:this.envelopeId,roleId:this.roleId,inviteCode:this.inviteCode});console.log(`[SIGN] Loaded signing session ${e.email} / ${e.profile_id}`);this.recipient=i;console.log("[SIGN] We are recipient",this.recipient);this.signerToken=t;this.endpoint.setToken(t);if(this.agreed){this.nextButtonLabel="Next"}await m(this.endpoint,this.envelopeId);this.recipientIndex=b.envelope.recipients.findIndex((e=>e.role_name==this.roleId));if(this.recipientIndex>-1){this.recipient=b.envelope.recipients[this.recipientIndex];this.agreed=this.recipient.agreed;console.log("[SIGN] Found our recipient in the envelope",this.recipientIndex,this.recipient)}else{console.log("[SIGN] Could not find our recipient record",this.roleId,b.envelope.recipients)}this.isDone=["submitted","canceled","declined"].includes(this.recipient.status);(s=this.envelopeLoaded)===null||s===void 0?void 0:s.emit({endpoint:this.endpoint,envelope:b.envelope})}catch(e){console.log("Error with signing session",e);(n=this.sdkError)===null||n===void 0?void 0:n.emit(new w(e.message,(r=e.response)===null||r===void 0?void 0:r.status,(a=e.response)===null||a===void 0?void 0:a.data))}}handleClickAgree(){j(this.endpoint,this.envelopeId,this.roleId,true).then((()=>{var e;this.nextButtonLabel="Next";this.agreed=true;(e=this.envelopeUpdated)===null||e===void 0?void 0:e.emit({endpoint:this.endpoint,envelope:b.envelope,event:"agreed"})})).catch((e=>{var i,t,s;console.log("Update failure",e);(i=this.sdkError)===null||i===void 0?void 0:i.emit(new w(e.message,(t=e.response)===null||t===void 0?void 0:t.status,(s=e.response)===null||s===void 0?void 0:s.data))}))}async handleOptionSelected(e){switch(e.detail.id){case"later":this.finishLater=true;this.showFinishLater=true;break;case"claim":window.alert("This feature will be available in an upcoming release.");break;case"decline":{const e=await N(this.endpoint,this.envelopeId,this.roleId);console.log("Decline result",e);this.isDone=true}break;case"print":window.print();break;case"download":r(this.endpoint,b.envelope,b.envelope.envelope_document_id).catch((e=>{console.log("Error downloading PDF",e)}));break}}updateRecipientFieldValue(e,i){this.recipient.fields.forEach((t=>{if(t.name===e){t.settings=i.settings;a(t)}}))}saveFieldChange(e,i){l(this.endpoint,this.envelopeId,e,i).then((i=>{this.updateRecipientFieldValue(e,i)})).catch((e=>{var i,t,s,n,o,r;if(((i=e.response)===null||i===void 0?void 0:i.status)===401&&((s=(t=e.response)===null||t===void 0?void 0:t.data)===null||s===void 0?void 0:s.error)==="jwt expired"){console.log("[SIGN] Signing session expired");this.errorMessage="Signing session expired. Please reload your browser to continue."}else{console.log("[SIGN] Server error",e)}(n=this.sdkError)===null||n===void 0?void 0:n.emit(new w(e.message,(o=e.response)===null||o===void 0?void 0:o.status,(r=e.response)===null||r===void 0?void 0:r.data))}))}async handleFieldChange(e,i){const{value:t,checked:s}=i.target;switch(e.type){case"textbox":return this.saveFieldChange(e.name,{prepared:false,value:t});case"checkbox_group":{const t=e.settings.options.map((e=>({id:e.id,checked:i.target.checked})));return this.saveFieldChange(e.name,{prepared:false,value:{options:t}})}case"radio_button_group":{const t=e.settings.options.map((e=>({id:e.id,selected:i.target.value===e.id})));return this.saveFieldChange(e.name,{prepared:false,value:{options:t}})}case"dropdown":return this.saveFieldChange(e.name,{prepared:false,value:i.detail});case"initial":const n=await(await fetch(i.detail)).blob();return G(this.endpoint,"initial",n).then((async i=>{const t=await c(this.endpoint,this.envelopeId,e.name,i.id);this.updateRecipientFieldValue(e.name,t)}));case"signature":const o=await(await fetch(i.detail)).blob();return F(this.endpoint,"signature",o).then((async i=>{const t=await d(this.endpoint,this.envelopeId,e.name,i.id);this.updateRecipientFieldValue(e.name,t)}));case"date":const r=i.target.getAttribute("iso");return this.saveFieldChange(e.name,{prepared:false,value:r});case"timestamp":console.log("Updating timestamp",{value:t,ts:i.target.getAttribute("timestamp")});break;default:console.log("Unhandled field update",{value:t,checked:s},e);break}}isFieldValid(e){var i,t,s,n,o,r,a;const{required:l=false}=e;const{result:d="",value:c="",base64:h=""}=e.settings||{};switch(e.type){case"textbox":switch(((i=e.settings)===null||i===void 0?void 0:i.validator)||""){case"email":return p(d);case"phone":return v(d);default:return!l||d!==""}case"signature":case"initial":return!l||h!=="";case"timestamp":return true;case"textarea":case"date":case"attachment":return!l||d!=="";case"dropdown":return!l||c!=="";case"checkbox_group":const u=(((s=(t=e.settings)===null||t===void 0?void 0:t.options)===null||s===void 0?void 0:s.filter((e=>e.checked)))||[]).length;return!l||u>=(((n=e.settings)===null||n===void 0?void 0:n.minimum_checked)||0)&&u<=(((o=e.settings)===null||o===void 0?void 0:o.maximum_checked)||999);case"radio_button_group":return!l||(((a=(r=e.settings)===null||r===void 0?void 0:r.options)===null||a===void 0?void 0:a.filter((e=>e.selected)))||[]).length>0;default:return false}}async handleNext(){var e;if(this.nextSubmits){try{const e=await I(this.endpoint,this.envelopeId,this.roleId);console.log("[SIGN] Submitted successfully",e);this.showDone=true;this.isDone=true}catch(e){console.log("Error submitting",e)}return}const i=this.recipient.fields.filter((e=>e.required));const t=i.findIndex((e=>e.name===this.focusedField));let s=t+1;if(s>=i.length){s=0}let n=i[s];let o=0;if(o<i.length&&["signature","initial"].includes(n.type)&&((e=n.settings)===null||e===void 0?void 0:e.result)==="signed"){o++;s++;if(s>=i.length){s=0}n=i[s]}if(o>=i.length){n=null}if(n){const e=f(n);const i=document.getElementById(e);i===null||i===void 0?void 0:i.focusField();this.focusedField=n.name}}checkRecipientFields(){const e=this.recipient.fields.filter((e=>!this.isFieldValid(e)));if(e.length<1){this.nextButtonLabel="Finish";this.nextSubmits=true}else{console.log("[SIGN] Remaining invalid fields",e);this.nextButtonLabel="Next";this.nextSubmits=false}}attachFieldAttributes(e,i,t,s){var n;s.addEventListener("input",(()=>this.checkRecipientFields()));s.addEventListener("focusout",(e=>this.handleFieldChange(i,e).finally((()=>this.checkRecipientFields()))));s.addEventListener("fieldChange",(e=>this.handleFieldChange(i,e).finally((()=>this.checkRecipientFields()))));s.setAttribute("roleindex",t);s.setAttribute("xScale",e.xScale);s.setAttribute("yScale",e.yScale);s.setAttribute("initials",this.recipient?g(this.recipient.full_name):"");s.setAttribute("name",((n=this.recipient)===null||n===void 0?void 0:n.full_name)||"")}handlePageRendered(e){const i=e.detail;const t=h(b.roleNames,this.recipient.role_name);const s=this.recipient.fields.filter((e=>e.page===i.pageNumber));console.log("[SIGN] Page rendered, updating fields",{pageInfo:i,roleIndex:t,recipientFields:s});s.forEach((e=>{const s=u(e,i,t,{disabled:false,editable:false,draggable:false,done:this.isDone});if(!s){return}if(Array.isArray(s)){s.map((s=>this.attachFieldAttributes(i,e,t,s)))}else{this.attachFieldAttributes(i,e,t,s)}}));b.envelope.recipients.filter((e=>e.role_name!==this.recipient.role_name)).forEach((e=>{const t=h(b.roleNames,e.role_name);const s=e.fields.filter((e=>e.page===i.pageNumber));s.forEach((e=>{const s=u(e,i,t,{disabled:true,editable:false,draggable:false,done:this.isDone});if(!s){return}if(s.setAttribute){s.setAttribute("roleindex",t);s.setAttribute("xScale",i.xScale);s.setAttribute("yScale",i.yScale)}}))}));this.checkRecipientFields()}render(){if(b.loading||!b.envelope){return t(s,null,t("verdocs-loader",null))}return t(s,{class:{agreed:this.agreed}},!this.isDone&&!this.finishLater&&t("div",{class:"intro"},"Please review and act on these documents."),!this.isDone&&t("div",{class:"header"},!this.agreed?t("div",{class:"agree"},t("verdocs-checkbox",{name:"agree",label:"I agree to use electronic records and signatures.",onInput:()=>this.handleClickAgree()})):t(n,null,t("img",{src:"https://verdocs.com/assets/white-logo.svg",alt:"Verdocs Logo",class:"logo"}),t("div",{class:"title"},b.envelope.name),t("div",{style:{flex:"1"}})),!this.isDone&&!this.finishLater&&t("verdocs-button",{size:"small",label:this.nextButtonLabel,disabled:!this.agreed,onClick:()=>this.handleNext()}),t("div",{style:{marginLeft:"10px"}}),t("verdocs-dropdown",{options:!this.isDone&&!this.finishLater?P:D,onOptionSelected:e=>this.handleOptionSelected(e)})),!this.isDone&&!this.agreed?t("div",{class:"cover"}):t("div",{style:{display:"none"}}),this.isDone?t("verdocs-view",{endpoint:this.endpoint,envelopeId:this.envelopeId,onSdkError:e=>{var i;return(i=this.sdkError)===null||i===void 0?void 0:i.emit(e.detail)}}):t("div",{class:"document"},(b.envelope.documents||[]).map((e=>{const i=[...(e===null||e===void 0?void 0:e.pages)||[]];i.sort(((e,i)=>e.sequence-i.sequence));return t(n,null,i.map((e=>{var i;const s=(i=b.template)===null||i===void 0?void 0:i.pages.find((i=>i.sequence===e.sequence));return t("verdocs-document-page",{pageImageUri:(s===null||s===void 0?void 0:s.display_uri)||e.display_uri,virtualWidth:612,virtualHeight:792,pageNumber:e.sequence,onPageRendered:e=>this.handlePageRendered(e),layers:[{name:"page",type:"canvas"},{name:"controls",type:"div"}]})})))}))),this.showFinishLater&&t("verdocs-ok-dialog",{heading:"You've saved your document to finish later.",message:"To complete the document, use the link in the original email notification inviting you to review and finish the document.",onNext:()=>this.showFinishLater=false}),this.errorMessage&&t("verdocs-ok-dialog",{heading:"Network Error",message:this.errorMessage,onNext:()=>this.errorMessage=""}),this.showDone&&t("verdocs-ok-dialog",{heading:"You're Done!",message:"You can access the Verdoc at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.",onNext:()=>this.showDone=false}))}};C.style=z;export{C as verdocs_sign};
+//# sourceMappingURL=p-1be6f38a.entry.js.map