@verdocs/web-sdk 4.2.119 → 4.2.122

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,9 +45,15 @@ export class VerdocsUploadDialog {
         newFiles.splice(index, 1);
         this.selectedFiles = newFiles;
     }
-    handleDeleteAttachment() {
+    handleDeleteAttachment(e) {
         var _a;
+        // 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;
@@ -60,7 +68,14 @@ export class VerdocsUploadDialog {
         }
     }
     render() {
-        return (h(Host, { key: 'e8fc331b44b9da5a3da0b6dd144886e869b0ad57' }, h("div", { key: '7a7bf10b9d30acdbaef078e5422fb67d2924be5b', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '71dd58afe5a4651442339970b2acec4ddf13a2fb', class: "dialog" }, h("div", { key: '40c2111f9ac8c00f348273ab7643d89efc6a68e6', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && this.existingFile && (h(Fragment, { key: '76618c396fceae2809e65ce089c1d9de05218c3e' }, h("div", { key: 'dface5b5c91bcc71b326a1ff980d56178c137cbf', class: "current-label" }, "Current Attachment"), h("div", { key: 'e4dd55aed47fb5d40ceb47fee37d5e99b4e85483', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '3d29f45ecbdf209dc58cccb608d26cd739d2856a', class: "attachment" }, h("div", { key: '72fd1eb1fe354b5a1071a576006abcbb6ecb3c78', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: 'cd08be12f47150d5d974b0d30b3c2479752760fd', class: "name" }, this.existingFile.name), h("div", { key: '5c8b29b1e765b8c19820932ff6252cedf923949e', class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleDeleteAttachment() }))))), this.selectedFiles.length < 1 && (h("div", { key: '0087f25c61415aa094d72bbdd2c3e66cb820356f', 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: '548e424032f1d839e61fa446960daf89a1a1369e' }, "Drag and drop a ", !!this.existingFile && 'replacement', " here..."), h("p", { key: '7e02b52cf95547cbe63e93326d906eb39ff476c5' }, "- or -"), h("verdocs-button", { key: '04d29abff12269bd87dfd42fe6cfaef15ca0bcce', label: !!this.existingFile ? 'Replace file...' : 'Select a file...', onClick: () => this.handleSelectFile() }), h("input", { key: 'b9855eed6197defe6a3e75b709d9427c2da23363', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: 'acf45d5508241f73baa1386135dec6c17f624b94', 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: '7201e2aed151424e9d18398a0f75fadb952b6a22', class: "buttons" }, h("verdocs-button", { key: '9076dc0693ff0ab365e3ce38e39b7f1336567e4a', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'f9786124e707344c3c9278ccbd6aae26a4da216a', 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() {
@@ -76,30 +91,28 @@ export class VerdocsUploadDialog {
     static get properties() {
         return {
             "existingFile": {
-                "type": "unknown",
-                "mutable": false,
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "File",
-                    "resolved": "File",
-                    "references": {
-                        "File": {
-                            "location": "global",
-                            "id": "global::File"
-                        }
-                    }
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
-                }
+                },
+                "attribute": "existing-file",
+                "reflect": false
             }
         };
     }
     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: 'e0edb4e04bbf4ee92ba26f50f3c56beec434e375', class: "container" }, h("p", { key: '58e823308edc32e234587cd6232c5014460a7a8a', class: "title" }, "Quick Create"), h("button", { key: '5ef91f83933d1d716c6627ab393cb171e977aa81', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), h("button", { key: '773b5d9e6f4288f288cee92d4c7884cdce8a3374', 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-box/verdocs-search-box.js

@@ -41,7 +41,7 @@ export class VerdocsSearchBox {
         }
     }
     render() {
-        return (h("form", { key: 'c7e0698afde279984bfa46382443f40d5110c023', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { key: '07cbbb7bee52f85bbb22a0254b1f1a109b70d408', class: "type" }, this.type, "s ", h("button", { key: '7c7522a957cd4f80d98abb680d7164ac6db1f377', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { key: '362af3bf09cf9c781c287f5193e7dad31bd85d87', type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), h("button", { key: '7d4c890a308373d0b8a38548f2ad6995980ab7d7', onClick: e => this.handleSearch(e), class: "search" }, h("span", { key: 'a403419fe53c5a8f1271826f35c2061ca6a88328', innerHTML: SearchIcon }), "Search")));
+        return (h("form", { key: '5244d8a4276ead04d75be718eff4cbfd6203c8c3', onSubmit: e => this.handleSearch(e) }, this.type !== undefined && this.type !== 'all' && (h("span", { key: '740ef6719f4e2ac16daedfb539311ee252c37b0e', class: "type" }, this.type, "s ", h("button", { key: 'c101d22f53a80d18c5c155ce930688ccb72228f9', class: "remove", innerHTML: CloseIcon, onClick: () => this.handleClearFilter() }))), h("input", { key: 'b30a27a9c7dd82bdf2df7d4941356245ca4e0302', type: "text", value: this.query, placeholder: this.placeholder, onInput: e => this.handleChange(e), onKeyUp: e => this.handleKeyUp(e), ref: el => (this.inputEl = el) }), h("button", { key: 'd1cd5ea8fbde2c5f138d44c9bc289dd34de520cb', onClick: e => this.handleSearch(e), class: "search" }, h("span", { key: 'f1afef424ebd455cf68c22298a65594a29b57c85', innerHTML: SearchIcon }), "Search")));
     }
     static get is() { return "verdocs-search-box"; }
     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: '1f3dba2661771f24f6a9a416b040b84d48f0356b' }, "\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;
@@ -128,4 +128,17 @@ verdocs-sign .loading-indicator {
   white-space: nowrap;
   padding: 0 10px 0 0;
   text-overflow: ellipsis;
+}
+
+.spinner-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.4980392157);
+  justify-content: center;
 }

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

@@ -64,6 +64,7 @@ export class VerdocsSign {
         this.agreed = false;
         this.documentsSingularPlural = 'document';
         this.kbaStep = '';
+        this.showSpinner = false;
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -213,6 +214,7 @@ export class VerdocsSign {
         this.getRecipientFields().forEach(oldField => {
             if (oldField.name === fieldName) {
                 oldField.value = updateResult.value;
+                // TODO: Keeping this while attachments still rely on it
                 oldField.settings = updateResult.settings;
                 updateDocumentFieldValue(oldField);
                 this.checkRecipientFields();
@@ -342,7 +344,7 @@ export class VerdocsSign {
         return recipientFields;
     }
     async handleNext() {
-        var _a, _b;
+        var _a;
         if (this.nextSubmits) {
             try {
                 // Patches the date picker to be forcibly removed if still showing during submission
@@ -370,8 +372,8 @@ export class VerdocsSign {
             this.submitting = false;
             return;
         }
-        // Find and focus the next incomplete` field (that is fillable)
-        const emptyFields = this.getSortedFillableFields().filter(field => !this.isFieldFilled(field));
+        // Find and focus the next incomplete field (that is fillable)
+        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !this.isFieldFilled(field));
         sortFields(emptyFields);
         const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
         let nextFocusedIndex = focusedIndex + 1;
@@ -379,9 +381,10 @@ export class VerdocsSign {
             nextFocusedIndex = 0;
         }
         let nextRequiredField = emptyFields[nextFocusedIndex];
+        console.log('Next field', nextRequiredField);
         // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
         let skips = 0;
-        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ((_b = nextRequiredField.settings) === null || _b === void 0 ? void 0 : _b.result) === 'signed') {
+        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
             skips++;
             nextFocusedIndex++;
             if (nextFocusedIndex >= emptyFields.length) {
@@ -419,11 +422,20 @@ export class VerdocsSign {
         }
     }
     attachFieldAttributes(pageInfo, field, el) {
+        // 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());
@@ -435,22 +447,42 @@ export class VerdocsSign {
         el.addEventListener('attached', async (e) => {
             // TODO: Show a spinner and/or progress bar
             console.log('[SIGN] onAttached', e.detail, e.target.value);
-            const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
-            console.log('upload result', r);
-            // this.updateRecipientFieldValue(fieldName, updateResult)
-            this.checkRecipientFields();
+            this.showSpinner = true;
+            try {
+                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) {
+                console.log('Error uploading attachment', e);
+                VerdocsToast('Unable to upload attachment, please try again later', { style: 'error' });
+                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 => {
-            if (field.type !== 'dropdown') {
+            // These field types trigger focusout as they're used, even without a value change
+            if (field.type !== 'dropdown' && field.type !== 'attachment') {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
             }
         });
@@ -471,16 +503,12 @@ export class VerdocsSign {
         // NOTE: We don't filter on pageNumber here because we need the position in the
         // entire list to set the tabIndex.
         const recipientFields = this.getSortedFillableFields();
-        console.log('Recipient fields', recipientFields);
-        // this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
         // First render the fields for the signer
-        // Also show field placeholders for other signers who have yet to act
-        // In template list in Beta, show second date being sorted on
-        // Sign top to bottom left to right
         recipientFields.forEach((field, tabIndex) => {
             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;
@@ -547,7 +575,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
@@ -566,7 +594,7 @@ 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.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
+            } })), 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"; }
     static get originalStyleUrls() {
@@ -699,7 +727,8 @@ export class VerdocsSign {
             "showFinishLater": {},
             "agreed": {},
             "documentsSingularPlural": {},
-            "kbaStep": {}
+            "kbaStep": {},
+            "showSpinner": {}
         };
     }
     static get events() {

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.css

@@ -17,8 +17,7 @@ verdocs-contact-picker {
   box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
 }
 verdocs-contact-picker form {
-  display: flex;
-  gap: 14px;
+  gap: 12px;
   width: 300px;
   padding: 12px;
   display: flex;
@@ -27,7 +26,6 @@ verdocs-contact-picker form {
 }
 verdocs-contact-picker form .row {
   gap: 8px;
-  width: 276px;
   display: flex;
   position: relative;
   flex-direction: row;
@@ -44,7 +42,7 @@ verdocs-contact-picker form .names-row {
 }
 verdocs-contact-picker form .names-row > input {
   font-size: 14px;
-  width: 110px;
+  width: 103px;
 }
 verdocs-contact-picker form .kba-row {
   gap: 8px;
@@ -52,13 +50,33 @@ verdocs-contact-picker form .kba-row {
   align-items: center;
   flex-direction: row;
 }
-verdocs-contact-picker form .kba-row > input {
-  font-size: 14px;
-  width: 110px;
-}
 verdocs-contact-picker form .kba-row verdocs-select-input {
   margin: 0;
 }
+verdocs-contact-picker form .pin-code {
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-contact-picker form .pin-code > input {
+  flex: 0;
+  width: 133px;
+  font-size: 14px;
+  margin-left: 58px;
+}
+verdocs-contact-picker form .zip-code {
+  gap: 8px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+verdocs-contact-picker form .zip-code > input {
+  flex: 0;
+  width: 133px;
+  font-size: 14px;
+  margin-left: 58px;
+}
 verdocs-contact-picker form label {
   display: flex;
   flex: 0 0 50px;
@@ -74,11 +92,11 @@ verdocs-contact-picker form .row.message input {
 }
 verdocs-contact-picker form input {
   flex: 1;
-  border: none;
+  padding: 6px;
   font-size: 14px;
-  padding: 3px 6px 3px 0;
-  background: transparent;
-  border-bottom: 1px solid #33364b;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.0196078431);
+  border: 1px solid rgba(112, 122, 229, 0.3725490196);
 }
 verdocs-contact-picker form input:focus {
   outline: none;

package/dist/collection/components/envelopes/verdocs-contact-picker/verdocs-contact-picker.js

@@ -14,6 +14,14 @@ const addrBookIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
  * The parent can use that text as a query string to call a backend to obtain appropriate contacts to show. This list may also be
  * hard-coded ahead of time to provide the user with smart suggestions on initial display, such as "Recently Used" contacts, or
  * to always display the user's own contact record.
+ *
+ * ```ts
+ * <verdocs-contact-picker
+ *   templateRole={role}
+ *   contactSuggestions={[]}
+ *   onNext={e => console.log('Contact completed', e.detail)}
+ *   />
+ * ```
  */
 export class VerdocsContactPicker {
     constructor() {
@@ -24,13 +32,14 @@ export class VerdocsContactPicker {
         this.last_name = undefined;
         this.email = undefined;
         this.phone = undefined;
+        this.zip = undefined;
         this.message = undefined;
         this.showSuggestions = false;
         this.showMessage = false;
         this.delegator = false;
         this.showKba = false;
-        this.kbaMethod = '';
-        this.pinCode = '';
+        this.kba_method = '';
+        this.kba_pin = '';
         this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
         this.firstNameFieldId = `verdocs-contact-picker-firstname-${Math.random().toString(36).substring(2, 11)}`;
         this.lastNameFieldId = `verdocs-contact-picker-lastname-${Math.random().toString(36).substring(2, 11)}`;
@@ -39,7 +48,6 @@ export class VerdocsContactPicker {
     }
     componentWillLoad() {
         if (this.templateRole) {
-            // TODO: For backwards compatibility, may be removed once templateRole no longer has a full_name
             const fullName = formatFullName(this.templateRole);
             const nameComponents = fullName.split(' ');
             const firstName = this.templateRole.first_name || nameComponents.shift() || '';
@@ -51,9 +59,10 @@ export class VerdocsContactPicker {
             this.delegator = this.templateRole.delegator || false;
             this.message = this.templateRole.message || '';
             this.showMessage = this.message !== '';
-            this.kbaMethod = this.templateRole.kba_method || '';
-            this.pinCode = this.templateRole.kba_pin || '';
-            this.showKba = !!this.kbaMethod;
+            this.kba_method = this.templateRole.kba_method || '';
+            this.kba_pin = this.templateRole.kba_pin || '';
+            this.showKba = !!this.kba_method;
+            // TODO: Allow template roles to have zip codes predefined?
         }
     }
     handleFirstNameChange(e) {
@@ -83,8 +92,9 @@ export class VerdocsContactPicker {
             phone: this.phone,
             message: this.message,
             delegator: this.delegator,
-            kba_method: this.kbaMethod,
-            kba_pin: this.pinCode,
+            kba_method: this.kba_method,
+            kba_pin: this.kba_pin,
+            zip: this.zip,
         });
     }
     handleSelectSuggestion(e, suggestion) {
@@ -98,26 +108,34 @@ export class VerdocsContactPicker {
     // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
     // and show a duplicate autocomplete picker on top of our own.
     render() {
-        return (h("form", { key: '7ed697ee6acfcb2062280a820496aa1b186bcea9', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: 'f15d572ec332e405250d6c477f127e2d8a82fd25', class: "row" }, h("label", { key: 'fe0bcdd7753f1c966afa60c1571bb7a7eca5b867', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '8867d1d70cce8fa44af315a0f6b960f42e009836', class: "names-row" }, h("input", { key: '1fe63076788f4d19541755cb577cc7afca222d69', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: 'a6817292e059865c633be5ab4afba63a561fb07d', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: '6cb90ca5096cc3573873de6e59f77cb88a792047', class: "dropdown" }, this.contactSuggestions
+        const hasBasics = this.first_name && this.last_name && (this.email || this.phone);
+        const hasKbaRequirements = !this.kba_method || (this.kba_method === 'pin' && this.kba_pin) || (this.kba_method === 'identity' && this.zip);
+        const canSubmit = hasBasics && hasKbaRequirements;
+        return (h("form", { key: '7294747ca679694dc795001c654c3451602430ea', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { key: '15c6ac1100095543590800d0ab09b6e1fb270d18', class: "row" }, h("label", { key: '1b06b8a15f67015eee52012ebf4f179ceb0e0442', htmlFor: this.nameFieldId }, "Name:"), h("div", { key: '3578e8898d0d4f62784e46c7be13d38bb017b54d', class: "names-row" }, h("input", { key: 'e23199d423f95756526551efc9ee59cc0fac35d7', id: this.firstNameFieldId, name: this.firstNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.first_name, placeholder: "First...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); }, onInput: e => this.handleFirstNameChange(e) }), h("input", { key: 'f32adffb0b5de42ced7c866c21d0e316efea6c43', id: this.lastNameFieldId, name: this.lastNameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.last_name, placeholder: "Last...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleLastNameChange(e) })), this.showSuggestions && (h("div", { key: '581c0c9332814b3e9fe2c6a5accc17537eff2527', class: "dropdown" }, this.contactSuggestions
             .filter(suggestion => !this.first_name || suggestion.first_name.toLowerCase().includes(this.first_name.toLowerCase()))
             .map(suggestion => {
             var _a;
             return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.email, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.picture ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.picture }) : h("div", { class: "avatar", innerHTML: addrBookIcon }), h("div", { class: "details" }, h("div", { class: "name" }, formatFullName(suggestion)), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-        })))), h("div", { key: 'f60a340ab55e8415452e85f833e284de8237aa08', class: "row" }, h("label", { key: 'f0c0370b4cd9900f7fce27a1ced2d45e97475ed5', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '32d1e8768de34ba305a44bfafd9642f9587cb1a8', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email address...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), h("div", { key: '5be8b8e7b42c344a4fe18761b561e634b05ae718', class: "row" }, h("label", { key: 'f19e5ea6f3639dc28e2776e6f447b901f3ab3a31', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '3d910de57ae8dcf5e5ad9bd9ba4cb164de47eaad', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone (SMS)...", onFocus: () => (this.showSuggestions = false), onInput: (e) => convertToE164(e.target.value) })), this.showKba && (h(Fragment, { key: '7f905e47123df6733b4abcf4b5f4b1951a8abb04' }, h("div", { key: '8eb65bd012848e33f7c485a5059879fb71d05db2', class: "kba-row" }, h("label", { key: '16a4024baf3b7316e8a9f3320b710783e2feb1d4' }, "KBA:"), h("verdocs-select-input", { key: '889100e6e474fd750b566d60eec5a0f87c9c33a9', value: this.kbaMethod, onInput: (e) => (this.kbaMethod = e.target.value), options: [
+        })))), h("div", { key: '206cac1ceb6f07d79022fdf7157e19f9683ba2cf', class: "row" }, h("label", { key: 'a695a0975d7d1786d5e7a61bf31bb6f6c3aeb6f8', htmlFor: this.emailFieldId }, "Email:"), h("input", { key: '9f3c8ae1475eda947a2f9ea78de2df3d088058ad', id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email address...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.email = e.target.value) })), h("div", { key: '557cbc19d97671dc89e0e3a94a925f41963924cc', class: "row" }, h("label", { key: 'e94c9521ff3e15bdff1c1d00b1039220ace4a15e', htmlFor: this.phoneFieldId }, "Phone:"), h("input", { key: '4a32ee79ec7280fccafaab5c20b4de9fbd4a07c6', id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone (SMS)...", onFocus: () => (this.showSuggestions = false), onInput: (e) => convertToE164(e.target.value) })), this.showKba && (h(Fragment, { key: '85605b9ad8792de727994fce8f571a277781e60e' }, h("div", { key: '72f588d9842917bf07a978fa6f22f3e0b2a5d400', class: "kba-row" }, h("label", { key: '84b55053d2ba286f3c319e995973c9bba3eca481' }, "KBA:"), h("verdocs-select-input", { key: '82aa458e82904711790e814e631061093d0f808b', value: this.kba_method, onInput: (e) => {
+                this.kba_method = e.target.value;
+                this.zip = '';
+                this.kba_pin = '';
+            }, options: [
                 { label: 'None', value: '' },
                 { label: 'PIN Code', value: 'pin' },
-                { label: 'Full Verification', value: 'kba' },
-            ] }), h("div", { key: '5b80e6e7a249229363b78fea8529a6d5dfa299d7', style: { flex: '1' } }), h("verdocs-help-icon", { key: 'cb8be539954343749053aacb2d8b97f331d58ef2', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), this.kbaMethod === 'pin' && (h("div", { key: 'ea1604394bcbdc74485f393f732f56cd72b16456', class: "row pin-code" }, h("input", { key: '220a6ecc193996b8324fc0857fdbedc5e0c9180c', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.pinCode, placeholder: "KBA PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.pinCode = e.target.value) }))))), this.showMessage && (h("div", { key: '1b28ed1eaa9f4b9732047f1310201e62dba098bb', class: "row message" }, h("label", { key: 'f0b2a337ad490405ac0d077519a9b716fbf6d8d1', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: '4f06ae76980ad130f064d6d4e69312aa9384b15f', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Message shown in invitation...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }))), h("div", { key: 'f81cff9b0ff13ba4a643aba20c3b9d4a2c4f9876', class: "buttons" }, h("verdocs-toggle-button", { key: '038477d4a09c003ee888d5fd6bf50cd1e412fe81', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
+                { label: 'Full Verification', value: 'identity' },
+            ] }), h("div", { key: '473a6afc0526166923ee52dbf3d58ac010417632', style: { flex: '1' } }), h("verdocs-help-icon", { key: '19a702f79ee06507a8d7d5df39e7bf143afee1ba', text: "Knowledge-Based Authentication adds additional authentication for this user either via a simple PIN code or full address validation. NOTE: There may be a fee for using this feature." })), this.kba_method === 'pin' && (h("div", { key: 'd6b40b1635f8b34babad7e5aa5f59c805f498675', class: "row pin-code" }, h("input", { key: '5d5b69f18b8d6fc730a25796c4988ca8089f8713', id: "verdocs-pin-code", name: "verdocs-pin-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.kba_pin, placeholder: "PIN Code...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.kba_pin = e.target.value) }))), this.kba_method === 'identity' && (h("div", { key: '1fd10328d614a60d046e8e5bb5256b7cedf48031', class: "row zip-code" }, h("input", { key: '5bc3fe7cf69208cfdd4ab0471ce50d4ce6488f34', id: "verdocs-zip-code", name: "verdocs-zip-code", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.zip, placeholder: "Zip Code...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.zip = e.target.value) }))))), this.showMessage && (h("div", { key: 'a618f1924afbf97051d92cbac1b60fac6b1b41c0', class: "row message" }, h("label", { key: '013453934007a7146d4cd1b7216de02f4f592cf8', htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { key: 'a7984b0dc78ae4b4aba2dff258ffce6258742049', id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Message shown in invitation...", onFocus: () => (this.showSuggestions = false), onInput: (e) => (this.message = e.target.value) }))), h("div", { key: 'c8c3cdc7b905dda4d430b050a42d12fe5a4330d6', class: "buttons" }, h("verdocs-toggle-button", { key: 'ed784a9910c000ca8704a6281dc1851beedbd8cb', icon: kbaIcon, size: "small", active: this.showKba, onToggle: e => {
                 this.showKba = e.detail.active;
                 if (!e.detail.active) {
-                    this.pinCode = '';
-                    this.kbaMethod = '';
+                    this.kba_pin = '';
+                    this.kba_method = '';
+                    this.zip = '';
                 }
                 this.showSuggestions = false;
-            } }), h("verdocs-toggle-button", { key: '689ac4fbbcae076aa2b23e4552ee8e9ffde3e3f1', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+            } }), h("verdocs-toggle-button", { key: 'b6d705f7d20d22e3f7d97b399096507912f8c11b', icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
                 this.showMessage = e.detail.active;
                 this.showSuggestions = false;
-            } }), h("div", { key: '79acd11f45019554126cb2dca15c30e3b8bfe86c', class: "flex-fill" }), h("verdocs-button", { key: '63ce6fb6c58955c19dddfc7ca7187ff5ad4ea86a', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'e1523687c11224c74a6235adcc23e9e53eb995bc', label: "OK", size: "small", onClick: e => this.handleSubmit(e) }))));
+            } }), h("div", { key: '73db7367acc8b9573bcd51eafc5d5c6c6d09f04c', class: "flex-fill" }), h("verdocs-button", { key: '9cf8f79300ed93a65d6e570f87151c131327109b', variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'c4f6732a45409ccc7bd9927c3fd7ab97db8c301d', label: "OK", size: "small", disabled: !canSubmit, onClick: e => this.handleSubmit(e) }))));
     }
     static get is() { return "verdocs-contact-picker"; }
     static get originalStyleUrls() {
@@ -210,13 +228,14 @@ export class VerdocsContactPicker {
             "last_name": {},
             "email": {},
             "phone": {},
+            "zip": {},
             "message": {},
             "showSuggestions": {},
             "showMessage": {},
             "delegator": {},
             "showKba": {},
-            "kbaMethod": {},
-            "pinCode": {},
+            "kba_method": {},
+            "kba_pin": {},
             "nameFieldId": {},
             "firstNameFieldId": {},
             "lastNameFieldId": {},

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: 'c36ed131abfd6604c5a48d6cc02384c4c35c5653', 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-envelopes-list/verdocs-envelopes-list.js

@@ -191,18 +191,18 @@ export class VerdocsEnvelopesList {
         });
     }
     render() {
-        return (h(Host, { key: 'afc4e894ffe975884de4740ab191141f45ae8dd3' }, h("div", { key: 'a31c5d67b40c79977ef398ade34906083386a6df', class: "header" }, h("div", { key: '4c9e4e53ad08e7ac14d6567da0bc9d8e076f3550', class: "filter" }, h("verdocs-text-input", { key: 'ea20a5b962b13f678a333c246cde83ce6d8ee9d7', 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: '32a191d2d8e67c2d6633e4ae43ed16d82bc9fa8d', 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: '41ff33e406d7c7b40512e1ce3bbfbcc883b4871a', 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: '28ca07defeb30f227345dd691a1672200c071c9f', 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: '8cac7f3bd1c013d04a355e38ff8d299f33de8d71', mode: "dark", size: 24 }), h("div", { key: 'f3e30dd1d638900f27b618c467b2e954de3da4a6', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: 'afa9d35d7c33ea1d6a6dcb44572d83f9195ffaed', 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: 'c9208b59bfe96f706bfb30e5ced6e9024e2d93a4', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '169424956740f02d92be417c370cbce2621a233c', 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))));
     }