@verdocs/web-sdk 6.5.0-beta.14 → 6.5.0-beta.16

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-LPO6l9nR.js');
+var utils = require('./utils-BhOPnF8L.js');
 var Icons = require('./Icons-Dr02rZHd.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 var errors = require('./errors-D1XRvnet.js');
@@ -10,7 +10,7 @@ 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>.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}.controls-toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:54px;padding:0 12px 0 24px;background-color:#ffffff;border-bottom:1px solid #e0e0e0;-webkit-box-shadow:none;box-shadow:none;font-family:\"Inter\", sans-serif;color:#424242;z-index:1000}.controls-toolbar .left-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .left-controls .title{font-weight:500;font-size:16px;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls-toolbar .center-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:10px;font-size:14px}.controls-toolbar .center-controls .label{color:#000000;font-weight:300}.controls-toolbar .center-controls .select-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .center-controls .select-wrapper verdocs-select-input{margin:0}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-label{display:none}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element{background:transparent;border:1px solid #e0e0e0;height:32px;padding:2px 8px;min-width:60px;text-align:center;font-family:inherit;color:#424242}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element:focus{border-color:#2a63f6}.controls-toolbar .center-controls .count{color:#000000;font-weight:300}.controls-toolbar .right-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.controls-toolbar .right-controls .icon-button{width:32px;height:32px;display:-ms-flexbox;display:flex;color:#424242;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color 0.2s;transition:background-color 0.2s}.controls-toolbar .right-controls .icon-button:hover{background-color:#f5f5f5}.controls-toolbar .right-controls .icon-button svg{display:block;width:20px;height:20px}";
+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;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}verdocs-sign .signed-document-container.zoom-normal{width:64%;margin-left:260px}verdocs-sign .signed-document-container.zoom-zoom1{width:80%;margin-left:200px}verdocs-sign .signed-document-container.zoom-zoom2{width:100%;margin-left:150px}verdocs-sign .signed-document-container.zoom-zoom2 .verdocs-flag-instance{opacity:0;pointer-events:none}@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,.controls-toolbar,.verdocs-flag-instance,verdocs-signing-progress{display:none !important}verdocs-sign{min-height:auto;background-color:white}verdocs-sign>.document{overflow:visible;height:auto;display:block;padding:0;margin:0}verdocs-sign>.document .document-separator{display:none}verdocs-sign .signed-document-container{width:100%;margin:0}}#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}.controls-toolbar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:54px;padding:0 12px 0 24px;background-color:#ffffff;border-bottom:1px solid #e0e0e0;-webkit-box-shadow:none;box-shadow:none;font-family:\"Inter\", sans-serif;color:#424242;z-index:1000}.controls-toolbar .left-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .left-controls .title{font-weight:500;font-size:16px;color:#242424;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls-toolbar .center-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:10px;font-size:14px}.controls-toolbar .center-controls .label{color:#000000;font-weight:300}.controls-toolbar .center-controls .select-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.controls-toolbar .center-controls .select-wrapper verdocs-select-input{margin:0}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-label{display:none}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element{background:transparent;border:1px solid #e0e0e0;height:32px;padding:2px 8px;min-width:60px;text-align:center;font-family:inherit;color:#424242}.controls-toolbar .center-controls .select-wrapper verdocs-select-input .input-element:focus{border-color:#2a63f6}.controls-toolbar .center-controls .count{color:#000000;font-weight:300}.controls-toolbar .right-controls{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.controls-toolbar .right-controls .icon-button{width:32px;height:32px;display:-ms-flexbox;display:flex;color:#424242;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:background-color 0.2s;transition:background-color 0.2s}.controls-toolbar .right-controls .icon-button:hover{background-color:#f5f5f5}.controls-toolbar .right-controls .icon-button.disabled{opacity:0.3;pointer-events:none}.controls-toolbar .right-controls .icon-button svg{display:block;width:20px;height:20px}";
 
 const ToolbarMinusIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 8C11.2761 8 11.5 8.22386 11.5 8.5C11.5 8.77614 11.2761 9 11 9H6C5.72386 9 5.5 8.77614 5.5 8.5C5.5 8.22386 5.72386 8 6 8H11ZM14 8.5C14 5.46243 11.5376 3 8.5 3C5.46243 3 3 5.46243 3 8.5C3 11.5376 5.46243 14 8.5 14C9.83879 14 11.0659 13.5217 12.0196 12.7266L16.1464 16.8536L16.2157 16.9114C16.4106 17.0464 16.68 17.0271 16.8536 16.8536C17.0488 16.6583 17.0488 16.3417 16.8536 16.1464L12.7266 12.0196C13.5217 11.0659 14 9.83879 14 8.5ZM4 8.5C4 6.01472 6.01472 4 8.5 4C10.9853 4 13 6.01472 13 8.5C13 10.9853 10.9853 13 8.5 13C6.01472 13 4 10.9853 4 8.5Z" fill="#424242" /></svg>`;
 const ToolbarPlusIcon = `<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 8.5C11.5 8.22386 11.2761 8 11 8H9V6C9 5.72386 8.77614 5.5 8.5 5.5C8.22386 5.5 8 5.72386 8 6V8H6C5.72386 8 5.5 8.22386 5.5 8.5C5.5 8.77614 5.72386 9 6 9H8V11C8 11.2761 8.22386 11.5 8.5 11.5C8.77614 11.5 9 11.2761 9 11V9H11C11.2761 9 11.5 8.77614 11.5 8.5ZM8.5 3C11.5376 3 14 5.46243 14 8.5C14 9.83879 13.5217 11.0659 12.7266 12.0196L16.8536 16.1464C17.0488 16.3417 17.0488 16.6583 16.8536 16.8536C16.68 17.0271 16.4106 17.0464 16.2157 16.9114L16.1464 16.8536L12.0196 12.7266C11.0659 13.5217 9.83879 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.46243 5.46243 3 8.5 3ZM8.5 4C6.01472 4 4 6.01472 4 8.5C4 10.9853 6.01472 13 8.5 13C10.9853 13 13 10.9853 13 8.5C13 6.01472 10.9853 4 8.5 4Z" fill="#424242" /></svg>`;
@@ -106,8 +106,10 @@ const VerdocsSign = class {
         this.delegating = false;
         this.delegated = false;
         this.kbaChoices = [];
+        this.showDownloadDialog = false;
         this.loading = true;
         this.envelope = null;
+        this.zoomLevel = 'normal';
         this.renderedPages = {};
     }
     async componentDidLoad() {
@@ -151,6 +153,39 @@ const VerdocsSign = class {
             headerEl.remove();
             headerTarget.append(headerEl);
         }
+        this.setupIntersectionObserver();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    setupIntersectionObserver() {
+        // We only want to set this up once the elements exist
+        const pages = this.el.querySelectorAll('verdocs-envelope-document-page');
+        if (pages.length === 0)
+            return;
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        const container = this.el.querySelector('.signed-document-container');
+        const options = {
+            root: container,
+            rootMargin: '-40% 0px -40% 0px', // Helper to trigger when the middle 20% is visible
+            threshold: 0,
+        };
+        this.observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const pageId = entry.target.id; // page-1
+                    const pageNum = parseInt(pageId.replace('page-', ''), 10);
+                    if (!isNaN(pageNum) && this.pageNumber !== pageNum) {
+                        // console.log('[SIGN] Updated page number via scroll', pageNum);
+                        this.pageNumber = pageNum;
+                    }
+                }
+            });
+        }, options);
+        pages.forEach(page => this.observer.observe(page));
     }
     processAuthResponse(response) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -233,7 +268,7 @@ const VerdocsSign = class {
         }
     }
     async handleOptionSelected(e) {
-        var _a, _b, _c;
+        var _a, _b;
         switch (e.detail.id) {
             case 'later':
                 this.finishLater = true;
@@ -251,19 +286,26 @@ const VerdocsSign = class {
                 (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'printed' });
                 break;
             case 'download':
-                {
-                    const firstDoc = this.envelope.documents.find(doc => doc.type === 'attachment');
-                    if (firstDoc) {
-                        utils.saveAttachment(this.endpoint, this.envelope, firstDoc.id).catch(e => {
-                            Toast.VerdocsToast('Unable to download PDF, please try again later', { style: 'error' });
-                            console.log('[SIGN] Error downloading PDF', e);
-                        });
-                        (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
-                    }
-                }
+                this.showDownloadDialog = true;
                 break;
         }
     }
+    handleZoomIn() {
+        if (this.zoomLevel === 'normal') {
+            this.zoomLevel = 'zoom1';
+        }
+        else if (this.zoomLevel === 'zoom1') {
+            this.zoomLevel = 'zoom2';
+        }
+    }
+    handleZoomOut() {
+        if (this.zoomLevel === 'zoom1') {
+            this.zoomLevel = 'normal';
+        }
+        else if (this.zoomLevel === 'zoom2') {
+            this.zoomLevel = 'zoom1';
+        }
+    }
     updateRecipientFieldValue(fieldName, updateResult) {
         console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
         this.getRecipientFields().forEach(oldField => {
@@ -416,7 +458,7 @@ const VerdocsSign = class {
         }
     }
     getSortedFillableFields() {
-        const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
+        const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp' && !field.readonly);
         jsSdk.sortFields(recipientFields);
         return recipientFields;
     }
@@ -471,7 +513,10 @@ const VerdocsSign = class {
         // 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);
-        console.log('[SIGN] Pending fields', emptyFields.map(f => `${f.name} (${f.type}) req=${f.required}`));
+        // console.log(
+        //   '[SIGN] Pending fields',
+        //   emptyFields.map(f => `${f.name} (${f.type}) req=${f.required}`),
+        // );
         if (emptyFields.length === 0) {
             const allUnfilled = this.getSortedFillableFields().filter(field => !jsSdk.isFieldFilled(field, this.getRecipientFields()));
             jsSdk.sortFields(allUnfilled);
@@ -642,11 +687,11 @@ const VerdocsSign = class {
     handlePageRendered(e) {
         const pageInfo = e.detail;
         this.renderedPages[`${pageInfo.documentId}:${pageInfo.pageNumber}`] = pageInfo;
-        console.log('Page rendered', 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();
-        console.log('[SIGN] Rendering fields for page', pageInfo.pageNumber, recipientFields);
+        // console.log('[SIGN] Rendering fields for page', pageInfo.pageNumber, recipientFields);
         // First render the fields for the signer
         recipientFields
             .filter(field => field && field.document_id === pageInfo.documentId && field.page === pageInfo.pageNumber)
@@ -706,6 +751,7 @@ const VerdocsSign = class {
         });
     }
     render() {
+        console.log('[SIGN] Render cycle');
         if (this.showLoadError) {
             return (index.h(index.Host, null, index.h("verdocs-ok-dialog", { heading: "Unable to Start Signing", message: `Sorry, your invite code is invalid or has expired. Please check your email for an updated invitation, or contact the sender.`, buttonLabel: "OK", onNext: () => {
                     window.location.reload();
@@ -816,16 +862,17 @@ const VerdocsSign = class {
         const totalPages = this.envelope.documents.reduce((acc, doc) => acc + doc.pages, 0);
         const pageOptions = jsSdk.integerSequence(1, totalPages).map(p => ({ label: p.toString(), value: p.toString() }));
         let globalPageCounter = 0;
-        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (index.h("div", { class: "controls-toolbar" }, index.h("div", { class: "left-controls" }, index.h("div", { class: "title" }, this.envelope.name)), index.h("div", { class: "center-controls" }, index.h("span", { class: "label" }, "Page"), index.h("div", { class: "select-wrapper" }, index.h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), index.h("span", { class: "count" }, "of ", totalPages)), index.h("div", { class: "right-controls" }, index.h("div", { class: "icon-button minus", innerHTML: ToolbarMinusIcon }), index.h("div", { class: "icon-button plus", innerHTML: ToolbarPlusIcon }), index.h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), index.h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), (() => {
+        return (index.h(index.Host, null, this.toolbarStyle === 'menu' && (index.h("div", { id: "verdocs-sign-header" }, index.h("div", { class: "inner" }, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, this.envelope.name), index.h("div", { style: { flex: '1' } }), !this.finishLater && index.h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (index.h("div", { class: "controls-toolbar" }, index.h("div", { class: "left-controls" }, index.h("div", { class: "title" }, this.envelope.name)), index.h("div", { class: "center-controls" }, index.h("span", { class: "label" }, "Page"), index.h("div", { class: "select-wrapper" }, index.h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), index.h("span", { class: "count" }, "of ", totalPages)), index.h("div", { class: "right-controls" }, index.h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), index.h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), index.h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), index.h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), (() => {
             // Dependencies: focusedField, fieldUpdateCounter (to force re-calc)
             // console.log('[SIGN] Render progress', this.focusedField, this.fieldUpdateCounter);
             // Calculate detailed progress
             const allFields = this.getSortedFillableFields();
             const recipientFields = this.getRecipientFields();
+            const isFilled = (f) => jsSdk.isFieldFilled(f, recipientFields) && (f.type !== 'dropdown' || !!f.value);
             const requiredFields = allFields.filter(f => f.required);
-            const requiredRemaining = requiredFields.filter(f => !jsSdk.isFieldFilled(f, recipientFields)).length;
+            const requiredRemaining = requiredFields.filter(f => !isFilled(f)).length;
             const optionalFields = allFields.filter(f => !f.required);
-            const optionalRemaining = optionalFields.filter(f => !jsSdk.isFieldFilled(f, recipientFields)).length;
+            const optionalRemaining = optionalFields.filter(f => !isFilled(f)).length;
             const progress = {
                 required: {
                     remaining: requiredRemaining,
@@ -840,20 +887,31 @@ const VerdocsSign = class {
             const currentIndex = this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1;
             const totalFields = this.getSortedFillableFields().length;
             const remainingFields = this.getSortedFillableFields()
-                .filter(f => f.required && !jsSdk.isFieldFilled(f, this.getRecipientFields()))
+                .filter(f => f.required && !isFilled(f))
                 .map(f => ({ name: f.name, type: f.type, required: f.required }));
+            console.log('[SIGN] Progress Debug:', {
+                allFields: allFields.length,
+                requiredFields: requiredFields.length,
+                requiredRemaining,
+                optionalFields: optionalFields.length,
+                optionalRemaining,
+                filledFields: recipientFields.filter(f => isFilled(f)).map(f => ({ name: f.name, type: f.type, val: f.value })),
+            });
             let mode = 'start';
+            // We only consider the user to have started "signing" if they have filled out at least one *fillable* field.
+            // Readonly fields do not count.
+            const anyFieldFilled = requiredRemaining < requiredFields.length || optionalRemaining < optionalFields.length;
             if (this.nextSubmits) {
                 mode = 'completed';
             }
-            else if (this.signatureId || this.initialId) {
+            else if (anyFieldFilled) {
                 mode = 'signing';
             }
-            return (index.h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, remainingFields: remainingFields, progress: progress, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
+            return (index.h("verdocs-signing-progress", { mode: mode, current: Math.max(1, currentIndex), total: totalFields, remainingFields: remainingFields, progress: progress, fieldLabel: getFieldLabel(focusedFieldObj), fieldCompleted: focusedFieldObj ? !!isFilled(focusedFieldObj) : false, onStarted: () => {
                     this.adoptingSignature = true;
                     // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
-        })(), index.h("div", { class: "document signed-document-container" }, (this.envelope.documents || []).map(envelopeDocument => {
+        })(), index.h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = jsSdk.integerSequence(1, envelopeDocument.pages);
             return (index.h(index.Fragment, null, this.envelope.documents.length > 1 && (index.h("div", { class: "document-separator" }, index.h("div", { innerHTML: Icons.DocumentPageIcon }), index.h("span", null, envelopeDocument.name))), pageNumbers.map(pageNumber => {
                 var _a;
@@ -907,7 +965,63 @@ const VerdocsSign = class {
                         this.checkRecipientFields();
                     }
                 }
-            }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null)))), !this.loading && !this.isDone && (index.h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
+            }, onExit: () => (this.adoptingSignature = false) })), (this.submitting || this.showSpinner) && (index.h("verdocs-portal", null, index.h("div", { class: "spinner-overlay" }, index.h("verdocs-spinner", null)))), this.showDownloadDialog && (index.h("verdocs-download-dialog", { onExit: () => (this.showDownloadDialog = false), onNext: async (e) => {
+                this.showDownloadDialog = false;
+                const { action } = e.detail;
+                console.log('[SIGN] Download action selected:', action);
+                try {
+                    if (action === 'document') {
+                        // Download main document(s)
+                        const attachments = this.envelope.documents.filter(d => d.type === 'attachment');
+                        if (attachments.length === 1) {
+                            const url = await jsSdk.getEnvelopeDocumentDownloadLink(this.endpoint, attachments[0].id);
+                            window.open(url, '_blank');
+                        }
+                        else {
+                            // If multiple docs, we might want to zip them or just download the first one for now as per previous logic?
+                            // The requirement says "Document", implies the PDF.
+                            // Users might have multiple files though.
+                            // For now let's just do the zip of everything if multiple? Or loop?
+                            // Let's stick to the previous behavior "firstDoc" strategy if we can't do better,
+                            // or use getEnvelopeDocumentDownloadLink for each?
+                            // Best user experience for "Document" if multiple is probably just the first one or a zip of docs.
+                            // But "All Files" covers zip.
+                            // Let's assume the main document is the primary intent.
+                            const firstDoc = attachments[0];
+                            if (firstDoc) {
+                                const url = await jsSdk.getEnvelopeDocumentDownloadLink(this.endpoint, firstDoc.id);
+                                window.open(url, '_blank');
+                            }
+                        }
+                    }
+                    else if (action === 'certificate') {
+                        const cert = this.envelope.documents.find(d => d.type === 'certificate');
+                        if (cert) {
+                            const url = await jsSdk.getEnvelopeDocumentDownloadLink(this.endpoint, cert.id);
+                            window.open(url, '_blank');
+                        }
+                        else {
+                            Toast.VerdocsToast('Certificate not yet available.', { style: 'info' });
+                        }
+                    }
+                    else if (action === 'zip') {
+                        // The helper in verdocs-view used getEnvelopesZip with an array
+                        const blob = await jsSdk.getEnvelopesZip(this.endpoint, [this.envelopeId]);
+                        const url = window.URL.createObjectURL(blob.data);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `${this.envelope.name}.zip`;
+                        document.body.appendChild(a);
+                        a.click();
+                        a.remove();
+                        window.URL.revokeObjectURL(url);
+                    }
+                }
+                catch (err) {
+                    console.error('Download error', err);
+                    Toast.VerdocsToast('Unable to complete download request.', { style: 'error' });
+                }
+            } })), !this.loading && !this.isDone && (index.h("verdocs-sign-footer", { endpoint: this.endpoint, envelopeId: this.envelopeId, isDone: this.isDone, onAskQuestion: (e) => {
                 jsSdk.askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => Toast.VerdocsToast('Your question has been sent.', { style: 'success' }))
                     .catch(e => {