@verdocs/web-sdk 2.3.74 → 2.3.76

package/dist/cjs/{utils-7fe82705.js → utils-13f8ed3f.js}

@@ -77,7 +77,7 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 100;
+      return 105;
     case 'date':
       return 75;
     case 'dropdown':

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f83b8488.js');

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

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 const Envelopes = require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Types-f83b8488.js');
 require('./index-7c19ba1d.js');

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

@@ -8,7 +8,7 @@ const Permissions = require('./Permissions-1436f847.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');

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

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
 const TemplateRoleStore = require('./TemplateRoleStore-94afc2b0.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const Icons = require('./Icons-3286d014.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
 const Types = require('./Types-f83b8488.js');

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

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
 const TemplateRoleStore = require('./TemplateRoleStore-94afc2b0.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 require('./index-f712049c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const popper = require('./popper-d7adcfc6.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');

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

@@ -8,7 +8,7 @@ const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
 const TemplateRoleStore = require('./TemplateRoleStore-94afc2b0.js');
 const TemplateStore = require('./TemplateStore-ae59084b.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const errors = require('./errors-0396da3d.js');
 const Envelopes = require('./Envelopes-0b9deb2c.js');
 const Validators = require('./Validators-16e6d7d1.js');
@@ -126,6 +126,7 @@ const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"
 const VerdocsSend = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.sendingEnvelope = index.createEvent(this, "sendingEnvelope", 7);
     this.send = index.createEvent(this, "send", 7);
     this.exit = index.createEvent(this, "exit", 7);
     this.sdkError = index.createEvent(this, "sdkError", 7);
@@ -214,7 +215,7 @@ const VerdocsSend = class {
     this.showPickerForId = role.id;
   }
   handleSend(e) {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.sending) {
       console.log('Skipping duplicate send', e);
       return;
@@ -223,9 +224,10 @@ const VerdocsSend = class {
     e.preventDefault();
     e.stopPropagation();
     this.sending = true;
+    (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
     const details = {
       template_id: this.templateId,
-      name: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name,
+      name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
       environment: this.environment,
       roles: Object.values(this.rolesCompleted),
       // TODO
@@ -234,16 +236,19 @@ const VerdocsSend = class {
     console.log('[SEND] Creating envelope', details);
     Envelopes.createEnvelope(this.endpoint, details)
       .then(r => {
-      var _a;
+      var _a, _b;
       console.log('[SEND] Send envelope', r);
       this.reset().catch((e) => console.log('Unknown Error', e));
       this.sending = false;
-      (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ ...details, envelope_id: r.id, envelope: r });
+      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+      (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
     })
       .catch(e => {
+      var _a;
       console.log('Send error', e);
       // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
       this.sending = false;
+      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
     });
   }
   handleCancel(e) {

package/dist/cjs/verdocs-settings-api-keys_4.cjs.entry.js

@@ -10,7 +10,7 @@ const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 const Profiles = require('./Profiles-1a26e4eb.js');
 const index$1 = require('./index-7c19ba1d.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f83b8488.js');

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

@@ -9,7 +9,7 @@ const Recipients = require('./Recipients-f3d6cf10.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
 const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
@@ -452,6 +452,9 @@ const VerdocsSign = class {
     const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
     // First render the fields for the signer
+    // Also show field placeholders for other signers who have yet to act
+    // In template list in Beta, show second date being sorted on
+    // Sign top to bottom left to right
     recipientFields
       .filter(field => field.page === pageInfo.pageNumber)
       .forEach(field => {

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

@@ -9,7 +9,7 @@ const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
 const Fields = require('./Fields-705a2168.js');
 const Primitives = require('./Primitives-a59870a2.js');
 const TemplateFieldStore = require('./TemplateFieldStore-3d25fc86.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const TemplateRoleStore = require('./TemplateRoleStore-94afc2b0.js');
 const TemplateStore = require('./TemplateStore-ae59084b.js');
 const errors = require('./errors-0396da3d.js');
@@ -106,11 +106,9 @@ const VerdocsTemplateFields = class {
         .then(ts => {
         var _a, _b;
         this.templateStore = ts;
-        console.log('[PREVIEW] Loaded Template Store', ts.state);
         this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
         this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
         this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-        console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
         this.loading = false;
         this.fieldStore.onChange('fields', fields => {
           var _a;
@@ -185,33 +183,31 @@ const VerdocsTemplateFields = class {
       .filter(field => field && field.page_sequence === pageInfo.pageNumber)
       .forEach(field => {
       // TODO: Why isn't the attr already on the element carrying through?
-      const id = utils.getFieldId(field);
-      const el = document.getElementById(id);
-      if (el) {
-        el.setAttribute('fieldname', field.name);
-        el.setAttribute('pagenumber', String(field.page_sequence));
-        this.makeDraggable(el);
+      switch (field.type) {
+        case 'checkbox_group':
+        case 'radio_button_group':
+          (field.settings || field.setting || {}).options.map((_, index) => {
+            const id = utils.getFieldOptionId(field, index);
+            const el = document.getElementById(id);
+            if (el) {
+              el.setAttribute('fieldname', field.name);
+              el.setAttribute('pagenumber', String(field.page_sequence));
+              this.makeDraggable(el);
+            }
+          });
+          break;
+        default:
+          const id = utils.getFieldId(field);
+          const el = document.getElementById(id);
+          if (el) {
+            el.setAttribute('fieldname', field.name);
+            el.setAttribute('pagenumber', String(field.page_sequence));
+            this.makeDraggable(el);
+          }
+          break;
       }
     });
   }
-  reRenderField(field, pageNumber) {
-    const pageInfo = this.cachedPageInfo[pageNumber];
-    // const roleIndex = getRoleIndex(getRoleNames(this.roleStore), field.role_name);
-    const el = utils.renderDocumentField(field, pageInfo, { disabled: true, editable: true, draggable: true });
-    if (!el) {
-      return;
-    }
-    if (Array.isArray(el)) {
-      el.forEach(childEl => {
-        this.attachFieldAttributes(pageInfo, field, childEl);
-        this.makeDraggable(childEl);
-      });
-    }
-    else {
-      this.attachFieldAttributes(pageInfo, field, el);
-      this.makeDraggable(el);
-    }
-  }
   makeDraggable(el) {
     interact_min.interact_min(el).draggable({
       listeners: {
@@ -281,10 +277,7 @@ const VerdocsTemplateFields = class {
     TemplateFieldStore.updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
-    console.log('Will remove CSS transform', event.target.style.transform);
-    // this.reRenderField(newFieldData, pageNumber);
     utils.removeCssTransform(event.target);
-    console.log('[FIELDS] Updated', name, newFieldData);
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
   generateFieldName(type, pageNumber) {

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

@@ -8,7 +8,7 @@ const Permissions = require('./Permissions-1436f847.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f4ef9333.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-7fe82705.js');
+const utils = require('./utils-13f8ed3f.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Types-f83b8488.js');

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

@@ -106,7 +106,7 @@ export class VerdocsSend {
     this.showPickerForId = role.id;
   }
   handleSend(e) {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.sending) {
       console.log('Skipping duplicate send', e);
       return;
@@ -115,9 +115,10 @@ export class VerdocsSend {
     e.preventDefault();
     e.stopPropagation();
     this.sending = true;
+    (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
     const details = {
       template_id: this.templateId,
-      name: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name,
+      name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
       environment: this.environment,
       roles: Object.values(this.rolesCompleted),
       // TODO
@@ -126,16 +127,19 @@ export class VerdocsSend {
     console.log('[SEND] Creating envelope', details);
     Envelopes.createEnvelope(this.endpoint, details)
       .then(r => {
-      var _a;
+      var _a, _b;
       console.log('[SEND] Send envelope', r);
       this.reset().catch((e) => console.log('Unknown Error', e));
       this.sending = false;
-      (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ ...details, envelope_id: r.id, envelope: r });
+      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+      (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
     })
       .catch(e => {
+      var _a;
       console.log('Send error', e);
       // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
       this.sending = false;
+      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
     });
   }
   handleCancel(e) {
@@ -239,6 +243,21 @@ export class VerdocsSend {
   }
   static get events() {
     return [{
+        "method": "sendingEnvelope",
+        "name": "sendingEnvelope",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The user is sending an envelope the form and clicked send."
+        },
+        "complexType": {
+          "original": "{sending: boolean}",
+          "resolved": "{ sending: boolean; }",
+          "references": {}
+        }
+      }, {
         "method": "send",
         "name": "send",
         "bubbles": true,

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

@@ -429,6 +429,9 @@ export class VerdocsSign {
     const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
     // First render the fields for the signer
+    // Also show field placeholders for other signers who have yet to act
+    // In template list in Beta, show second date being sorted on
+    // Sign top to bottom left to right
     recipientFields
       .filter(field => field.page === pageInfo.pageNumber)
       .forEach(field => {

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

@@ -3,7 +3,7 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { getTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
-import { defaultHeight, defaultWidth, getFieldId, removeCssTransform, renderDocumentField, updateCssTransform } from '../../../utils/utils';
+import { defaultHeight, defaultWidth, getFieldId, getFieldOptionId, removeCssTransform, updateCssTransform } from '../../../utils/utils';
 import { h, Host } from '@stencil/core';
 import { getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
@@ -69,11 +69,9 @@ export class VerdocsTemplateFields {
         .then(ts => {
         var _a, _b;
         this.templateStore = ts;
-        console.log('[PREVIEW] Loaded Template Store', ts.state);
         this.fieldStore = getTemplateFieldStore(this.templateId);
         this.roleStore = getTemplateRoleStore(this.templateId);
         this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-        console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
         this.loading = false;
         this.fieldStore.onChange('fields', fields => {
           var _a;
@@ -148,33 +146,31 @@ export class VerdocsTemplateFields {
       .filter(field => field && field.page_sequence === pageInfo.pageNumber)
       .forEach(field => {
       // TODO: Why isn't the attr already on the element carrying through?
-      const id = getFieldId(field);
-      const el = document.getElementById(id);
-      if (el) {
-        el.setAttribute('fieldname', field.name);
-        el.setAttribute('pagenumber', String(field.page_sequence));
-        this.makeDraggable(el);
+      switch (field.type) {
+        case 'checkbox_group':
+        case 'radio_button_group':
+          (field.settings || field.setting || {}).options.map((_, index) => {
+            const id = getFieldOptionId(field, index);
+            const el = document.getElementById(id);
+            if (el) {
+              el.setAttribute('fieldname', field.name);
+              el.setAttribute('pagenumber', String(field.page_sequence));
+              this.makeDraggable(el);
+            }
+          });
+          break;
+        default:
+          const id = getFieldId(field);
+          const el = document.getElementById(id);
+          if (el) {
+            el.setAttribute('fieldname', field.name);
+            el.setAttribute('pagenumber', String(field.page_sequence));
+            this.makeDraggable(el);
+          }
+          break;
       }
     });
   }
-  reRenderField(field, pageNumber) {
-    const pageInfo = this.cachedPageInfo[pageNumber];
-    // const roleIndex = getRoleIndex(getRoleNames(this.roleStore), field.role_name);
-    const el = renderDocumentField(field, pageInfo, { disabled: true, editable: true, draggable: true });
-    if (!el) {
-      return;
-    }
-    if (Array.isArray(el)) {
-      el.forEach(childEl => {
-        this.attachFieldAttributes(pageInfo, field, childEl);
-        this.makeDraggable(childEl);
-      });
-    }
-    else {
-      this.attachFieldAttributes(pageInfo, field, el);
-      this.makeDraggable(el);
-    }
-  }
   makeDraggable(el) {
     interact(el).draggable({
       listeners: {
@@ -244,10 +240,7 @@ export class VerdocsTemplateFields {
     updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
-    console.log('Will remove CSS transform', event.target.style.transform);
-    // this.reRenderField(newFieldData, pageNumber);
     removeCssTransform(event.target);
-    console.log('[FIELDS] Updated', name, newFieldData);
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
   generateFieldName(type, pageNumber) {

package/dist/collection/utils/utils.js

@@ -12,7 +12,7 @@ export const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 100;
+      return 105;
     case 'date':
       return 75;
     case 'dropdown':

package/dist/components/utils.js

@@ -33,7 +33,7 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 100;
+      return 105;
     case 'date':
       return 75;
     case 'dropdown':

package/dist/components/verdocs-send2.js

@@ -23,6 +23,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.sendingEnvelope = createEvent(this, "sendingEnvelope", 7);
     this.send = createEvent(this, "send", 7);
     this.exit = createEvent(this, "exit", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
@@ -111,7 +112,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.showPickerForId = role.id;
   }
   handleSend(e) {
-    var _a, _b;
+    var _a, _b, _c;
     if (this.sending) {
       console.log('Skipping duplicate send', e);
       return;
@@ -120,9 +121,10 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     e.preventDefault();
     e.stopPropagation();
     this.sending = true;
+    (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: true });
     const details = {
       template_id: this.templateId,
-      name: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name,
+      name: (_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name,
       environment: this.environment,
       roles: Object.values(this.rolesCompleted),
       // TODO
@@ -131,16 +133,19 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     console.log('[SEND] Creating envelope', details);
     createEnvelope(this.endpoint, details)
       .then(r => {
-      var _a;
+      var _a, _b;
       console.log('[SEND] Send envelope', r);
       this.reset().catch((e) => console.log('Unknown Error', e));
       this.sending = false;
-      (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ ...details, envelope_id: r.id, envelope: r });
+      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
+      (_b = this.send) === null || _b === void 0 ? void 0 : _b.emit({ ...details, envelope_id: r.id, envelope: r });
     })
       .catch(e => {
+      var _a;
       console.log('Send error', e);
       // toast.error(e.response?.data?.message || 'Unknown error creating envelope');
       this.sending = false;
+      (_a = this.sendingEnvelope) === null || _a === void 0 ? void 0 : _a.emit({ sending: false });
     });
   }
   handleCancel(e) {

package/dist/components/verdocs-sign.js

@@ -452,6 +452,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
     // First render the fields for the signer
+    // Also show field placeholders for other signers who have yet to act
+    // In template list in Beta, show second date being sorted on
+    // Sign top to bottom left to right
     recipientFields
       .filter(field => field.page === pageInfo.pageNumber)
       .forEach(field => {

package/dist/components/verdocs-template-fields2.js

@@ -5,7 +5,7 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, c as createField, d as defineCustomElement$4 } from './verdocs-template-field-properties2.js';
 import { i as integerSequence } from './Primitives.js';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
-import { r as renderDocumentField, h as updateCssTransform, i as removeCssTransform, b as getFieldId, j as defaultWidth, k as defaultHeight } from './utils.js';
+import { h as updateCssTransform, i as removeCssTransform, b as getFieldId, f as getFieldOptionId, j as defaultWidth, k as defaultHeight } from './utils.js';
 import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
@@ -98,11 +98,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
         .then(ts => {
         var _a, _b;
         this.templateStore = ts;
-        console.log('[PREVIEW] Loaded Template Store', ts.state);
         this.fieldStore = getTemplateFieldStore(this.templateId);
         this.roleStore = getTemplateRoleStore(this.templateId);
         this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-        console.log('[PREVIEW] Loaded template', this.templateStore.state, this.roleStore.get('roles'), this.fieldStore.get('fields'));
         this.loading = false;
         this.fieldStore.onChange('fields', fields => {
           var _a;
@@ -177,33 +175,31 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       .filter(field => field && field.page_sequence === pageInfo.pageNumber)
       .forEach(field => {
       // TODO: Why isn't the attr already on the element carrying through?
-      const id = getFieldId(field);
-      const el = document.getElementById(id);
-      if (el) {
-        el.setAttribute('fieldname', field.name);
-        el.setAttribute('pagenumber', String(field.page_sequence));
-        this.makeDraggable(el);
+      switch (field.type) {
+        case 'checkbox_group':
+        case 'radio_button_group':
+          (field.settings || field.setting || {}).options.map((_, index) => {
+            const id = getFieldOptionId(field, index);
+            const el = document.getElementById(id);
+            if (el) {
+              el.setAttribute('fieldname', field.name);
+              el.setAttribute('pagenumber', String(field.page_sequence));
+              this.makeDraggable(el);
+            }
+          });
+          break;
+        default:
+          const id = getFieldId(field);
+          const el = document.getElementById(id);
+          if (el) {
+            el.setAttribute('fieldname', field.name);
+            el.setAttribute('pagenumber', String(field.page_sequence));
+            this.makeDraggable(el);
+          }
+          break;
       }
     });
   }
-  reRenderField(field, pageNumber) {
-    const pageInfo = this.cachedPageInfo[pageNumber];
-    // const roleIndex = getRoleIndex(getRoleNames(this.roleStore), field.role_name);
-    const el = renderDocumentField(field, pageInfo, { disabled: true, editable: true, draggable: true });
-    if (!el) {
-      return;
-    }
-    if (Array.isArray(el)) {
-      el.forEach(childEl => {
-        this.attachFieldAttributes(pageInfo, field, childEl);
-        this.makeDraggable(childEl);
-      });
-    }
-    else {
-      this.attachFieldAttributes(pageInfo, field, el);
-      this.makeDraggable(el);
-    }
-  }
   makeDraggable(el) {
     interact_min(el).draggable({
       listeners: {
@@ -273,10 +269,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
-    console.log('Will remove CSS transform', event.target.style.transform);
-    // this.reRenderField(newFieldData, pageNumber);
     removeCssTransform(event.target);
-    console.log('[FIELDS] Updated', name, newFieldData);
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
   generateFieldName(type, pageNumber) {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-01-26T16:02:56",
+  "timestamp": "2024-01-29T15:13:14",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -7298,6 +7298,15 @@
           "composed": true,
           "docs": "The user completed the form and clicked send.",
           "docsTags": []
+        },
+        {
+          "event": "sendingEnvelope",
+          "detail": "{ sending: boolean; }",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "The user is sending an envelope the form and clicked send.",
+          "docsTags": []
         }
       ],
       "listeners": [],

package/dist/esm/{utils-0943d004.js → utils-a56ee5e9.js}

@@ -75,7 +75,7 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 100;
+      return 105;
     case 'date':
       return 75;
     case 'dropdown':
@@ -446,4 +446,4 @@ const convertToE164 = (input) => {
   return `+1${temp}`;
 };
 
-export { saveAttachment as a, getFieldId as b, convertToE164 as c, renderedTextWidth as d, updateCssTransform as e, removeCssTransform as f, getFieldSettings as g, defaultWidth as h, defaultHeight as i, getControlStyles as j, getFieldOptionId as k, fileToDataUrl as l, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, getFieldId as b, convertToE164 as c, renderedTextWidth as d, updateCssTransform as e, removeCssTransform as f, getFieldSettings as g, getFieldOptionId as h, defaultWidth as i, defaultHeight as j, getControlStyles as k, fileToDataUrl as l, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

package/dist/esm/verdocs-contact-picker_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-172625c5.js';
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-eab308f6.js';
-import { c as convertToE164 } from './utils-0943d004.js';
+import { c as convertToE164 } from './utils-a56ee5e9.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-627c5239.js';
 import './Types-086facf7.js';