@hubsync/esign-web-sdk 6.9.9 → 6.9.10

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

@@ -471,6 +471,7 @@ export class VerdocsSign {
         el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
         (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
         this.focusedField = field.name;
+        this.updateAllFlags();
     }
     async handleFieldChange(field, e) {
         if (!e.target) {
@@ -634,22 +635,14 @@ export class VerdocsSign {
         const allUnfilled = this.getSortedFillableFields().filter(f => !this.isFieldActuallyFilled(f));
         const nextUnfilled = this.getNextFieldFromList(allUnfilled);
         if (nextUnfilled) {
-            const id = getFieldId(nextUnfilled);
-            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 = nextUnfilled.name;
+            this.focusFieldElement(nextUnfilled);
         }
     }
     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;
+            this.focusFieldElement(next);
         }
     }
     getRecipientFields() {
@@ -737,16 +730,11 @@ export class VerdocsSign {
         return fields[nextFocusedIndex];
     }
     handlePrev() {
-        var _a;
         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.focusFieldElement(prevField);
         }
     }
     updateAllFlags() {
@@ -768,7 +756,7 @@ export class VerdocsSign {
         // If the currently focused field is unfilled, we should point the flag to IT, not the next one.
         // getNextRequiredField() is designed for the "Next" button (skipping current), but the visual flag
         // should guide the user to the current task if it's incomplete.
-        if (focusedFieldObj && !isFieldFilled(focusedFieldObj, this.getRecipientFields())) {
+        if (focusedFieldObj && !this.isFieldActuallyFilled(focusedFieldObj)) {
             nextField = focusedFieldObj;
         }
         if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
@@ -810,14 +798,11 @@ export class VerdocsSign {
                 label,
                 showSkip,
                 onSkip: () => {
+                    this.focusedField = nextField.name;
                     this.handleNext();
                 },
                 onClick: () => {
-                    var _a;
-                    const id = getFieldId(nextField);
-                    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.focusFieldElement(nextField);
                 },
             });
         }
@@ -833,6 +818,12 @@ export class VerdocsSign {
             return;
         }
         el.setAttribute('attached', '1');
+        el.addEventListener('focusin', () => {
+            if (this.focusedField !== field.name) {
+                this.focusedField = field.name;
+                this.updateAllFlags();
+            }
+        });
         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
@@ -897,6 +888,7 @@ export class VerdocsSign {
         });
         el.addEventListener('adopt', () => {
             this.focusedField = field.name;
+            this.updateAllFlags();
             this.adoptingSignature = true;
         });
         el.setAttribute('templateid', this.envelope.template_id);