@verdocs/web-sdk 6.5.0-beta.3 → 6.5.0-beta.7

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

@@ -2,16 +2,16 @@
 
 var index$1 = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
+var utils = require('./utils-LPO6l9nR.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-CIzsoGWH.js');
+var Datastore = require('./Datastore-B-sxWSPD.js');
 var Environment = require('./Environment-3vWt0C1Q.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 var Icons = require('./Icons-DTZAw6hQ.js');
 var index$2 = require('./index-CeUF44L9.js');
 var interact_min = require('./interact.min-BAnZvLwr.js');
-var utils = require('./utils-LPO6l9nR.js');
-require('./_commonjsHelpers-BJu3ubxk.js');
 require('./Types-RUyU-svM.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
 
 const verdocsPreviewCss = "@-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-preview{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
@@ -20,6 +20,7 @@ const VerdocsPreview = class {
         index$1.registerInstance(this, hostRef);
         this.sdkError = index$1.createEvent(this, "sdkError");
         this.templateListenerId = null;
+        this.renderedPages = {};
         /**
          * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
          */
@@ -70,11 +71,21 @@ const VerdocsPreview = class {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
-    handlePageRendered(_e) {
-        // const pageInfo = e.detail as IDocumentPageInfo;
-        // const fields = (this.template?.fields || []).filter(field => field.page === pageInfo.pageNumber);
+    handlePageRendered(e) {
+        var _a;
+        const pageInfo = e.detail;
+        this.renderedPages[`${pageInfo.documentId}:${pageInfo.pageNumber}`] = pageInfo;
+        const fields = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).filter(field => {
+            // Templates created on the new builder have document_id set, but old ones may not.
+            // If document_id is missing, we assume it's for the first document or use legacy logic.
+            // However, for this fix, we primarily care about multi-doc templates which should have IDs.
+            if (field['document_id']) {
+                return field['document_id'] === pageInfo.documentId && field.page === pageInfo.pageNumber;
+            }
+            return field.page === pageInfo.pageNumber;
+        });
         // console.log('[PREVIEW] Page rendered', pageInfo, fields);
-        // fields.forEach(field => renderDocumentField(field, pageInfo, {disabled: true, editable: false, draggable: false}));
+        fields.forEach(field => utils.renderDocumentField('template', field, pageInfo, { disabled: true, editable: false, draggable: false }));
     }
     render() {
         var _a;

package/dist/cjs/verdocs-quick-functions.cjs.entry.js

@@ -24,7 +24,7 @@ const VerdocsQuickFunctions = class {
         this.createDocument.emit();
     }
     render() {
-        return (index.h("div", { key: '5c679565e3c2eb0f89045166b54331dbf72a5172', class: "container" }, index.h("p", { key: 'd5aae49d044f43c5f5ba6d85d632db935e4543a4', class: "title" }, "Quick Create"), index.h("button", { key: '38c66d9f31eec00c3252e23b4113d1cebbd96b3d', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: '26b268b93f82b95f8cd22f8a831b84e2c1bd9534', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
+        return (index.h("div", { key: '4a4a02263a79c0f985c5f74ebc4e1168136b0d00', class: "container" }, index.h("p", { key: 'a4a9a9470c744b3d4d1d6f244a7308a7f77f854d', class: "title" }, "Quick Create"), index.h("button", { key: '9b8b7020896a49848ccc5263fe7e55506b491bc1', onClick: () => this.handleCreateTemplate(), innerHTML: TemplateIcon }, "Template"), index.h("button", { key: '6d8865f01371e991f161920df4e955ab0e6b3757', onClick: () => this.handleCreateDocument(), innerHTML: DocumentIcon }, "Document")));
     }
 };
 VerdocsQuickFunctions.style = verdocsQuickFunctionsCss;

package/dist/cjs/verdocs-search-tabs.cjs.entry.js

@@ -10,7 +10,7 @@ const VerdocsSearchTabs = class {
         this.selected = 'all';
     }
     render() {
-        return index.h("div", { key: 'd508d23511bbb83497117e9c31c0cfbbc38052ce' }, "\u00A0");
+        return index.h("div", { key: '4112d3cdbd2fd86f884d822275f2e8e80f9b1165' }, "\u00A0");
     }
 };
 VerdocsSearchTabs.style = verdocsSearchTabsCss;

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

@@ -5,11 +5,11 @@ var jsSdk = require('@verdocs/js-sdk');
 var utils = require('./utils-LPO6l9nR.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-CIzsoGWH.js');
+var Datastore = require('./Datastore-B-sxWSPD.js');
 require('./index-CeUF44L9.js');
 require('./Types-RUyU-svM.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 .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;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}@media (max-width: 600px){verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}}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) {
@@ -43,8 +43,6 @@ const VerdocsSign = class {
          * be externally controlled, use CSS display options to hide/show it instead.
          */
         this.headerTargetId = null;
-        // @State() roleNames: string[] = [];
-        // @State() sortedRecipients: IRecipient[] = [];
         this.recipient = null;
         this.hasSignature = false;
         this.nextButtonLabel = 'Start';
@@ -114,17 +112,19 @@ const VerdocsSign = class {
         }
     }
     processAuthResponse(response) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { envelope, recipient } = response;
+        // TODO: Temporary fix for multi-doc ordering until the server-side ordering is fixed
+        (_a = envelope.documents) === null || _a === void 0 ? void 0 : _a.sort((a, b) => (a.order !== b.order ? b.order - a.order : b.created_at.localeCompare(a.created_at)));
         const { auth_step } = recipient;
         this.recipient = recipient;
         this.envelope = envelope;
-        this.disclosures = ((_b = (_a = this.envelope) === null || _a === void 0 ? void 0 : _a.organization) === null || _b === void 0 ? void 0 : _b.disclaimer) || jsSdk.DEFAULT_DISCLOSURES;
+        this.disclosures = ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || jsSdk.DEFAULT_DISCLOSURES;
         this.authStep = auth_step;
         this.delegated = !!recipient.delegated_to;
         this.agreed = recipient.agreed;
-        this.signatureId = ((_d = (_c = response.signatures) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.id) || null;
-        this.initialId = ((_f = (_e = response.initials) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.id) || null;
+        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.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -154,7 +154,7 @@ const VerdocsSign = class {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_g = this.envelopeLoaded) === null || _g === void 0 ? void 0 : _g.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        (_h = this.envelopeLoaded) === null || _h === void 0 ? void 0 : _h.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     handleClickAgree() {
         this.submitting = true;
@@ -363,14 +363,14 @@ const VerdocsSign = class {
         jsSdk.sortFields(recipientFields);
         return recipientFields;
     }
-    async handleNext() {
+    handleNext() {
         var _a;
         if (this.nextSubmits) {
             try {
                 // Patches the date picker to be forcibly removed if still showing during submission
                 (_a = document.getElementById('air-datepicker-global-container')) === null || _a === void 0 ? void 0 : _a.remove();
                 this.submitting = true;
-                const result = await jsSdk.envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+                const result = jsSdk.envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
                 console.log('[SIGN] Submitted successfully', result);
                 // TODO: The "proper" way is generating an error from Stencil
                 //  NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which
@@ -398,29 +398,7 @@ const VerdocsSign = class {
             }
             return;
         }
-        // Find and focus the next incomplete field (that is fillable)
-        const emptyFields = this.getSortedFillableFields().filter(field => field.required && !jsSdk.isFieldFilled(field, this.getRecipientFields()));
-        jsSdk.sortFields(emptyFields);
-        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
-        let nextFocusedIndex = focusedIndex + 1;
-        if (nextFocusedIndex >= emptyFields.length) {
-            nextFocusedIndex = 0;
-        }
-        let nextRequiredField = emptyFields[nextFocusedIndex];
-        // console.log('Next field', nextRequiredField, emptyFields);
-        // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
-        let skips = 0;
-        if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
-            skips++;
-            nextFocusedIndex++;
-            if (nextFocusedIndex >= emptyFields.length) {
-                nextFocusedIndex = 0;
-            }
-            nextRequiredField = emptyFields[nextFocusedIndex];
-        }
-        if (skips >= emptyFields.length) {
-            nextRequiredField = null;
-        }
+        const nextRequiredField = this.getNextRequiredField();
         if (nextRequiredField) {
             const id = utils.getFieldId(nextRequiredField);
             const el = document.getElementById(id);
@@ -449,14 +427,39 @@ const VerdocsSign = class {
         this.updateAllFlags();
     }
     getNextRequiredField() {
+        // Find and focus the next incomplete field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !jsSdk.isFieldFilled(field, this.getRecipientFields()));
         jsSdk.sortFields(emptyFields);
-        const focusedIndex = emptyFields.findIndex(field => field.name === this.focusedField);
+        // If everything required is filled, try optional fields?
+        // The previous logic only looked for required fields for "Next".
+        // If we want "Fill or Skip", we should probably look for ANY unfilled field if we want to guide them to optionals too.
+        // BUT the requirement said: "just want to show a single flag for whatever the next field is the recipient needs to fill out."
+        // "Needs to fill out" strongly implies required.
+        // However, goal #4 says: "If it is optional, it should say 'Fill or Skip'".
+        // This implies we DO want to catch optional fields too.
+        if (emptyFields.length === 0) {
+            const allUnfilled = this.getSortedFillableFields().filter(field => !jsSdk.isFieldFilled(field, this.getRecipientFields()));
+            jsSdk.sortFields(allUnfilled);
+            if (allUnfilled.length > 0) {
+                // If we are here, there are no required fields left, but there are optional ones.
+                // We need to decide if "Next" should jump to them.
+                // Assuming yes based on "Fill or Skip".
+                // Let's use the same logic but with the optional list.
+                return this.getNextFieldFromList(allUnfilled);
+            }
+            return null;
+        }
+        return this.getNextFieldFromList(emptyFields);
+    }
+    getNextFieldFromList(fields) {
+        const focusedIndex = fields.findIndex(field => field.name === this.focusedField);
         let nextFocusedIndex = focusedIndex + 1;
-        if (nextFocusedIndex >= emptyFields.length) {
+        if (nextFocusedIndex >= fields.length) {
             nextFocusedIndex = 0;
         }
-        return { index: nextFocusedIndex, field: emptyFields[nextFocusedIndex] };
+        let nextRequiredField = fields[nextFocusedIndex];
+        // Note: isFieldFilled check above should handle 'initialed'/'signed'.
+        return nextRequiredField;
     }
     handlePrev() {
         var _a;
@@ -472,12 +475,11 @@ const VerdocsSign = class {
         }
     }
     updateAllFlags() {
-        Object.keys(this.renderedPages).forEach(pageNumber => {
-            this.updateFlagsForPage(Number(pageNumber));
+        Object.values(this.renderedPages).forEach(pageInfo => {
+            this.updateFlagsForPage(pageInfo);
         });
     }
-    updateFlagsForPage(pageNumber) {
-        const pageInfo = this.renderedPages[pageNumber];
+    updateFlagsForPage(pageInfo) {
         if (!pageInfo)
             return;
         const controlsDiv = document.getElementById(pageInfo.containerId + '-controls');
@@ -486,85 +488,125 @@ const VerdocsSign = class {
         // Remove existing flags
         const existingFlags = controlsDiv.querySelectorAll('.verdocs-flag-instance');
         existingFlags.forEach(el => el.remove());
+        const nextField = this.getNextRequiredField();
+        if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
+            const variant = 'fill';
+            let label = 'FILL';
+            let showSkip = false;
+            if (!nextField.required) {
+                label = 'FILL or SKIP';
+                showSkip = true; // Use the X to skip? Or just text? "Fill or Skip" implies maybe just text.
+                // But the previous implementation set `showSkip = true` if not required.
+            }
+            utils.renderDocumentFlag(pageInfo, nextField.y, nextField.height || utils.defaultHeight(nextField.type), {
+                variant,
+                label,
+                showSkip,
+                onSkip: () => {
+                    this.handleNext();
+                },
+                onClick: () => {
+                    var _a;
+                    const id = utils.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);
+                },
+            });
+        }
+        // LEGACY FLAG LOGIC - Commented out for now
+        /*
         // 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;
+          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 flagGroups: IEnvelopeField[][] = [];
         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 || utils.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]);
-            }
+          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: IEnvelopeField) => 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 && !jsSdk.isFieldFilled(f, this.getRecipientFields()));
-            if (!winner) {
-                winner = group.find(f => !f.required && !jsSdk.isFieldFilled(f, this.getRecipientFields()));
-            }
-            if (!winner) {
-                // Fallback to first (Top-most) if all filled
-                winner = group[0];
-            }
-            if (winner) {
-                const isFilled = jsSdk.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;
-                    }
-                }
-                utils.renderDocumentFlag(pageInfo, winner.y, winner.height || utils.defaultHeight(winner.type), {
-                    variant,
-                    label,
-                    showSkip,
-                    onSkip: () => {
-                        this.handleNext();
-                    },
-                    onClick: () => {
-                        var _a;
-                        const id = utils.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);
-                    },
-                });
+          // 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' | 'next' = 'fill';
+            let label = 'FILL';
+            let showSkip = false;
+    
+            if (isFilled) {
+              variant = 'next';
+              label = 'NEXT';
+            } else {
+              if (!winner.required) {
+                showSkip = true;
+              }
             }
+    
+            renderDocumentFlag(pageInfo, winner.y, winner.height || defaultHeight(winner.type), {
+              variant,
+              label,
+              showSkip,
+              onSkip: () => {
+                this.handleNext();
+              },
+              onClick: () => {
+                const id = getFieldId(winner);
+                const el = document.getElementById(id) as any;
+                el?.scrollIntoView({behavior: 'smooth', block: 'center'});
+                el?.focusField?.();
+              },
+            });
+          }
         });
+        */
     }
     attachFieldAttributes(pageInfo, field, el) {
         // We can get called multiple times as rendering completes and it's hard to avoid that
@@ -650,7 +692,7 @@ const VerdocsSign = class {
     }
     handlePageRendered(e) {
         const pageInfo = e.detail;
-        this.renderedPages[pageInfo.pageNumber] = pageInfo;
+        this.renderedPages[`${pageInfo.documentId}:${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.
@@ -691,7 +733,7 @@ const VerdocsSign = class {
             });
         });
         this.checkRecipientFields();
-        this.updateFlagsForPage(pageInfo.pageNumber);
+        this.updateFlagsForPage(pageInfo);
     }
     handleAuthenticateSigner(params) {
         console.log('[SIGN] Submitting authentication step', params);
@@ -752,7 +794,7 @@ const VerdocsSign = class {
                 } })));
         }
         if (this.declining) {
-            return (index.h("verdocs-ok-dialog", { heading: "Decline Signing Request", message: `If you decline to sign this request, you will not be able to sign again in the future. The envelope sender will be notified.`, buttonLabel: "OK", showCancel: true, onExit: () => (this.declining = false), onNext: () => {
+            return (index.h(index.Host, { class: "agreed" }, index.h("div", { class: "document", style: { paddingTop: '15px' } }, index.h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), index.h("verdocs-ok-dialog", { heading: "Decline Signing Request", message: `If you decline to sign this request, you will not be able to sign again in the future. The envelope sender will be notified.`, buttonLabel: "OK", showCancel: true, onExit: () => (this.declining = false), onNext: () => {
                     jsSdk.envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId)
                         .then(r => {
                         console.log('[SIGN] Decline result', r);
@@ -762,7 +804,7 @@ const VerdocsSign = class {
                         console.warn('[SIGN] Error declining signing session', e);
                         Toast.VerdocsToast('Unable to decline, please try again later', { style: 'error' });
                     });
-                } }));
+                } })));
         }
         if (!this.agreed) {
             return (index.h(index.Host, { class: "agreed" }, index.h("div", { class: "document", style: { paddingTop: '15px' } }, index.h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", style: { width: '612px', height: '792px', boxShadow: '0 0 10px 5px #0000000f', marginTop: '15px' }, alt: "Placeholder page" })), index.h("verdocs-disclosure-dialog", { disclosures: this.disclosures, delegator: this.recipient.delegator, onDelegate: () => (this.delegating = true), onDecline: () => (this.declining = true), onAccept: () => this.handleClickAgree() })));
@@ -827,9 +869,9 @@ const VerdocsSign = class {
                     this.adoptingSignature = true;
                     // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
-        })(), index.h("div", { class: "document", style: { width: '64%', marginLeft: '260px' } }, (this.envelope.documents || []).map(envelopeDocument => {
+        })(), index.h("div", { class: "document signed-document-container" }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = jsSdk.integerSequence(1, envelopeDocument.pages);
-            return (index.h(index.Fragment, null, pageNumbers.map(pageNumber => {
+            return (index.h(index.Fragment, null, this.envelope.documents.length > 1 && (index.h("div", { class: "document-separator" }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20 2H8C6.9 2 6 2.9 6 4V16C6 17.1 6.9 18 8 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H8V4H20V16ZM4 6H2V20C2 21.1 2.9 22 4 22H18V20H4V6ZM16 12V9C16 8.45 15.55 8 15 8H10V14H15C15.55 14 16 13.55 16 13V12ZM14.5 9.5L14.5001 12.5H11.5V9.5H14.5Z", fill: "currentColor" })), index.h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
                 const pageSize = ((_a = envelopeDocument.page_sizes) === null || _a === void 0 ? void 0 : _a[pageNumber]) || { width: 612, height: 792 };
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and