@hubsync/esign-web-sdk 6.9.9 → 6.9.11

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

@@ -471,6 +471,17 @@ 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();
+    }
+    handleStartSigning() {
+        this.markEnvelopeStarted();
+        this.signingProgressMode = 'signing';
+        const fields = this.getSortedFillableFields();
+        const startField = fields.find(field => !this.isFieldActuallyFilled(field)) || fields[0];
+        if (startField) {
+            this.focusFieldElement(startField);
+        }
+        this.adoptingSignature = true;
     }
     async handleFieldChange(field, e) {
         if (!e.target) {
@@ -634,22 +645,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 +740,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 +766,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 +808,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 +828,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 +898,7 @@ export class VerdocsSign {
         });
         el.addEventListener('adopt', () => {
             this.focusedField = field.name;
+            this.updateAllFlags();
             this.adoptingSignature = true;
         });
         el.setAttribute('templateid', this.envelope.template_id);
@@ -1104,7 +1106,7 @@ export class VerdocsSign {
                 }
                 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("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", style: { display: 'none' } }, 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;
+                this.handleStartSigning();
             }, 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);
             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 => {