@hubsync/esign-web-sdk 6.9.18 → 6.9.20

package/dist/cjs/verdocs-adopt-signature-dialog_8.cjs.entry.js

@@ -4456,6 +4456,10 @@ const VerdocsSigningProgress = class {
          * All fields for the recipient, used to check filled status (may include non-fillable)
          */
         this.recipientFields = [];
+        /**
+         * Names of optional fields the user has explicitly skipped
+         */
+        this.skippedFields = [];
     }
     renderSuccessIcon() {
         return (index.h("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM13.3584 7.64645C13.532 7.82001 13.5513 8.08944 13.4163 8.28431L13.3584 8.35355L9.35355 12.3584C9.17999 12.532 8.91056 12.5513 8.71569 12.4163L8.64645 12.3584L6.64645 10.3584C6.45118 10.1632 6.45118 9.84658 6.64645 9.65131C6.82001 9.47775 7.08944 9.45846 7.28431 9.59346L7.35355 9.65131L9 11.298L12.6513 7.64645C12.8466 7.45118 13.1632 7.45118 13.3584 7.64645Z", fill: "#107C10" })));
@@ -4469,13 +4473,13 @@ const VerdocsSigningProgress = class {
         }
         return index.h("div", { class: "field-label" }, fieldLabel);
     }
-    renderFooter(current, total, requiredRemaining) {
+    renderFooter(current, _total, requiredRemaining, optionalRemaining) {
         if (this.mode === 'start') {
             return (index.h("button", { class: "btn start", onClick: () => this.started.emit() }, "Start Signing"));
         }
-        return (index.h("div", { class: "nav-buttons" }, requiredRemaining === 0 ? (index.h("button", { class: "btn submit", onClick: () => this.exit.emit() }, "Submit")) : ([
+        return (index.h("div", { class: "nav-buttons" }, requiredRemaining === 0 && optionalRemaining === 0 ? (index.h("button", { class: "btn submit", onClick: () => this.exit.emit() }, "Submit")) : ([
             index.h("button", { class: "btn previous", disabled: current <= 1, onClick: () => this.previous.emit() }, "Previous"),
-            index.h("button", { class: "btn next", disabled: current >= total, onClick: () => this.next.emit() }, "Next"),
+            index.h("button", { class: "btn next", onClick: () => this.next.emit() }, "Next"),
         ])));
     }
     renderCompleted() {
@@ -4489,11 +4493,11 @@ const VerdocsSigningProgress = class {
         const requiredFields = this.fields.filter(f => f.required);
         const requiredRemaining = requiredFields.filter(f => !isFilled(f)).length;
         const optionalFields = this.fields.filter(f => !f.required);
-        const optionalRemaining = optionalFields.filter(f => !isFilled(f)).length;
+        const optionalRemaining = optionalFields.filter(f => !isFilled(f) && !this.skippedFields.includes(f.name)).length;
         const focusedFieldObj = this.fields.find(f => f.name === this.focusedField);
         const currentIndex = this.fields.findIndex(f => f.name === this.focusedField) + 1;
         const totalFields = this.fields.length;
-        return (index.h("div", { class: "card" }, index.h("div", { class: "header" }, index.h("div", { class: "progress-line" }, requiredRemaining, " of ", requiredFields.length, " required fields remaining"), optionalFields.length > 0 && (index.h("div", { class: "progress-line optional" }, optionalRemaining, " of ", optionalFields.length, " optional fields remaining"))), index.h("div", { class: "body" }, this.renderContent(utils.getFieldLabel(focusedFieldObj), focusedFieldObj ? !!isFilled(focusedFieldObj) : false, requiredRemaining === 0)), index.h("div", { class: "separator" }), this.renderFooter(Math.max(1, currentIndex), totalFields, requiredRemaining)));
+        return (index.h("div", { class: "card" }, index.h("div", { class: "header" }, index.h("div", { class: "progress-line" }, requiredRemaining, " of ", requiredFields.length, " required fields remaining"), optionalFields.length > 0 && (index.h("div", { class: "progress-line optional" }, optionalRemaining, " of ", optionalFields.length, " optional fields remaining"))), index.h("div", { class: "body" }, this.renderContent(utils.getFieldLabel(focusedFieldObj), focusedFieldObj ? !!isFilled(focusedFieldObj) : false, requiredRemaining === 0)), index.h("div", { class: "separator" }), this.renderFooter(Math.max(1, currentIndex), totalFields, requiredRemaining, optionalRemaining)));
     }
 };
 VerdocsSigningProgress.style = verdocsSigningProgressCss;

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

@@ -439,7 +439,10 @@ const VerdocsSign = class {
     }
     focusNextFieldAfter(field) {
         setTimeout(() => {
-            const next = this.getNextUnfilledField(field);
+            const allFields = this.getSortedFillableFields();
+            const startIndex = allFields.findIndex(f => f.name === field.name) + 1;
+            // Only look forward — do not wrap back to optional fields the user already passed
+            const next = allFields.slice(startIndex).find(f => !this.isFieldActuallyFilled(f) && !this.skippedFields.includes(f.name));
             if (next)
                 this.focusFieldElement(next);
         }, 100);
@@ -754,7 +757,7 @@ const VerdocsSign = class {
         // If the currently focused field is unfilled, point the flag to it.
         // Otherwise find the next unfilled field forward from the current position.
         let nextField;
-        if (focusedFieldObj && !this.isFieldActuallyFilled(focusedFieldObj)) {
+        if (focusedFieldObj && !this.isFieldActuallyFilled(focusedFieldObj) && !this.skippedFields.includes(focusedFieldObj.name)) {
             nextField = focusedFieldObj;
         }
         else {
@@ -804,7 +807,15 @@ const VerdocsSign = class {
                     }
                     this.focusedField = nextField.name;
                     this.checkRecipientFields();
-                    this.handleNext();
+                    // Do NOT call handleNext() here — if this was the last unaddressed field,
+                    // nextSubmits is now true and handleNext() would auto-submit without user intent.
+                    // Instead navigate manually only when there are still fields to address.
+                    if (!this.nextSubmits) {
+                        const currentField = this.getSortedFillableFields().find(f => f.name === this.focusedField);
+                        const next = this.getNextUnfilledField(currentField);
+                        if (next)
+                            this.focusFieldElement(next);
+                    }
                 },
                 onClick: () => {
                     this.focusFieldElement(nextField);
@@ -1102,7 +1113,7 @@ const VerdocsSign = class {
                     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, 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("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", style: { display: 'none' } }, 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.finishLater && (index.h("verdocs-button", { size: "xsmall", label: 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("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", style: { display: 'none' } }, 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(), skippedFields: this.skippedFields, onStarted: () => {
                 this.handleStartSigning();
             }, 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 => {
             const pageNumbers = jsSdk.integerSequence(1, envelopeDocument.pages);