@verdocs/web-sdk 1.12.1 → 1.12.3

package/dist/cjs/{interact.min-272ddfb4.js → interact.min-5b353ffd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 
 var interact_min = utils.createCommonjsModule(function (module, exports) {
 /* interact.js 1.10.17 | https://interactjs.io/license */

package/dist/cjs/{utils-54525087.js → utils-66565e63.js}

@@ -99,7 +99,7 @@ const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
   let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
-  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
+  const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
     y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
@@ -137,6 +137,7 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
+  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -177,6 +178,34 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
       controlsDiv.appendChild(el);
       return el;
     }
+    // @ts-ignore
+    case 'checkbox':
+      const id = getFieldOptionId(field, 0);
+      const existingField = document.getElementById(id);
+      if (existingField) {
+        setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+        return existingField;
+      }
+      const cbEl = document.createElement(`verdocs-field-checkbox`);
+      cbEl.field = field;
+      cbEl.setAttribute('id', id);
+      cbEl.setAttribute('roleIndex', roleIndex);
+      cbEl.setAttribute('option', 0);
+      if (disabled) {
+        cbEl.setAttribute('disabled', true);
+      }
+      if (done) {
+        cbEl.setAttribute('done', true);
+      }
+      if (editable) {
+        cbEl.setAttribute('editable', true);
+      }
+      if (draggable) {
+        cbEl.setAttribute('draggable', true);
+      }
+      setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, 0);
+      controlsDiv.appendChild(cbEl);
+      return cbEl;
     case 'checkbox_group':
       return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
         const id = getFieldOptionId(field, checkboxIndex);
@@ -267,19 +296,19 @@ const getFieldSettings = (field) => {
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 const updateCssTransform = (el, key, value) => {
-  console.log('update', key, value, el.style.transform);
+  // console.log('update', key, value, el.style.transform);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform || '';
   const newValue = `${key}(${value})`;
   if (currentTransform.includes(key)) {
-    console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
+    // console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
     el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
   }
   else {
-    console.log('appending', currentTransform, currentTransform + ' ' + newValue);
+    // console.log('appending', currentTransform, currentTransform + ' ' + newValue);
     el.style.transform = currentTransform + ' ' + newValue;
   }
-  console.log('now', el.style.transform);
+  // console.log('now', el.style.transform);
 };
 const formatLocalDate = (date) => index.format(date, 'P').replace(/\//g, '-');
 const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const popper = require('./popper-11d5f714.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const index$1 = require('./index-6528b430.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

package/dist/cjs/verdocs-field-radio-button.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-4e927fb4.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 require('./index-cfa67e73.js');
 require('./Primitives-be5088cb.js');
 require('./Envelopes-7381bd9a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const index$1 = require('./index-6528b430.js');
 require('./Envelopes-7381bd9a.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const Templates = require('./Templates-721828dc.js');
 const errors = require('./errors-0396da3d.js');

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

@@ -8,7 +8,7 @@ const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const Templates = require('./Templates-721828dc.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-cfa67e73.js');

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

@@ -7,7 +7,7 @@ const Envelopes = require('./Envelopes-7381bd9a.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const Envelopes$1 = require('./Envelopes-2350fcf1.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');

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

@@ -7,9 +7,9 @@ const Templates = require('./Templates-ed812768.js');
 const TemplateDocuments = require('./TemplateDocuments-6b395b32.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
 const errors = require('./errors-0396da3d.js');
-const interact_min = require('./interact.min-272ddfb4.js');
+const interact_min = require('./interact.min-5b353ffd.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const Templates$1 = require('./Templates-721828dc.js');
 require('./Token-576f0e8a.js');
@@ -233,30 +233,51 @@ const VerdocsTemplateFields = class {
         return;
       }
       if (Array.isArray(el)) {
-        el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+        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({
-        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`);
+        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),
           },
-          end: this.handleMoveField.bind(this),
-        },
-      });
+        });
+      }
     });
   }
   async handleMoveField(e) {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5e4233b0.js');
 const TemplateDocuments = require('./TemplateDocuments-6b395b32.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 require('./Token-576f0e8a.js');
 require('./Envelopes-7381bd9a.js');
 require('./Files-4bdc0c0f.js');
@@ -80,7 +80,7 @@ const VerdocsTemplateDocumentPage = class {
   }
   render() {
     const height = `${this.renderedHeight}px`;
-    return (index.h(index.Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+    return (index.h(index.Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height, flex: `0 0 ${height}` } })) : this.pageDisplayUri ? (index.h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
         // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
         // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
         // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
-const interact_min = require('./interact.min-272ddfb4.js');
+const interact_min = require('./interact.min-5b353ffd.js');
 const Roles = require('./Roles-9b593b95.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const Templates = require('./Templates-721828dc.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-cfa67e73.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5e4233b0.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-26bb7607.js');
-const utils = require('./utils-54525087.js');
+const utils = require('./utils-66565e63.js');
 const Envelopes = require('./Envelopes-2350fcf1.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js

@@ -73,7 +73,7 @@ export class VerdocsTemplateDocumentPage {
   }
   render() {
     const height = `${this.renderedHeight}px`;
-    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height, flex: `0 0 ${height}` } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
         // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
         // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
         // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values

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

@@ -132,30 +132,51 @@ export class VerdocsTemplateFields {
         return;
       }
       if (Array.isArray(el)) {
-        el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+        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({
-        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`);
+        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),
           },
-          end: this.handleMoveField.bind(this),
-        },
-      });
+        });
+      }
     });
   }
   async handleMoveField(e) {

package/dist/collection/utils/utils.js

@@ -58,7 +58,7 @@ export const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
   let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
-  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
+  const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
     y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
@@ -96,6 +96,7 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
+  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -136,6 +137,34 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
       controlsDiv.appendChild(el);
       return el;
     }
+    // @ts-ignore
+    case 'checkbox':
+      const id = getFieldOptionId(field, 0);
+      const existingField = document.getElementById(id);
+      if (existingField) {
+        setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+        return existingField;
+      }
+      const cbEl = document.createElement(`verdocs-field-checkbox`);
+      cbEl.field = field;
+      cbEl.setAttribute('id', id);
+      cbEl.setAttribute('roleIndex', roleIndex);
+      cbEl.setAttribute('option', 0);
+      if (disabled) {
+        cbEl.setAttribute('disabled', true);
+      }
+      if (done) {
+        cbEl.setAttribute('done', true);
+      }
+      if (editable) {
+        cbEl.setAttribute('editable', true);
+      }
+      if (draggable) {
+        cbEl.setAttribute('draggable', true);
+      }
+      setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, 0);
+      controlsDiv.appendChild(cbEl);
+      return cbEl;
     case 'checkbox_group':
       return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
         const id = getFieldOptionId(field, checkboxIndex);
@@ -226,19 +255,19 @@ export const getFieldSettings = (field) => {
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 export const updateCssTransform = (el, key, value) => {
-  console.log('update', key, value, el.style.transform);
+  // console.log('update', key, value, el.style.transform);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform || '';
   const newValue = `${key}(${value})`;
   if (currentTransform.includes(key)) {
-    console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
+    // console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
     el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
   }
   else {
-    console.log('appending', currentTransform, currentTransform + ' ' + newValue);
+    // console.log('appending', currentTransform, currentTransform + ' ' + newValue);
     el.style.transform = currentTransform + ' ' + newValue;
   }
-  console.log('now', el.style.transform);
+  // console.log('now', el.style.transform);
 };
 export const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
 const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));

package/dist/components/utils.js

@@ -97,7 +97,7 @@ const setControlStyles = (el, field, xScale, yScale, option) => {
   var _a, _b, _c, _d;
   const settings = field.setting || field.settings;
   let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = settings;
-  const optionSettings = option !== undefined && settings.options[option] ? settings.options[option] : null;
+  const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
   if (optionSettings) {
     x = (_a = optionSettings.x) !== null && _a !== void 0 ? _a : x;
     y = (_b = optionSettings.y) !== null && _b !== void 0 ? _b : y;
@@ -135,6 +135,7 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
+  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -175,6 +176,34 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
       controlsDiv.appendChild(el);
       return el;
     }
+    // @ts-ignore
+    case 'checkbox':
+      const id = getFieldOptionId(field, 0);
+      const existingField = document.getElementById(id);
+      if (existingField) {
+        setControlStyles(existingField, field, docPage.xScale, docPage.yScale, 0);
+        return existingField;
+      }
+      const cbEl = document.createElement(`verdocs-field-checkbox`);
+      cbEl.field = field;
+      cbEl.setAttribute('id', id);
+      cbEl.setAttribute('roleIndex', roleIndex);
+      cbEl.setAttribute('option', 0);
+      if (disabled) {
+        cbEl.setAttribute('disabled', true);
+      }
+      if (done) {
+        cbEl.setAttribute('done', true);
+      }
+      if (editable) {
+        cbEl.setAttribute('editable', true);
+      }
+      if (draggable) {
+        cbEl.setAttribute('draggable', true);
+      }
+      setControlStyles(cbEl, field, docPage.xScale, docPage.yScale, 0);
+      controlsDiv.appendChild(cbEl);
+      return cbEl;
     case 'checkbox_group':
       return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
         const id = getFieldOptionId(field, checkboxIndex);
@@ -265,19 +294,19 @@ const getFieldSettings = (field) => {
  * to be used for order-sensitive components e.g. translate-then-rotate.
  */
 const updateCssTransform = (el, key, value) => {
-  console.log('update', key, value, el.style.transform);
+  // console.log('update', key, value, el.style.transform);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform || '';
   const newValue = `${key}(${value})`;
   if (currentTransform.includes(key)) {
-    console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
+    // console.log('updating', currentTransform, currentTransform.replace(new RegExp(`${key}\(.+?\)`), newValue));
     el.style.transform = currentTransform.replace(new RegExp(`${key}\\(.+?\\)`), newValue);
   }
   else {
-    console.log('appending', currentTransform, currentTransform + ' ' + newValue);
+    // console.log('appending', currentTransform, currentTransform + ' ' + newValue);
     el.style.transform = currentTransform + ' ' + newValue;
   }
-  console.log('now', el.style.transform);
+  // console.log('now', el.style.transform);
 };
 const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
 const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));

package/dist/components/verdocs-template-document-page2.js

@@ -73,7 +73,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
   }
   render() {
     const height = `${this.renderedHeight}px`;
-    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+    return (h(Host, { id: `${this.containerId}`, style: { height } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height, flex: `0 0 ${height}` } })) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
         // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
         // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
         // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values