@verdocs/web-sdk 4.2.121 → 4.2.123

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js

@@ -4,12 +4,14 @@ const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
 /**
  * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by
  * callers with a variety of workflows. Instead, data about the chosen file will be passed to the
- * caller via the onNext event handler.
+ * caller via the onNext event handler. A delete event is also exposed to delete existing attachments.
+ * To represent an existing attachment, set the existingFile property.
  */
 export class VerdocsUploadDialog {
     constructor() {
         this.existingFile = undefined;
         this.draggingOver = false;
+        this.confirmDelete = false;
         this.selectedFiles = [];
     }
     handleCancel() {
@@ -43,11 +45,15 @@ export class VerdocsUploadDialog {
         newFiles.splice(index, 1);
         this.selectedFiles = newFiles;
     }
-    handleDeleteAttachment() {
+    handleDeleteAttachment(e) {
         var _a;
-        // TODO: Discuss how we want to delete up to the server
+        // Stop the parent from seeing "next" and thinking an upload was done.
+        // TODO: Rethink having so many commonalities in nested dialogs (next/exit).
+        e.preventDefault();
+        e.stopPropagation();
         (_a = this.remove) === null || _a === void 0 ? void 0 : _a.emit();
         this.existingFile = null;
+        this.confirmDelete = false;
     }
     handleSelectFile() {
         var _a;
@@ -62,7 +68,14 @@ export class VerdocsUploadDialog {
         }
     }
     render() {
-        return (h(Host, { key: 'ea7aaec178e0708c73e6ad4f12253f4ff73b9310' }, h("div", { key: '7d769afe448df6edfb40800bc08237d60c924d95', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'cd32c34e98c48b1e48b1792bead1634ca70df871', class: "dialog" }, h("div", { key: 'eb7f1782c643b531c2ff6faf17e2248f803cde39', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && this.existingFile && (h(Fragment, { key: '2feac9b495828147f2be51e2368c7d03b039f64a' }, h("div", { key: '9ead90c769215c71bd952bb585a3cbde16c7e518', class: "current-label" }, "Current Attachment"), h("div", { key: '671e35179c26f14823ae504a1fc40f4506117e2e', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '2ae16fe846ee84db2f0fdb2cfb39d1e0a30f85f2', class: "attachment" }, h("div", { key: '8db0145b16b3568d7fd5e1287a4a81b3a8822c3f', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '5c9c54ce036cec26e721fc32e4a9c8326735f221', class: "name" }, this.existingFile.name), h("div", { key: '99c17d1a88f6f8c07b346b37836969c60c1ee31d', class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleDeleteAttachment() }))))), this.selectedFiles.length < 1 && !this.existingFile && (h("div", { key: 'eec6e965857fca674db531ebad805c6931a2daf2', class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", { key: '4dc240eacbd3724a54f6613113d98f5446c6c478' }, "Drag and drop a ", !!this.existingFile && 'replacement', " here..."), h("p", { key: 'af261cba2d009aa6733891e670029e4a2fec6a4d' }, "- or -"), h("verdocs-button", { key: 'f922efbffa39aa22b58b30b50697f17edcdd0f48', label: !!this.existingFile ? 'Replace file...' : 'Select a file...', onClick: () => this.handleSelectFile() }), h("input", { key: '504ae2231657a1ff6f27405b789c239f41f4fdce', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: 'e225969a1e6073a883e3e47fbeeec1bf88085f82', class: "attachments" }, this.selectedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: 'b34ab1a0be4e5b7bfeb9f52b2e4820e8dce3a40a', class: "buttons" }, h("verdocs-button", { key: '9e35669d8a39a493b53434d680d66745610d4828', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '9b41014e538eecdec86221c637c09c8f00b9b3af', label: "Upload", onClick: () => this.handleDone(), disabled: this.selectedFiles.length < 1 }))))));
+        var _a;
+        const existingFile = ((_a = this.existingFile) === null || _a === void 0 ? void 0 : _a.name) ? this.existingFile : null;
+        return (h(Host, { key: '1659eb29f75e9bf3866a011a1ce39767f045e58c' }, h("div", { key: '764f802db78676a02d17fbf2ee93dd859c90494c', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'c28580308a52defdd648f197aa5d1e74a1ff366c', class: "upload-dialog-content" }, h("div", { key: '6de50a3f71d93a176b4db5a248a49da4cf8d404d', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '0882e3e5cae1dae105645f6f4b5dd8986c336e1f' }, h("div", { key: 'a762a4dbf4f1be8a29d637e6bee196ab4b960c60', class: "current-label" }, "Current Attachment"), h("div", { key: 'ada0b184bb53583dc6012ab5393be2a36714eba4', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '3d9555cf0f7876ba192e3efec76bf677eec137cf', class: "attachment" }, h("div", { key: 'cea6d0e30448b6ea003a32d838bd64d642a621f3', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '20b87ade4eb56de78db2e0c1a7fe5c1f88d9f2c7', class: "name" }, existingFile.name), h("div", { key: '6359ea1dffd674d708afcd6b1e4f5be38062b861', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'c554239826339af3008fd9b4ef235efe6b4bf138', class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", { key: 'a2bcc388981e79a1c6c3325081546ea41d7fd96f' }, "Drag and drop a ", !!existingFile && 'replacement', " here..."), h("p", { key: '23c7c1e2c8c369a8b85d83fc9a7d2e03bd26f6d9' }, "- or -"), h("verdocs-button", { key: 'cba655d0b392f5f03776f769cd3ee626b432b846', label: !!existingFile ? 'Replace file...' : 'Select a file...', onClick: () => this.handleSelectFile() }), h("input", { key: 'cbaa00e587959f418709c89b531a173512f5b9fa', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: '35f7be5ad20ecab5947c2f90f4ac529775ec51ce', class: "attachments" }, this.selectedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: 'ea437cefbfa71cd4853f4fd77d1d1a78b576e032', class: "buttons" }, h("verdocs-button", { key: '2be19df5ae677ee0d0893266fd2f72aeff609e95', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '2013efb5dba9d6b3236ad280dbc6883473eebabf', label: "Upload", onClick: () => this.handleDone(), disabled: this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'd55cbad44c7d50d9c479a87917b14fc0ae488a2b', heading: "Delete Attachment?", message: "Are you sure you wish to delete this attachment? This action cannot be undone.", showCancel: true, onExit: e => {
+                // So we don't close the upload dialog
+                e.preventDefault();
+                e.stopPropagation();
+                this.confirmDelete = false;
+            }, onNext: e => this.handleDeleteAttachment(e) }))));
     }
     static get is() { return "verdocs-upload-dialog"; }
     static get originalStyleUrls() {
@@ -99,6 +112,7 @@ export class VerdocsUploadDialog {
     static get states() {
         return {
             "draggingOver": {},
+            "confirmDelete": {},
             "selectedFiles": {}
         };
     }

package/dist/collection/components/elements/verdocs-quick-functions/verdocs-quick-functions.js

@@ -19,7 +19,7 @@ export class VerdocsQuickFunctions {
         this.createDocument.emit();
     }
     render() {
-        return (h("div", { key: 'ab46c28e7f1420c3d38537fa3f1df68e3a4552bd', class: "container" }, h("p", { key: '1fedfcb6362e8c94e20c5ab0b8dae925f0a50542', class: "title" }, "Quick Create"), h("button", { key: 'eb7816bba752b3a2b531166413b8004f239db36d', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: 'c551132ca96ce060bf0fcd18f017b20b9a27cfda', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (h("div", { key: '99840e81fe2f2b825efb6253f72a6583d0354504', class: "container" }, h("p", { key: '7a814db57ae3bfad6aaba12cdab17b0e900e9080', class: "title" }, "Quick Create"), h("button", { key: '84d518a21e8fb43818efbc26f94b545821465af1', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: 'c7b9ea58cf880ef8356e2fdb80a1f76b4ab8b014', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
     static get is() { return "verdocs-quick-functions"; }
     static get originalStyleUrls() {

package/dist/collection/components/elements/verdocs-search-tabs/verdocs-search-tabs.js

@@ -4,7 +4,7 @@ export class VerdocsSearchTabs {
         this.selected = 'all';
     }
     render() {
-        return h("div", { key: 'afc8ae06fa51a4aa236c12b7ed057e16112ce8a8' }, "\u00A0");
+        return h("div", { key: '476b2a3baba29b498e5d91a9866f8e1f5070b8c3' }, "\u00A0");
     }
     static get is() { return "verdocs-search-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.css

@@ -98,7 +98,7 @@ verdocs-sign .loading-indicator {
   width: 100%;
   display: flex;
   z-index: 1000;
-  flex: 0 0 56px;
+  flex: 0 0 46px;
   font-size: 12px;
   column-gap: 15px;
   align-items: center;
@@ -111,7 +111,7 @@ verdocs-sign .loading-indicator {
   width: 100%;
   display: flex;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 0 12px;
   max-width: 1200px;
   align-items: center;
   flex-direction: row;
@@ -129,7 +129,8 @@ verdocs-sign .loading-indicator {
   padding: 0 10px 0 0;
   text-overflow: ellipsis;
 }
-#verdocs-sign-header .spinner-overlay {
+
+.spinner-overlay {
   position: fixed;
   top: 0;
   left: 0;

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -58,13 +58,15 @@ export class VerdocsSign {
         this.declined = false;
         this.isDone = false;
         this.showDone = false;
+        this.showCanceled = false;
+        this.showDeclined = false;
         this.showLoadError = false;
         this.finishLater = false;
         this.showFinishLater = false;
         this.agreed = false;
         this.documentsSingularPlural = 'document';
         this.kbaStep = '';
-        this.showSpinner = true;
+        this.showSpinner = false;
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -109,10 +111,15 @@ export class VerdocsSign {
             else {
                 console.warn('[SIGN] Could not find our recipient record', this.roleId, this.sortedRecipients);
             }
+            // TODO: Envelope "complete" | "declined" | "canceled"
+            // TODO: Recipient "canceled"
             this.submitted = this.recipient.status === 'submitted';
             this.declined = this.recipient.status === 'declined';
             this.canceled = this.envelope.status === 'canceled';
             this.isDone = this.submitted || this.declined || this.canceled;
+            this.showDone = this.submitted;
+            this.showCanceled = this.canceled;
+            this.showDeclined = this.declined;
             if (this.agreed) {
                 this.nextButtonLabel = 'Next';
             }
@@ -180,16 +187,17 @@ export class VerdocsSign {
                     (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
                     this.submitting = false;
                     this.declined = true;
-                    console.log('[SIGN] Reloading envelope');
-                    getEnvelope(this.endpoint, this.envelopeId)
-                        .then(envelope => {
-                        this.envelope = envelope;
-                        this.isDone = true;
-                    })
-                        .catch(e => {
-                        this.isDone = true;
-                        console.log('[SIGN] Error reloading envelope', e);
-                    });
+                    this.showDeclined = true;
+                    // console.log('[SIGN] Reloading envelope');
+                    // getEnvelope(this.endpoint, this.envelopeId)
+                    //   .then(envelope => {
+                    //     this.envelope = envelope;
+                    //     this.isDone = true;
+                    //   })
+                    //   .catch(e => {
+                    //     this.isDone = true;
+                    //     console.log('[SIGN] Error reloading envelope', e);
+                    //   });
                 }
                 break;
             case 'print':
@@ -306,7 +314,7 @@ export class VerdocsSign {
                     case 'phone':
                         return isValidPhone(value);
                     default:
-                        return value !== '';
+                        return (value || '').trim() !== '';
                 }
             case 'signature':
                 return value === 'signed';
@@ -422,12 +430,20 @@ export class VerdocsSign {
         }
     }
     attachFieldAttributes(pageInfo, field, el) {
-        // console.log('attach', field.name);
+        // We can get called multiple times as rendering completes and it's hard to avoid that
+        // because it's a ton of work for the callers to know it's been done already. But we
+        // don't want to attach multiple event listeners or we get dupe event handling, like
+        // calling the server twice on every field update. Since JS has no removeAllEventListeners()
+        // option, using removeEventListener() isn't reliable the way Stencil binds local function
+        // contexts, and cloneNode messes up the rest of the rendering, we just track it with a flag.
+        if (el.getAttribute('attached') === '1') {
+            return;
+        }
+        el.setAttribute('attached', '1');
         el.addEventListener('input', (e) => {
             // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
             // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
             // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
-            console.log('onInput', e.target.type, e.target.name);
             if (e.target.type === 'radio' || e.target.type === 'checkbox') {
                 // if (e.target.type === 'radio' || e.target.name.includes('date') || e.target.name.includes('checkbox')) {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
@@ -441,10 +457,11 @@ export class VerdocsSign {
             console.log('[SIGN] onAttached', e.detail, e.target.value);
             this.showSpinner = true;
             try {
-                const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
-                console.log('upload result', r);
-                // this.updateRecipientFieldValue(fieldName, updateResult)
+                const updateResult = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
+                this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
+                const newEl = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
             catch (e) {
@@ -453,14 +470,23 @@ export class VerdocsSign {
                 this.showSpinner = false;
             }
         });
-        el.addEventListener('remove', (e) => {
-            console.log('[SIGN] onRemoved', e.detail, e.target.value);
-            deleteEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name)
-                .then(r => {
-                console.log('[SIGN] Deleted attachment', r);
-                // this.updateRecipientFieldValue(fieldName, updateResult)
-            })
-                .catch(e => console.log('[SIGN] Error deleting attachment', e));
+        el.addEventListener('deleted', async (e) => {
+            console.log('[SIGN] onDeleted', e.detail, e.target.value);
+            this.showSpinner = true;
+            try {
+                const updateResult = await deleteEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name);
+                console.log('[SIGN] Deleted attachment', updateResult);
+                this.updateRecipientFieldValue(field.name, updateResult);
+                this.checkRecipientFields();
+                const newEl = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                this.attachFieldAttributes(pageInfo, field, newEl);
+                this.showSpinner = false;
+            }
+            catch (e) {
+                console.log('Error uploading attachment', e);
+                VerdocsToast('Unable to upload attachment, please try again later', { style: 'error' });
+                this.showSpinner = false;
+            }
         });
         el.addEventListener('focusout', e => {
             // These field types trigger focusout as they're used, even without a value change
@@ -490,6 +516,7 @@ export class VerdocsSign {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
+            // TODO: Review possible workflow/race conditions vs rendering in -document-page.
             const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
@@ -532,9 +559,21 @@ export class VerdocsSign {
             return (h(Host, null, h("verdocs-loader", null)));
         }
         if (this.isDone) {
-            return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, envelope: this.envelope, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} 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: () => {
+            return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, envelope: this.envelope, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} 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: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
                     this.showDone = false;
                     this.isDone = true;
+                } })), this.showCanceled && (h("verdocs-ok-dialog", { heading: "Document Canceled", message: `This envelope has been canceled. Please contact the sender.`, onNext: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // We don't allow this to be hidden
+                    // this.showCanceled = false;
+                } })), this.showDeclined && (h("verdocs-ok-dialog", { heading: "Declined to Sign", message: `You have declined to sign this document. Please contact the sender.`, onNext: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // We don't allow this to be hidden
+                    // this.showDeclined = false;
                 } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
         }
         if (!this.agreed) {
@@ -556,7 +595,7 @@ export class VerdocsSign {
                     });
                 } })))));
         }
-        return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+        return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
@@ -575,6 +614,16 @@ export class VerdocsSign {
         })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} 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;
                 this.isDone = true;
+            } })), this.showCanceled && (h("verdocs-ok-dialog", { heading: "Document Canceled", message: `This envelope has been canceled. Please contact the sender.`, onNext: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // We don't allow this to be hidden
+                // this.showCanceled = false;
+            } })), this.showDeclined && (h("verdocs-ok-dialog", { heading: "Declined to Sign", message: `You have declined to sign this document. Please contact the sender.`, onNext: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                // We don't allow this to be hidden
+                // this.showDeclined = false;
             } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), this.showSpinner && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null))))));
     }
     static get is() { return "verdocs-sign"; }
@@ -703,6 +752,8 @@ export class VerdocsSign {
             "declined": {},
             "isDone": {},
             "showDone": {},
+            "showCanceled": {},
+            "showDeclined": {},
             "showLoadError": {},
             "finishLater": {},
             "showFinishLater": {},

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -1,6 +1,7 @@
 import { cancelEnvelope, getDocumentDownloadLink, getEnvelope, integerSequence, userCanCancelEnvelope, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { saveEnvelopesAsZip } from "../../../utils/utils";
+// import {IDocumentPageInfo} from '../../../utils/Types';
 import { SDKError } from "../../../utils/errors";
 /**
  * Render the documents attached to an envelope in read-only (view) mode. All documents are
@@ -56,9 +57,9 @@ export class VerdocsView {
             headerTarget.append(headerEl);
         }
     }
-    handlePageRendered(e) {
-        const pageInfo = e.detail;
-        console.log('[VIEW] Page rendered', pageInfo);
+    handlePageRendered(_e) {
+        // const pageInfo = e.detail as IDocumentPageInfo;
+        // console.log('[VIEW] Page rendered', pageInfo);
     }
     async handleOptionSelected(e) {
         var _a, _b;

package/dist/collection/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page.js

@@ -74,7 +74,7 @@ export class VerdocsEnvelopeDocumentPage {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: 'd0b33866715373307c93aa63a2d669180d137c31', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+        return (h(Host, { key: 'cca4f6b0c00556a1662ee175292d59b249b17604', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-envelope-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-envelope-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
                 // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
                 // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
                 // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js

@@ -118,7 +118,7 @@ export class VerdocsEnvelopeSidebar {
         }
         (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: id });
     }
-    cancelEnvelope() {
+    handleCancelEnvelope() {
         this.loading = true;
         cancelEnvelope(this.endpoint, this.envelopeId)
             .then(async (r) => {
@@ -248,6 +248,8 @@ export class VerdocsEnvelopeSidebar {
                 case 'completed':
                     entries.push({ icon: 'done_all', message: `Envelope was completed.`, date: new Date(history.created_at) });
                     break;
+                // TODO: Final answer?
+                case 'envelope:canceled':
                 case 'envelope_canceled':
                 case 'canceled':
                 case 'owner:canceled':
@@ -327,7 +329,7 @@ export class VerdocsEnvelopeSidebar {
                 this.handleSetReminders(this.initialReminder, this.followupReminders);
             } })), h("div", { class: "form-row" }, h("div", { class: "form-label" }, "Next Reminder:"), h("div", { style: { color: '#dddddd' } }, format(new Date((_y = (_x = this.store) === null || _x === void 0 ? void 0 : _x.state) === null || _y === void 0 ? void 0 : _y.next_reminder), 'P p'))))))), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Envelope", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
                 this.showCancelDialog = false;
-                this.cancelEnvelope();
+                this.handleCancelEnvelope();
             } }))));
     }
     static get is() { return "verdocs-envelope-sidebar"; }

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.js

@@ -191,18 +191,18 @@ export class VerdocsEnvelopesList {
         });
     }
     render() {
-        return (h(Host, { key: '108b5afd94968cb2801ed59a0ac22415b69089d2' }, h("div", { key: 'ce4fc0e1f129cb7628cfc3f6f082074637cff0b7', class: "header" }, h("div", { key: 'ad67a17d11cd9b599242813f3868b58e4296d82d', class: "filter" }, h("verdocs-text-input", { key: '3c516592fdfc4215734c8c84c3553ff368867652', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
+        return (h(Host, { key: '65d29f9d52c1e4580e335015941be7f8f20197a9' }, h("div", { key: '64a021af11c8a291981bb49f88cddedf5253593d', class: "header" }, h("div", { key: '12ae24224cc5bae515cad1b6382b1fa64fce1223', class: "filter" }, h("verdocs-text-input", { key: 'b895bcdfa7829a5a78460759291890859d5cf6b5', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
                 var _a;
                 // We don't locally filter envelopes because there are too many fields to match against efficiently.
                 this.match = e.target.value.trim();
                 (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
-            } })), h("verdocs-quick-filter", { key: '215d014e581b9bff84a56ee919810b6329a2789e', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: '72e6e429edabd43c71a24d5d74e7be57b44073b8', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
                 this.view = e.detail.value;
-            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: '69f79850d7165d1150383f845909dd3cfd23255e', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
+            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: '883d9ed133ad696a6fa1a572aa331aad753296ea', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
                 this.status = e.detail.value;
-            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: 'eb5b7ff77417c2432a9963fa1cffb30e09bf3e05', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
+            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '626d712a6760eb30c9d10a142358f0e9c3ad6548', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
                 this.sort = e.detail.value;
-            } })), this.loading && h("verdocs-spinner", { key: 'a1869793d432b972161301903df300a9e972728b', mode: "dark", size: 24 }), h("div", { key: '9ad9261f2c1fac268483b2caf7c5f4b67f1a5236', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: '47d7186632c3823a573f4b034e8c301dc842992e', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+            } })), this.loading && h("verdocs-spinner", { key: '391ee75435dfe6203eef29e29b14f74cda3a32ab', mode: "dark", size: 24 }), h("div", { key: 'd12b2ce01d44e81728189968947c7b5e9e778293', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: 'c2d20419257993759e8cd7c5ea5e58a20db5b15e', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
             var _a;
             const recipientsWithActions = getRecipientsWithActions(envelope);
             const userCanCancel = userCanCancelEnvelope(this.endpoint.profile, envelope);
@@ -243,7 +243,7 @@ export class VerdocsEnvelopesList {
                             break;
                     }
                 } }))));
-        }), !this.initiallyLoaded && (h("div", { key: '8b16c1e78ed0b9263e6831e8e84c7f92863a5225', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '9b7aeee48c38402025afec1e8584be15c9160eb1', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+        }), !this.initiallyLoaded && (h("div", { key: '3c1f1711abdeaaf92c12129e8f7e5ab13c06db1d', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '1f14c23162b105b4947e3b574e0192fee0f164b5', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
                 this.selectedPage = e.detail.selectedPage;
             } }))) : (h("div", null))));
     }

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.js

@@ -238,11 +238,11 @@ export class VerdocsStatusIndicator {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: 'a579d2ed18289b75beaaaf5fef322db25d0a4e93', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: '3111e544a8f287a2b5a501cae08fc88752186477', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: 'c59f8b21dce6f4fe2cd7bdc1124c6af339e70de7', class: "icon", innerHTML: icon }), h("span", { key: '1c96b95b111836c791a14e22c28defc43db1cc48', class: "content" }, statusMessage), h("div", { key: 'd673852a5e1a03656cb15d39d7f469a6e43f45a9', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '0d1597689117ca7419f556fc38ff55711644f55f', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '2dd4397db22358d7dd8e495f601c3f31687e400e', class: "icon", innerHTML: icon }), h("span", { key: 'fb37993d036b1a1552f19fc2bc57565bf3026a44', class: "content" }, statusMessage), h("div", { key: '5bc4ea53d9eec94c0dfd34662437bf90aaf76d60', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'e073e793dc4f0bef2d9826fb5b70f62f2495fa45', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
     static get is() { return "verdocs-status-indicator"; }
     static get originalStyleUrls() {

package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js

@@ -4,7 +4,8 @@ import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleS
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { SettingsIcon } from "../../../utils/Icons";
 const 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>`;
-const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
+// const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
+const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#339933" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-check"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m9 15 2 2 4-4"/></svg>`;
 /**
  * Displays an attachment field.
  */
@@ -19,6 +20,14 @@ export class VerdocsFieldAttachment {
             this.selectedFile = e.detail[0];
             (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
         };
+        this.handleUploadRemove = (e) => {
+            var _a;
+            e.preventDefault();
+            e.stopPropagation();
+            this.dialogOpen = false;
+            this.selectedFile = null;
+            (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname });
+        };
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateid = '';
         this.fieldname = '';
@@ -37,6 +46,7 @@ export class VerdocsFieldAttachment {
     async focusField() {
         // Our input field is fake, so we fake the flash too
         this.focused = true;
+        this.dialogOpen = true;
         setTimeout(() => {
             this.focused = false;
         }, 500);
@@ -63,7 +73,6 @@ export class VerdocsFieldAttachment {
     render() {
         const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        console.log('Rendering attachment', field);
         const { required = false, role_name = '', value = '', label = '', settings = {} } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         const hasFile = value || !!this.selectedFile;
@@ -81,9 +90,7 @@ export class VerdocsFieldAttachment {
                 var _a;
                 (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
                 return this.hideSettingsPanel();
-            }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' }))))), this.dialogOpen && (h("verdocs-portal", null, h("verdocs-upload-dialog", { existingFile: settings, onNext: e => this.handleUploadNext(e), onExit: () => (this.dialogOpen = false), onRemove: e => {
-                console.log('remove', e);
-            } })))));
+            }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' }))))), this.dialogOpen && (h("verdocs-portal", null, h("verdocs-upload-dialog", { existingFile: settings, onNext: e => this.handleUploadNext(e), onRemove: e => this.handleUploadRemove(e), onExit: () => (this.dialogOpen = false) })))));
     }
     static get is() { return "verdocs-field-attachment"; }
     static get originalStyleUrls() {
@@ -314,21 +321,6 @@ export class VerdocsFieldAttachment {
                         }
                     }
                 }
-            }, {
-                "method": "deleted",
-                "name": "deleted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\nBuild) not for any attachments (during signing)."
-                },
-                "complexType": {
-                    "original": "{fieldName: string}",
-                    "resolved": "{ fieldName: string; }",
-                    "references": {}
-                }
             }, {
                 "method": "attached",
                 "name": "attached",
@@ -351,18 +343,18 @@ export class VerdocsFieldAttachment {
                     }
                 }
             }, {
-                "method": "remove",
-                "name": "remove",
+                "method": "deleted",
+                "name": "deleted",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event fired when a file attachment is removed by the signer."
+                    "text": "Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\nBuild) not for any attachments (during signing)."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "{fieldName: string}",
+                    "resolved": "{ fieldName: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/fields/verdocs-field-date/verdocs-field-date.js

@@ -14,6 +14,7 @@ export class VerdocsFieldDate {
     constructor() {
         this.fieldStore = null;
         this.roleStore = null;
+        this.picker = null;
         this.templateid = '';
         this.fieldname = '';
         this.disabled = false;
@@ -29,8 +30,10 @@ export class VerdocsFieldDate {
         this.focused = false;
     }
     async focusField() {
+        var _a;
         // Our input field is fake, so we fake the flash too
         this.focused = true;
+        (_a = this.picker) === null || _a === void 0 ? void 0 : _a.show();
         setTimeout(() => {
             this.focused = false;
         }, 500);
@@ -44,7 +47,7 @@ export class VerdocsFieldDate {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     componentDidLoad() {
-        new AirDatepicker(`#${this.containerId}`, {
+        this.picker = new AirDatepicker(`#${this.containerId}`, {
             locale: localeEn,
             isMobile: true,
             autoClose: true,

package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.js

@@ -51,11 +51,18 @@ export class VerdocsFieldDropdown {
     render() {
         const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', value = '', label = '', options = [] } = field || {};
+        let { required = false, role_name = '', value = '', label = '', options } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
+        // TODO: Look for other places this mistaken assumption was made.
+        // Defaults only apply in destructuring if undefined. null doesn't trigger it.
+        options || (options = []);
+        if (!options.length) {
+            console.log('[DROPDOWN] Dropdown has no options, hiding field...', fieldname);
+            return h(Host, null);
+        }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label)))), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;