@verdocs/web-sdk 6.8.7 → 6.8.9

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

@@ -1,17 +1,17 @@
 'use strict';
 
 var index$1 = require('./index-CQ5bTnED.js');
+var interact_min = require('./interact.min-BAnZvLwr.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
+var utils = require('./utils-kkGeJs-8.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 var Environment = require('./Environment-3vWt0C1Q.js');
 var Toast = require('./Toast-BgG-6jAg.js');
 var Icons = require('./Icons-TVvtZ5iL.js');
-var interact_min = require('./interact.min-BAnZvLwr.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');
-require('./_commonjsHelpers-BJu3ubxk.js');
 
 const verdocsPreviewCss = "verdocs-preview{font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif);display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
 
@@ -71,6 +71,17 @@ const VerdocsPreview = class {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
+    componentDidRender() {
+        var _a;
+        // Defensive hack: fields rendered in other tabs (e.g. the builder's Fields tab) may share DOM
+        // IDs with fields shown here, and interact.js — being vanilla JS — is unaware of Stencil's
+        // re-renders. Unbind any drag/resize handlers on fields inside our own subtree after each
+        // render so they stay non-interactive in preview mode. Scope to hostEl so we don't clobber
+        // handlers on fields belonging to a sibling component during brief tab-switch overlaps.
+        (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.verdocs-field').forEach(el => {
+            interact_min.interact(el).unset();
+        });
+    }
     handlePageRendered(e) {
         var _a;
         const pageInfo = e.detail;
@@ -104,6 +115,7 @@ const VerdocsPreview = class {
             })));
         })));
     }
+    get hostEl() { return index$1.getElement(this); }
     static get watchers() { return {
         "templateId": ["onTemplateIdChanged"]
     }; }
@@ -702,6 +714,14 @@ const VerdocsTemplateFields = class {
             this.placing = null;
         }
     }
+    handleFieldSettingsChanged() {
+        var _a;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
+    }
+    handleFieldDeleted() {
+        var _a;
+        (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
+    }
     async componentWillLoad() {
         var _a, _b, _c;
         try {
@@ -723,6 +743,13 @@ const VerdocsTemplateFields = class {
     }
     componentDidRender() {
         interact_min.interact.dynamicDrop(true);
+        // Defensive re-attach: when returning to the Fields tab from Preview, the preview component
+        // may have unset interact bindings on shared field DOM elements. pageRendered doesn't always
+        // refire in that case, so ensure every .verdocs-field in the document has a drag handler.
+        // makeDraggable is idempotent (interact re-configures the same Interactable).
+        document.querySelectorAll('.verdocs-field').forEach(el => {
+            this.makeDraggable(el);
+        });
         const toolbarTarget = this.toolbarTargetId ? document.getElementById(this.toolbarTargetId) : null;
         const toolbarEl = document.getElementById('verdocs-template-fields-toolbar');
         if (toolbarTarget && toolbarEl) {
@@ -746,6 +773,7 @@ const VerdocsTemplateFields = class {
         this.unlistenToTemplate();
         Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
             var _a;
+            console.log('Template updated');
             this.template = template;
             this.loading = false;
             if (!this.selectedRoleName) {
@@ -760,29 +788,6 @@ const VerdocsTemplateFields = class {
             this.templateListenerId = null;
         }
     }
-    attachFieldAttributes(pageInfo, field, el) {
-        el.addEventListener('settingsChanged', () => {
-            var _a;
-            console.log('[FIELDS] Field settings changed, updating template...');
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'updated-field' });
-        });
-        el.addEventListener('deleted', () => {
-            var _a;
-            el.remove();
-            console.log('[FIELDS] Field deleted, updating template...');
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'deleted-field' });
-        });
-        el.setAttribute('templateid', this.templateId);
-        el.setAttribute('fieldname', field.name);
-        el.setAttribute('documentid', String(pageInfo.documentId));
-        // TODO: Merge these
-        el.setAttribute('pageNumber', String(pageInfo.pageNumber));
-        el.setAttribute('pagenumber', String(field.page));
-        el.setAttribute('xScale', String(pageInfo.xScale));
-        el.setAttribute('yScale', String(pageInfo.yScale));
-        el.setAttribute('name', field.name);
-        this.makeDraggable(el);
-    }
     handlePageRendered(e) {
         var _a, _b;
         var _c, _d;
@@ -797,7 +802,13 @@ const VerdocsTemplateFields = class {
             const id = utils.getFieldId(field);
             const el = document.getElementById(id);
             if (el) {
-                this.attachFieldAttributes(pageInfo, field, el);
+                el.setAttribute('templateid', this.templateId);
+                el.setAttribute('fieldname', field.name);
+                el.setAttribute('documentid', String(field.document_id));
+                el.setAttribute('pagenumber', String(field.page));
+                el.setAttribute('xScale', String(pageInfo.xScale));
+                el.setAttribute('yScale', String(pageInfo.yScale));
+                this.makeDraggable(el);
             }
         });
     }
@@ -900,7 +911,7 @@ const VerdocsTemplateFields = class {
     async handleClickPage(e, documentId, pageNumber) {
         var _a;
         if (this.placing) {
-            console.log('Placing field', { documentId, pageNumber });
+            // console.log('Placing field', {documentId, pageNumber});
             const clickedX = e.offsetX;
             const clickedY = e.offsetY;
             const width = utils.defaultWidth(this.placing);
@@ -932,9 +943,8 @@ const VerdocsTemplateFields = class {
                 readonly: false,
                 options: this.placing === 'radio' ? [{ id: 'option-1', label: 'Option 1' }] : [],
             };
-            console.log('[FIELDS] Will save new field', field);
             const newField = await jsSdk.createField(this.endpoint, this.templateId, field);
-            console.log('[FIELDS] Saved field', newField);
+            console.log('[FIELDS] Created field', newField);
             const newTemplate = JSON.parse(JSON.stringify(this.template));
             newTemplate.fields.push(newField);
             Datastore.Store.updateTemplate(this.templateId, newTemplate);
@@ -944,6 +954,7 @@ const VerdocsTemplateFields = class {
     }
     render() {
         var _a, _b, _c;
+        console.log('Rendering');
         if (this.loading) {
             return (index$1.h(index$1.Host, null, index$1.h("verdocs-loader", null)));
         }

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

@@ -2,11 +2,11 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
+var utils = require('./utils-kkGeJs-8.js');
 var Icons = require('./Icons-TVvtZ5iL.js');
 var Toast = require('./Toast-BgG-6jAg.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');
 

package/dist/cjs/verdocs-signing-progress.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
+var utils = require('./utils-kkGeJs-8.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');
 

package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js

@@ -2,8 +2,8 @@
 
 var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
-var utils = require('./utils-ecG41L2k.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var utils = require('./utils-kkGeJs-8.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 var popper = require('./popper-Dmp8OTYh.js');
 require('./index-CeUF44L9.js');
 require('./Types-YJQtg77a.js');

package/dist/cjs/verdocs-template-settings.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-CQ5bTnED.js');
 var jsSdk = require('@verdocs/js-sdk');
 var Toast = require('./Toast-BgG-6jAg.js');
 var errors = require('./errors-D1XRvnet.js');
-var Datastore = require('./Datastore-B-sxWSPD.js');
+var Datastore = require('./Datastore-C-Pojt3E.js');
 
 const verdocsTemplateSettingsCss = "verdocs-template-settings{display:block;max-width:600px;font-family:var(--verdocs-primary-font, \"Inter\", \"Barlow\", sans-serif)}verdocs-template-settings>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-settings>form h5{font-size:16px;font-weight:bold;color:#46497d;margin:0 0 10px 0}verdocs-template-settings>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-settings>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-settings>form input:focus{outline:none}verdocs-template-settings>form .row{margin:20px 0 0 0}verdocs-template-settings .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-settings ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-moz-placeholder{color:#aaaaaa}verdocs-template-settings :-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-settings ::placeholder{color:#aaaaaa}";
 

package/dist/cjs/verdocs-web-sdk.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"verdocs-build.cjs\",[[256,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1537,\"template-id\"],\"step\":[1537],\"loading\":[32],\"template\":[32]},null,{\"templateId\":[\"onTemplateIdChanged\"],\"step\":[\"onStepChanged\"]}]]],[\"verdocs-sign.cjs\",[[256,\"verdocs-sign\",{\"endpoint\":[1040],\"envelopeId\":[513,\"envelope-id\"],\"roleId\":[513,\"role-id\"],\"inviteCode\":[513,\"invite-code\"],\"headerTargetId\":[1,\"header-target-id\"],\"toolbarStyle\":[1,\"toolbar-style\"],\"recipient\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"fatalErrorHeader\":[32],\"fatalErrorMessage\":[32],\"focusedField\":[32],\"disclosures\":[32],\"fieldUpdateCounter\":[32],\"submitting\":[32],\"submitted\":[32],\"isDone\":[32],\"showDone\":[32],\"adoptingSignature\":[32],\"showLoadError\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"signatureId\":[32],\"initialId\":[32],\"documentsSingularPlural\":[32],\"authStep\":[32],\"authMethodStates\":[32],\"pageNumber\":[32],\"kbaQuestions\":[32],\"showSpinner\":[32],\"declining\":[32],\"delegating\":[32],\"delegated\":[32],\"kbaChoices\":[32],\"showDownloadDialog\":[32],\"loading\":[32],\"envelope\":[32],\"zoomLevel\":[32],\"signingProgressMode\":[32],\"polling\":[32]}]]],[\"verdocs-envelopes-list.cjs\",[[256,\"verdocs-envelopes-list\",{\"endpoint\":[16],\"view\":[1537],\"status\":[1537],\"sort\":[1537],\"match\":[1537],\"showPagination\":[4,\"show-pagination\"],\"rowsPerPage\":[2,\"rows-per-page\"],\"selectedPage\":[2,\"selected-page\"],\"count\":[32],\"initiallyLoaded\":[32],\"loading\":[32],\"selectedEnvelopes\":[32],\"envelopes\":[32]},null,{\"view\":[\"handleViewUpdated\"],\"status\":[\"handleStatusUpdated\"],\"sort\":[\"handleSortUpdated\"],\"match\":[\"handleMatchUpdated\"],\"selectedPage\":[\"handlePageUpdated\"]}]]],[\"verdocs-templates-list.cjs\",[[256,\"verdocs-templates-list\",{\"endpoint\":[16],\"visibility\":[1537],\"starred\":[1537],\"sort\":[1537],\"name\":[1537],\"allowedActions\":[1040],\"showPagination\":[4,\"show-pagination\"],\"rowsPerPage\":[2,\"rows-per-page\"],\"selectedPage\":[2,\"selected-page\"],\"count\":[32],\"initiallyLoaded\":[32],\"loading\":[32],\"confirmDelete\":[32],\"templates\":[32],\"localNameFilter\":[32]},null,{\"sharing\":[\"handleSharingUpdated\"],\"starred\":[\"handleStarredUpdated\"],\"sort\":[\"handleSortUpdated\"],\"name\":[\"handleNameUpdated\"],\"selectedPage\":[\"handlePageUpdated\"]}]]],[\"verdocs-envelope-sidebar.cjs\",[[256,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"activeTab\":[32],\"panelOpen\":[32],\"showRecipientDialog\":[32],\"showCancelDialog\":[32],\"showReinviteDialog\":[32],\"showUpdateDialog\":[32],\"remindersEnabled\":[32],\"updatingReminders\":[32],\"initialReminder\":[32],\"followupReminders\":[32],\"loading\":[32],\"envelope\":[32]}]]],[\"verdocs-field-payment.cjs\",[[256,\"verdocs-field-payment\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"done\":[516],\"editable\":[516],\"moveable\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"fields\":[16],\"pageNum\":[2,\"page-num\"],\"roleName\":[1,\"role-name\"],\"fieldId\":[1,\"field-id\"],\"recipients\":[8],\"selectedRoleName\":[1,\"selected-role-name\"],\"pdfPages\":[16],\"currentSignature\":[1,\"current-signature\"],\"currentSignatureId\":[1,\"current-signature-id\"],\"currentInitial\":[1,\"current-initial\"],\"currentInitialId\":[1,\"current-initial-id\"],\"signed\":[4],\"roleindex\":[2],\"showingProperties\":[32],\"focused\":[32],\"preparedMessage\":[32],\"signatureUrl\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]]]]],[\"verdocs-template-settings.cjs\",[[256,\"verdocs-template-settings\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"visibility\":[32],\"sender\":[32],\"sendReminders\":[32],\"initialReminder\":[32],\"followupReminders\":[32],\"dirty\":[32],\"loading\":[32],\"template\":[32]}]]],[\"verdocs-template-create.cjs\",[[256,\"verdocs-template-create\",{\"endpoint\":[16],\"maxSize\":[1026,\"max-size\"],\"file\":[32],\"creating\":[32],\"progressLabel\":[32],\"progressPercent\":[32],\"errorMessage\":[32]}]]],[\"verdocs-auth.cjs\",[[256,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"displayMode\":[1025,\"display-mode\"],\"org_name\":[32],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"verificationCode\":[32],\"newPassword\":[32],\"password\":[32],\"confirmpass\":[32],\"submitting\":[32],\"resendDisabled\":[32],\"session\":[32],\"profile\":[32]}]]],[\"verdocs-initial-dialog.cjs\",[[256,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog.cjs\",[[256,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32],\"isDrawing\":[32],\"hasDrawnSignature\":[32],\"hasUploadedImage\":[32],\"uploadedFileName\":[32]}]]],[\"verdocs-date-input.cjs\",[[256,\"verdocs-date-input\",{\"value\":[1537],\"label\":[1],\"placeholder\":[1],\"helpText\":[1,\"help-text\"],\"disabled\":[4],\"required\":[4],\"showingPw\":[32],\"focused\":[32],\"containerId\":[32],\"focusField\":[64]}]]],[\"verdocs-envelope-recipient-summary.cjs\",[[256,\"verdocs-envelope-recipient-summary\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"canSendAnother\":[4,\"can-send-another\"],\"canView\":[4,\"can-view\"],\"canDone\":[4,\"can-done\"],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32],\"gettingLinks\":[32],\"links\":[32],\"loading\":[32],\"envelope\":[32]}]]],[\"verdocs-multiselect.cjs\",[[256,\"verdocs-multiselect\",{\"label\":[1],\"placeholder\":[1],\"options\":[16],\"selectedOptions\":[16],\"showPicker\":[32]}]]],[\"verdocs-signing-progress.cjs\",[[256,\"verdocs-signing-progress\",{\"mode\":[1],\"focusedField\":[1,\"focused-field\"],\"fields\":[16],\"recipientFields\":[16]}]]],[\"verdocs-button-panel.cjs\",[[260,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}]]],[\"verdocs-quick-functions.cjs\",[[256,\"verdocs-quick-functions\",{\"endpoint\":[16]}]]],[\"verdocs-search-box.cjs\",[[256,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-search-tabs.cjs\",[[256,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-table.cjs\",[[256,\"verdocs-table\",{\"columns\":[16],\"data\":[16]}]]],[\"verdocs-tabs.cjs\",[[260,\"verdocs-tabs\",{\"tabs\":[16],\"selectedTab\":[2,\"selected-tab\"]}]]],[\"verdocs-template-card.cjs\",[[256,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags.cjs\",[[256,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle.cjs\",[[256,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-toggle-button.cjs\",[[256,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-status-indicator.cjs\",[[256,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"containerId\":[32]}]]],[\"verdocs-template-star.cjs\",[[256,\"verdocs-template-star\",{\"endpoint\":[16],\"template\":[1040],\"updating\":[32]}]]],[\"verdocs-envelope-recipient-link_2.cjs\",[[256,\"verdocs-envelope-update-recipient\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"roleName\":[1,\"role-name\"],\"isOpen\":[32],\"gettingLink\":[32],\"link\":[32],\"loading\":[32],\"envelope\":[32],\"originalRecipient\":[32],\"updatedRecipient\":[32]}],[256,\"verdocs-envelope-recipient-link\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"roleName\":[1,\"role-name\"],\"isOpen\":[32],\"gettingLink\":[32],\"link\":[32],\"loading\":[32],\"envelope\":[32],\"recipient\":[32]}]]],[\"verdocs-contact-picker.cjs\",[[256,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"phone\":[32],\"zip\":[32],\"address\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32],\"name_locked\":[32],\"auth_methods\":[32],\"passcode\":[32],\"firstNameFieldId\":[32],\"lastNameFieldId\":[32],\"emailFieldId\":[32],\"phoneFieldId\":[32],\"featureFlags\":[32],\"activeEntitlements\":[32]}]]],[\"verdocs-radio-button.cjs\",[[256,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-switch.cjs\",[[256,\"verdocs-switch\",{\"checked\":[1028],\"theme\":[1],\"disabled\":[4]}]]],[\"verdocs-button_3.cjs\",[[256,\"verdocs-text-input\",{\"value\":[1537],\"label\":[1],\"placeholder\":[1],\"description\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"clearable\":[4],\"copyable\":[4],\"type\":[1],\"disabled\":[4],\"required\":[4],\"showingPw\":[32]}],[256,\"verdocs-help-icon\",{\"text\":[1],\"icon\":[1],\"containerId\":[32]}],[256,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-menu-panel_2.cjs\",[[256,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"phone\":[32],\"delegator\":[32],\"loading\":[32],\"template\":[32]}],[260,\"verdocs-menu-panel\",{\"side\":[1],\"overlay\":[4],\"width\":[2]},[[4,\"click\",\"handleClick\"]]]]],[\"verdocs-pagination_2.cjs\",[[256,\"verdocs-quick-filter\",{\"options\":[16],\"label\":[1],\"value\":[1537],\"placeholder\":[1],\"open\":[32]}],[256,\"verdocs-pagination\",{\"selectedPage\":[1538,\"selected-page\"],\"itemCount\":[2,\"item-count\"],\"perPage\":[2,\"per-page\"]}]]],[\"verdocs-dropdown.cjs\",[[256,\"verdocs-dropdown\",{\"options\":[16],\"containerId\":[32],\"showPicker\":[32]}]]],[\"verdocs-file-chooser_2.cjs\",[[256,\"verdocs-file-chooser\",{\"endpoint\":[16],\"file\":[32]}],[256,\"verdocs-progress-bar\",{\"label\":[1],\"showPercent\":[4,\"show-percent\"],\"percent\":[2]}]]],[\"verdocs-spinner.cjs\",[[256,\"verdocs-spinner\",{\"size\":[2],\"mode\":[1]}]]],[\"verdocs-dialog.cjs\",[[260,\"verdocs-dialog\",{\"persistent\":[4]}]]],[\"verdocs-ok-dialog.cjs\",[[256,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"buttonLabel\":[1,\"button-label\"],\"showCancel\":[4,\"show-cancel\"],\"closed\":[32]}]]],[\"verdocs-flag.cjs\",[[256,\"verdocs-flag\",{\"variant\":[1],\"label\":[1],\"showSkip\":[4,\"show-skip\"]}]]],[\"verdocs-download-dialog_4.cjs\",[[256,\"verdocs-sign-footer\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"isDone\":[4,\"is-done\"],\"askingQuestion\":[32],\"declinine\":[32],\"envelope\":[32]}],[256,\"verdocs-download-dialog\",{\"signed\":[4],\"polling\":[4],\"documents\":[16],\"hasCertificate\":[4,\"has-certificate\"]}],[256,\"verdocs-envelope-document-page\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"type\":[1],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}],[256,\"verdocs-question-dialog\",{\"question\":[1025],\"closed\":[32]}]]],[\"verdocs-adopt-signature-dialog_7.cjs\",[[256,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"headerTargetId\":[1,\"header-target-id\"],\"canceling\":[32],\"showCancelDone\":[32],\"showLoadError\":[32],\"loading\":[32],\"envelope\":[32],\"zoomLevel\":[32],\"showDownloadDialog\":[32],\"polling\":[32]}],[256,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"recipient\":[16],\"choices\":[16],\"agreed\":[32],\"response\":[32],\"updatedRecipient\":[32],\"dobContainerId\":[32]}],[256,\"verdocs-adopt-signature-dialog\",{\"name\":[1],\"nameLocked\":[4,\"name-locked\"],\"fontLoaded\":[32],\"enteredName\":[32],\"enteredInitials\":[32],\"mode\":[32],\"isDrawing\":[32],\"hasDrawnSignature\":[32],\"hasDrawnInitials\":[32]}],[256,\"verdocs-otp-dialog\",{\"endpoint\":[1040],\"method\":[1],\"resendDisabled\":[32],\"response\":[32]}],[256,\"verdocs-passcode-dialog\",{\"endpoint\":[1040],\"response\":[32]}],[256,\"verdocs-disclosure-dialog\",{\"disclosures\":[1],\"delegator\":[4],\"accepted\":[32]}],[256,\"verdocs-delegate-dialog\",{\"endpoint\":[1040],\"envelope\":[16],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32]}]]],[\"verdocs-organization-card_2.cjs\",[[256,\"verdocs-organization-card\",{\"organization\":[16],\"hovered\":[32]},[[1,\"mouseover\",\"onMouseOver\"],[1,\"mouseout\",\"onMouseOut\"]]],[260,\"verdocs-portal\",{\"anchor\":[1],\"voffset\":[2]},[[11,\"scroll\",\"handleScroll\"],[9,\"resize\",\"handleResize\"],[4,\"click\",\"handleClick\"]]]]],[\"verdocs-checkbox_5.cjs\",[[256,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1025,\"field-name\"],\"helpText\":[1,\"help-text\"],\"dirty\":[32],\"label\":[32],\"type\":[32],\"name\":[32],\"required\":[32],\"readonly\":[32],\"roleName\":[32],\"group\":[32],\"fieldType\":[32],\"options\":[32],\"placeholder\":[32],\"defaultValue\":[32],\"showingHelp\":[32],\"loading\":[32],\"template\":[32]}],[256,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}],[256,\"verdocs-component-error\",{\"message\":[1]}],[256,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4]}],[256,\"verdocs-loader\"]]],[\"verdocs-field-attachment_11.cjs\",[[256,\"verdocs-field-attachment\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"dialogOpen\":[32],\"selectedFile\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-checkbox\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"done\":[516],\"editable\":[516],\"moveable\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-date\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"containerId\":[32],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-dropdown\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-initial\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"disabled\":[516],\"initials\":[513],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"initialid\":[513],\"isPreview\":[516,\"is-preview\"],\"showingProperties\":[32],\"focused\":[32],\"menuOpen\":[32],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-radio\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"required\":[516],\"done\":[516],\"editable\":[516],\"moveable\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-signature\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"name\":[513],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"signatureid\":[513],\"isPreview\":[516,\"is-preview\"],\"showingProperties\":[32],\"focused\":[32],\"menuOpen\":[32],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"],[0,\"blur\",\"onBlur\"]]],[256,\"verdocs-field-textarea\",{\"endpoint\":[16],\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-textbox\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"multiline\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]]],[256,\"verdocs-field-timestamp\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[2],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]]],[256,\"verdocs-upload-dialog\",{\"maxSize\":[1026,\"max-size\"],\"existingFile\":[1032,\"existing-file\"],\"draggingOver\":[32],\"confirmDelete\":[32],\"selectedFiles\":[32],\"errorMessage\":[32]}]]],[\"verdocs-template-document-page_2.cjs\",[[256,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}],[256,\"verdocs-template-document-page\",{\"endpoint\":[16],\"editable\":[4],\"disabled\":[4],\"done\":[4],\"templateId\":[513,\"template-id\"],\"documentId\":[513,\"document-id\"],\"pageNumber\":[514,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32],\"xScale\":[32],\"yScale\":[32],\"loading\":[32],\"template\":[32]}]]],[\"verdocs-preview_6.cjs\",[[256,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1537,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"showMustSelectRole\":[32],\"selectedRoleName\":[32],\"loading\":[32],\"template\":[32]},[[4,\"keydown\",\"handleKeyDown\"]],{\"templateId\":[\"onTemplateIdChanged\"]}],[256,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32],\"template\":[32]},null,{\"templateId\":[\"onTemplateIdChanged\"]}],[256,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[513,\"template-id\"],\"environment\":[1],\"showCancel\":[4,\"show-cancel\"],\"containerId\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"sending\":[32],\"rolesCompleted\":[32],\"loading\":[32],\"template\":[32],\"reset\":[64]},null,{\"templateId\":[\"onTemplateIdChanged\"]}],[256,\"verdocs-template-roles\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"sender\":[32],\"dragging\":[32],\"loading\":[32],\"template\":[32]}],[256,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"uploading\":[32],\"progressLabel\":[32],\"progressPercent\":[32],\"showDeleteError\":[32],\"confirmDeleteDocument\":[32],\"loading\":[32],\"template\":[32]}],[256,\"verdocs-template-build-tabs\",{\"endpoint\":[16],\"templateId\":[1537,\"template-id\"],\"step\":[1537],\"loading\":[32],\"template\":[32]},null,{\"templateId\":[\"onTemplateIdChanged\"],\"step\":[\"onStepChanged\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"verdocs-build.cjs\",[[256,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1537,\"template-id\"],\"step\":[1537],\"loading\":[32],\"template\":[32]},null,{\"templateId\":[\"onTemplateIdChanged\"],\"step\":[\"onStepChanged\"]}]]],[\"verdocs-sign.cjs\",[[256,\"verdocs-sign\",{\"endpoint\":[1040],\"envelopeId\":[513,\"envelope-id\"],\"roleId\":[513,\"role-id\"],\"inviteCode\":[513,\"invite-code\"],\"headerTargetId\":[1,\"header-target-id\"],\"toolbarStyle\":[1,\"toolbar-style\"],\"recipient\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"fatalErrorHeader\":[32],\"fatalErrorMessage\":[32],\"focusedField\":[32],\"disclosures\":[32],\"fieldUpdateCounter\":[32],\"submitting\":[32],\"submitted\":[32],\"isDone\":[32],\"showDone\":[32],\"adoptingSignature\":[32],\"showLoadError\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"signatureId\":[32],\"initialId\":[32],\"documentsSingularPlural\":[32],\"authStep\":[32],\"authMethodStates\":[32],\"pageNumber\":[32],\"kbaQuestions\":[32],\"showSpinner\":[32],\"declining\":[32],\"delegating\":[32],\"delegated\":[32],\"kbaChoices\":[32],\"showDownloadDialog\":[32],\"loading\":[32],\"envelope\":[32],\"zoomLevel\":[32],\"signingProgressMode\":[32],\"polling\":[32]}]]],[\"verdocs-envelopes-list.cjs\",[[256,\"verdocs-envelopes-list\",{\"endpoint\":[16],\"view\":[1537],\"status\":[1537],\"sort\":[1537],\"match\":[1537],\"showPagination\":[4,\"show-pagination\"],\"rowsPerPage\":[2,\"rows-per-page\"],\"selectedPage\":[2,\"selected-page\"],\"count\":[32],\"initiallyLoaded\":[32],\"loading\":[32],\"selectedEnvelopes\":[32],\"envelopes\":[32]},null,{\"view\":[\"handleViewUpdated\"],\"status\":[\"handleStatusUpdated\"],\"sort\":[\"handleSortUpdated\"],\"match\":[\"handleMatchUpdated\"],\"selectedPage\":[\"handlePageUpdated\"]}]]],[\"verdocs-templates-list.cjs\",[[256,\"verdocs-templates-list\",{\"endpoint\":[16],\"visibility\":[1537],\"starred\":[1537],\"sort\":[1537],\"name\":[1537],\"allowedActions\":[1040],\"showPagination\":[4,\"show-pagination\"],\"rowsPerPage\":[2,\"rows-per-page\"],\"selectedPage\":[2,\"selected-page\"],\"count\":[32],\"initiallyLoaded\":[32],\"loading\":[32],\"confirmDelete\":[32],\"templates\":[32],\"localNameFilter\":[32]},null,{\"sharing\":[\"handleSharingUpdated\"],\"starred\":[\"handleStarredUpdated\"],\"sort\":[\"handleSortUpdated\"],\"name\":[\"handleNameUpdated\"],\"selectedPage\":[\"handlePageUpdated\"]}]]],[\"verdocs-envelope-sidebar.cjs\",[[256,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"activeTab\":[32],\"panelOpen\":[32],\"showRecipientDialog\":[32],\"showCancelDialog\":[32],\"showReinviteDialog\":[32],\"showUpdateDialog\":[32],\"remindersEnabled\":[32],\"updatingReminders\":[32],\"initialReminder\":[32],\"followupReminders\":[32],\"loading\":[32],\"envelope\":[32]}]]],[\"verdocs-field-payment.cjs\",[[256,\"verdocs-field-payment\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"done\":[516],\"editable\":[516],\"moveable\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"fields\":[16],\"pageNum\":[2,\"page-num\"],\"roleName\":[1,\"role-name\"],\"fieldId\":[1,\"field-id\"],\"recipients\":[8],\"selectedRoleName\":[1,\"selected-role-name\"],\"pdfPages\":[16],\"currentSignature\":[1,\"current-signature\"],\"currentSignatureId\":[1,\"current-signature-id\"],\"currentInitial\":[1,\"current-initial\"],\"currentInitialId\":[1,\"current-initial-id\"],\"signed\":[4],\"roleindex\":[2],\"showingProperties\":[32],\"focused\":[32],\"preparedMessage\":[32],\"signatureUrl\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}]]],[\"verdocs-template-settings.cjs\",[[256,\"verdocs-template-settings\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"visibility\":[32],\"sender\":[32],\"sendReminders\":[32],\"initialReminder\":[32],\"followupReminders\":[32],\"dirty\":[32],\"loading\":[32],\"template\":[32]}]]],[\"verdocs-template-create.cjs\",[[256,\"verdocs-template-create\",{\"endpoint\":[16],\"maxSize\":[1026,\"max-size\"],\"file\":[32],\"creating\":[32],\"progressLabel\":[32],\"progressPercent\":[32],\"errorMessage\":[32]}]]],[\"verdocs-auth.cjs\",[[256,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"displayMode\":[1025,\"display-mode\"],\"org_name\":[32],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"verificationCode\":[32],\"newPassword\":[32],\"password\":[32],\"confirmpass\":[32],\"submitting\":[32],\"resendDisabled\":[32],\"session\":[32],\"profile\":[32]}]]],[\"verdocs-initial-dialog.cjs\",[[256,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog.cjs\",[[256,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32],\"isDrawing\":[32],\"hasDrawnSignature\":[32],\"hasUploadedImage\":[32],\"uploadedFileName\":[32]}]]],[\"verdocs-date-input.cjs\",[[256,\"verdocs-date-input\",{\"value\":[1537],\"label\":[1],\"placeholder\":[1],\"helpText\":[1,\"help-text\"],\"disabled\":[4],\"required\":[4],\"showingPw\":[32],\"focused\":[32],\"containerId\":[32],\"focusField\":[64]}]]],[\"verdocs-envelope-recipient-summary.cjs\",[[256,\"verdocs-envelope-recipient-summary\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"canSendAnother\":[4,\"can-send-another\"],\"canView\":[4,\"can-view\"],\"canDone\":[4,\"can-done\"],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32],\"gettingLinks\":[32],\"links\":[32],\"loading\":[32],\"envelope\":[32]}]]],[\"verdocs-multiselect.cjs\",[[256,\"verdocs-multiselect\",{\"label\":[1],\"placeholder\":[1],\"options\":[16],\"selectedOptions\":[16],\"showPicker\":[32]}]]],[\"verdocs-signing-progress.cjs\",[[256,\"verdocs-signing-progress\",{\"mode\":[1],\"focusedField\":[1,\"focused-field\"],\"fields\":[16],\"recipientFields\":[16]}]]],[\"verdocs-button-panel.cjs\",[[260,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}]]],[\"verdocs-quick-functions.cjs\",[[256,\"verdocs-quick-functions\",{\"endpoint\":[16]}]]],[\"verdocs-search-box.cjs\",[[256,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-search-tabs.cjs\",[[256,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-table.cjs\",[[256,\"verdocs-table\",{\"columns\":[16],\"data\":[16]}]]],[\"verdocs-tabs.cjs\",[[260,\"verdocs-tabs\",{\"tabs\":[16],\"selectedTab\":[2,\"selected-tab\"]}]]],[\"verdocs-template-card.cjs\",[[256,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags.cjs\",[[256,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle.cjs\",[[256,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-toggle-button.cjs\",[[256,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-status-indicator.cjs\",[[256,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"containerId\":[32]}]]],[\"verdocs-template-star.cjs\",[[256,\"verdocs-template-star\",{\"endpoint\":[16],\"template\":[1040],\"updating\":[32]}]]],[\"verdocs-envelope-recipient-link_2.cjs\",[[256,\"verdocs-envelope-update-recipient\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"roleName\":[1,\"role-name\"],\"isOpen\":[32],\"gettingLink\":[32],\"link\":[32],\"loading\":[32],\"envelope\":[32],\"originalRecipient\":[32],\"updatedRecipient\":[32]}],[256,\"verdocs-envelope-recipient-link\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"roleName\":[1,\"role-name\"],\"isOpen\":[32],\"gettingLink\":[32],\"link\":[32],\"loading\":[32],\"envelope\":[32],\"recipient\":[32]}]]],[\"verdocs-contact-picker.cjs\",[[256,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"phone\":[32],\"zip\":[32],\"address\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32],\"name_locked\":[32],\"auth_methods\":[32],\"passcode\":[32],\"firstNameFieldId\":[32],\"lastNameFieldId\":[32],\"emailFieldId\":[32],\"phoneFieldId\":[32],\"featureFlags\":[32],\"activeEntitlements\":[32]}]]],[\"verdocs-radio-button.cjs\",[[256,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-switch.cjs\",[[256,\"verdocs-switch\",{\"checked\":[1028],\"theme\":[1],\"disabled\":[4]}]]],[\"verdocs-button_3.cjs\",[[256,\"verdocs-text-input\",{\"value\":[1537],\"label\":[1],\"placeholder\":[1],\"description\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"clearable\":[4],\"copyable\":[4],\"type\":[1],\"disabled\":[4],\"required\":[4],\"showingPw\":[32]}],[256,\"verdocs-help-icon\",{\"text\":[1],\"icon\":[1],\"containerId\":[32]}],[256,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-menu-panel_2.cjs\",[[256,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"phone\":[32],\"delegator\":[32],\"loading\":[32],\"template\":[32]}],[260,\"verdocs-menu-panel\",{\"side\":[1],\"overlay\":[4],\"width\":[2]},[[4,\"click\",\"handleClick\"]]]]],[\"verdocs-pagination_2.cjs\",[[256,\"verdocs-quick-filter\",{\"options\":[16],\"label\":[1],\"value\":[1537],\"placeholder\":[1],\"open\":[32]}],[256,\"verdocs-pagination\",{\"selectedPage\":[1538,\"selected-page\"],\"itemCount\":[2,\"item-count\"],\"perPage\":[2,\"per-page\"]}]]],[\"verdocs-dropdown.cjs\",[[256,\"verdocs-dropdown\",{\"options\":[16],\"containerId\":[32],\"showPicker\":[32]}]]],[\"verdocs-file-chooser_2.cjs\",[[256,\"verdocs-file-chooser\",{\"endpoint\":[16],\"file\":[32]}],[256,\"verdocs-progress-bar\",{\"label\":[1],\"showPercent\":[4,\"show-percent\"],\"percent\":[2]}]]],[\"verdocs-spinner.cjs\",[[256,\"verdocs-spinner\",{\"size\":[2],\"mode\":[1]}]]],[\"verdocs-dialog.cjs\",[[260,\"verdocs-dialog\",{\"persistent\":[4]}]]],[\"verdocs-ok-dialog.cjs\",[[256,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"buttonLabel\":[1,\"button-label\"],\"showCancel\":[4,\"show-cancel\"],\"closed\":[32]}]]],[\"verdocs-flag.cjs\",[[256,\"verdocs-flag\",{\"variant\":[1],\"label\":[1],\"showSkip\":[4,\"show-skip\"]}]]],[\"verdocs-download-dialog_4.cjs\",[[256,\"verdocs-sign-footer\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"isDone\":[4,\"is-done\"],\"askingQuestion\":[32],\"declinine\":[32],\"envelope\":[32]}],[256,\"verdocs-download-dialog\",{\"signed\":[4],\"polling\":[4],\"documents\":[16],\"hasCertificate\":[4,\"has-certificate\"]}],[256,\"verdocs-envelope-document-page\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"type\":[1],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32]}],[256,\"verdocs-question-dialog\",{\"question\":[1025],\"closed\":[32]}]]],[\"verdocs-adopt-signature-dialog_7.cjs\",[[256,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"headerTargetId\":[1,\"header-target-id\"],\"canceling\":[32],\"showCancelDone\":[32],\"showLoadError\":[32],\"loading\":[32],\"envelope\":[32],\"zoomLevel\":[32],\"showDownloadDialog\":[32],\"polling\":[32]}],[256,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"recipient\":[16],\"choices\":[16],\"agreed\":[32],\"response\":[32],\"updatedRecipient\":[32],\"dobContainerId\":[32]}],[256,\"verdocs-adopt-signature-dialog\",{\"name\":[1],\"nameLocked\":[4,\"name-locked\"],\"fontLoaded\":[32],\"enteredName\":[32],\"enteredInitials\":[32],\"mode\":[32],\"isDrawing\":[32],\"hasDrawnSignature\":[32],\"hasDrawnInitials\":[32]}],[256,\"verdocs-otp-dialog\",{\"endpoint\":[1040],\"method\":[1],\"resendDisabled\":[32],\"response\":[32]}],[256,\"verdocs-passcode-dialog\",{\"endpoint\":[1040],\"response\":[32]}],[256,\"verdocs-disclosure-dialog\",{\"disclosures\":[1],\"delegator\":[4],\"accepted\":[32]}],[256,\"verdocs-delegate-dialog\",{\"endpoint\":[1040],\"envelope\":[16],\"first_name\":[32],\"last_name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32]}]]],[\"verdocs-organization-card_2.cjs\",[[256,\"verdocs-organization-card\",{\"organization\":[16],\"hovered\":[32]},[[1,\"mouseover\",\"onMouseOver\"],[1,\"mouseout\",\"onMouseOut\"]]],[260,\"verdocs-portal\",{\"anchor\":[1],\"voffset\":[2]},[[11,\"scroll\",\"handleScroll\"],[9,\"resize\",\"handleResize\"],[4,\"click\",\"handleClick\"]]]]],[\"verdocs-checkbox_5.cjs\",[[256,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1025,\"field-name\"],\"helpText\":[1,\"help-text\"],\"dirty\":[32],\"label\":[32],\"type\":[32],\"name\":[32],\"required\":[32],\"readonly\":[32],\"roleName\":[32],\"group\":[32],\"fieldType\":[32],\"options\":[32],\"placeholder\":[32],\"defaultValue\":[32],\"showingHelp\":[32],\"loading\":[32],\"template\":[32]}],[256,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}],[256,\"verdocs-component-error\",{\"message\":[1]}],[256,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4]}],[256,\"verdocs-loader\"]]],[\"verdocs-field-attachment_11.cjs\",[[256,\"verdocs-field-attachment\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"dialogOpen\":[32],\"selectedFile\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-checkbox\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"done\":[516],\"editable\":[516],\"moveable\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-date\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"containerId\":[32],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-dropdown\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-initial\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"disabled\":[516],\"initials\":[513],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"initialid\":[513],\"isPreview\":[516,\"is-preview\"],\"showingProperties\":[32],\"focused\":[32],\"menuOpen\":[32],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-radio\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"required\":[516],\"done\":[516],\"editable\":[516],\"moveable\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-signature\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"name\":[513],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"signatureid\":[513],\"isPreview\":[516,\"is-preview\"],\"showingProperties\":[32],\"focused\":[32],\"menuOpen\":[32],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[0,\"blur\",\"handleBlur\"],[0,\"blur\",\"onBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-textarea\",{\"endpoint\":[16],\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-textbox\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"multiline\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[514],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-field-timestamp\",{\"source\":[513],\"sourceid\":[513],\"fieldname\":[513],\"field\":[16],\"isPreview\":[516,\"is-preview\"],\"disabled\":[516],\"editable\":[516],\"moveable\":[516],\"done\":[516],\"xscale\":[514],\"yscale\":[514],\"pagenumber\":[2],\"showingProperties\":[32],\"focused\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]},[[2,\"blur\",\"handleBlur\"]],{\"editable\":[\"onEditableChanged\"]}],[256,\"verdocs-upload-dialog\",{\"maxSize\":[1026,\"max-size\"],\"existingFile\":[1032,\"existing-file\"],\"draggingOver\":[32],\"confirmDelete\":[32],\"selectedFiles\":[32],\"errorMessage\":[32]}]]],[\"verdocs-template-document-page_2.cjs\",[[256,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}],[256,\"verdocs-template-document-page\",{\"endpoint\":[16],\"editable\":[4],\"disabled\":[4],\"done\":[4],\"templateId\":[513,\"template-id\"],\"documentId\":[513,\"document-id\"],\"pageNumber\":[514,\"page-number\"],\"virtualWidth\":[2,\"virtual-width\"],\"virtualHeight\":[1026,\"virtual-height\"],\"layers\":[16],\"containerId\":[32],\"renderedWidth\":[32],\"renderedHeight\":[32],\"naturalWidth\":[32],\"naturalHeight\":[32],\"aspectRatio\":[32],\"skipFirstNotification\":[32],\"pageDisplayUri\":[32],\"xScale\":[32],\"yScale\":[32],\"loading\":[32],\"template\":[32]}]]],[\"verdocs-preview_6.cjs\",[[256,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1537,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"showMustSelectRole\":[32],\"selectedRoleName\":[32],\"loading\":[32],\"template\":[32]},[[4,\"keydown\",\"handleKeyDown\"],[0,\"settingsChanged\",\"handleFieldSettingsChanged\"],[0,\"deleted\",\"handleFieldDeleted\"]],{\"templateId\":[\"onTemplateIdChanged\"]}],[256,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32],\"template\":[32]},null,{\"templateId\":[\"onTemplateIdChanged\"]}],[256,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[513,\"template-id\"],\"environment\":[1],\"showCancel\":[4,\"show-cancel\"],\"containerId\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"sending\":[32],\"rolesCompleted\":[32],\"loading\":[32],\"template\":[32],\"reset\":[64]},null,{\"templateId\":[\"onTemplateIdChanged\"]}],[256,\"verdocs-template-roles\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"sender\":[32],\"dragging\":[32],\"loading\":[32],\"template\":[32]}],[256,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"uploading\":[32],\"progressLabel\":[32],\"progressPercent\":[32],\"showDeleteError\":[32],\"confirmDeleteDocument\":[32],\"loading\":[32],\"template\":[32]}],[256,\"verdocs-template-build-tabs\",{\"endpoint\":[16],\"templateId\":[1537,\"template-id\"],\"step\":[1537],\"loading\":[32],\"template\":[32]},null,{\"templateId\":[\"onTemplateIdChanged\"],\"step\":[\"onStepChanged\"]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/embeds/verdocs-preview/verdocs-preview.js

@@ -1,3 +1,4 @@
+import interact from "interactjs";
 import { getTemplate, integerSequence, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { Host, h, Fragment } from "@stencil/core";
 import { renderDocumentField } from "../../../utils/utils";
@@ -69,6 +70,17 @@ export class VerdocsPreview {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         }
     }
+    componentDidRender() {
+        var _a;
+        // Defensive hack: fields rendered in other tabs (e.g. the builder's Fields tab) may share DOM
+        // IDs with fields shown here, and interact.js — being vanilla JS — is unaware of Stencil's
+        // re-renders. Unbind any drag/resize handlers on fields inside our own subtree after each
+        // render so they stay non-interactive in preview mode. Scope to hostEl so we don't clobber
+        // handlers on fields belonging to a sibling component during brief tab-switch overlaps.
+        (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.verdocs-field').forEach(el => {
+            interact(el).unset();
+        });
+    }
     handlePageRendered(e) {
         var _a;
         const pageInfo = e.detail;
@@ -191,6 +203,7 @@ export class VerdocsPreview {
                 }
             }];
     }
+    static get elementRef() { return "hostEl"; }
     static get watchers() {
         return [{
                 "propName": "templateId",

package/dist/collection/components/embeds/verdocs-preview/verdocs-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-preview.js","sourceRoot":"","sources":["../../../../src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import {getTemplate, integerSequence, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Event, EventEmitter, Host, Component, Prop, h, State, Fragment, Watch} from '@stencil/core';\nimport {renderDocumentField} from '../../../utils/utils';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n *\n * ```ts\n * <verdocs-preview\n *   templateId={TEMPLATE_ID}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  private templateListenerId = null;\n  private renderedPages: Record<string, IDocumentPageInfo> = {};\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[PREVIEW] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[PREVIEW] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[PREVIEW] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  handlePageRendered(e: any) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    this.renderedPages[`${pageInfo.documentId}:${pageInfo.pageNumber}`] = pageInfo;\n\n    const fields = (this.template?.fields || []).filter(field => {\n      // Templates created on the new builder have document_id set, but old ones may not.\n      // If document_id is missing, we assume it's for the first document or use legacy logic.\n      // However, for this fix, we primarily care about multi-doc templates which should have IDs.\n      if (field['document_id']) {\n        return field['document_id'] === pageInfo.documentId && field.page === pageInfo.pageNumber;\n      }\n      return field.page === pageInfo.pageNumber;\n    });\n\n    // console.log('[PREVIEW] Page rendered', pageInfo, fields);\n    fields.forEach(field => renderDocumentField('template', field, pageInfo, {disabled: true, editable: false, draggable: false}));\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {(this.template?.documents || []).map(document => {\n          const pageNumbers = integerSequence(1, document.pages);\n          return (\n            <Fragment>\n              {pageNumbers.map(pageNumber => {\n                const pageSize = document.page_sizes?.[pageNumber] || {width: 612, height: 792};\n\n                return (\n                  <verdocs-template-document-page\n                    templateId={document.template_id}\n                    documentId={document.id}\n                    pageNumber={pageNumber}\n                    disabled={true}\n                    editable={false}\n                    done={false}\n                    virtualWidth={pageSize.width}\n                    virtualHeight={pageSize.height}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                );\n              })}\n            </Fragment>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-preview.js","sourceRoot":"","sources":["../../../../src/components/embeds/verdocs-preview/verdocs-preview.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {getTemplate, integerSequence, ITemplate, VerdocsEndpoint} from '@verdocs/js-sdk';\nimport {Element, Event, EventEmitter, Host, Component, Prop, h, State, Fragment, Watch} from '@stencil/core';\nimport {renderDocumentField} from '../../../utils/utils';\nimport {IDocumentPageInfo} from '../../../utils/Types';\nimport {SDKError} from '../../../utils/errors';\nimport {Store} from '../../../utils/Datastore';\n\n/**\n * Display a template preview experience. This will display the template's attached\n * documents with signing fields overlaid on each page. Fields will be color-coded\n * by recipient, and will be read-only (cannot be filled, moved, or altered).\n *\n * ```ts\n * <verdocs-preview\n *   templateId={TEMPLATE_ID}\n *   onSdkError={({ detail }) => { console.log('SDK error', detail) }\n *   />\n * ```\n */\n@Component({\n  tag: 'verdocs-preview',\n  styleUrl: 'verdocs-preview.scss',\n  shadow: false,\n})\nexport class VerdocsPreview {\n  private templateListenerId = null;\n  private renderedPages: Record<string, IDocumentPageInfo> = {};\n\n  @Element() hostEl: HTMLElement;\n\n  /**\n   * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\n   */\n  @Prop() endpoint: VerdocsEndpoint = VerdocsEndpoint.getDefault();\n\n  /**\n   * The ID of the template to create the document from.\n   */\n  @Prop() templateId: string | null = null;\n\n  /**\n   * Event fired if an error occurs. The event details will contain information about the error. Most errors will\n   * terminate the process, and the calling application should correct the condition and re-render the component.\n   */\n  @Event({composed: true}) sdkError: EventEmitter<SDKError>;\n\n  @State() loading = true;\n  @State() template: ITemplate | null = null;\n\n  disconnectedCallback() {\n    this.unlistenToTemplate();\n  }\n\n  async listenToTemplate() {\n    this.unlistenToTemplate();\n    Store.subscribe(\n      'templates',\n      this.templateId,\n      () => getTemplate(this.endpoint, this.templateId),\n      false,\n      (template: ITemplate) => {\n        this.template = template;\n        this.loading = false;\n      },\n    );\n  }\n\n  unlistenToTemplate() {\n    if (this.templateListenerId) {\n      Store.store.delListener(this.templateListenerId);\n      this.templateListenerId = null;\n    }\n  }\n\n  @Watch('templateId')\n  onTemplateIdChanged(newTemplateId: string) {\n    console.log('[PREVIEW] Template ID changed', newTemplateId);\n    this.listenToTemplate();\n  }\n\n  async componentWillLoad() {\n    try {\n      this.endpoint.loadSession();\n      if (!this.endpoint.session) {\n        console.log('[PREVIEW] Unable to start builder session, must be authenticated');\n        return;\n      }\n\n      if (!this.templateId) {\n        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);\n        return;\n      }\n\n      this.listenToTemplate();\n    } catch (e) {\n      console.log('[PREVIEW] Error with preview session', e);\n      this.sdkError?.emit(new SDKError(e.message, e.response?.status, e.response?.data));\n    }\n  }\n\n  componentDidRender() {\n    // Defensive hack: fields rendered in other tabs (e.g. the builder's Fields tab) may share DOM\n    // IDs with fields shown here, and interact.js — being vanilla JS — is unaware of Stencil's\n    // re-renders. Unbind any drag/resize handlers on fields inside our own subtree after each\n    // render so they stay non-interactive in preview mode. Scope to hostEl so we don't clobber\n    // handlers on fields belonging to a sibling component during brief tab-switch overlaps.\n    this.hostEl?.querySelectorAll('.verdocs-field').forEach(el => {\n      interact(el as HTMLElement).unset();\n    });\n  }\n\n  handlePageRendered(e: any) {\n    const pageInfo = e.detail as IDocumentPageInfo;\n    this.renderedPages[`${pageInfo.documentId}:${pageInfo.pageNumber}`] = pageInfo;\n\n    const fields = (this.template?.fields || []).filter(field => {\n      // Templates created on the new builder have document_id set, but old ones may not.\n      // If document_id is missing, we assume it's for the first document or use legacy logic.\n      // However, for this fix, we primarily care about multi-doc templates which should have IDs.\n      if (field['document_id']) {\n        return field['document_id'] === pageInfo.documentId && field.page === pageInfo.pageNumber;\n      }\n      return field.page === pageInfo.pageNumber;\n    });\n\n    // console.log('[PREVIEW] Page rendered', pageInfo, fields);\n    fields.forEach(field => renderDocumentField('template', field, pageInfo, {disabled: true, editable: false, draggable: false}));\n  }\n\n  render() {\n    if (this.loading) {\n      return (\n        <Host>\n          <verdocs-loader />\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        {(this.template?.documents || []).map(document => {\n          const pageNumbers = integerSequence(1, document.pages);\n          return (\n            <Fragment>\n              {pageNumbers.map(pageNumber => {\n                const pageSize = document.page_sizes?.[pageNumber] || {width: 612, height: 792};\n\n                return (\n                  <verdocs-template-document-page\n                    templateId={document.template_id}\n                    documentId={document.id}\n                    pageNumber={pageNumber}\n                    disabled={true}\n                    editable={false}\n                    done={false}\n                    virtualWidth={pageSize.width}\n                    virtualHeight={pageSize.height}\n                    onPageRendered={e => this.handlePageRendered(e)}\n                    layers={[\n                      {name: 'page', type: 'canvas'},\n                      {name: 'controls', type: 'div'},\n                    ]}\n                  />\n                );\n              })}\n            </Fragment>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js

@@ -95,12 +95,16 @@ export class VerdocsFieldAttachment {
             settingsPanel.hidePanel();
         }
     }
-    componentDidUpdate() {
-        if (this.isPreview) {
+    onEditableChanged(newVal, oldVal) {
+        // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings
+        if (oldVal && !newVal) {
             interact(this.el).unset();
-            return;
         }
     }
+    disconnectedCallback() {
+        // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere
+        interact(this.el).unset();
+    }
     handleShow() {
         this.dialogOpen = true;
     }
@@ -111,9 +115,9 @@ export class VerdocsFieldAttachment {
         const signerClass = `signer-${(index % 10) + 1}`;
         const hasFile = value || !!this.selectedFile;
         if (done) {
-            return (h(Host, { class: { done } }, h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
+            return (h(Host, { class: { 'verdocs-field': true, done } }, h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
         }
-        return (h(Host, { class: { required, disabled, done, focused, [signerClass]: true } }, label && h("label", null, label), h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && !readonly && this.handleShow() }), editable && (h(Fragment, null, 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: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { 'verdocs-field': true, required, disabled, done, focused, [signerClass]: true } }, label && h("label", null, label), h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && !readonly && this.handleShow() }), editable && (h(Fragment, null, 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: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -508,6 +512,12 @@ export class VerdocsFieldAttachment {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "editable",
+                "methodName": "onEditableChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "blur",

package/dist/collection/components/fields/verdocs-field-attachment/verdocs-field-attachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-field-attachment.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element, Listen} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n  lastModified: number;\n  size: number;\n  type: string;\n  name: string;\n  data: string;\n}\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"var(--verdocs-field-text-color, currentColor)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--verdocs-attachment-icon-color, #339933)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/**\n * Displays an attachment field.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when a file is attached by the signer.\n   */\n  @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n  /**\n   * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n   * Build) not for any attachments (during signing).\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() dialogOpen?: boolean = false;\n  @State() selectedFile?: ISelectedFile | null = null;\n  @State() focused = false;\n\n  @Listen('blur')\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.el.focus();\n    this.focused = true;\n    this.dialogOpen = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  componentDidUpdate() {\n    if (this.isPreview) {\n      interact(this.el).unset();\n      return;\n    }\n  }\n\n  handleShow() {\n    this.dialogOpen = true;\n  }\n\n  handleUploadNext = (e: any) => {\n    console.log('Upload next', e);\n    this.dialogOpen = false;\n    this.selectedFile = e.detail[0];\n    this.attached?.emit(e.detail[0]);\n  };\n\n  handleUploadRemove = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dialogOpen = false;\n    this.selectedFile = null;\n    this.deleted?.emit({fieldName: this.fieldname});\n  };\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', readonly = false, settings = {}} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const hasFile = value || !!this.selectedFile;\n\n    if (done) {\n      return (\n        <Host class={{done}}>\n          <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{required, disabled, done, focused, [signerClass]: true}}>\n        {label && <label>{label}</label>}\n\n        <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && !readonly && this.handleShow()} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n\n        {this.dialogOpen && (\n          <verdocs-portal>\n            <verdocs-upload-dialog\n              existingFile={settings}\n              onNext={e => this.handleUploadNext(e)}\n              onRemove={e => this.handleUploadRemove(e)}\n              onExit={() => (this.dialogOpen = false)}\n            />\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-field-attachment.js","sourceRoot":"","sources":["../../../../src/components/fields/verdocs-field-attachment/verdocs-field-attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import interact from 'interactjs';\nimport {ITemplateField, IEnvelopeField} from '@verdocs/js-sdk';\nimport {Component, h, Host, Prop, Method, Event, EventEmitter, State, Fragment, Element, Listen, Watch} from '@stencil/core';\nimport {SettingsIcon} from '../../../utils/Icons';\nimport {Store} from '../../../utils/Datastore';\n\nexport interface ISelectedFile {\n  lastModified: number;\n  size: number;\n  type: string;\n  name: string;\n  data: string;\n}\n\nconst PaperclipIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"var(--verdocs-field-text-color, currentColor)\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13\" /></svg>`;\n\nconst AttachedIcon = `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--verdocs-attachment-icon-color, #339933)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-file-check\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/><path d=\"m9 15 2 2 4-4\"/></svg>`;\n\n/**\n * Displays an attachment field.\n */\n@Component({\n  tag: 'verdocs-field-attachment',\n  styleUrl: 'verdocs-field-attachment.scss',\n  shadow: false,\n})\nexport class VerdocsFieldAttachment {\n  @Element() el: HTMLElement;\n\n  /**\n   * Fields may be attached to templates or envelopes, but only template fields may be edited.\n   */\n  @Prop({reflect: true}) source: 'template' | 'envelope' = 'template';\n\n  /**\n   * The source template or envelope ID the field is found in.\n   */\n  @Prop({reflect: true}) sourceid: string = '';\n\n  /**\n   * The name of the field to display.\n   */\n  @Prop({reflect: true}) fieldname: string = '';\n\n  /**\n   * Override the field's settings. This is intended to be used during signing when fields are being\n   * mutated.\n   */\n  @Prop() field: IEnvelopeField | null | undefined = null;\n\n  /**\n   * If set to true, it will force interact to unset the el, resulting in no dragging the field.\n   */\n  @Prop({reflect: true}) isPreview?: boolean;\n\n  /**\n   * If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled.\n   */\n  @Prop({reflect: true}) disabled?: boolean = false;\n\n  /**\n   * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\n   * changed, so it should typically only be enabled in the Builder.\n   */\n  @Prop({reflect: true}) editable?: boolean = false;\n\n  /**\n   * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.\n   */\n  @Prop({reflect: true}) moveable?: boolean = false;\n\n  /**\n   * If set, the field is considered \"done\" and is drawn in a display-final-value state.\n   */\n  @Prop({reflect: true}) done?: boolean = false;\n\n  /**\n   * If set, the field will be be scaled horizontally by this factor.\n   */\n  @Prop({reflect: true}) xscale?: number = 1;\n\n  /**\n   * If set, the field will be be scaled vertically by this factor.\n   */\n  @Prop({reflect: true}) yscale?: number = 1;\n\n  /**\n   * The page the field is on\n   */\n  @Prop({reflect: true}) pagenumber?: number = 1;\n\n  /**\n   * Event fired when the field's settings are changed.\n   */\n  @Event({composed: true}) settingsChanged: EventEmitter<{fieldName: string; field: ITemplateField}>;\n\n  /**\n   * Event fired when a file is attached by the signer.\n   */\n  @Event({composed: true}) attached: EventEmitter<ISelectedFile>;\n\n  /**\n   * Event fired when the field is deleted. Note that this is for the FIELD (e.g. in\n   * Build) not for any attachments (during signing).\n   */\n  @Event({composed: true}) deleted: EventEmitter<{fieldName: string}>;\n\n  @State() showingProperties?: boolean = false;\n  @State() dialogOpen?: boolean = false;\n  @State() selectedFile?: ISelectedFile | null = null;\n  @State() focused = false;\n\n  @Listen('blur')\n  handleBlur() {\n    this.focused = false;\n  }\n\n  @Method()\n  async focusField() {\n    this.el.focus();\n    this.focused = true;\n    this.dialogOpen = true;\n  }\n\n  @Method()\n  async showSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.showPanel) {\n      settingsPanel.showPanel();\n    }\n  }\n\n  @Method()\n  async hideSettingsPanel() {\n    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`) as any;\n    if (settingsPanel && settingsPanel.hidePanel) {\n      settingsPanel.hidePanel();\n    }\n  }\n\n  @Watch('editable')\n  onEditableChanged(newVal: boolean, oldVal: boolean) {\n    // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings\n    if (oldVal && !newVal) {\n      interact(this.el).unset();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere\n    interact(this.el).unset();\n  }\n\n  handleShow() {\n    this.dialogOpen = true;\n  }\n\n  handleUploadNext = (e: any) => {\n    console.log('Upload next', e);\n    this.dialogOpen = false;\n    this.selectedFile = e.detail[0];\n    this.attached?.emit(e.detail[0]);\n  };\n\n  handleUploadRemove = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    this.dialogOpen = false;\n    this.selectedFile = null;\n    this.deleted?.emit({fieldName: this.fieldname});\n  };\n\n  render() {\n    const {source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1} = this;\n\n    const {index, field} = Store.getField(source, sourceid, fieldname, this.field);\n    const {required = false, value = '', label = '', readonly = false, settings = {}} = field || {};\n    const signerClass = `signer-${(index % 10) + 1}`;\n\n    const hasFile = value || !!this.selectedFile;\n\n    if (done) {\n      return (\n        <Host class={{'verdocs-field': true,done}}>\n          <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} />\n        </Host>\n      );\n    }\n\n    return (\n      <Host class={{'verdocs-field': true,required, disabled, done, focused, [signerClass]: true}}>\n        {label && <label>{label}</label>}\n\n        <div class=\"attach\" innerHTML={hasFile ? AttachedIcon : PaperclipIcon} onClick={() => !disabled && !readonly && this.handleShow()} />\n\n        {editable && (\n          <Fragment>\n            <div\n              id={`verdocs-settings-panel-trigger-${fieldname}`}\n              style={{transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})`}}\n              class=\"settings-icon\"\n              innerHTML={SettingsIcon}\n              onClick={(e: any) => {\n                e.stopPropagation();\n                this.showingProperties = !this.showingProperties;\n              }}\n            />\n\n            {this.showingProperties && (\n              <verdocs-portal anchor={`verdocs-settings-panel-trigger-${fieldname}`} onClickAway={() => (this.showingProperties = false)}>\n                <verdocs-template-field-properties\n                  templateId={sourceid}\n                  fieldName={fieldname}\n                  onClose={() => (this.showingProperties = false)}\n                  onDelete={() => {\n                    this.deleted?.emit({fieldName: fieldname});\n                    return this.hideSettingsPanel();\n                  }}\n                  onSettingsChanged={e => {\n                    this.settingsChanged?.emit(e.detail);\n                    return this.hideSettingsPanel();\n                  }}\n                  helpText={'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.'}\n                />\n              </verdocs-portal>\n            )}\n          </Fragment>\n        )}\n\n        {this.dialogOpen && (\n          <verdocs-portal>\n            <verdocs-upload-dialog\n              existingFile={settings}\n              onNext={e => this.handleUploadNext(e)}\n              onRemove={e => this.handleUploadRemove(e)}\n              onExit={() => (this.dialogOpen = false)}\n            />\n          </verdocs-portal>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/fields/verdocs-field-checkbox/verdocs-field-checkbox.js

@@ -75,12 +75,16 @@ export class VerdocsFieldCheckbox {
             settingsPanel.hidePanel();
         }
     }
-    componentDidUpdate() {
-        if (this.isPreview) {
+    onEditableChanged(newVal, oldVal) {
+        // When transitioning out of editable mode (e.g., builder -> preview tab), clear interact bindings
+        if (oldVal && !newVal) {
             interact(this.el).unset();
-            return;
         }
     }
+    disconnectedCallback() {
+        // Clear any interact.js drag/resize bindings so they don't leak if the DOM element is reused elsewhere
+        interact(this.el).unset();
+    }
     render() {
         const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
@@ -88,9 +92,9 @@ export class VerdocsFieldCheckbox {
         const signerClass = `signer-${(index % 10) + 1}`;
         const checked = value === 'true';
         if (done) {
-            return h(Host, { class: { done } }, checked ? '✓' : '☐');
+            return h(Host, { class: { 'verdocs-field': true, done } }, checked ? '✓' : '☐');
         }
-        return (h(Host, { class: { required, disabled, done, focused, [signerClass]: true } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldname }, h("input", { id: fieldname, name: fieldname, type: "checkbox", checked: checked, disabled: readonly || disabled, required: required }), h("span", null), editable && (h(Fragment, null, 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: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { 'verdocs-field': true, required, disabled, done, focused, [signerClass]: true } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldname }, h("input", { id: fieldname, name: fieldname, type: "checkbox", checked: checked, disabled: readonly || disabled, required: required }), h("span", null), editable && (h(Fragment, null, 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: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -462,6 +466,12 @@ export class VerdocsFieldCheckbox {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "editable",
+                "methodName": "onEditableChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "blur",