@verdocs/web-sdk 6.7.8 → 6.8.2

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

@@ -2,12 +2,12 @@
 
 var index$1 = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-DjHWIYcY.js');
+var utils = require('./utils-ecG41L2k.js');
 var errors = require('./errors-D1XRvnet.js');
 var Datastore = require('./Datastore-B-sxWSPD.js');
 var Environment = require('./Environment-3vWt0C1Q.js');
-var Toast = require('./Toast-CFBM1R4z.js');
-var Icons = require('./Icons-Dr02rZHd.js');
+var Toast = require('./Toast-BgG-6jAg.js');
+var Icons = require('./Icons-GgNiIFTt.js');
 var index$2 = require('./index-CeUF44L9.js');
 var interact_min = require('./interact.min-BAnZvLwr.js');
 require('./Types-YJQtg77a.js');
@@ -686,7 +686,6 @@ const VerdocsTemplateFields = class {
         this.templateUpdated = index$1.createEvent(this, "templateUpdated");
         this.fieldsUpdated = index$1.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.
          */
@@ -761,15 +760,6 @@ const VerdocsTemplateFields = class {
     }
     disconnectedCallback() {
         this.unlistenToTemplate();
-        this.draggableEls.forEach(el => {
-            try {
-                interact_min.interact(el).unset();
-            }
-            catch (e) {
-                // Element may already be removed from the DOM
-            }
-        });
-        this.draggableEls = [];
     }
     async listenToTemplate() {
         this.unlistenToTemplate();
@@ -836,9 +826,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/cjs/verdocs-sign.cjs.entry.js

@@ -2,9 +2,9 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-DjHWIYcY.js');
-var Icons = require('./Icons-Dr02rZHd.js');
-var Toast = require('./Toast-CFBM1R4z.js');
+var utils = require('./utils-ecG41L2k.js');
+var Icons = require('./Icons-GgNiIFTt.js');
+var Toast = require('./Toast-BgG-6jAg.js');
 var errors = require('./errors-D1XRvnet.js');
 var Datastore = require('./Datastore-B-sxWSPD.js');
 require('./index-CeUF44L9.js');
@@ -51,7 +51,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';
@@ -553,10 +553,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 = utils.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 => !jsSdk.isFieldValid(field, this.getRecipientFields()));
@@ -667,9 +687,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;
             }
             utils.renderDocumentFlag(pageInfo, nextField.y, nextField.height || utils.defaultHeight(nextField.type), {
                 variant,
@@ -849,7 +895,7 @@ const VerdocsSign = class {
     render() {
         var _a;
         if (this.showLoadError) {
-            return (index.h(index.Host, null, index.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 (index.h(index.Host, null, index.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();
                 } })));
         }
@@ -958,9 +1004,14 @@ const VerdocsSign = class {
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = jsSdk.integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (index.h("div", { class: "controls-toolbar" }, index.h("div", { class: "left-controls" }, index.h("div", { class: "title" }, this.envelope.name)), index.h("div", { class: "center-controls" }, index.h("span", { class: "label" }, "Page"), index.h("div", { class: "select-wrapper" }, index.h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), index.h("span", { class: "count" }, "of ", totalPages)), index.h("div", { class: "right-controls" }, index.h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), index.h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), index.h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), index.h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), index.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() }), index.h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
+        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && (() => {
+            const remaining = this.getRequiredTotalCount() - this.getRequiredFilledCount();
+            const optionalLeft = this.getOptionalUnfilledCount();
+            if (remaining > 0) {
+                return index.h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left");
+            }
+            return (index.h("span", { class: "remaining-count" }, index.h("span", { class: "check-icon", innerHTML: Icons.CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && index.h("span", { class: "separator" }, "|"), optionalLeft > 0 && index.h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional")));
+        })(), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), index.h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (index.h("div", { class: "controls-toolbar" }, index.h("div", { class: "left-controls" }, index.h("div", { class: "title" }, this.envelope.name)), index.h("div", { class: "center-controls" }, index.h("span", { class: "label" }, "Page"), index.h("div", { class: "select-wrapper" }, index.h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), index.h("span", { class: "count" }, "of ", totalPages)), index.h("div", { class: "right-controls" }, index.h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), index.h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), index.h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), index.h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), index.h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = jsSdk.integerSequence(1, envelopeDocument.pages);
             return (index.h(index.Fragment, null, this.envelope.documents.length > 1 && (index.h("div", { class: "document-separator" }, index.h("div", { innerHTML: Icons.DocumentPageIcon }), index.h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;