@hubsync/esign-web-sdk 6.9.7 → 6.9.10

package/dist/components/verdocs-sign.js

@@ -5,31 +5,31 @@ import { D as DocumentPageIcon, C as CheckCircleIcon } from './p-BDv5kBUR.js';
 import { V as VerdocsToast } from './p-D97GxsI-.js';
 import { S as SDKError } from './p-C1sRVZWv.js';
 import { S as Store } from './p-C7hFgM52.js';
-import { d as defineCustomElement$q } from './p-l9RpNccF.js';
+import { d as defineCustomElement$q } from './p-PzCAS0cD.js';
 import { d as defineCustomElement$p } from './p-C_yyK5xE.js';
 import { d as defineCustomElement$o } from './p-BvV9rOTP.js';
-import { d as defineCustomElement$n } from './p-DnknHA5F.js';
-import { d as defineCustomElement$m } from './p-Ba_mXs1J.js';
-import { d as defineCustomElement$l } from './p-uPFNuSZV.js';
-import { d as defineCustomElement$k } from './p-Cg2vZnQZ.js';
+import { d as defineCustomElement$n } from './p-BzspxU-o.js';
+import { d as defineCustomElement$m } from './p-92Hd0xeK.js';
+import { d as defineCustomElement$l } from './p-BZPlymMz.js';
+import { d as defineCustomElement$k } from './p-DQvEHGaL.js';
 import { d as defineCustomElement$j } from './p-CZmZll8j.js';
 import { d as defineCustomElement$i } from './p-VTS_VS83.js';
 import { d as defineCustomElement$h } from './p-BC5N3FIA.js';
 import { d as defineCustomElement$g } from './p-CnPaJH5T.js';
-import { d as defineCustomElement$f } from './p-B9-7bLf1.js';
+import { d as defineCustomElement$f } from './p-DwSp-Xp-.js';
 import { d as defineCustomElement$e } from './p-CNKACBaL.js';
-import { d as defineCustomElement$d } from './p-o9BQIoXw.js';
-import { d as defineCustomElement$c } from './p-wu7PgH6H.js';
-import { d as defineCustomElement$b } from './p-CvLZdSB1.js';
+import { d as defineCustomElement$d } from './p-D3NVBZRw.js';
+import { d as defineCustomElement$c } from './p-Ca3L0AUc.js';
+import { d as defineCustomElement$b } from './p-CkkN3QA_.js';
 import { d as defineCustomElement$a } from './p-DUYRis3A.js';
-import { d as defineCustomElement$9 } from './p-Dg5_Z8EB.js';
+import { d as defineCustomElement$9 } from './p-C_Xfg8nQ.js';
 import { d as defineCustomElement$8 } from './p-ByFUP3AN.js';
 import { d as defineCustomElement$7 } from './p-C1AtapGD.js';
-import { d as defineCustomElement$6 } from './p-DE8OCZyM.js';
+import { d as defineCustomElement$6 } from './p-DyG59pqj.js';
 import { d as defineCustomElement$5 } from './p-BaO4plGo.js';
 import { d as defineCustomElement$4 } from './p-lE3_dyeh.js';
 import { d as defineCustomElement$3 } from './p-CcIN7yIE.js';
-import { d as defineCustomElement$2 } from './p-FQV-PIF2.js';
+import { d as defineCustomElement$2 } from './p-oGuKYCp7.js';
 
 const verdocsSignCss = "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 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: 768px){verdocs-sign verdocs-sign-footer{padding:0 10px}verdocs-sign verdocs-sign-footer .buttons{gap:8px}verdocs-sign verdocs-sign-footer .buttons button{font-size:10px}verdocs-sign .signed-document-container{width:100%;margin-left:0}verdocs-sign .signed-document-container.zoom-normal,verdocs-sign .signed-document-container.zoom-zoom1,verdocs-sign .signed-document-container.zoom-zoom2{width:100%;margin-left:0}verdocs-sign>.document{padding-right:15px}verdocs-sign .verdocs-flag-instance{display:none !important}verdocs-sign .controls-toolbar .center-controls{display:none}verdocs-sign .controls-toolbar .right-controls .mobile-next-button{display:block;margin-right:10px}verdocs-sign .controls-toolbar .right-controls .minus,verdocs-sign .controls-toolbar .right-controls .plus{display:none}}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;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px}#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}#verdocs-sign-header .remaining-count{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:8px;color:#ffffff;font-size:13px;font-weight:400;white-space:nowrap}#verdocs-sign-header .remaining-count .check-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}#verdocs-sign-header .remaining-count .check-icon svg{width:16px;height:16px;fill:#55bc81}#verdocs-sign-header .remaining-count .separator{opacity:0.5;margin:0 2px}#verdocs-sign-header .remaining-count .review-optional{cursor:pointer;text-decoration:underline}#verdocs-sign-header .remaining-count .review-optional:hover{color:#54d68c}#verdocs-sign-header .icon-button{width:20px;height:32px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;-webkit-transition:background-color 0.2s;transition:background-color 0.2s}#verdocs-sign-header .icon-button svg path{fill:#ffffff}#verdocs-sign-header .icon-button:hover{background-color:rgba(255, 255, 255, 0.1)}#verdocs-sign-header .icon-button.disabled{opacity:0.35;pointer-events:none}#verdocs-sign-header .icon-button+.icon-button{margin-left:-6px}.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;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:10px;font-size:14px;display:none}.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:var(--verdocs-primary-color, #55bc81)}.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 .mobile-next-button{display:none}.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}";
 
@@ -436,10 +436,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         // logic to the fields.
         const field = this.getRecipientFields().find(field => field.name === fieldName);
         if (field === null || field === void 0 ? void 0 : field.readonly) {
-            return;
+            return Promise.resolve();
         }
         console.log('[SIGN] saveFieldChange', fieldName, { value, prepared });
-        updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, fieldName, value, prepared)
+        return updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, fieldName, value, prepared)
             .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
             .catch(e => {
             var _a, _b, _c, _d, _e, _f;
@@ -453,8 +453,27 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 VerdocsToast('Unable to save change, please try again later', { style: 'error' });
             }
             (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+            throw e;
         });
     }
+    focusNextFieldAfter(field) {
+        setTimeout(() => {
+            const fields = this.getSortedFillableFields();
+            const currentIndex = fields.findIndex(f => f.name === field.name);
+            if (currentIndex >= 0 && currentIndex < fields.length - 1) {
+                this.focusFieldElement(fields[currentIndex + 1]);
+            }
+        }, 100);
+    }
+    focusFieldElement(field) {
+        var _a;
+        const id = getFieldId(field);
+        const el = document.getElementById(id);
+        el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+        (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+        this.focusedField = field.name;
+        this.updateAllFlags();
+    }
     async handleFieldChange(field, e) {
         if (!e.target) {
             return;
@@ -492,14 +511,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 if (this.initialId) {
                     console.log('[SIGN] Reusing initial', this.initialId);
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
-                    return this.updateRecipientFieldValue(field.name, updateResult);
+                    this.updateRecipientFieldValue(field.name, updateResult);
+                    this.focusNextFieldAfter(field);
+                    return;
                 }
                 // If it's a UUID, it's an existing initial ID we can just reuse
                 if (typeof e.detail === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(e.detail)) {
                     console.log('[SIGN] Reusing initial', e.detail);
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
                     this.initialId = e.detail;
-                    return this.updateRecipientFieldValue(field.name, updateResult);
+                    this.updateRecipientFieldValue(field.name, updateResult);
+                    this.focusNextFieldAfter(field);
+                    return;
                 }
                 this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
@@ -509,6 +532,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                     this.updateRecipientFieldValue(field.name, updateResult);
                     this.initialId = newInitials.id;
                     this.showSpinner = false;
+                    this.focusNextFieldAfter(field);
                 })
                     .catch(e => {
                     console.log('Error updating initials', e);
@@ -532,14 +556,18 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 if (this.signatureId) {
                     console.log('[SIGN] Reusing signature', this.signatureId);
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
-                    return this.updateRecipientFieldValue(field.name, updateResult);
+                    this.updateRecipientFieldValue(field.name, updateResult);
+                    this.focusNextFieldAfter(field);
+                    return;
                 }
                 // If it's a UUID, it's an existing signature ID we can just reuse
                 if (typeof e.detail === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(e.detail)) {
                     console.log('[SIGN] Reusing signature', e.detail);
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
                     this.signatureId = e.detail;
-                    return this.updateRecipientFieldValue(field.name, updateResult);
+                    this.updateRecipientFieldValue(field.name, updateResult);
+                    this.focusNextFieldAfter(field);
+                    return;
                 }
                 this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
@@ -551,6 +579,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                     this.updateRecipientFieldValue(field.name, updateResult);
                     this.signatureId = newSignature.id;
                     this.showSpinner = false;
+                    this.focusNextFieldAfter(field);
                 })
                     .catch(e => {
                     console.warn('[SIGN] Error updating signature', e);
@@ -560,7 +589,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             case 'date':
                 const { formattedDate } = e.detail;
                 if (formattedDate) {
-                    return this.saveFieldChange(field.name, formattedDate, false);
+                    return this.saveFieldChange(field.name, formattedDate, false).then(() => this.focusNextFieldAfter(field));
                 }
                 break;
             case 'timestamp':
@@ -607,22 +636,14 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         const allUnfilled = this.getSortedFillableFields().filter(f => !this.isFieldActuallyFilled(f));
         const nextUnfilled = this.getNextFieldFromList(allUnfilled);
         if (nextUnfilled) {
-            const id = getFieldId(nextUnfilled);
-            const el = document.getElementById(id);
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
-            el === null || el === void 0 ? void 0 : el.focusField();
-            this.focusedField = nextUnfilled.name;
+            this.focusFieldElement(nextUnfilled);
         }
     }
     handleNextOptional() {
         const unfilledOptional = this.getSortedFillableFields().filter(f => !f.required && !this.isFieldActuallyFilled(f));
         const next = this.getNextFieldFromList(unfilledOptional);
         if (next) {
-            const id = getFieldId(next);
-            const el = document.getElementById(id);
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
-            el === null || el === void 0 ? void 0 : el.focusField();
-            this.focusedField = next.name;
+            this.focusFieldElement(next);
         }
     }
     getRecipientFields() {
@@ -710,16 +731,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         return fields[nextFocusedIndex];
     }
     handlePrev() {
-        var _a;
         const allFields = this.getSortedFillableFields();
         const focusedIndex = allFields.findIndex(f => f.name === this.focusedField);
         if (focusedIndex > 0) {
             const prevField = allFields[focusedIndex - 1];
-            const id = getFieldId(prevField);
-            const el = document.getElementById(id);
-            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
-            this.focusedField = prevField.name;
+            this.focusFieldElement(prevField);
         }
     }
     updateAllFlags() {
@@ -741,7 +757,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         // If the currently focused field is unfilled, we should point the flag to IT, not the next one.
         // getNextRequiredField() is designed for the "Next" button (skipping current), but the visual flag
         // should guide the user to the current task if it's incomplete.
-        if (focusedFieldObj && !isFieldFilled(focusedFieldObj, this.getRecipientFields())) {
+        if (focusedFieldObj && !this.isFieldActuallyFilled(focusedFieldObj)) {
             nextField = focusedFieldObj;
         }
         if (nextField && nextField.page === pageInfo.pageNumber && nextField.document_id === pageInfo.documentId) {
@@ -783,14 +799,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 label,
                 showSkip,
                 onSkip: () => {
+                    this.focusedField = nextField.name;
                     this.handleNext();
                 },
                 onClick: () => {
-                    var _a;
-                    const id = getFieldId(nextField);
-                    const el = document.getElementById(id);
-                    el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-                    (_a = el === null || el === void 0 ? void 0 : el.focusField) === null || _a === void 0 ? void 0 : _a.call(el);
+                    this.focusFieldElement(nextField);
                 },
             });
         }
@@ -806,6 +819,12 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             return;
         }
         el.setAttribute('attached', '1');
+        el.addEventListener('focusin', () => {
+            if (this.focusedField !== field.name) {
+                this.focusedField = field.name;
+                this.updateAllFlags();
+            }
+        });
         el.addEventListener('input', (e) => {
             // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
             // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
@@ -870,6 +889,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         });
         el.addEventListener('adopt', () => {
             this.focusedField = field.name;
+            this.updateAllFlags();
             this.adoptingSignature = true;
         });
         el.setAttribute('templateid', this.envelope.template_id);
@@ -970,7 +990,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             return (h(Host, { class: { agreed: false } }, h("div", { class: "fatal-error" }, h("div", { class: "message" }, h("div", { class: "header" }, "Delegated Signing Request"), h("p", null, "You have delegated signing to another recipient. You will not be able to sign this request again.")))));
         }
         if (this.isDone) {
-            return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: (e) => {
+            return (h(Host, { class: { agreed: this.agreed } }, h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, hideCloseButton: true, onNext: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.showDone = false;
@@ -1076,7 +1096,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                     return (h("span", { class: "remaining-count" }, remaining, " required field", remaining === 1 ? '' : 's', " left"));
                 }
                 return (h("span", { class: "remaining-count" }, h("span", { class: "check-icon", innerHTML: CheckCircleIcon }), "All required fields complete", optionalLeft > 0 && h("span", { class: "separator" }, "|"), optionalLeft > 0 && (h("span", { class: "review-optional", onClick: () => this.handleNextOptional() }, "Review ", optionalLeft, " optional"))));
-            })(), !this.finishLater && (h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() })), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls" }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("verdocs-signing-progress", { mode: this.signingProgressMode, focusedField: this.focusedField, fields: this.getSortedFillableFields(), recipientFields: this.getRecipientFields(), onStarted: () => {
+            })(), !this.finishLater && (h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel === 'Next' ? 'Next Required' : this.nextButtonLabel, disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() })), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.toolbarStyle === 'controls' && (h("div", { class: "controls-toolbar" }, h("div", { class: "left-controls" }, h("div", { class: "title" }, this.envelope.name)), h("div", { class: "center-controls", style: { display: 'none' } }, h("span", { class: "label" }, "Page"), h("div", { class: "select-wrapper" }, h("verdocs-select-input", { options: pageOptions, value: this.pageNumber.toString(), onInput: e => this.handlePageSelect(e) })), h("span", { class: "count" }, "of ", totalPages)), h("div", { class: "right-controls" }, h("verdocs-button", { class: "mobile-next-button", label: this.nextButtonLabel, size: "xsmall", disabled: !this.agreed || this.submitting, onClick: () => this.handleNext() }), h("div", { class: { 'icon-button': true, 'minus': true, 'disabled': this.zoomLevel === 'normal' }, innerHTML: ToolbarMinusIcon, onClick: () => this.handleZoomOut() }), h("div", { class: { 'icon-button': true, 'plus': true, 'disabled': this.zoomLevel === 'zoom2' }, innerHTML: ToolbarPlusIcon, onClick: () => this.handleZoomIn() }), h("div", { class: "icon-button download", innerHTML: ToolbarDownloadIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'download' } }) }), h("div", { class: "icon-button print", innerHTML: ToolbarPrintIcon, onClick: () => this.handleOptionSelected({ detail: { id: 'print' } }) })))), h("verdocs-signing-progress", { mode: this.signingProgressMode, focusedField: this.focusedField, fields: this.getSortedFillableFields(), recipientFields: this.getRecipientFields(), onStarted: () => {
                 this.adoptingSignature = true;
             }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }), h("div", { class: `document signed-document-container zoom-${this.zoomLevel}` }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
@@ -1096,10 +1116,10 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                         { name: 'controls', type: 'div' },
                     ] }));
             })));
-        })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => {
+        })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, hideCloseButton: true, onNext: () => {
                 this.isDone = true;
                 this.showFinishLater = false;
-            } })), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
+            } })), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, hideCloseButton: true, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
             } })), this.adoptingSignature && (h("verdocs-adopt-signature-dialog", { name: formatFullName(this.recipient), nameLocked: !!((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.name_locked), onNext: async (e) => {