@verdocs/web-sdk 1.12.41 → 1.12.43

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

@@ -8,13 +8,14 @@ const Templates = require('./Templates-e258cbd5.js');
 const TemplateDocuments = require('./TemplateDocuments-1c6620b0.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const errors = require('./errors-0396da3d.js');
-const interact_min = require('./interact.min-fdb8d65c.js');
+const interact_min = require('./interact.min-ba5cc513.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-173073b5.js');
+const utils = require('./utils-c218d9c7.js');
 const templateStore = require('./templateStore-1862f03c.js');
 const Templates$1 = require('./Templates-f310df2f.js');
 const Roles = require('./Roles-9b593b95.js');
 const Colors = require('./Colors-e809dcc9.js');
+require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
@@ -202,9 +203,16 @@ const VerdocsTemplateFields = class {
       this.selectedRoleName = field.role_name;
       console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', utils.getRoleIndex(templateStore.state.roleNames, field.role_name));
+      el.field = templateStore.state.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: templateStore.state.template, event: 'updated-field' });
+      console.log('Re-rendering field', field.name, pageInfo.pageNumber);
+      this.reRenderField(field, pageInfo.pageNumber);
+      const newEl = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+      if (!newEl) {
+        return;
+      }
     });
     el.addEventListener('deleted', () => {
       var _a;
@@ -225,41 +233,19 @@ const VerdocsTemplateFields = class {
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
     const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
-    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    // console.log('[FIELDS] Fields on page', fields);
-    fields.forEach(field => {
-      const roleIndex = utils.getRoleIndex(templateStore.state.roleNames, field.role_name);
-      const el = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
-      if (!el) {
-        return;
-      }
-      if (Array.isArray(el)) {
-        el.forEach(e => {
-          this.attachFieldAttributes(pageInfo, field, roleIndex, e);
-          interact_min.interact(e).draggable({
-            listeners: {
-              start(event) {
-                console.log('[FIELDS] Drag started', event.type, event.target);
-              },
-              move(event) {
-                const oldX = +(event.target.getAttribute('posX') || 0);
-                const oldY = +(event.target.getAttribute('posY') || 0);
-                const xScale = +(event.target.getAttribute('xScale') || 1);
-                const yScale = +(event.target.getAttribute('yScale') || 1);
-                const newX = event.dx / xScale + oldX;
-                const newY = event.dy / yScale + oldY;
-                event.target.setAttribute('posX', newX);
-                event.target.setAttribute('posy', newY);
-                utils.updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-              },
-              end: this.handleMoveField.bind(this),
-            },
-          });
-        });
-      }
-      else {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-        interact_min.interact(el).draggable({
+    fields.forEach(field => this.reRenderField(field, pageInfo.pageNumber));
+  }
+  reRenderField(field, pageNumber) {
+    const pageInfo = this.cachedPageInfo[pageNumber];
+    const roleIndex = utils.getRoleIndex(templateStore.state.roleNames, field.role_name);
+    const el = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    if (!el) {
+      return;
+    }
+    if (Array.isArray(el)) {
+      el.forEach(e => {
+        this.attachFieldAttributes(pageInfo, field, roleIndex, e);
+        interact_min.interact(e).draggable({
           listeners: {
             start(event) {
               console.log('[FIELDS] Drag started', event.type, event.target);
@@ -278,8 +264,30 @@ const VerdocsTemplateFields = class {
             end: this.handleMoveField.bind(this),
           },
         });
-      }
-    });
+      });
+    }
+    else {
+      this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+      interact_min.interact(el).draggable({
+        listeners: {
+          start(event) {
+            console.log('[FIELDS] Drag started', event.type, event.target);
+          },
+          move(event) {
+            const oldX = +(event.target.getAttribute('posX') || 0);
+            const oldY = +(event.target.getAttribute('posY') || 0);
+            const xScale = +(event.target.getAttribute('xScale') || 1);
+            const yScale = +(event.target.getAttribute('yScale') || 1);
+            const newX = event.dx / xScale + oldX;
+            const newY = event.dy / yScale + oldY;
+            event.target.setAttribute('posX', newX);
+            event.target.setAttribute('posy', newY);
+            utils.updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+          },
+          end: this.handleMoveField.bind(this),
+        },
+      });
+    }
   }
   async handleMoveField(e) {
     const pageNumber = e.target.getAttribute('pageNumber');

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

@@ -6,7 +6,8 @@ const index = require('./index-67233b76.js');
 require('./Types-f89f9116.js');
 const TemplateDocuments = require('./TemplateDocuments-1c6620b0.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
-const utils = require('./utils-173073b5.js');
+const utils = require('./utils-c218d9c7.js');
+require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');

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

@@ -7,8 +7,9 @@ const Envelopes = require('./Envelopes-699531b7.js');
 const Types = require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-173073b5.js');
+const utils = require('./utils-c218d9c7.js');
 const errors = require('./errors-0396da3d.js');
+require('./_commonjsHelpers-0c557e26.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 

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

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy(JSON.parse("[[\"verdocs-checkbox_4.cjs\",[[0,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"disabled\":[4]}],[0,\"verdocs-text-input\",{\"value\":[1],\"label\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"disabled\":[4]}],[0,\"verdocs-component-error\",{\"message\":[1]}],[0,\"verdocs-help-icon\",{\"text\":[1],\"containerId\":[32]}]]],[\"verdocs-build.cjs\",[[0,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"step\":[32],\"pdfUrl\":[32],\"template\":[32]}]]],[\"verdocs-field-initial.cjs\",[[0,\"verdocs-field-initial\",{\"field\":[16],\"disabled\":[4],\"initials\":[1],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-signature.cjs\",[[0,\"verdocs-field-signature\",{\"field\":[16],\"name\":[1],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-checkbox.cjs\",[[0,\"verdocs-field-checkbox\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-date.cjs\",[[0,\"verdocs-field-date\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"containerId\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-dropdown.cjs\",[[0,\"verdocs-field-dropdown\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-radio-button.cjs\",[[0,\"verdocs-field-radio-button\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textarea.cjs\",[[0,\"verdocs-field-textarea\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textbox.cjs\",[[0,\"verdocs-field-textbox\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-timestamp.cjs\",[[0,\"verdocs-field-timestamp\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-sign.cjs\",[[0,\"verdocs-sign\",{\"envelopeId\":[1,\"envelope-id\"],\"roleId\":[1,\"role-id\"],\"inviteCode\":[1,\"invite-code\"],\"headerTargetId\":[1,\"header-target-id\"],\"envelope\":[32],\"roleNames\":[32],\"recipient\":[32],\"signerToken\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"errorMessage\":[32],\"focusedField\":[32],\"isDone\":[32],\"showDone\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"documentsSingularPlural\":[32]}]]],[\"verdocs-template-properties.cjs\",[[0,\"verdocs-template-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"template\":[32],\"name\":[32],\"visibility\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32]}]]],[\"verdocs-template-reminders.cjs\",[[0,\"verdocs-template-reminders\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showPlanBlocker\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-template-name.cjs\",[[0,\"verdocs-template-name\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-auth.cjs\",[[0,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"isAuthenticated\":[32],\"displayMode\":[32],\"username\":[32],\"password\":[32],\"loggingIn\":[32],\"activeSession\":[32],\"loginError\":[32]}]]],[\"verdocs-search.cjs\",[[0,\"verdocs-search\",{\"endpoint\":[16]}]]],[\"verdocs-send.cjs\",[[0,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"containerId\":[32],\"rolesAtLevel\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"rolesCompleted\":[32],\"reset\":[64]}]]],[\"verdocs-template-visibility.cjs\",[[0,\"verdocs-template-visibility\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"dirty\":[32],\"loading\":[32],\"personal\":[32],\"public\":[32]}]]],[\"verdocs-view.cjs\",[[0,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"headerTargetId\":[1,\"header-target-id\"],\"isProcessing\":[32],\"envelope\":[32],\"roleNames\":[32],\"showCancelDone\":[32]}]]],[\"verdocs-upload-dialog.cjs\",[[0,\"verdocs-upload-dialog\",{\"draggingOver\":[32],\"decodedFiles\":[32]}]]],[\"verdocs-field-attachment.cjs\",[[0,\"verdocs-field-attachment\",{\"field\":[16],\"disabled\":[4],\"roleIndex\":[2,\"role-index\"],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-template-document-page.cjs\",[[0,\"verdocs-template-document-page\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"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]}]]],[\"verdocs-loader.cjs\",[[0,\"verdocs-loader\"]]],[\"verdocs-preview.cjs\",[[0,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"]}]]],[\"verdocs-template-attachments.cjs\",[[0,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32]}]]],[\"verdocs-envelope-sidebar.cjs\",[[0,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"envelope\":[32],\"roleNames\":[32],\"activeTab\":[32],\"panelOpen\":[32]}]]],[\"verdocs-floating-menu.cjs\",[[0,\"verdocs-floating-menu\",{\"options\":[16]}]]],[\"verdocs-kba-dialog.cjs\",[[0,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"choices\":[16],\"response\":[32]}]]],[\"verdocs-field-payment.cjs\",[[0,\"verdocs-field-payment\",{\"field\":[16],\"disabled\":[4],\"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\"],\"focused\":[4],\"signed\":[4],\"rerender\":[2],\"roleindex\":[2],\"preparedMessage\":[32],\"signatureUrl\":[32],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-organization-card.cjs\",[[0,\"verdocs-organization-card\",{\"organization\":[16]}]]],[\"verdocs-search-tabs.cjs\",[[0,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-status-indicator.cjs\",[[0,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32]}]]],[\"verdocs-template-card.cjs\",[[0,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags.cjs\",[[0,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle.cjs\",[[0,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-button.cjs\",[[0,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-initial-dialog.cjs\",[[0,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog.cjs\",[[0,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32]}]]],[\"verdocs-contact-picker.cjs\",[[0,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32],\"nameFieldId\":[32],\"emailFieldId\":[32],\"phoneFieldId\":[32]}]]],[\"verdocs-progress-bar.cjs\",[[0,\"verdocs-progress-bar\",{\"label\":[1],\"showPercent\":[4,\"show-percent\"],\"percent\":[2]}]]],[\"verdocs-toggle-button.cjs\",[[0,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-template-create_3.cjs\",[[0,\"verdocs-template-roles\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"showingSenderDialog\":[32],\"sender\":[32],\"forceRerender\":[32]}],[0,\"verdocs-template-create\",{\"endpoint\":[16],\"file\":[32],\"creating\":[32],\"progressLabel\":[32],\"progressPercent\":[32]}],[0,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"selectedRoleName\":[32],\"rerender\":[32]},[[4,\"keydown\",\"handleKeyDown\"]]]]],[\"verdocs-quick-functions_3.cjs\",[[0,\"verdocs-quick-functions\",{\"endpoint\":[16]}],[0,\"verdocs-search-activity\",{\"endpoint\":[16],\"type\":[1],\"options\":[8],\"emptyMessage\":[32],\"authFailure\":[32],\"title\":[32],\"recent\":[32],\"saved\":[32],\"starred\":[32]}],[0,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-toolbar-icon.cjs\",[[0,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}]]],[\"verdocs-template-role-properties_2.cjs\",[[0,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"sender\":[1],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"fullName\":[32],\"email\":[32],\"phone\":[32],\"allowDelegation\":[32]}],[0,\"verdocs-template-sender\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"sender\":[1],\"saving\":[32]}]]],[\"verdocs-ok-dialog.cjs\",[[0,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"showCancel\":[4,\"show-cancel\"],\"closed\":[32]}]]],[\"verdocs-radio-button.cjs\",[[0,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-dropdown_2.cjs\",[[0,\"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]}],[0,\"verdocs-dropdown\",{\"options\":[16],\"open\":[32]}]]],[\"verdocs-button-panel_3.cjs\",[[0,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1,\"field-name\"],\"helpText\":[1,\"help-text\"],\"dirty\":[32],\"loading\":[32],\"type\":[32],\"setting\":[32],\"name\":[32],\"roleName\":[32],\"group\":[32],\"fieldType\":[32],\"required\":[32],\"options\":[32],\"placeholder\":[32],\"defaultValue\":[32],\"showingHelp\":[32]}],[4,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}],[0,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"verdocs-checkbox_4.cjs\",[[0,\"verdocs-checkbox\",{\"checked\":[4],\"name\":[1],\"label\":[1],\"value\":[1],\"theme\":[1],\"disabled\":[4]}],[0,\"verdocs-text-input\",{\"value\":[1],\"label\":[1],\"placeholder\":[1],\"autocomplete\":[1],\"helpText\":[1,\"help-text\"],\"type\":[1],\"disabled\":[4]}],[0,\"verdocs-component-error\",{\"message\":[1]}],[0,\"verdocs-help-icon\",{\"text\":[1],\"containerId\":[32]}]]],[\"verdocs-build.cjs\",[[0,\"verdocs-build\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"step\":[32],\"pdfUrl\":[32],\"template\":[32]}]]],[\"verdocs-field-initial.cjs\",[[0,\"verdocs-field-initial\",{\"field\":[16],\"disabled\":[4],\"initials\":[1],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempInitials\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-signature.cjs\",[[0,\"verdocs-field-signature\",{\"field\":[16],\"name\":[1],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"tempSignature\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-checkbox.cjs\",[[0,\"verdocs-field-checkbox\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-date.cjs\",[[0,\"verdocs-field-date\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"containerId\":[32],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-dropdown.cjs\",[[0,\"verdocs-field-dropdown\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-radio-button.cjs\",[[0,\"verdocs-field-radio-button\",{\"field\":[16],\"option\":[2],\"disabled\":[4],\"done\":[4],\"roleindex\":[2],\"editable\":[4],\"moveable\":[4],\"rerender\":[2],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textarea.cjs\",[[0,\"verdocs-field-textarea\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-textbox.cjs\",[[0,\"verdocs-field-textbox\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-field-timestamp.cjs\",[[0,\"verdocs-field-timestamp\",{\"field\":[16],\"disabled\":[4],\"editable\":[4],\"moveable\":[4],\"done\":[4],\"roleindex\":[2],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-sign.cjs\",[[0,\"verdocs-sign\",{\"envelopeId\":[1,\"envelope-id\"],\"roleId\":[1,\"role-id\"],\"inviteCode\":[1,\"invite-code\"],\"headerTargetId\":[1,\"header-target-id\"],\"envelope\":[32],\"roleNames\":[32],\"recipient\":[32],\"signerToken\":[32],\"hasSignature\":[32],\"nextButtonLabel\":[32],\"nextSubmits\":[32],\"errorMessage\":[32],\"focusedField\":[32],\"submitting\":[32],\"isDone\":[32],\"showDone\":[32],\"finishLater\":[32],\"showFinishLater\":[32],\"agreed\":[32],\"documentsSingularPlural\":[32]}]]],[\"verdocs-template-properties.cjs\",[[0,\"verdocs-template-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"template\":[32],\"name\":[32],\"visibility\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32]}]]],[\"verdocs-template-reminders.cjs\",[[0,\"verdocs-template-reminders\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showPlanBlocker\":[32],\"sendReminders\":[32],\"firstReminderDays\":[32],\"reminderDays\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-template-name.cjs\",[[0,\"verdocs-template-name\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"name\":[32],\"dirty\":[32],\"loading\":[32]}]]],[\"verdocs-auth.cjs\",[[0,\"verdocs-auth\",{\"endpoint\":[16],\"visible\":[4],\"logo\":[1],\"isAuthenticated\":[32],\"displayMode\":[32],\"username\":[32],\"password\":[32],\"loggingIn\":[32],\"activeSession\":[32],\"loginError\":[32]}]]],[\"verdocs-search.cjs\",[[0,\"verdocs-search\",{\"endpoint\":[16]}]]],[\"verdocs-send.cjs\",[[0,\"verdocs-send\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"containerId\":[32],\"rolesAtLevel\":[32],\"showPickerForId\":[32],\"sessionContacts\":[32],\"rolesCompleted\":[32],\"reset\":[64]}]]],[\"verdocs-template-visibility.cjs\",[[0,\"verdocs-template-visibility\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"dirty\":[32],\"loading\":[32],\"personal\":[32],\"public\":[32]}]]],[\"verdocs-view.cjs\",[[0,\"verdocs-view\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"headerTargetId\":[1,\"header-target-id\"],\"isProcessing\":[32],\"envelope\":[32],\"roleNames\":[32],\"showCancelDone\":[32]}]]],[\"verdocs-upload-dialog.cjs\",[[0,\"verdocs-upload-dialog\",{\"draggingOver\":[32],\"decodedFiles\":[32]}]]],[\"verdocs-field-attachment.cjs\",[[0,\"verdocs-field-attachment\",{\"field\":[16],\"disabled\":[4],\"roleIndex\":[2,\"role-index\"],\"rerender\":[2],\"focusField\":[64],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-template-document-page.cjs\",[[0,\"verdocs-template-document-page\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"documentId\":[1,\"document-id\"],\"pageNumber\":[2,\"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]}]]],[\"verdocs-loader.cjs\",[[0,\"verdocs-loader\"]]],[\"verdocs-preview.cjs\",[[0,\"verdocs-preview\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"]}]]],[\"verdocs-template-attachments.cjs\",[[0,\"verdocs-template-attachments\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"loading\":[32]}]]],[\"verdocs-envelope-sidebar.cjs\",[[0,\"verdocs-envelope-sidebar\",{\"endpoint\":[16],\"envelopeId\":[1,\"envelope-id\"],\"envelope\":[32],\"roleNames\":[32],\"activeTab\":[32],\"panelOpen\":[32]}]]],[\"verdocs-floating-menu.cjs\",[[0,\"verdocs-floating-menu\",{\"options\":[16]}]]],[\"verdocs-kba-dialog.cjs\",[[0,\"verdocs-kba-dialog\",{\"step\":[2],\"steps\":[2],\"helptitle\":[1],\"helptext\":[1],\"mode\":[1],\"label\":[1],\"placeholder\":[1],\"choices\":[16],\"response\":[32]}]]],[\"verdocs-field-payment.cjs\",[[0,\"verdocs-field-payment\",{\"field\":[16],\"disabled\":[4],\"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\"],\"focused\":[4],\"signed\":[4],\"rerender\":[2],\"roleindex\":[2],\"preparedMessage\":[32],\"signatureUrl\":[32],\"showSettingsPanel\":[64],\"hideSettingsPanel\":[64]}]]],[\"verdocs-organization-card.cjs\",[[0,\"verdocs-organization-card\",{\"organization\":[16]}]]],[\"verdocs-search-tabs.cjs\",[[0,\"verdocs-search-tabs\",{\"selected\":[32]}]]],[\"verdocs-status-indicator.cjs\",[[0,\"verdocs-status-indicator\",{\"size\":[1],\"theme\":[1],\"status\":[1],\"envelope\":[16],\"isOpen\":[32],\"recipientStatusIcons\":[32],\"containerId\":[32]}]]],[\"verdocs-template-card.cjs\",[[0,\"verdocs-template-card\",{\"template\":[16]}]]],[\"verdocs-template-tags.cjs\",[[0,\"verdocs-template-tags\",{\"tags\":[16]}]]],[\"verdocs-toggle.cjs\",[[0,\"verdocs-toggle\",{\"options\":[16],\"theme\":[1],\"selectedOption\":[32]}]]],[\"verdocs-button.cjs\",[[0,\"verdocs-button\",{\"label\":[1],\"startIcon\":[1,\"start-icon\"],\"endIcon\":[1,\"end-icon\"],\"size\":[1],\"type\":[1],\"variant\":[1],\"disabled\":[4]}]]],[\"verdocs-initial-dialog.cjs\",[[0,\"verdocs-initial-dialog\",{\"initials\":[1],\"fontLoaded\":[32],\"enteredInitials\":[32],\"mode\":[32]}]]],[\"verdocs-signature-dialog.cjs\",[[0,\"verdocs-signature-dialog\",{\"name\":[1],\"fontLoaded\":[32],\"enteredName\":[32],\"mode\":[32]}]]],[\"verdocs-contact-picker.cjs\",[[0,\"verdocs-contact-picker\",{\"endpoint\":[16],\"templateRole\":[16],\"contactSuggestions\":[16],\"name\":[32],\"email\":[32],\"phone\":[32],\"message\":[32],\"showSuggestions\":[32],\"showMessage\":[32],\"delegator\":[32],\"nameFieldId\":[32],\"emailFieldId\":[32],\"phoneFieldId\":[32]}]]],[\"verdocs-progress-bar.cjs\",[[0,\"verdocs-progress-bar\",{\"label\":[1],\"showPercent\":[4,\"show-percent\"],\"percent\":[2]}]]],[\"verdocs-toggle-button.cjs\",[[0,\"verdocs-toggle-button\",{\"active\":[4],\"icon\":[1],\"label\":[1],\"size\":[1],\"_active\":[32]}]]],[\"verdocs-template-create_3.cjs\",[[0,\"verdocs-template-roles\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"showingRoleDialog\":[32],\"showingSenderDialog\":[32],\"sender\":[32],\"forceRerender\":[32]}],[0,\"verdocs-template-create\",{\"endpoint\":[16],\"file\":[32],\"creating\":[32],\"progressLabel\":[32],\"progressPercent\":[32]}],[0,\"verdocs-template-fields\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"toolbarTargetId\":[1,\"toolbar-target-id\"],\"placing\":[32],\"selectedRoleName\":[32],\"rerender\":[32]},[[4,\"keydown\",\"handleKeyDown\"]]]]],[\"verdocs-quick-functions_3.cjs\",[[0,\"verdocs-quick-functions\",{\"endpoint\":[16]}],[0,\"verdocs-search-activity\",{\"endpoint\":[16],\"type\":[1],\"options\":[8],\"emptyMessage\":[32],\"authFailure\":[32],\"title\":[32],\"recent\":[32],\"saved\":[32],\"starred\":[32]}],[0,\"verdocs-search-box\",{\"endpoint\":[16],\"placeholder\":[1],\"type\":[1],\"query\":[1],\"grabsFocus\":[4,\"grabs-focus\"],\"focusField\":[64]}]]],[\"verdocs-toolbar-icon.cjs\",[[0,\"verdocs-toolbar-icon\",{\"text\":[1],\"icon\":[1],\"placement\":[1],\"containerId\":[32]}]]],[\"verdocs-template-role-properties_2.cjs\",[[0,\"verdocs-template-role-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"roleName\":[1,\"role-name\"],\"sender\":[1],\"dirty\":[32],\"saving\":[32],\"name\":[32],\"type\":[32],\"fullName\":[32],\"email\":[32],\"phone\":[32],\"allowDelegation\":[32]}],[0,\"verdocs-template-sender\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"sender\":[1],\"saving\":[32]}]]],[\"verdocs-ok-dialog.cjs\",[[0,\"verdocs-ok-dialog\",{\"heading\":[1],\"message\":[1],\"showCancel\":[4,\"show-cancel\"],\"closed\":[32]}]]],[\"verdocs-radio-button.cjs\",[[0,\"verdocs-radio-button\",{\"checked\":[4],\"name\":[1],\"value\":[1],\"disabled\":[4]}]]],[\"verdocs-dropdown_2.cjs\",[[0,\"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]}],[0,\"verdocs-dropdown\",{\"options\":[16],\"open\":[32]}]]],[\"verdocs-button-panel_3.cjs\",[[0,\"verdocs-template-field-properties\",{\"endpoint\":[16],\"templateId\":[1,\"template-id\"],\"fieldName\":[1,\"field-name\"],\"helpText\":[1,\"help-text\"],\"dirty\":[32],\"loading\":[32],\"type\":[32],\"setting\":[32],\"name\":[32],\"roleName\":[32],\"group\":[32],\"fieldType\":[32],\"required\":[32],\"options\":[32],\"placeholder\":[32],\"defaultValue\":[32],\"showingHelp\":[32]}],[4,\"verdocs-button-panel\",{\"icon\":[1],\"showPanel\":[64],\"hidePanel\":[64],\"toggle\":[64]}],[0,\"verdocs-select-input\",{\"value\":[1],\"label\":[1],\"options\":[16],\"disabled\":[4]}]]]]"), options);
 });

package/dist/collection/components/controls/verdocs-button-panel/verdocs-button-panel.js

@@ -42,6 +42,7 @@ export class VerdocsButtonPanel {
     (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
     this.showing = true;
     this.hiderEl = document.createElement('div');
+    this.hiderEl.id = 'verdocs-button-panel-hider';
     this.hiderEl.style.zIndex = '100';
     this.hiderEl.style.position = 'absolute';
     this.hiderEl.style.top = '0px';
@@ -55,9 +56,11 @@ export class VerdocsButtonPanel {
     document.body.appendChild(this.hiderEl);
   }
   async hidePanel() {
-    var _a, _b;
-    (_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-    (_b = this.hiderEl) === null || _b === void 0 ? void 0 : _b.remove();
+    var _a;
+    Array.from(document.getElementsByClassName('verdocs-button-panel-content')).forEach(el => {
+      el.removeAttribute('data-show');
+    });
+    (_a = document.getElementById('verdocs-button-panel-hider')) === null || _a === void 0 ? void 0 : _a.remove();
     this.showing = false;
   }
   async toggle() {

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

@@ -5,9 +5,6 @@ export default {
   args: {
     templateId: '',
   },
-  argTypes: {
-    templateId: { control: { type: 'string' } },
-  },
   parameters: {
     layout: 'fullscreen',
   },

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.css

@@ -80,6 +80,16 @@ verdocs-sign verdocs-ok-dialog .background-overlay {
   align-items: flex-start;
   padding-top: 100px;
 }
+verdocs-sign .loading-indicator {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  z-index: 10000;
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.7);
+}
 
 @media print {
   verdocs-sign .header {

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

@@ -55,6 +55,7 @@ export class VerdocsSign {
     this.nextSubmits = false;
     this.errorMessage = '';
     this.focusedField = '';
+    this.submitting = false;
     this.isDone = false;
     this.showDone = false;
     this.finishLater = false;
@@ -158,9 +159,11 @@ export class VerdocsSign {
         break;
       case 'decline':
         {
+          this.submitting = true;
           const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
           console.log('Decline result', declineResult);
           (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
+          this.submitting = false;
           this.isDone = true;
         }
         break;
@@ -286,10 +289,9 @@ export class VerdocsSign {
   }
   async handleNext() {
     var _a;
-    console.log('Next');
     if (this.nextSubmits) {
-      console.log('Next submits');
       try {
+        this.submitting = true;
         const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
         console.log('[SIGN] Submitted successfully', result);
         this.recipient.status = 'submitted';
@@ -297,8 +299,9 @@ export class VerdocsSign {
         this.isDone = true;
       }
       catch (e) {
-        console.log('Error submitting', e);
+        console.log('[SIGN] Error submitting', e);
       }
+      this.submitting = false;
       return;
     }
     // Find and focus the next incomplete required field
@@ -452,7 +455,7 @@ export class VerdocsSign {
       return (h(Host, { class: { agreed: this.agreed } }, this.isDone ? (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
           this.showDone = false;
           this.isDone = true;
-        } }))));
+        } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
     }
     return (h(Host, { class: { agreed: this.agreed } }, !this.finishLater && (h("div", { class: "intro" }, h("div", { class: "inner" }, "Please review and act on these documents."))), h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }))), !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), h("div", { class: "document", style: { paddingTop: this.headerTargetId ? '70px' : '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
       const pageNumbers = integerSequence(1, envelopeDocument.page_numbers);
@@ -473,7 +476,7 @@ export class VerdocsSign {
     })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
         this.showDone = false;
         this.isDone = true;
-      } }))));
+      } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
   }
   static get is() { return "verdocs-sign"; }
   static get originalStyleUrls() {
@@ -573,6 +576,7 @@ export class VerdocsSign {
       "nextSubmits": {},
       "errorMessage": {},
       "focusedField": {},
+      "submitting": {},
       "isDone": {},
       "showDone": {},
       "finishLater": {},

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.stories.js

@@ -3,9 +3,9 @@ export default {
   title: 'Embeds/Sign',
   component: 'verdocs-sign',
   args: {
-    envelopeId: '',
-    roleId: '',
-    inviteCode: '',
+    envelopeId: 'b4a03f7e-8a2b-4752-ac65-621114a1f878',
+    roleId: 'Seller',
+    inviteCode: 'e4bee24c3d2795f340ceeb53f6fefc1a',
   },
   argTypes: {
     envelopeId: {

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -1,4 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import uuidv4 from 'uuid-browser';
 import { deleteField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import TemplateStore from '../../../utils/templateStore';
@@ -75,7 +76,6 @@ export class VerdocsTemplateFieldProperties {
     var _a, _b;
     e.stopPropagation();
     const field = TemplateStore.fields.find(field => field.name === this.fieldName);
-    console.log('hc', e, field);
     if (field) {
       this.name = field.name;
       this.roleName = field.role_name;
@@ -105,6 +105,53 @@ export class VerdocsTemplateFieldProperties {
         options: this.options,
       };
     }
+    updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
+      .then(() => {
+      var _a, _b;
+      this.dirty = false;
+      const field = TemplateStore.fields.find(field => field.name === this.fieldName);
+      if (field) {
+        field.name = this.name;
+        field.role_name = this.roleName;
+        field.required = this.required;
+        field.label = this.placeholder;
+        field.setting.result = this.defaultValue;
+        if (field.setting.options) {
+          field.setting.options = this.options;
+        }
+      }
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
+      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    })
+      .catch(() => {
+      console.log('Field update failed', e);
+    });
+  }
+  handleAddOption(e) {
+    e.stopPropagation();
+    const newProperties = {
+      name: this.name,
+      required: this.required,
+      role_name: this.roleName,
+      // TODO: Default value in setting?
+    };
+    this.options.push(this.type === 'radio_button_group'
+      ? {
+        id: uuidv4(),
+        value: `Option ${this.options.length + 1}`,
+        selected: false,
+        x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
+        y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
+      }
+      : {
+        id: uuidv4(),
+        value: `Option ${this.options.length + 1}`,
+        checked: false,
+        x: this.options.length > 0 ? this.options[this.options.length - 1].x : 20,
+        y: this.options.length > 0 ? this.options[this.options.length - 1].y - 25 : 20,
+      });
+    newProperties.setting = this.setting;
+    newProperties.setting.options = this.options;
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
       var _a, _b;
@@ -119,6 +166,7 @@ export class VerdocsTemplateFieldProperties {
       }
       (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
       (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+      TemplateStore.updateCount++;
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -153,7 +201,7 @@ export class VerdocsTemplateFieldProperties {
     if (this.helpText && this.showingHelp) {
       return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
     }
-    return (h(Host, null, h("h6", null, capitalize(this.fieldType.replace('_', ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
+    return (h(Host, null, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
       //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
@@ -161,9 +209,6 @@ export class VerdocsTemplateFieldProperties {
       } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: TemplateStore.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
-      } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-group", label: "Group Name", value: this.group, autocomplete: "off", placeholder: "Group Name...", onInput: (e) => {
-        this.group = e.target.value;
-        this.dirty = true;
       } })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off",
       // helpText="Placeholder to display if the field is empty."
       placeholder: "Placeholder...", onInput: (e) => {
@@ -172,7 +217,7 @@ export class VerdocsTemplateFieldProperties {
       } })), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
         this.required = e.target.checked;
         this.dirty = true;
-      } })), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
+      } })), ['checkbox_group', 'radio_button_group'].includes(this.type) && h("verdocs-button", { size: "small", onClick: e => this.handleAddOption(e), label: "Add Option" }), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
         marginTop: '15px',
         marginBottom: '15px',
         textAlign: 'center',

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -103,9 +103,16 @@ export class VerdocsTemplateFields {
       this.selectedRoleName = field.role_name;
       console.log('settings changed', this.selectedRoleName, field);
       el.setAttribute('roleindex', getRoleIndex(TemplateStore.roleNames, field.role_name));
+      el.field = TemplateStore.fields.find(f => f.name === field.name);
       this.rerender++;
       el.setAttribute('rerender', this.rerender);
       (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: TemplateStore.template, event: 'updated-field' });
+      console.log('Re-rendering field', field.name, pageInfo.pageNumber);
+      this.reRenderField(field, pageInfo.pageNumber);
+      const newEl = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+      if (!newEl) {
+        return;
+      }
     });
     el.addEventListener('deleted', () => {
       var _a;
@@ -126,41 +133,19 @@ export class VerdocsTemplateFields {
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
     const fields = TemplateStore.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
-    // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    // console.log('[FIELDS] Fields on page', fields);
-    fields.forEach(field => {
-      const roleIndex = getRoleIndex(TemplateStore.roleNames, field.role_name);
-      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
-      if (!el) {
-        return;
-      }
-      if (Array.isArray(el)) {
-        el.forEach(e => {
-          this.attachFieldAttributes(pageInfo, field, roleIndex, e);
-          interact(e).draggable({
-            listeners: {
-              start(event) {
-                console.log('[FIELDS] Drag started', event.type, event.target);
-              },
-              move(event) {
-                const oldX = +(event.target.getAttribute('posX') || 0);
-                const oldY = +(event.target.getAttribute('posY') || 0);
-                const xScale = +(event.target.getAttribute('xScale') || 1);
-                const yScale = +(event.target.getAttribute('yScale') || 1);
-                const newX = event.dx / xScale + oldX;
-                const newY = event.dy / yScale + oldY;
-                event.target.setAttribute('posX', newX);
-                event.target.setAttribute('posy', newY);
-                updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-              },
-              end: this.handleMoveField.bind(this),
-            },
-          });
-        });
-      }
-      else {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-        interact(el).draggable({
+    fields.forEach(field => this.reRenderField(field, pageInfo.pageNumber));
+  }
+  reRenderField(field, pageNumber) {
+    const pageInfo = this.cachedPageInfo[pageNumber];
+    const roleIndex = getRoleIndex(TemplateStore.roleNames, field.role_name);
+    const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    if (!el) {
+      return;
+    }
+    if (Array.isArray(el)) {
+      el.forEach(e => {
+        this.attachFieldAttributes(pageInfo, field, roleIndex, e);
+        interact(e).draggable({
           listeners: {
             start(event) {
               console.log('[FIELDS] Drag started', event.type, event.target);
@@ -179,8 +164,30 @@ export class VerdocsTemplateFields {
             end: this.handleMoveField.bind(this),
           },
         });
-      }
-    });
+      });
+    }
+    else {
+      this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+      interact(el).draggable({
+        listeners: {
+          start(event) {
+            console.log('[FIELDS] Drag started', event.type, event.target);
+          },
+          move(event) {
+            const oldX = +(event.target.getAttribute('posX') || 0);
+            const oldY = +(event.target.getAttribute('posY') || 0);
+            const xScale = +(event.target.getAttribute('xScale') || 1);
+            const yScale = +(event.target.getAttribute('yScale') || 1);
+            const newX = event.dx / xScale + oldX;
+            const newY = event.dy / yScale + oldY;
+            event.target.setAttribute('posX', newX);
+            event.target.setAttribute('posy', newY);
+            updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
+          },
+          end: this.handleMoveField.bind(this),
+        },
+      });
+    }
   }
   async handleMoveField(e) {
     const pageNumber = e.target.getAttribute('pageNumber');

package/dist/collection/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.stories.js

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Role Properties',
   component: 'verdocs-template-role-properties',
   args: {
-    templateId: '056b837f-b183-4039-b50a-d68acbf81b67',
-    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    templateId: '',
   },
   argTypes: {
     onClose: { action: 'close' },

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.stories.js

@@ -3,8 +3,7 @@ export default {
   title: 'Templates/Roles',
   component: 'verdocs-template-roles',
   args: {
-    // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
-    templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
+    templateId: '',
   },
   argTypes: {
     onSave: { action: 'save' },

package/dist/collection/utils/utils.js

@@ -13,9 +13,9 @@ export const defaultWidth = (type) => {
     case 'timestamp':
       return 64;
     case 'date':
-      return 74;
+      return 84;
     case 'dropdown':
-      return 64;
+      return 85;
     case 'attachment':
     case 'payment':
       return 24;
@@ -42,7 +42,7 @@ export const defaultHeight = (type) => {
     case 'date':
       return 15;
     case 'dropdown':
-      return 15;
+      return 20;
     case 'attachment':
     case 'payment':
       return 24;