@verdocs/web-sdk 6.7.8 → 6.8.2

package/dist/esm/verdocs-preview_7.entry.js

@@ -1,11 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-BIRwgFLv.js';
 import { VerdocsEndpoint, getTemplate, integerSequence, getOrganizationContacts, isValidEmail, createEnvelope, formatFullName, getRGBA, createTemplateDocument, deleteTemplateDocument, updateField, createField, updateTemplateRole, createTemplateRole, updateTemplate } from '@verdocs/js-sdk';
-import { a as renderDocumentField, g as getFieldId, f as updateCssTransform, h as removeCssTransform, i as setControlStyles, d as defaultHeight, j as defaultWidth } from './utils-Deu82Q9L.js';
+import { a as renderDocumentField, g as getFieldId, h as updateCssTransform, i as removeCssTransform, j as setControlStyles, d as defaultHeight, k as defaultWidth } from './utils-CerrMWqr.js';
 import { S as SDKError } from './errors-C1sRVZWv.js';
 import { S as Store } from './Datastore-bS8INhRF.js';
 import { D as DefaultEndpoint } from './Environment-C_Xku1v2.js';
-import { V as VerdocsToast } from './Toast-CyvDgtoV.js';
-import { a as DocIcon, P as PngIcon, J as JpgIcon, b as PdfIcon, F as FileIcon, c as PageCountIcon, T as TrashIcon, D as DocumentPageIcon } from './Icons-COC8ZzcY.js';
+import { V as VerdocsToast } from './Toast-D97GxsI-.js';
+import { a as DocIcon, P as PngIcon, J as JpgIcon, b as PdfIcon, F as FileIcon, c as PageCountIcon, T as TrashIcon, D as DocumentPageIcon } from './Icons-uiSvPcsq.js';
 import { d as dateFnsExports } from './index-dzBXqXlK.js';
 import { i as interact } from './interact.min-BepJAdBZ.js';
 import './Types-BqoC0yeA.js';
@@ -684,7 +684,6 @@ const VerdocsTemplateFields = class {
         this.templateUpdated = createEvent(this, "templateUpdated");
         this.fieldsUpdated = createEvent(this, "fieldsUpdated");
         this.templateListenerId = null;
-        this.draggableEls = [];
         /**
          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
@@ -759,15 +758,6 @@ const VerdocsTemplateFields = class {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
-        this.draggableEls.forEach(el => {
-            try {
-                interact(el).unset();
-            }
-            catch (e) {
-                // Element may already be removed from the DOM
-            }
-        });
-        this.draggableEls = [];
     }
     async listenToTemplate() {
         this.unlistenToTemplate();
@@ -834,9 +824,6 @@ const VerdocsTemplateFields = class {
                 end: this.handleMoveEnd.bind(this),
             },
         });
-        if (!this.draggableEls.includes(el)) {
-            this.draggableEls.push(el);
-        }
     }
     async handleMoveField(event) {
         const oldX = +(event.target.getAttribute('posX') || 0);

package/dist/esm/verdocs-sign.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-BIRwgFLv.js';
 import { VerdocsEndpoint, DEFAULT_DISCLOSURES, startSigningSession, envelopeRecipientAgree, getEnvelope, updateEnvelopeField, createSignature, createInitials, sortFields, envelopeRecipientSubmit, isFieldValid, isFieldFilled, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, verifySigner, delegateRecipient, envelopeRecipientDecline, integerSequence, askQuestion, getEnvelopeDocumentDownloadLink, getEnvelopesZip } from '@verdocs/js-sdk';
-import { u as updateDocumentFieldValue, g as getFieldId, r as renderDocumentFlag, a as renderDocumentField, d as defaultHeight } from './utils-Deu82Q9L.js';
-import { D as DocumentPageIcon } from './Icons-COC8ZzcY.js';
-import { V as VerdocsToast } from './Toast-CyvDgtoV.js';
+import { u as updateDocumentFieldValue, g as getFieldId, r as renderDocumentFlag, a as renderDocumentField, d as defaultHeight } from './utils-CerrMWqr.js';
+import { D as DocumentPageIcon, C as CheckCircleIcon } from './Icons-uiSvPcsq.js';
+import { V as VerdocsToast } from './Toast-D97GxsI-.js';
 import { S as SDKError } from './errors-C1sRVZWv.js';
 import { S as Store } from './Datastore-bS8INhRF.js';
 import './index-dzBXqXlK.js';
@@ -49,7 +49,7 @@ const VerdocsSign = class {
         /**
          * The style of the toolbar to display.
          */
-        this.toolbarStyle = 'controls';
+        this.toolbarStyle = 'menu';
         this.recipient = null;
         this.hasSignature = false;
         this.nextButtonLabel = 'Start';
@@ -551,10 +551,30 @@ const VerdocsSign = class {
             this.focusedField = nextUnfilled.name;
         }
     }
+    handleNextOptional() {
+        const unfilledOptional = this.getSortedFillableFields().filter(f => !f.required && !this.isFieldActuallyFilled(f));
+        const next = this.getNextFieldFromList(unfilledOptional);
+        if (next) {
+            const id = getFieldId(next);
+            const el = document.getElementById(id);
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+            el === null || el === void 0 ? void 0 : el.focusField();
+            this.focusedField = next.name;
+        }
+    }
     getRecipientFields() {
         var _a;
         return ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.fields.filter(field => field.role_name === this.recipient.role_name)) || [];
     }
+    getRequiredTotalCount() {
+        return this.getSortedFillableFields().filter(f => f.required).length;
+    }
+    getRequiredFilledCount() {
+        return this.getSortedFillableFields().filter(f => f.required && this.isFieldActuallyFilled(f)).length;
+    }
+    getOptionalUnfilledCount() {
+        return this.getSortedFillableFields().filter(f => !f.required && !this.isFieldActuallyFilled(f)).length;
+    }
     // See if everything that "needs to be" filled in is, and all "fillable fields" are valid
     checkRecipientFields() {
         const invalidFields = this.getRecipientFields().filter(field => !isFieldValid(field, this.getRecipientFields()));
@@ -665,9 +685,35 @@ const VerdocsSign = class {
             const variant = 'fill';
             let label = 'FILL';
             let showSkip = false;
+            switch (nextField.type) {
+                case 'signature':
+                    label = 'SIGN';
+                    break;
+                case 'initial':
+                    label = 'INITIAL';
+                    break;
+                case 'checkbox':
+                    label = 'CHECK';
+                    break;
+                case 'radio':
+                    label = 'SELECT';
+                    break;
+                case 'date':
+                case 'dropdown':
+                    label = 'SELECT';
+                    break;
+                case 'attachment':
+                    label = 'ATTACH';
+                    break;
+                case 'payment':
+                    label = 'PAY';
+                    break;
+                default:
+                    label = 'FILL';
+                    break;
+            }
             if (!nextField.required) {
-                label = 'FILL';
-                showSkip = true; // Use the X to skip? Or just text? "Fill or Skip" implies maybe just text.
+                showSkip = true;
             }
             renderDocumentFlag(pageInfo, nextField.y, nextField.height || defaultHeight(nextField.type), {
                 variant,
@@ -847,7 +893,7 @@ const VerdocsSign = class {
     render() {
         var _a;
         if (this.showLoadError) {
-            return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to Start Signing", message: `Unable to verify your invite code. Please contact the sender for assistance.`, buttonLabel: "OK", onNext: () => {
+            return (h(Host, null, h("verdocs-ok-dialog", { heading: "Unable to Start Signing", message: `Sorry, your invite code is invalid or has expired. Please check your email for an updated invitation, or contact the sender.`, buttonLabel: "OK", onNext: () => {
                     window.location.reload();
                 } })));
         }
@@ -956,9 +1002,14 @@ const VerdocsSign = class {
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (h(Host, null, this.toolbarStyle === 'menu' && (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 || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("verdocs-signing-progress", { mode: this.signingProgressMode, focusedField: this.focusedField, fields: this.getSortedFillableFields(), recipientFields: this.getRecipientFields(), onStarted: () => {
-                this.adoptingSignature = true;
-            }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
+        return (h(Host, null, this.toolbarStyle === 'menu' && (h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && (() => {
+            const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
+            const optionalLeft = this.getOptionalUnfilledCount();
+            if (remaining > 0) {
+                return h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left");
+            }
+            return (h("span", { class: "remaining-count" }, h("span", { class: "check-icon", innerHTML: CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && h("span", { class: "separator" }, "|"), optionalLeft > 0 && h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional")));
+        })(), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("div", { innerHTML: DocumentPageIcon }), h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;