@verdocs/web-sdk 6.3.2 → 6.5.0-beta.2

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

@@ -1,13 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-BIRwgFLv.js';
 import { VerdocsEndpoint, DEFAULT_DISCLOSURES, startSigningSession, envelopeRecipientAgree, updateEnvelopeField, createSignature, createInitials, sortFields, envelopeRecipientSubmit, isFieldFilled, isFieldValid, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, verifySigner, delegateRecipient, envelopeRecipientDecline, askQuestion, integerSequence } from '@verdocs/js-sdk';
-import { a as saveAttachment, u as updateDocumentFieldValue, g as getFieldId, r as renderDocumentField } from './utils-PdWvXqe5.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, g as getFieldId, r as renderDocumentFlag, b as renderDocumentField, d as defaultHeight } from './utils-NHDsmnv8.js';
 import { V as VerdocsToast } from './Toast-CyvDgtoV.js';
 import { S as SDKError } from './errors-C1sRVZWv.js';
 import { S as Store } from './Datastore-DmsV595e.js';
 import './index-dzBXqXlK.js';
 import './Types-dqxNbm_b.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;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}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;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 .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{display:none}}#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}";
+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;position:relative;min-height:600px;-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 .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{display:none}}#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}";
 
 const VerdocsSign = class {
     constructor(hostRef) {
@@ -55,6 +55,7 @@ const VerdocsSign = class {
         this.submitted = false;
         this.isDone = false;
         this.showDone = false;
+        this.showAdoptSignature = false;
         this.showLoadError = false;
         this.finishLater = false;
         this.showFinishLater = false;
@@ -67,9 +68,11 @@ const VerdocsSign = class {
         this.declining = false;
         this.delegating = false;
         this.delegated = false;
+        this.startedSigning = false;
         this.kbaChoices = [];
         this.loading = true;
         this.envelope = null;
+        this.renderedPages = {};
     }
     async componentDidLoad() {
         var _a, _b, _c, _d, _e, _f;
@@ -381,7 +384,8 @@ const VerdocsSign = class {
         }
     }
     getRecipientFields() {
-        return this.envelope.fields.filter(field => field.role_name === this.recipient.role_name);
+        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() {
@@ -396,6 +400,126 @@ const VerdocsSign = class {
             this.nextButtonLabel = 'Next';
             this.nextSubmits = false;
         }
+        this.updateAllFlags();
+    }
+    getNextRequiredField() {
+        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
+        sortFields(emptyFields);
+        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
+        let nextFocusedIndex = focusedIndex + 1;
+        if (nextFocusedIndex >= emptyFields.length) {
+            nextFocusedIndex = 0;
+        }
+        return { index: nextFocusedIndex, field: emptyFields[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;
+        }
+    }
+    updateAllFlags() {
+        Object.keys(this.renderedPages).forEach(pageNumber => {
+            this.updateFlagsForPage(Number(pageNumber));
+        });
+    }
+    updateFlagsForPage(pageNumber) {
+        const pageInfo = this.renderedPages[pageNumber];
+        if (!pageInfo)
+            return;
+        const controlsDiv = document.getElementById(pageInfo.containerId + '-controls');
+        if (!controlsDiv)
+            return;
+        // Remove existing flags
+        const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
+        existingFlags.forEach(el => el.remove());
+        // Get fields for this page
+        const myFields = this.getRecipientFields().filter(f => f.document_id === pageInfo.documentId && f.page === pageNumber);
+        // Sort priority:
+        // 1. Vertical: Top to Bottom (Descending Y)
+        // 2. Horizontal: Left to Right (Ascending X) - for stability
+        myFields.sort((a, b) => {
+            if (Math.abs(b.y - a.y) > 1) {
+                return b.y - a.y;
+            }
+            return a.x - b.x;
+        });
+        // console.log('[SIGN] Sorted fields for page', pageNumber, myFields.map(f => `${f.name}:${f.y}`));
+        const flagGroups = [];
+        const FLAG_HEIGHT = 24;
+        myFields.forEach(field => {
+            if (flagGroups.length === 0) {
+                flagGroups.push([field]);
+                return;
+            }
+            const lastGroup = flagGroups[flagGroups.length - 1];
+            const lastField = lastGroup[lastGroup.length - 1];
+            // Compute rendered centers (pixels)
+            // Note: We need rescale logic here. Since we don't have the import, we'll replicate the simple math: val * scale
+            // assuming standard coordinate scaling.
+            const getCenterY = (f) => f.y * pageInfo.yScale + ((f.height || defaultHeight(f.type)) * pageInfo.yScale) / 2;
+            const lastCenter = getCenterY(lastField);
+            const currCenter = getCenterY(field);
+            const dist = Math.abs(lastCenter - currCenter);
+            // console.log(`[SIGN] Check overlap ${lastField.name} vs ${field.name}: dist=${dist} vs ${FLAG_HEIGHT}`, {lastCenter, currCenter});
+            // If centers are closer than Flag Height, they overlap visually.
+            if (dist < FLAG_HEIGHT) {
+                lastGroup.push(field);
+            }
+            else {
+                flagGroups.push([field]);
+            }
+        });
+        // console.log('[SIGN] Flag groups', flagGroups.map(g => g.map(f => f.name).join(',')));
+        flagGroups.forEach(group => {
+            // Priority: First Unfilled Required > First Unfilled Optional > First Next
+            let winner = group.find(f => f.required && !isFieldFilled(f, this.getRecipientFields()));
+            if (!winner) {
+                winner = group.find(f => !f.required && !isFieldFilled(f, this.getRecipientFields()));
+            }
+            if (!winner) {
+                // Fallback to first (Top-most) if all filled
+                winner = group[0];
+            }
+            if (winner) {
+                const isFilled = isFieldFilled(winner, this.getRecipientFields());
+                let variant = 'fill';
+                let label = 'FILL';
+                let showSkip = false;
+                if (isFilled) {
+                    variant = 'next';
+                    label = 'NEXT';
+                }
+                else {
+                    if (!winner.required) {
+                        showSkip = true;
+                    }
+                }
+                console.log('[SIGN] Render flag', winner.name, winner.y, winner.height);
+                renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
+                    variant,
+                    label,
+                    showSkip,
+                    onSkip: () => {
+                        this.handleNext();
+                    },
+                    onClick: () => {
+                        var _a;
+                        const id = getFieldId(winner);
+                        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);
+                    },
+                });
+            }
+        });
     }
     attachFieldAttributes(pageInfo, field, el) {
         // We can get called multiple times as rendering completes and it's hard to avoid that
@@ -475,6 +599,8 @@ const VerdocsSign = class {
     }
     handlePageRendered(e) {
         const pageInfo = e.detail;
+        this.renderedPages[pageInfo.pageNumber] = pageInfo;
+        console.log('Page rendered', pageInfo);
         // NOTE: We don't filter on pageNumber here because we need the position in the
         // entire list to set the tabIndex.
         const recipientFields = this.getSortedFillableFields();
@@ -514,6 +640,7 @@ const VerdocsSign = class {
             });
         });
         this.checkRecipientFields();
+        this.updateFlagsForPage(pageInfo.pageNumber);
     }
     handleAuthenticateSigner(params) {
         console.log('[SIGN] Submitting authentication step', params);
@@ -643,7 +770,13 @@ const VerdocsSign = class {
         invalidFields.length > 0
             ? console.log('[SIGN] Invalid fields remaining', invalidFields.map(field => field.name))
             : console.log('[SIGN] All field valid');
-        return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+        return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), (() => {
+            const focusedFieldObj = this.getSortedFillableFields().find(f => f.name === this.focusedField);
+            return (h("verdocs-signing-progress", { mode: this.nextSubmits ? 'completed' : this.startedSigning ? 'signing' : 'start', current: Math.max(1, this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1), total: this.getSortedFillableFields().length, fieldLabel: (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.label) || (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.name) || '', fieldCompleted: focusedFieldObj ? !!isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
+                    this.startedSigning = true;
+                    this.handleNext();
+                }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
+        })(), h("div", { class: "document", style: { width: '64%', marginLeft: '260px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
                 var _a;
@@ -660,9 +793,16 @@ const VerdocsSign = class {
                         { name: 'controls', type: 'div' },
                     ] }));
             })));
-        })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
+        })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => {
+                this.isDone = true;
+                this.showFinishLater = false;
+            } })), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
+            } })), this.showAdoptSignature && (h("verdocs-adopt-signature-dialog", { onNext: () => {
+                this.showAdoptSignature = false;
+            }, onExit: () => {
+                this.showAdoptSignature = false;
             } })), (this.submitting || this.showSpinner) && (h("verdocs-portal", null, h("div", { class: "spinner-overlay" }, h("verdocs-spinner", null)))), !this.loading && !this.isDone && (h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
                 askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => VerdocsToast('Your question has been sent.', { style: 'success' }))