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

package/dist/cjs/verdocs-adopt-signature-dialog_7.cjs.entry.js

@@ -161,10 +161,7 @@ const VerdocsAdoptSignatureDialog = class {
     }
     componentWillLoad() {
         this.enteredName = this.name;
-        this.enteredInitials = this.name
-            .split(' ')
-            .map(word => word.charAt(0).toUpperCase())
-            .join('');
+        this.computeEnteredInitials(this.name);
         const ds = new FontFace('Dancing Script', 'url(https://fonts.gstatic.com/s/dancingscript/v19/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup6hNX6plRP.woff)');
         ds.load().then(font => {
             document.fonts.add(font);
@@ -204,7 +201,7 @@ const VerdocsAdoptSignatureDialog = class {
             fontSize -= 2;
             sigContext.font = `${fontSize}px Dancing Script`;
             metrics = sigContext.measureText(this.enteredName);
-        } while (metrics.width > sigCanvasWidth - 32 && metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent > sigCanvasHeight - 24);
+        } while (metrics.width > sigCanvasWidth - 24 || metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 24 > sigCanvasHeight);
         sigContext.textAlign = 'center';
         sigContext.textBaseline = 'middle';
         sigContext.font = `${fontSize}px Dancing Script`;
@@ -224,7 +221,7 @@ const VerdocsAdoptSignatureDialog = class {
             fontSize -= 2;
             context.font = `${fontSize}px Dancing Script`;
             metrics = context.measureText(this.enteredInitials);
-        } while (metrics.width > initialsCanvasWidth - 32 && metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent > initialsCanvasHeight - 24);
+        } while (metrics.width > initialsCanvasWidth - 24 || metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + 24 > initialsCanvasHeight);
         context.textAlign = 'center';
         context.textBaseline = 'middle';
         context.font = `${fontSize}px Dancing Script`;
@@ -298,10 +295,14 @@ const VerdocsAdoptSignatureDialog = class {
     }
     handleNameChange(e) {
         this.enteredName = e.target.value;
-        this.enteredInitials = e.target.value
+        this.computeEnteredInitials(e.target.value);
+    }
+    computeEnteredInitials(name) {
+        const nameComponents = name
+            .trim()
             .split(' ')
-            .map(word => word.charAt(0).toUpperCase())
-            .join('');
+            .filter(part => part.length > 0);
+        this.enteredInitials = nameComponents.length > 1 ? nameComponents.map(word => word.charAt(0).toUpperCase()).join('') : nameComponents[0].toUpperCase();
     }
     handleCancel(e) {
         e.stopPropagation();
@@ -440,7 +441,7 @@ const VerdocsAdoptSignatureDialog = class {
         };
     }
     render() {
-        return (index.h("verdocs-dialog", { key: 'f2cee2f94f64c69a4472b5aa5bd15194d9a6978a' }, index.h("div", { key: '8b9c40b0dcaaab0dfb45aab6d0304a78f4c1e959', slot: "heading", class: "heading" }, "Adopt Your Signature"), index.h("div", { key: '2a7f79b3f11b92f3e3f28990acdfcba2f708a87d', slot: "content", class: "content" }, index.h("div", { key: '7b2ec6bc9f1610169af50799ed7075c25dc3a869', style: { fontWeight: '300', color: '#242424', fontSize: '13px' } }, "Confirm your name, initials, and signature."), index.h("div", { key: '1a16357eecf76cdb198af28e93dd3ae4e5b67a34', class: { type: true, active: this.mode === 'type' } }, index.h("verdocs-text-input", { key: 'e7839c01da21aed0c1e9fff1d5c7a5c4c9061b01', label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() })), index.h("div", { key: 'cda2dd5e3fa360dbd95b68e736d83bc6c1c0f984', style: { fontWeight: '400', color: '#242424', fontSize: '13px' } }, "Select a signature style"), index.h("div", { key: '5f585dcfda7ba1d9faa32230c2537106033f43ae', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, index.h("verdocs-radio-button", { key: '4b8355294d55d2f6756b59612f82fd61dd73c8ab', checked: this.mode === 'type', value: "type", name: "mode", onClick: () => (this.mode = 'type') }), index.h("label", { key: '3568c15533e2bcc638102e6a7af2e99f637e53ba' }, "Typed with a keyboard")), index.h("div", { key: 'a228649422e16268ab7276c33a9155640b34c0bd', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, index.h("verdocs-radio-button", { key: '622475863bddb2ffbf492c0f692b3cee1c99b3f8', checked: this.mode === 'draw', value: "draw", name: "mode", onClick: () => (this.mode = 'draw') }), index.h("label", { key: 'b875f51c08157205a4c5b5c58101560fda054764' }, "Drawn with touch, mouse, or stylus")), index.h("div", { key: '7c1f203aee570e6b649d649625c22b13dca3ddf2', class: "draw-actions" }, index.h("button", { key: 'e0241a06c87912d9c21a2a95b16c3b653b97cc1b', class: "clear-button", onClick: e => this.handleClearDrawing(e), disabled: !this.hasDrawnSignature }, "Clear")), index.h("div", { key: 'eab1ce8340712dfe289d3458040c4b9ed57c0ee8', style: { fontSize: '13px', fontWeight: '400', marginTop: '8px' } }, "Signature Preview"), index.h("canvas", { key: '3c49dfc917a9665a9623078d4dc92195125db602', ref: el => (this.signatureElement = el), width: "300", height: "79", onPointerDown: this.handleSigPointerDown, onPointerMove: this.handleSigPointerMove, onPointerUp: this.handleSigPointerUp, onPointerCancel: this.handleSigPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } }), index.h("div", { key: '853673011f0f7d3ab7b9b83fe0150e238113121a', style: { fontSize: '13px', fontWeight: '400', marginTop: '8px' } }, "Initials Preview"), index.h("canvas", { key: 'da5734e05959680323d4939218128bf2131a57df', ref: el => (this.initialsElement = el), width: "300", height: "79", onPointerDown: this.handleInitialsPointerDown, onPointerMove: this.handleInitialsPointerMove, onPointerUp: this.handleInitialsPointerUp, onPointerCancel: this.handleInitialsPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } }), index.h("div", { key: 'e717761cd09caa1188b2788155571564811e0f15', class: "disclaimer" }, "By clicking \u00ABAdopt Signature\u00BB, I agree that the signature and initials above will be the electronic representation of my signature and initials for all purposes when I use them to sign documents. Applying them to a document is legally equivalent to signing with a pen on paper.")), index.h("div", { key: '7c8f9ffb84f847e6e5d8537bbd01228d1f708ec1', class: "footer", slot: "footer" }, index.h("div", { key: 'b20eb672d5cf8b116025dd5d4c70a2965f404e8e', class: "buttons" }, index.h("button", { key: '49d9d118ff485a65bf165bd859cd2c43e58a7d12', class: "cancel", onClick: e => this.handleCancel(e) }, "Cancel"), index.h("button", { key: '7053f2fd53893c25fbf0678cd59862a20dc88e44', class: "proceed", onClick: e => this.handleAdopt(e), disabled: this.isAdoptButtonDisabled() }, "Adopt & Sign")))));
+        return (index.h("verdocs-dialog", { key: 'cd7e4e12870c3e5c6e3ecae99ca18a2e517cc5d7' }, index.h("div", { key: 'e0361f91ecde016a44a9df467989e59b9c7dac78', slot: "heading", class: "heading" }, "Adopt Your Signature"), index.h("div", { key: '871467dcc778eea921fc9f7c43a6f4f00020a716', slot: "content", class: "content" }, index.h("div", { key: 'bfa75ff9630b434b3498dd4b5858a48f4c5d34b1', style: { fontWeight: '300', color: '#242424', fontSize: '13px' } }, "Confirm your name, initials, and signature."), index.h("div", { key: '1c35c5deb3062f9d15c12601fcfdf1b2c141cf40', class: { type: true, active: this.mode === 'type' } }, index.h("verdocs-text-input", { key: '52ab06b5039e3b01bb778380282a2f9209ce2c09', label: "Full Name", value: this.enteredName, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() })), index.h("div", { key: '2ca4dd8dbf1a15f37fc1d746d660601ba0e7744a', style: { fontWeight: '400', color: '#242424', fontSize: '13px' } }, "Select a signature style"), index.h("div", { key: '028510ba0e54e67d8c0e0580b2c39ad741be66b3', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, index.h("verdocs-radio-button", { key: 'aae39fd918af8f4d3c6938507d8acfca0a50cad7', checked: this.mode === 'type', value: "type", name: "mode", onClick: () => (this.mode = 'type') }), index.h("label", { key: '3ef1416e35982cb0741aba43f531373235688cb8' }, "Typed with a keyboard")), index.h("div", { key: '1b858ad50908df8f52cd46257fa62d5f6238b46a', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, index.h("verdocs-radio-button", { key: 'b28fd02ddba1e50d95e71daebadcbe4692cc07bf', checked: this.mode === 'draw', value: "draw", name: "mode", onClick: () => (this.mode = 'draw') }), index.h("label", { key: 'f1ec506edace3f839be3e60a833a7078388511c6' }, "Drawn with touch, mouse, or stylus")), index.h("div", { key: '7ba7b888718f4d36cb6c3dff4766c7d4a4aa8588', class: "draw-actions" }, index.h("button", { key: '5aa570c6bd0a7919df717f57cd126ce693901614', class: "clear-button", onClick: e => this.handleClearDrawing(e), disabled: !this.hasDrawnSignature }, "Clear")), index.h("div", { key: 'da02332f59f07b62abd19d424ee2026594614681', style: { fontSize: '13px', fontWeight: '400', marginTop: '8px' } }, "Signature Preview"), index.h("canvas", { key: 'f06947bf19e21ca9d55242616ff6203f1511f035', ref: el => (this.signatureElement = el), width: "300", height: "79", onPointerDown: this.handleSigPointerDown, onPointerMove: this.handleSigPointerMove, onPointerUp: this.handleSigPointerUp, onPointerCancel: this.handleSigPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } }), index.h("div", { key: 'e4253e4a1b0ae0ae2dbe12cbf5044ea19a55ffd1', style: { fontSize: '13px', fontWeight: '400', marginTop: '8px' } }, "Initials Preview"), index.h("canvas", { key: 'b5ffe09caca8e36d3b7645baaa9c49ac534ae2ab', ref: el => (this.initialsElement = el), width: "300", height: "79", onPointerDown: this.handleInitialsPointerDown, onPointerMove: this.handleInitialsPointerMove, onPointerUp: this.handleInitialsPointerUp, onPointerCancel: this.handleInitialsPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } }), index.h("div", { key: '2794cb9a0e09956c421436bf7d07b7ff5b05b877', class: "disclaimer" }, "By clicking \u00ABAdopt Signature\u00BB, I agree that the signature and initials above will be the electronic representation of my signature and initials for all purposes when I use them to sign documents. Applying them to a document is legally equivalent to signing with a pen on paper.")), index.h("div", { key: 'c162a5d0fb4e827097d386be1598f5687a1f0f9d', class: "footer", slot: "footer" }, index.h("div", { key: '784cabdfd41901b0082ed995f8da6f9d929d5bd6', class: "buttons" }, index.h("button", { key: 'e7a853d282ca868c6ad8f16c32a5295b91ad0027', class: "cancel", onClick: e => this.handleCancel(e) }, "Cancel"), index.h("button", { key: '5db215d9fbca44bd0b8b864cb34b9e9cb89e7cef', class: "proceed", onClick: e => this.handleAdopt(e), disabled: this.isAdoptButtonDisabled() }, "Adopt & Sign")))));
     }
 };
 VerdocsAdoptSignatureDialog.style = verdocsAdoptSignatureDialogCss;

package/dist/cjs/verdocs-contact-picker.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
 var _commonjsHelpers = require('./_commonjsHelpers-BJu3ubxk.js');
 var Environment = require('./Environment-3vWt0C1Q.js');
-var utils = require('./utils-4rWXSNpE.js');
+var utils = require('./utils-LPO6l9nR.js');
 require('./index-CeUF44L9.js');
 require('./Types-RUyU-svM.js');
 

package/dist/cjs/verdocs-envelope-document-page_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-4rWXSNpE.js');
+var utils = require('./utils-LPO6l9nR.js');
 var errors = require('./errors-D1XRvnet.js');
 var Datastore = require('./Datastore-CIzsoGWH.js');
 require('./index-CeUF44L9.js');

package/dist/cjs/verdocs-envelopes-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-4rWXSNpE.js');
+var utils = require('./utils-LPO6l9nR.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 var errors = require('./errors-D1XRvnet.js');
 require('./index-CeUF44L9.js');

package/dist/cjs/verdocs-field-attachment_13.cjs.entry.js

@@ -653,7 +653,25 @@ const VerdocsFieldInitial = class {
         if (done) {
             return index.h(index.Host, { class: { done } }, value && index.h("img", { src: value, alt: "Initial" }));
         }
-        return (index.h(index.Host, { class: { required, disabled, done, focused, filled: !!base64, [signerClass]: true } }, editable && index.h("div", { class: "edge-right" }), editable && index.h("div", { class: "edge-left" }), editable && index.h("div", { class: "edge-top" }), editable && index.h("div", { class: "edge-bottom" }), label && index.h("label", null, label), base64 ? index.h("img", { src: base64, alt: "Initial" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: Icons.SettingsIcon, onClick: (e) => {
+        return (index.h(index.Host, { class: { required, disabled, done, focused, filled: !!base64, [signerClass]: true } }, editable && index.h("div", { class: "edge-right" }), editable && index.h("div", { class: "edge-left" }), editable && index.h("div", { class: "edge-top" }), editable && index.h("div", { class: "edge-bottom" }), label && index.h("label", null, label), base64 ? (index.h("img", { src: base64, alt: "Initial", onClick: () => {
+                var _a;
+                if (disabled)
+                    return;
+                console.log('[INITIAL] Clearing initials');
+                (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(null);
+            } })) : (index.h("button", { onClick: () => {
+                var _a;
+                if (disabled)
+                    return;
+                // If we already have an initial ID, use it immediately
+                if (this.initialid) {
+                    console.log('[INITIAL] Reusing existing initials', this.initialid);
+                    (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(this.initialid);
+                }
+                else {
+                    this.handleShow();
+                }
+            } }, "Initial")), editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -956,7 +974,26 @@ const VerdocsFieldSignature = class {
         if (done) {
             return index.h(index.Host, { class: { done } }, value && index.h("img", { src: base64, alt: "" }));
         }
-        return (index.h(index.Host, { class: { required, disabled, done, focused, filled: !!base64, [signerClass]: true } }, editable && index.h("div", { class: "edge-right" }), editable && index.h("div", { class: "edge-left" }), editable && index.h("div", { class: "edge-top" }), editable && index.h("div", { class: "edge-bottom" }), label && index.h("label", null, label), base64 ? index.h("img", { src: base64, alt: "" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: Icons.SettingsIcon, onClick: (e) => {
+        console.log('sid', this.signatureid);
+        return (index.h(index.Host, { class: { required, disabled, done, focused, filled: !!base64, [signerClass]: true } }, editable && index.h("div", { class: "edge-right" }), editable && index.h("div", { class: "edge-left" }), editable && index.h("div", { class: "edge-top" }), editable && index.h("div", { class: "edge-bottom" }), label && index.h("label", null, label), base64 ? (index.h("img", { src: base64, alt: "", onClick: () => {
+                var _a;
+                if (disabled)
+                    return;
+                console.log('[SIGNATURE] Clearing signature');
+                (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(null);
+            } })) : (index.h("button", { onClick: () => {
+                var _a;
+                if (disabled)
+                    return;
+                // If we already have a signature ID, use it immediately
+                if (this.signatureid) {
+                    console.log('[SIGNATURE] Reusing existing signature', this.signatureid);
+                    (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(this.signatureid);
+                }
+                else {
+                    this.handleShow();
+                }
+            } }, "Signature")), editable && (index.h(index.Fragment, null, index.h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-4rWXSNpE.js');
+var utils = require('./utils-LPO6l9nR.js');
 var popper = require('./popper-Dmp8OTYh.js');
 require('./index-CeUF44L9.js');
 require('./Types-RUyU-svM.js');

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

@@ -9,7 +9,7 @@ var Toast = require('./Toast-CFBM1R4z.js');
 var Icons = require('./Icons-DTZAw6hQ.js');
 var index$2 = require('./index-CeUF44L9.js');
 var interact_min = require('./interact.min-BAnZvLwr.js');
-var utils = require('./utils-4rWXSNpE.js');
+var utils = require('./utils-LPO6l9nR.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./Types-RUyU-svM.js');
 

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

@@ -2,14 +2,14 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-4rWXSNpE.js');
+var utils = require('./utils-LPO6l9nR.js');
 var Toast = require('./Toast-CFBM1R4z.js');
 var errors = require('./errors-D1XRvnet.js');
 var Datastore = require('./Datastore-CIzsoGWH.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;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#f5f5f5;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-sign verdocs-button>button.standard{background:#2a63f6}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;padding-right:140px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);margin-top:15px}verdocs-sign .fatal-error .message{max-width:360px;width:50%;font-size:16px;background:white;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#4c56cb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400;padding:0 10px}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}";
+const 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 VerdocsSign = class {
     constructor(hostRef) {
@@ -57,11 +57,13 @@ const VerdocsSign = class {
         this.submitted = false;
         this.isDone = false;
         this.showDone = false;
-        this.showAdoptSignature = false;
+        this.adoptingSignature = false;
         this.showLoadError = false;
         this.finishLater = false;
         this.showFinishLater = false;
         this.agreed = false;
+        this.signatureId = null;
+        this.initialId = null;
         this.documentsSingularPlural = 'document';
         this.authStep = null;
         this.authMethodStates = {};
@@ -70,7 +72,6 @@ const VerdocsSign = class {
         this.declining = false;
         this.delegating = false;
         this.delegated = false;
-        this.startedSigning = false;
         this.kbaChoices = [];
         this.loading = true;
         this.envelope = null;
@@ -113,7 +114,7 @@ const VerdocsSign = class {
         }
     }
     processAuthResponse(response) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         const { envelope, recipient } = response;
         const { auth_step } = recipient;
         this.recipient = recipient;
@@ -122,6 +123,8 @@ const VerdocsSign = class {
         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.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -151,7 +154,7 @@ const VerdocsSign = class {
             this.nextButtonLabel = 'Next';
         }
         this.checkRecipientFields();
-        (_c = this.envelopeLoaded) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope });
+        (_g = this.envelopeLoaded) === null || _g === void 0 ? void 0 : _g.emit({ endpoint: this.endpoint, envelope: this.envelope });
     }
     handleClickAgree() {
         this.submitting = true;
@@ -263,15 +266,35 @@ const VerdocsSign = class {
                 // This can be caused by a focus-out event if the user clicks the field
                 // after it's already filled in, then clicks something else like a textbox.
                 // We don't visually indicate the focus, but it's still there.
-                if (!e.detail) {
+                // NOTE: We now allow null to clear the field
+                if (e.detail === undefined) {
                     return;
                 }
+                if (e.detail === null) {
+                    console.log('[SIGN] Clearing initial');
+                    const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If we already have an initials block, apply it
+                if (this.initialId) {
+                    console.log('[SIGN] Reusing initial', this.initialId);
+                    const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.initialId, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // 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 jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
+                    this.initialId = e.detail;
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
                 this.showSpinner = true;
                 const initialsBlob = await (await fetch(e.detail)).blob();
                 return jsSdk.createInitials(this.endpoint, 'initial', initialsBlob) //
                     .then(async (newInitials) => {
                     const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, newInitials.id, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.initialId = newInitials.id;
                     this.showSpinner = false;
                 })
                     .catch(e => {
@@ -283,16 +306,37 @@ const VerdocsSign = class {
                 // This can be caused by a focus-out event if the user clicks the field
                 // after it's already filled in, then clicks something else like a textbox.
                 // We don't visually indicate the focus, but it's still there.
-                if (!e.detail) {
+                // NOTE: We now allow null to clear the field
+                if (e.detail === undefined) {
                     return;
                 }
+                if (e.detail === null) {
+                    console.log('[SIGN] Clearing signature');
+                    const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // If we already have a signature block, apply it
+                if (this.signatureId) {
+                    console.log('[SIGN] Reusing signature', this.signatureId);
+                    const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, this.signatureId, false);
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
+                // 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 jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail, false);
+                    this.signatureId = e.detail;
+                    return this.updateRecipientFieldValue(field.name, updateResult);
+                }
                 this.showSpinner = true;
                 const signatureBlob = await (await fetch(e.detail)).blob();
+                console.log('[SIGN] Creating new signature');
                 return jsSdk.createSignature(this.endpoint, 'signature', signatureBlob) //
                     .then(async (newSignature) => {
                     console.log('Signature update result', newSignature);
                     const updateResult = await jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, newSignature.id, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
+                    this.signatureId = newSignature.id;
                     this.showSpinner = false;
                 })
                     .catch(e => {
@@ -504,7 +548,6 @@ const VerdocsSign = class {
                         showSkip = true;
                     }
                 }
-                console.log('[SIGN] Render flag', winner.name, winner.y, winner.height);
                 utils.renderDocumentFlag(pageInfo, winner.y, winner.height || utils.defaultHeight(winner.type), {
                     variant,
                     label,
@@ -598,6 +641,12 @@ const VerdocsSign = class {
         const fullName = jsSdk.formatFullName(this.recipient);
         el.setAttribute('initials', jsSdk.fullNameToInitials(fullName));
         el.setAttribute('name', fullName);
+        if (this.signatureId) {
+            el.setAttribute('signatureid', this.signatureId);
+        }
+        if (this.initialId) {
+            el.setAttribute('initialid', this.initialId);
+        }
     }
     handlePageRendered(e) {
         const pageInfo = e.detail;
@@ -774,9 +823,9 @@ const VerdocsSign = class {
             : console.log('[SIGN] All field valid');
         return (index.h(index.Host, null, 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) }))), (() => {
             const focusedFieldObj = this.getSortedFillableFields().find(f => f.name === this.focusedField);
-            return (index.h("verdocs-signing-progress", { mode: this.nextSubmits ? 'completed' : this.startedSigning ? 'signing' : 'start', current: Math.max(1, this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1), total: this.getSortedFillableFields().length, fieldLabel: (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.label) || (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.name) || '', fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
-                    this.startedSigning = true;
-                    this.handleNext();
+            return (index.h("verdocs-signing-progress", { mode: this.nextSubmits ? 'completed' : 'start', current: Math.max(1, this.getSortedFillableFields().findIndex(f => f.name === this.focusedField) + 1), total: this.getSortedFillableFields().length, fieldLabel: (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.label) || (focusedFieldObj === null || focusedFieldObj === void 0 ? void 0 : focusedFieldObj.name) || '', fieldCompleted: focusedFieldObj ? !!jsSdk.isFieldFilled(focusedFieldObj, this.getRecipientFields()) : false, onStarted: () => {
+                    this.adoptingSignature = true;
+                    // this.handleNext();
                 }, onNext: () => this.handleNext(), onPrevious: () => this.handlePrev(), onExit: () => this.handleNext() }));
         })(), index.h("div", { class: "document", style: { width: '64%', marginLeft: '260px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = jsSdk.integerSequence(1, envelopeDocument.pages);
@@ -801,11 +850,21 @@ const VerdocsSign = class {
             } })), this.showDone && (index.h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
-            } })), this.showAdoptSignature && (index.h("verdocs-adopt-signature-dialog", { onNext: () => {
-                this.showAdoptSignature = false;
-            }, onExit: () => {
-                this.showAdoptSignature = 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) => {
+            } })), this.adoptingSignature && (index.h("verdocs-adopt-signature-dialog", { name: jsSdk.formatFullName(this.recipient), onNext: async (e) => {
+                console.log('[SIGN] Adopting signature/initials block', e.detail);
+                this.showSpinner = true;
+                // These arrive as base-64 encoded data URLs
+                const signatureBlob = await (await fetch(e.detail.signature)).blob();
+                const initialsBlob = await (await fetch(e.detail.initials)).blob();
+                const sigResult = await jsSdk.createSignature(this.endpoint, 'signature', signatureBlob);
+                console.log('[SIGN] Created signature', sigResult);
+                this.signatureId = sigResult.id;
+                const initResult = await jsSdk.createInitials(this.endpoint, 'initial', initialsBlob);
+                console.log('[SIGN] Created initials', initResult);
+                this.initialId = initResult.id;
+                this.showSpinner = false;
+                this.adoptingSignature = false;
+            }, 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) => {
                 jsSdk.askQuestion(this.endpoint, this.envelopeId, this.roleId, { question: e.detail.question })
                     .then(() => Toast.VerdocsToast('Your question has been sent.', { style: 'success' }))
                     .catch(e => {