@hubsync/esign-web-sdk 6.5.5 → 6.5.7

package/dist/components/verdocs-sign.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$h } from './p-CHLvWYEx.js';
 import { d as defineCustomElement$g } from './p-D9zjm5AL.js';
 import { d as defineCustomElement$f } from './p-qpe55Kwb.js';
 import { d as defineCustomElement$e } from './p-ypE1cZc7.js';
-import { d as defineCustomElement$d } from './p-CUrnqIyl.js';
+import { d as defineCustomElement$d } from './p-DnuBWvuE.js';
 import { d as defineCustomElement$c } from './p-DOuWiFKy.js';
 import { d as defineCustomElement$b } from './p-BeDjuReL.js';
 import { d as defineCustomElement$a } from './p-BHVk6zkr.js';
@@ -26,10 +26,10 @@ import { d as defineCustomElement$9 } from './p-CYgAI8GQ.js';
 import { d as defineCustomElement$8 } from './p-TAy4DEie.js';
 import { d as defineCustomElement$7 } from './p-QDVFg2YR.js';
 import { d as defineCustomElement$6 } from './p-CV0M8_uS.js';
-import { d as defineCustomElement$5 } from './p-B-ZoFCli.js';
+import { d as defineCustomElement$5 } from './p-CY3peFvA.js';
 import { d as defineCustomElement$4 } from './p--A9ydKVE.js';
 import { d as defineCustomElement$3 } from './p-CbtdkfOR.js';
-import { d as defineCustomElement$2 } from './p-4olD14NA.js';
+import { d as defineCustomElement$2 } from './p-By4lLDL5.js';
 
 const verdocsSignCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;min-height:700px;position:relative;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f5f5f5;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-sign verdocs-button>button.standard{background:#2a63f6}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;padding-right:140px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign>.document .document-separator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px;padding:12px 20px;width:100%;max-width:1028px;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#33364b;color:white;border-radius:6px;font-size:16px;font-weight:500;margin-top:20px;-webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}verdocs-sign>.document .document-separator svg{-ms-flex-negative:0;flex-shrink:0}verdocs-sign>.document .document-separator:first-child{margin-top:0}verdocs-sign .signed-document-container{width:64%;margin-left:260px;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}verdocs-sign .signed-document-container.zoom-normal{width:64%;margin-left:260px}verdocs-sign .signed-document-container.zoom-zoom1{width:80%;margin-left:200px}verdocs-sign .signed-document-container.zoom-zoom2{width:100%;margin-left:150px}verdocs-sign .signed-document-container.zoom-zoom2 .verdocs-flag-instance{opacity:0;pointer-events:none}@media (max-width: 768px){verdocs-sign verdocs-sign-footer{padding:0 10px}verdocs-sign verdocs-sign-footer .buttons{gap:8px}verdocs-sign verdocs-sign-footer .buttons button{font-size:10px}verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign .signed-document-container.zoom-normal,verdocs-sign .signed-document-container.zoom-zoom1,verdocs-sign .signed-document-container.zoom-zoom2{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}verdocs-sign .controls-toolbar .center-controls{display:none}verdocs-sign .controls-toolbar .right-controls .mobile-next-button{display:block;margin-right:10px}verdocs-sign .controls-toolbar .right-controls .minus,verdocs-sign .controls-toolbar .right-controls .plus{display:none}}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);margin-top:15px}verdocs-sign .fatal-error .message{max-width:360px;width:50%;font-size:16px;background:white;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#4c56cb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400;padding:0 10px}@media print{verdocs-sign .header,.controls-toolbar,.verdocs-flag-instance,verdocs-signing-progress{display:none !important}verdocs-sign{min-height:auto;background-color:white}verdocs-sign>.document{overflow:visible;height:auto;display:block;padding:0;margin:0}verdocs-sign>.document .document-separator{display:none}verdocs-sign .signed-document-container{width:100%;margin:0}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}.controls-toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:54px;padding:0 12px 0 24px;background-color:#ffffff;border-bottom:1px solid #e0e0e0;-webkit-box-shadow:none;box-shadow:none;font-family:\"Inter\", sans-serif;color:#424242;z-index:1000}.controls-toolbar .left-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .left-controls .title{font-weight:500;font-size:16px;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls-toolbar .center-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:10px;font-size:14px}.controls-toolbar .center-controls .label{color:#000000;font-weight:300}.controls-toolbar .center-controls .select-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .center-controls .select-wrapper verdocs-select-input{margin:0}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-label{display:none}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element{background:transparent;border:1px solid #e0e0e0;height:32px;padding:2px 8px;min-width:60px;text-align:center;font-family:inherit;color:#424242}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element:focus{border-color:#2a63f6}.controls-toolbar .center-controls .count{color:#000000;font-weight:300}.controls-toolbar .right-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.controls-toolbar .right-controls .mobile-next-button{display:none}.controls-toolbar .right-controls .icon-button{width:32px;height:32px;display:-ms-flexbox;display:flex;color:#424242;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color 0.2s;transition:background-color 0.2s}.controls-toolbar .right-controls .icon-button:hover{background-color:#f5f5f5}.controls-toolbar .right-controls .icon-button.disabled{opacity:0.3;pointer-events:none}.controls-toolbar .right-controls .icon-button svg{display:block;width:20px;height:20px}";
 
@@ -72,7 +72,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         /**
          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
-        this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
+        this.endpoint = new VerdocsEndpoint({ sessionType: 'signing', baseURL: 'https://esign-dev.hubsync.com/api' });
         /**
          * The ID of the envelope to sign.
          */
@@ -131,6 +131,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         this.delegated = false;
         this.kbaChoices = [];
         this.showDownloadDialog = false;
+        this.signingStarted = false;
+        this.skippedOptionalFields = [];
+        this.visitedFieldNames = [];
         this.loading = true;
         this.envelope = null;
         this.zoomLevel = 'normal';
@@ -243,6 +246,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         this.agreed = recipient.agreed;
         this.signatureId = ((_e = (_d = response.signatures) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.id) || null;
         this.initialId = ((_g = (_f = response.initials) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.id) || null;
+        this.signingStarted = false;
+        this.skippedOptionalFields = [];
+        this.visitedFieldNames = [];
         this.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -350,6 +356,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
     }
     updateRecipientFieldValue(fieldName, updateResult) {
         console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
+        if (this.skippedOptionalFields.includes(fieldName)) {
+            this.skippedOptionalFields = this.skippedOptionalFields.filter(name => name !== fieldName);
+        }
         this.getRecipientFields().forEach(oldField => {
             if (oldField.name === fieldName) {
                 oldField.value = updateResult.value;
@@ -387,6 +396,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         });
     }
     async handleFieldChange(field, e) {
+        this.signingStarted = true;
+        this.markFieldVisited(field.name);
         const { value, checked } = e.target;
         switch (field.type) {
             // TODO: Remove legacy type when no longer needed
@@ -508,8 +519,46 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         sortFields(recipientFields);
         return recipientFields;
     }
+    markFieldVisited(fieldName) {
+        if (!fieldName || this.visitedFieldNames.includes(fieldName)) {
+            return;
+        }
+        this.visitedFieldNames = [...this.visitedFieldNames, fieldName];
+    }
+    focusField(field, scrollInline = 'center') {
+        var _a;
+        if (!field)
+            return;
+        const id = getFieldId(field);
+        const el = document.getElementById(id);
+        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: scrollInline });
+        (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+        this.focusedField = field.name;
+        this.markFieldVisited(field.name);
+        this.checkRecipientFields();
+    }
+    handleSkipField(fieldToSkip) {
+        if (fieldToSkip.required) {
+            return;
+        }
+        this.signingStarted = true;
+        this.markFieldVisited(fieldToSkip.name);
+        if (!this.skippedOptionalFields.includes(fieldToSkip.name)) {
+            this.skippedOptionalFields = [...this.skippedOptionalFields, fieldToSkip.name];
+        }
+        const fields = this.getSortedFillableFields();
+        const currentIndex = fields.findIndex(field => field.name === fieldToSkip.name);
+        const nextField = currentIndex >= 0 && currentIndex < fields.length - 1 ? fields[currentIndex + 1] : null;
+        if (nextField) {
+            this.focusField(nextField);
+            return;
+        }
+        // If this was the last field, still re-evaluate completion/submit state.
+        this.checkRecipientFields([fieldToSkip.name]);
+    }
     handleNext() {
         var _a;
+        this.signingStarted = true;
         if (this.nextSubmits) {
             try {
                 // Patches the date picker to be forcibly removed if still showing during submission
@@ -527,23 +576,31 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             }
             return;
         }
-        const nextField = this.getNextFieldInOrder();
-        if (nextField) {
-            const id = getFieldId(nextField);
-            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 = nextField.name;
+        const fields = this.getSortedFillableFields();
+        if (fields.length < 1) {
+            return;
         }
+        if (!this.focusedField) {
+            this.focusField(fields[0]);
+            return;
+        }
+        const nextField = this.getNextFieldFromList(fields);
+        this.focusField(nextField);
     }
     getRecipientFields() {
         var _a;
         return ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.fields.filter(field => field.role_name === this.recipient.role_name)) || [];
     }
     // 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()));
-        if (invalidFields.length < 1) {
+    checkRecipientFields(extraVisitedFieldNames = []) {
+        const recipientFields = this.getRecipientFields();
+        const fillableFields = this.getSortedFillableFields();
+        const requiredFields = fillableFields.filter(field => !!field.required);
+        const allRequiredFieldsSubmitted = requiredFields.every(field => this.isFieldValidForRecipient(field, recipientFields));
+        const visitedFieldNames = new Set([...this.visitedFieldNames, ...extraVisitedFieldNames]);
+        const allFieldsVisited = fillableFields.every(field => visitedFieldNames.has(field.name));
+        const canSubmit = allRequiredFieldsSubmitted && allFieldsVisited;
+        if (canSubmit) {
             this.nextButtonLabel = 'Finish';
             if (!this.nextSubmits) {
                 this.nextSubmits = true;
@@ -555,6 +612,12 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         }
         this.updateAllFlags();
     }
+    isFieldValidForRecipient(field, recipientFields) {
+        if (field.type === 'signature' || field.type === 'initial') {
+            return !field.required || this.isFieldFilledForNav(field, recipientFields);
+        }
+        return isFieldValid(field, recipientFields);
+    }
     getNextFieldInOrder() {
         // Find the next incomplete field in overall order (required + optional).
         const fields = this.getSortedFillableFields();
@@ -573,13 +636,38 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         return null;
     }
     isFieldFilledForNav(field, recipientFields) {
+        if (!field.required && this.skippedOptionalFields.includes(field.name)) {
+            return true;
+        }
         if (field.type === 'signature' || field.type === 'initial') {
+            const settings = (field.settings || {});
+            const idKey = field.type === 'signature' ? 'signature_id' : 'initial_id';
+            const hasSignatureId = Object.prototype.hasOwnProperty.call(settings, 'signature_id');
+            const hasInitialId = Object.prototype.hasOwnProperty.call(settings, 'initial_id');
+            // For signature/initial fields, settings.* id is the authoritative state.
+            // This avoids stale top-level field.value (e.g. "signed") after clearing.
+            if (Object.prototype.hasOwnProperty.call(settings, idKey) || hasSignatureId || hasInitialId) {
+                const idValue = Object.prototype.hasOwnProperty.call(settings, idKey)
+                    ? settings[idKey]
+                    : hasSignatureId
+                        ? settings.signature_id
+                        : settings.initial_id;
+                return typeof idValue === 'string' ? idValue.trim().length > 0 : !!idValue;
+            }
+            if (Object.prototype.hasOwnProperty.call(settings, 'value')) {
+                const settingsValue = typeof settings.value === 'string' ? settings.value.trim() : settings.value;
+                return !!settingsValue;
+            }
+            if (Object.prototype.hasOwnProperty.call(settings, 'result')) {
+                const settingsResult = typeof settings.result === 'string' ? settings.result.trim() : settings.result;
+                return !!settingsResult;
+            }
+            if (Object.prototype.hasOwnProperty.call(settings, 'base64')) {
+                const settingsBase64 = typeof settings.base64 === 'string' ? settings.base64.trim() : settings.base64;
+                return !!settingsBase64;
+            }
             const value = typeof field.value === 'string' ? field.value.trim() : field.value;
-            if (!value)
-                return false;
-            if (value === 'signed' || value === 'initialed')
-                return false;
-            return true;
+            return !!value;
         }
         if (field.type === 'dropdown') {
             return isFieldFilled(field, recipientFields) && !!field.value;
@@ -596,16 +684,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         return fields[nextFocusedIndex];
     }
     handlePrev() {
-        var _a;
+        this.signingStarted = true;
         const allFields = this.getSortedFillableFields();
         const focusedIndex = allFields.findIndex(f => f.name === this.focusedField);
         if (focusedIndex > 0) {
-            const prevField = allFields[focusedIndex - 1];
-            const id = getFieldId(prevField);
-            const el = document.getElementById(id);
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
-            this.focusedField = prevField.name;
+            this.focusField(allFields[focusedIndex - 1]);
         }
     }
     updateAllFlags() {
@@ -642,8 +725,12 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 variant,
                 label,
                 showSkip,
+                onClick: () => {
+                    this.signingStarted = true;
+                    this.focusField(nextField);
+                },
                 onSkip: () => {
-                    this.handleNext();
+                    this.handleSkipField(nextField);
                 },
             });
         }
@@ -716,8 +803,15 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         el.addEventListener('fieldChange', e => {
             this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
         });
+        el.addEventListener('click', () => {
+            this.focusedField = field.name;
+            this.markFieldVisited(field.name);
+            this.checkRecipientFields();
+        });
         el.addEventListener('adopt', () => {
             this.focusedField = field.name;
+            this.markFieldVisited(field.name);
+            this.checkRecipientFields();
             this.adoptingSignature = true;
         });
         el.setAttribute('templateid', this.envelope.template_id);
@@ -907,7 +1001,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             inProgressMenuOptions.unshift({ id: 'delegate', label: 'Delegate' });
         }
         console.log('this.getRecipientFields()', this.getRecipientFields());
-        const invalidFields = this.getRecipientFields().filter(field => !isFieldValid(field, this.getRecipientFields()));
+        const recipientFields = this.getRecipientFields();
+        const invalidFields = recipientFields.filter(field => !this.isFieldValidForRecipient(field, recipientFields));
         invalidFields.length > 0
             ? console.log('[SIGN] Invalid fields remaining', invalidFields.map(field => field.name))
             : console.log('[SIGN] All field valid');
@@ -920,18 +1015,20 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             // Calculate detailed progress
             const allFields = this.getSortedFillableFields();
             const recipientFields = this.getRecipientFields();
-            const isFilled = (f) => isFieldFilled(f, recipientFields) && (f.type !== 'dropdown' || !!f.value);
+            const isFilled = (f) => this.isFieldFilledForNav(f, recipientFields);
             const requiredFields = allFields.filter(f => f.required);
             const requiredRemaining = requiredFields.filter(f => !isFilled(f)).length;
+            const requiredFilled = requiredFields.length - requiredRemaining;
             const optionalFields = allFields.filter(f => !f.required);
             const optionalRemaining = optionalFields.filter(f => !isFilled(f)).length;
+            const optionalFilled = optionalFields.length - optionalRemaining;
             const progress = {
                 required: {
-                    remaining: requiredRemaining,
+                    filled: requiredFilled,
                     total: requiredFields.length,
                 },
                 optional: {
-                    remaining: optionalRemaining,
+                    filled: optionalFilled,
                     total: optionalFields.length,
                 },
             };
@@ -950,18 +1047,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 filledFields: recipientFields.filter(f => isFilled(f)).map(f => ({ name: f.name, type: f.type, val: f.value })),
             });
             let mode = 'start';
-            // We only consider the user to have started "signing" if they have filled out at least one *fillable* field.
-            // Readonly fields do not count.
-            const anyFieldFilled = requiredRemaining < requiredFields.length || optionalRemaining < optionalFields.length;
             if (this.nextSubmits) {
                 mode = 'completed';
             }
-            else if (anyFieldFilled) {
+            else if (this.signingStarted) {
                 mode = 'signing';
             }
             return (h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, remainingFields: remainingFields, progress: progress, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!isFilled(focusedFieldObj) : false, onStarted: () => {
+                    this.signingStarted = true;
                     this.adoptingSignature = true;
-                    this.handleNext();
+                    const fields = this.getSortedFillableFields();
+                    const startField = fields.find(f => f.name === this.focusedField) || fields[0];
+                    this.focusField(startField || null);
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
         })(), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
@@ -1122,6 +1219,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         "delegated": [32],
         "kbaChoices": [32],
         "showDownloadDialog": [32],
+        "signingStarted": [32],
+        "skippedOptionalFields": [32],
+        "visitedFieldNames": [32],
         "loading": [32],
         "envelope": [32],
         "zoomLevel": [32]