@hubsync/esign-web-sdk 6.9.41 → 6.9.43

package/dist/esm/verdocs-adopt-signature-dialog_8.entry.js

@@ -170,6 +170,9 @@ const VerdocsAdoptSignatureDialog = class {
     componentWillLoad() {
         this.enteredName = this.name;
         this.computeEnteredInitials(this.name);
+        if (this.initialMode) {
+            this.mode = this.initialMode;
+        }
         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);
@@ -177,24 +180,82 @@ const VerdocsAdoptSignatureDialog = class {
         });
     }
     componentDidLoad() {
-        this.drawSignatureText();
-        this.drawInitialsText();
         this.setupSignatureCanvas();
         this.setupInitialsCanvas();
+        void this.loadExistingPreviews();
     }
     componentDidUpdate() {
-        this.drawSignatureText();
-        this.drawInitialsText();
         this.setupSignatureCanvas();
         this.setupInitialsCanvas();
+        if (this.mode === 'type') {
+            this.drawSignatureText();
+            this.drawInitialsText();
+            return;
+        }
         // Redraw drawn signature when in draw mode
-        if (this.mode === 'draw' && this.allSigStrokes.length > 0) {
+        if (this.allSigStrokes.length > 0) {
             this.redrawDrawnSignature();
         }
-        if (this.mode === 'draw' && this.allInitialsStrokes.length > 0) {
+        if (this.allInitialsStrokes.length > 0) {
             this.redrawDrawnInitials();
         }
     }
+    drawImageOnCanvas(canvas, dataUrl) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            image.onload = () => {
+                const context = canvas.getContext('2d');
+                context.clearRect(0, 0, canvas.width, canvas.height);
+                const padding = 24;
+                const scale = Math.min((canvas.width - padding) / image.width, (canvas.height - padding) / image.height, 1);
+                const width = image.width * scale;
+                const height = image.height * scale;
+                const x = (canvas.width - width) / 2;
+                const y = (canvas.height - height) / 2;
+                context.drawImage(image, x, y, width, height);
+                resolve();
+            };
+            image.onerror = () => reject(new Error('Unable to load signature preview'));
+            image.src = dataUrl;
+        });
+    }
+    async loadExistingPreviews() {
+        if (this.mode === 'draw') {
+            await this.restoreDrawnPreviewsIfNeeded();
+            return;
+        }
+        this.drawSignatureText();
+        this.drawInitialsText();
+    }
+    setMode(mode) {
+        this.mode = mode;
+        if (mode === 'draw') {
+            void this.restoreDrawnPreviewsIfNeeded();
+        }
+    }
+    async restoreDrawnPreviewsIfNeeded() {
+        // Preserve in-session stroke edits; only restore saved previews when there are no strokes yet.
+        if (this.allSigStrokes.length > 0 || this.allInitialsStrokes.length > 0) {
+            return;
+        }
+        const tasks = [];
+        if (this.initialSignature && this.signatureElement) {
+            tasks.push(this.drawImageOnCanvas(this.signatureElement, this.initialSignature).then(() => {
+                this.hasDrawnSignature = true;
+            }));
+        }
+        if (this.initialInitials && this.initialsElement) {
+            tasks.push(this.drawImageOnCanvas(this.initialsElement, this.initialInitials).then(() => {
+                this.hasDrawnInitials = true;
+            }));
+        }
+        if (tasks.length === 0) {
+            return;
+        }
+        await Promise.all(tasks);
+        this.setupSignatureCanvas();
+        this.setupInitialsCanvas();
+    }
     drawSignatureText() {
         if (!this.signatureElement || this.mode !== 'type') {
             return;
@@ -322,7 +383,7 @@ const VerdocsAdoptSignatureDialog = class {
         e.preventDefault();
         const signature = this.signatureElement.toDataURL('image/png');
         const initials = this.initialsElement.toDataURL('image/png');
-        this.next.emit({ signature, initials });
+        this.next.emit({ signature, initials, mode: this.mode });
     }
     isAdoptButtonDisabled() {
         switch (this.mode) {
@@ -330,8 +391,8 @@ const VerdocsAdoptSignatureDialog = class {
                 // Disable if no name has been entered
                 return !this.enteredName || this.enteredName.trim().length === 0;
             case 'draw':
-                // Disable if nothing has been drawn
-                return (!this.hasDrawnSignature && !this.hasDrawnInitials) || this.allSigStrokes.length === 0 || this.allInitialsStrokes.length === 0;
+                // Disable if nothing has been drawn or restored from a previous adoption
+                return !this.hasDrawnSignature || !this.hasDrawnInitials;
             default:
                 return true;
         }
@@ -352,8 +413,8 @@ const VerdocsAdoptSignatureDialog = class {
                 this.sigDrawingContext.lineWidth = 2;
                 this.sigDrawingContext.lineCap = 'round';
                 this.sigDrawingContext.lineJoin = 'round';
-                // Clear canvas only if there are no existing strokes
-                if (this.allSigStrokes.length === 0) {
+                // Clear canvas only if there are no existing strokes or restored previews
+                if (this.allSigStrokes.length === 0 && !this.hasDrawnSignature) {
                     this.sigDrawingContext.clearRect(0, 0, this.signatureElement.width, this.signatureElement.height);
                 }
             }
@@ -382,8 +443,8 @@ const VerdocsAdoptSignatureDialog = class {
                 this.initialsDrawingContext.lineWidth = 2;
                 this.initialsDrawingContext.lineCap = 'round';
                 this.initialsDrawingContext.lineJoin = 'round';
-                // Clear canvas only if there are no existing strokes
-                if (this.allInitialsStrokes.length === 0) {
+                // Clear canvas only if there are no existing strokes or restored previews
+                if (this.allInitialsStrokes.length === 0 && !this.hasDrawnInitials) {
                     this.initialsDrawingContext.clearRect(0, 0, this.initialsElement.width, this.initialsElement.height);
                 }
             }
@@ -451,11 +512,11 @@ const VerdocsAdoptSignatureDialog = class {
         };
     }
     render() {
-        return (h("verdocs-dialog", { key: '462948fa67d1a3e32c0fdd03d0183f8b822eb312' }, h("div", { key: 'f05a30ae50b16934a983f29b2d27ddfc4b3fb3b4', slot: "heading", class: "heading" }, "Adopt Your Signature"), h("div", { key: '1a2aa7ace11493961d251ad6bc6ce3406a625532', slot: "content", class: "content" }, h("div", { key: 'd4f11c53451ce55c875320829016bf3a7009b8dc', style: { fontWeight: '300', color: '#242424', fontSize: '13px' } }, "Confirm your name, initials, and signature."), h("div", { key: '5bd2c07de6a5f3f4e31d308c62d4f8805822fcf9', class: { type: true, active: this.mode === 'type' } }, h("verdocs-text-input", { key: '1d6a6a26e1cd66442d7a4d44040a41d66251de55', label: "Full Name", value: this.enteredName, disabled: this.nameLocked, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), this.nameLocked && h("div", { key: '2a839a7f0791dc5af3154471f7730f0f23e1cf36', class: "name-locked-hint" }, "Your name has been set by the sender and cannot be changed.")), h("div", { key: '6090f63b7bb0be98a9cc02705dd2cc2d4e573d3c', style: { fontWeight: '400', color: '#242424', fontSize: '13px' } }, "Select a signature style"), h("div", { key: '4ff274227aad18cb5ba62ee876bbb848cca8c111', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, h("verdocs-radio-button", { key: '6d8c8784e20426fc4cab54aaf1f4d976872b49b1', checked: this.mode === 'type', value: "type", name: "mode", onClick: () => (this.mode = 'type') }), h("label", { key: 'c787fadf3e94998050c4d43d30d5a7f84baaaea1' }, "Typed with a keyboard")), h("div", { key: 'c7b02e786ef4538621f4adae37ed2087ab176b5b', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, h("verdocs-radio-button", { key: 'fcf483b47ee7b4031ab0e5d46ae38e3761193441', checked: this.mode === 'draw', value: "draw", name: "mode", onClick: () => (this.mode = 'draw') }), h("label", { key: '16c6f4fabb564512fc757685d31aadbdd7723ace' }, "Drawn with touch, mouse, or stylus")), h("div", { key: 'c9e059fff254d2654f6fac9afae61c2849a72926', class: "preview-header" }, h("div", { key: '396b8d70757e4c976ed946c0c4dee93c1adf41db', style: { fontSize: '13px', fontWeight: '400' } }, "Signature Preview"), this.mode === 'draw' && (h("button", { key: '4eabebe8916e28e42011a5d5c5a70fe114179df7', class: "clear-button-text", onClick: e => this.handleClearDrawing(e, 'signature'), disabled: !this.hasDrawnSignature }, "Clear"))), h("div", { key: 'c6749bfdef5f26df049c6e54384b528a38f4a8b7', class: "canvas-container signature-container" }, h("div", { key: 'eb76bcb4ab6a18c9ba361f466a21a26552687983', class: "signing-indicator" }, h("div", { key: 'db9ad8803a7d74319a84d16ae5ac5b82316d9d85', class: "x-icon", innerHTML: SignatureXIcon }), h("div", { key: '72c51304ffe3ebd8d7cce0cc3baa8bca002961d2', class: "signing-line" })), h("canvas", { key: 'e795c8fc32ad3dd0dcdffb67915db3c26e7eeeb4', ref: el => (this.signatureElement = el),
+        return (h("verdocs-dialog", { key: '43e4a40803e7cf511bed41328fd48a54da571f23', persistent: true, onExit: () => this.exit.emit() }, h("div", { key: '462e271fe1390006727a0daa1a47de9b359af39c', slot: "heading", class: "heading" }, "Adopt Your Signature"), h("div", { key: '3617b310cba6e6defdd6a01bb3c16dd08db81c29', slot: "content", class: "content" }, h("div", { key: '4365227155f52f36c6421b1ff1cc6dcb2ea4fa6e', style: { fontWeight: '300', color: '#242424', fontSize: '13px' } }, "Confirm your name, initials, and signature."), h("div", { key: 'a768ae444c23e06b58a477e7f3654d128e5d1a6a', class: { type: true, active: this.mode === 'type' } }, h("verdocs-text-input", { key: 'dd3ba8e3b0994ed84148d890b6fba81c8554f70e', label: "Full Name", value: this.enteredName, disabled: this.nameLocked, onInput: e => this.handleNameChange(e), onClick: e => e.stopPropagation() }), this.nameLocked && h("div", { key: '45875c35eeaf050b2de2cc313f6275460fd96e0a', class: "name-locked-hint" }, "Your name has been set by the sender and cannot be changed.")), h("div", { key: 'cc6b9a9072ab0069fbf58ff0395311c93283fb7e', style: { fontWeight: '400', color: '#242424', fontSize: '13px' } }, "Select a signature style"), h("div", { key: '19034c3e2232c832ad4b0032d47e0940fa52c8d2', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, h("verdocs-radio-button", { key: 'c2f084d61633dbbd8aed7b6e3b941e19a953ccab', checked: this.mode === 'type', value: "type", name: "mode", onClick: () => this.setMode('type') }), h("label", { key: 'e1f22d03c316ad2c9fae0d80f81965557c0fbce6' }, "Typed with a keyboard")), h("div", { key: '9c343a3b9a3a551806d86f7c33496f856e50fe99', style: { display: 'flex', flexDirection: 'row', gap: '10px', marginBottom: '6px', alignItems: 'center', fontSize: '13px' } }, h("verdocs-radio-button", { key: '7e411e25456464390b028237cce9dcace361b7cf', checked: this.mode === 'draw', value: "draw", name: "mode", onClick: () => this.setMode('draw') }), h("label", { key: '9a707c87cf4229a6a8831adfeced815ce098180b' }, "Drawn with touch, mouse, or stylus")), h("div", { key: 'aa35cc9591db961dbff6cd26127ccfff96f225d0', class: "preview-header" }, h("div", { key: '4144d977477a558f1785d8f77072d83e8832841b', style: { fontSize: '13px', fontWeight: '400' } }, "Signature Preview"), this.mode === 'draw' && (h("button", { key: '3b687ce578839aefc9447357f61c46ecf783500a', class: "clear-button-text", onClick: e => this.handleClearDrawing(e, 'signature'), disabled: !this.hasDrawnSignature }, "Clear"))), h("div", { key: '306bad99deb8abf8c071d45146f6bbb63c8ca8f4', class: "canvas-container signature-container" }, h("div", { key: 'e5538c0694e4c32d63d0d2169938aa55f0a282c1', class: "signing-indicator" }, h("div", { key: 'd1b5f38019d723b90d95c5ad23219ed4f38a4248', class: "x-icon", innerHTML: SignatureXIcon }), h("div", { key: 'd2f2693b3fdd9feeb6ce7ab8ef006ede715217ab', class: "signing-line" })), h("canvas", { key: '59aa5a8bc5a588bd7fe08bafd43f06394ed35128', ref: el => (this.signatureElement = el),
             // width="300"
-            height: "79", class: "signature-canvas", onPointerDown: this.handleSigPointerDown, onPointerMove: this.handleSigPointerMove, onPointerUp: this.handleSigPointerUp, onPointerCancel: this.handleSigPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } })), h("div", { key: 'a9987ec211baaaa01288dde3ffc061d0372cd7f3', class: "preview-header" }, h("div", { key: '97d1a8462f2d9c272580cf6049ae72017f20b158', style: { fontSize: '13px', fontWeight: '400' } }, "Initials Preview"), this.mode === 'draw' && (h("button", { key: '61f91899f09cbc2dac6d89daa3e9ec1617df7b9c', class: "clear-button-text", onClick: e => this.handleClearDrawing(e, 'initials'), disabled: !this.hasDrawnInitials }, "Clear"))), h("div", { key: 'b09b7f23218b4747dedcfe9d40b912263bea907a', class: "canvas-container initials-container" }, h("div", { key: '35c2b9b40ab5077895f567a922a1b48e86dde3cf', class: "signing-indicator" }, h("div", { key: 'dca3b7841d1b0c6c5ffa1d127ffe9acd048b7715', class: "x-icon", innerHTML: SignatureXIcon }), h("div", { key: '54d0f42b043bdebca98fbde793d91deaa39068ec', class: "signing-line" })), h("canvas", { key: '2449706db1331aa7835ddcf2cf0f910ac0f5f4a6', ref: el => (this.initialsElement = el),
+            height: "79", class: "signature-canvas", onPointerDown: this.handleSigPointerDown, onPointerMove: this.handleSigPointerMove, onPointerUp: this.handleSigPointerUp, onPointerCancel: this.handleSigPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } })), h("div", { key: '86a97be28c467678bd34e455412877ff55de26c2', class: "preview-header" }, h("div", { key: '0a605a59765dbb1f7ee15aa17bc3b4547983c747', style: { fontSize: '13px', fontWeight: '400' } }, "Initials Preview"), this.mode === 'draw' && (h("button", { key: '2426ed63c75312a999a9c12653dd75afe844fa07', class: "clear-button-text", onClick: e => this.handleClearDrawing(e, 'initials'), disabled: !this.hasDrawnInitials }, "Clear"))), h("div", { key: 'fa2c72403a43dfdd6a5f237fa3a21f048ceb517b', class: "canvas-container initials-container" }, h("div", { key: '4e1fbf7d941fcb46c363a35cd238c03d5cc75491', class: "signing-indicator" }, h("div", { key: 'c52486f29337d6b9027b32ea103e86c45904749e', class: "x-icon", innerHTML: SignatureXIcon }), h("div", { key: '6fa97d0d887d543f696de750db82b1a034bcb2b6', class: "signing-line" })), h("canvas", { key: '062e4e8da832b9d0f1a5af24a76188d3a9164ad4', ref: el => (this.initialsElement = el),
             // width="300"
-            height: "79", class: "initials-canvas", onPointerDown: this.handleInitialsPointerDown, onPointerMove: this.handleInitialsPointerMove, onPointerUp: this.handleInitialsPointerUp, onPointerCancel: this.handleInitialsPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } })), h("div", { key: '4cc74908b230f05762bbbc92f082b68f1d0298d3', 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.")), h("div", { key: 'dbbee3f80aa7a0f6862ef4920b3edcc493313c80', class: "footer", slot: "footer" }, h("div", { key: '44f060db31afd99c8b5b1b4d4ac2734dea70cb04', class: "buttons" }, h("button", { key: 'af6c0a693f3576184e7c1fb4235403da1b3db9cf', class: "cancel", onClick: e => this.handleCancel(e) }, "Cancel"), h("button", { key: '9283607fa5c94acd924dbfd363073664a5b9d037', class: "proceed", onClick: e => this.handleAdopt(e), disabled: this.isAdoptButtonDisabled() }, "Adopt & Sign")))));
+            height: "79", class: "initials-canvas", onPointerDown: this.handleInitialsPointerDown, onPointerMove: this.handleInitialsPointerMove, onPointerUp: this.handleInitialsPointerUp, onPointerCancel: this.handleInitialsPointerCancel, style: { touchAction: 'none', cursor: 'crosshair' } })), h("div", { key: 'f589d9624ff808b4179c55fad6ca1ef27b79f553', 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.")), h("div", { key: '33058008d0000a073a43abae0246effa3970a52d', class: "footer", slot: "footer" }, h("div", { key: '3f6ea8bbca9a5eb9fab950a2a4d3d2e135698f56', class: "buttons" }, h("button", { key: '94512ed74ce791505f8e949f818ab7cac907271f', class: "cancel", onClick: e => this.handleCancel(e) }, "Cancel"), h("button", { key: '085af06c8d1671b0533a6f2b49891fcefe3697a9', class: "proceed", onClick: e => this.handleAdopt(e), disabled: this.isAdoptButtonDisabled() }, "Adopt & Sign")))));
     }
 };
 VerdocsAdoptSignatureDialog.style = verdocsAdoptSignatureDialogCss;

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

@@ -76,6 +76,9 @@ const VerdocsSign = class {
         this.agreed = false;
         this.signatureId = null;
         this.initialId = null;
+        this.signatureAdoptMode = 'type';
+        this.adoptedSignaturePreview = null;
+        this.adoptedInitialsPreview = null;
         this.skippedFields = [];
         this.documentsSingularPlural = 'document';
         this.authStep = null;
@@ -227,6 +230,9 @@ const VerdocsSign = class {
         // to adopt at least once per session so the signing flow is explicit after removing the up-front progress dialog.
         this.signatureId = null;
         this.initialId = null;
+        this.signatureAdoptMode = 'type';
+        this.adoptedSignaturePreview = null;
+        this.adoptedInitialsPreview = null;
         this.submitted = recipient.status === 'submitted';
         this.loading = false;
         this.isDone = this.submitted;
@@ -562,6 +568,9 @@ const VerdocsSign = class {
                 if (e.detail === null) {
                     console.log('[SIGN] Clearing signature');
                     this.signatureId = null;
+                    this.adoptedSignaturePreview = null;
+                    this.adoptedInitialsPreview = null;
+                    this.signatureAdoptMode = 'type';
                     const updateResult = await updateEnvelopeField(this.endpoint, this.envelopeId, this.roleId, field.name, null, false);
                     this.updateRecipientFieldValue(field.name, updateResult);
                     if (field.required)
@@ -1024,7 +1033,7 @@ const VerdocsSign = class {
         });
     }
     render() {
-        var _a;
+        var _a, _b, _c;
         if (this.showLoadError) {
             return (h(Host, null, 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();
@@ -1174,9 +1183,12 @@ const VerdocsSign = class {
             } })), 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 completed document and 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) => {
+            } })), this.adoptingSignature && (h("verdocs-adopt-signature-dialog", { name: formatFullName(this.recipient), nameLocked: !!((_a = this.recipient) === null || _a === void 0 ? void 0 : _a.name_locked), initialMode: this.adoptedSignaturePreview ? this.signatureAdoptMode : undefined, initialSignature: (_b = this.adoptedSignaturePreview) !== null && _b !== void 0 ? _b : undefined, initialInitials: (_c = this.adoptedInitialsPreview) !== null && _c !== void 0 ? _c : undefined, onNext: async (e) => {
                 console.log('[SIGN] Adopting signature/initials block', e.detail);
                 this.showSpinner = true;
+                this.signatureAdoptMode = e.detail.mode;
+                this.adoptedSignaturePreview = e.detail.signature;
+                this.adoptedInitialsPreview = e.detail.initials;
                 // 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();