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

package/dist/components/verdocs-sign.js

@@ -1,34 +1,34 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, F as Fragment } from './p-CUAGH_8P.js';
-import { VerdocsEndpoint, DEFAULT_DISCLOSURES, startSigningSession, envelopeRecipientAgree, updateEnvelopeField, createSignature, createInitials, sortFields, envelopeRecipientSubmit, isFieldFilled, isFieldValid, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, verifySigner, delegateRecipient, askQuestion, integerSequence, envelopeRecipientDecline } from '@verdocs/js-sdk';
+import { VerdocsEndpoint, DEFAULT_DISCLOSURES, startSigningSession, envelopeRecipientAgree, updateEnvelopeField, createSignature, createInitials, sortFields, envelopeRecipientSubmit, isFieldValid, isFieldFilled, 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 renderDocumentFlag, b as renderDocumentField, d as defaultHeight } from './p-B3TbYvlU.js';
 import { V as VerdocsToast } from './p-CyvDgtoV.js';
 import { S as SDKError } from './p-C1sRVZWv.js';
-import { S as Store } from './p-DmsV595e.js';
-import { d as defineCustomElement$o } from './p-DCXdeiPc.js';
+import { S as Store } from './p-bS8INhRF.js';
+import { d as defineCustomElement$o } from './p-Uz11lhZM.js';
 import { d as defineCustomElement$n } from './p-CfODrICH.js';
 import { d as defineCustomElement$m } from './p-mThpW9TM.js';
-import { d as defineCustomElement$l } from './p-COHr9dCI.js';
-import { d as defineCustomElement$k } from './p-C4QDSG_D.js';
-import { d as defineCustomElement$j } from './p-DWDOlfFM.js';
+import { d as defineCustomElement$l } from './p-eNrds2xy.js';
+import { d as defineCustomElement$k } from './p-CUP8Zd4b.js';
+import { d as defineCustomElement$j } from './p-cKQZefP3.js';
 import { d as defineCustomElement$i } from './p-DnQQamHR.js';
-import { d as defineCustomElement$h } from './p-BXwiCpEb.js';
+import { d as defineCustomElement$h } from './p-Cyd79545.js';
 import { d as defineCustomElement$g } from './p-CHLvWYEx.js';
 import { d as defineCustomElement$f } from './p-D9zjm5AL.js';
-import { d as defineCustomElement$e } from './p-C-NHtu_d.js';
+import { d as defineCustomElement$e } from './p-DchY14CS.js';
 import { d as defineCustomElement$d } from './p-ypE1cZc7.js';
-import { d as defineCustomElement$c } from './p-DpF1OjCe.js';
-import { d as defineCustomElement$b } from './p-ATwhsypY.js';
+import { d as defineCustomElement$c } from './p-f_4iQ-e-.js';
+import { d as defineCustomElement$b } from './p-BrNxQgY3.js';
 import { d as defineCustomElement$a } from './p-BHVk6zkr.js';
-import { d as defineCustomElement$9 } from './p-IF2BYQ14.js';
+import { d as defineCustomElement$9 } from './p-DEnke3CS.js';
 import { d as defineCustomElement$8 } from './p-TAy4DEie.js';
 import { d as defineCustomElement$7 } from './p-B1TD7C4M.js';
-import { d as defineCustomElement$6 } from './p-BJ1x02dk.js';
-import { d as defineCustomElement$5 } from './p-C25OmrD6.js';
+import { d as defineCustomElement$6 } from './p-CzwawR4S.js';
+import { d as defineCustomElement$5 } from './p-C5p7js7x.js';
 import { d as defineCustomElement$4 } from './p--A9ydKVE.js';
 import { d as defineCustomElement$3 } from './p-BqBR9AeQ.js';
-import { d as defineCustomElement$2 } from './p-C7xRBNX9.js';
+import { d as defineCustomElement$2 } from './p-CFR0KdKs.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$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends H {
     constructor(registerHost) {
@@ -65,8 +65,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
          * 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';
@@ -136,17 +134,19 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         }
     }
     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) || DEFAULT_DISCLOSURES;
+        this.disclosures = ((_c = (_b = this.envelope) === null || _b === void 0 ? void 0 : _b.organization) === null || _c === void 0 ? void 0 : _c.disclaimer) || 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;
@@ -176,7 +176,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             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;
@@ -385,14 +385,14 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         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 envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+                const result = 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
@@ -420,29 +420,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             }
             return;
         }
-        // Find and focus the next incomplete field (that is fillable)
-        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;
-        }
-        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 = getFieldId(nextRequiredField);
             const el = document.getElementById(id);
@@ -471,14 +449,39 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         this.updateAllFlags();
     }
     getNextRequiredField() {
+        // Find and focus the next incomplete field (that is fillable)
         const emptyFields = this.getSortedFillableFields().filter(field => field.required && !isFieldFilled(field, this.getRecipientFields()));
         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 => !isFieldFilled(field, this.getRecipientFields()));
+            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;
@@ -494,12 +497,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         }
     }
     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');
@@ -508,85 +510,125 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         // 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.
+            }
+            renderDocumentFlag(pageInfo, nextField.y, nextField.height || defaultHeight(nextField.type), {
+                variant,
+                label,
+                showSkip,
+                onSkip: () => {
+                    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);
+                },
+            });
+        }
+        // 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 || 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 && !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;
-                    }
-                }
-                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);
-                    },
-                });
+          // 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
@@ -672,7 +714,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
     }
     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.
@@ -713,7 +755,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             });
         });
         this.checkRecipientFields();
-        this.updateFlagsForPage(pageInfo.pageNumber);
+        this.updateFlagsForPage(pageInfo);
     }
     handleAuthenticateSigner(params) {
         console.log('[SIGN] Submitting authentication step', params);
@@ -774,7 +816,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 } })));
         }
         if (this.declining) {
-            return (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 (h(Host, { class: "agreed" }, h("div", { class: "document", style: { paddingTop: '15px' } }, 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" })), 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: () => {
                     envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId)
                         .then(r => {
                         console.log('[SIGN] Decline result', r);
@@ -784,7 +826,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                         console.warn('[SIGN] Error declining signing session', e);
                         VerdocsToast('Unable to decline, please try again later', { style: 'error' });
                     });
-                } }));
+                } })));
         }
         if (!this.agreed) {
             return (h(Host, { class: "agreed" }, h("div", { class: "document", style: { paddingTop: '15px' } }, 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" })), h("verdocs-disclosure-dialog", { disclosures: this.disclosures, delegator: this.recipient.delegator, onDelegate: () => (this.delegating = true), onDecline: () => (this.declining = true), onAccept: () => this.handleClickAgree() })));
@@ -849,9 +891,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                     this.adoptingSignature = 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 => {
+        })(), h("div", { class: "document signed-document-container" }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+            return (h(Fragment, null, this.envelope.documents.length > 1 && (h("div", { class: "document-separator" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, 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" })), 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