@verdocs/web-sdk 1.11.7 → 1.11.9

package/dist/cjs/{interact.min-8b2204e4.js → interact.min-272ddfb4.js}

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

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

@@ -267,19 +267,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);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  console.log('ct', currentTransform);
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  console.log('comp', components);
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-  console.log('nt', el.style.transform);
+  const currentTransform = el.style.transform || '';
+  const newValue = `${key}(${value})`;
+  if (currentTransform.includes(key)) {
+    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);
+    el.style.transform = currentTransform + ' ' + newValue;
+  }
+  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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.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-8b2204e4.js');
+const interact_min = require('./interact.min-272ddfb4.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-c955f518.js');
+const utils = require('./utils-54525087.js');
 const templateStore = require('./templateStore-4e927fb4.js');
 const Templates$1 = require('./Templates-721828dc.js');
 require('./Token-576f0e8a.js');
@@ -96,7 +96,7 @@ const VerdocsTemplateCreate = class {
     if (!this.endpoint.session) {
       return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), index.h("div", { class: "loading-text" }, "Processing, please wait..."))) : (index.h("div", { class: "upload-box" }, index.h("div", null, index.h("span", { innerHTML: FileIcon })), index.h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { style: {
+    return (index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), index.h("div", { class: "loading-text" }, "Processing, please wait..."))) : (index.h("div", { class: "upload-box" }, index.h("div", null, index.h("span", { innerHTML: FileIcon })), index.h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',
@@ -304,7 +304,9 @@ const VerdocsTemplateFields = class {
       const clickedY = e.offsetY;
       const width = utils.defaultWidth(this.placing);
       const height = utils.defaultHeight(this.placing);
-      const { naturalWidth = 612, naturalHeight = 792 } = this.cachedPageInfo[pageNumber];
+      const cachedPage = this.cachedPageInfo[pageNumber];
+      console.log('Cached page', cachedPage);
+      const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const { x, y } = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const field = {
         name: this.generateFieldName(this.placing, pageNumber),

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-c955f518.js');
+const utils = require('./utils-54525087.js');
 require('./Token-576f0e8a.js');
 require('./Envelopes-7381bd9a.js');
 require('./Files-4bdc0c0f.js');
@@ -92,6 +92,7 @@ const VerdocsTemplateDocumentPage = class {
         this.naturalHeight = e.target.naturalHeight;
         this.aspectRatio = this.naturalWidth / this.naturalHeight;
         this.virtualHeight = this.virtualWidth / this.aspectRatio;
+        this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
       } })) : (index.h("div", null)))));
   }
   get container() { return index.getElement(this); }

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-8b2204e4.js');
+const interact_min = require('./interact.min-272ddfb4.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-c955f518.js');
+const utils = require('./utils-54525087.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-c955f518.js');
+const utils = require('./utils-54525087.js');
 const Envelopes = require('./Envelopes-2350fcf1.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');

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

@@ -78,7 +78,7 @@ export class VerdocsTemplateCreate {
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Processing, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Processing, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',

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

@@ -85,6 +85,7 @@ export class VerdocsTemplateDocumentPage {
         this.naturalHeight = e.target.naturalHeight;
         this.aspectRatio = this.naturalWidth / this.naturalHeight;
         this.virtualHeight = this.virtualWidth / this.aspectRatio;
+        this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
       } })) : (h("div", null)))));
   }
   static get is() { return "verdocs-template-document-page"; }

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

@@ -201,7 +201,9 @@ export class VerdocsTemplateFields {
       const clickedY = e.offsetY;
       const width = defaultWidth(this.placing);
       const height = defaultHeight(this.placing);
-      const { naturalWidth = 612, naturalHeight = 792 } = this.cachedPageInfo[pageNumber];
+      const cachedPage = this.cachedPageInfo[pageNumber];
+      console.log('Cached page', cachedPage);
+      const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const { x, y } = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const field = {
         name: this.generateFieldName(this.placing, pageNumber),

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

@@ -3,8 +3,8 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
-    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
+    templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
+    // templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
   },
   argTypes: {
     onCancel: { action: 'cancel' },

package/dist/collection/utils/utils.js

@@ -226,19 +226,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);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  console.log('ct', currentTransform);
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  console.log('comp', components);
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-  console.log('nt', el.style.transform);
+  const currentTransform = el.style.transform || '';
+  const newValue = `${key}(${value})`;
+  if (currentTransform.includes(key)) {
+    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);
+    el.style.transform = currentTransform + ' ' + newValue;
+  }
+  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

@@ -265,19 +265,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);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  console.log('ct', currentTransform);
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  console.log('comp', components);
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-  console.log('nt', el.style.transform);
+  const currentTransform = el.style.transform || '';
+  const newValue = `${key}(${value})`;
+  if (currentTransform.includes(key)) {
+    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);
+    el.style.transform = currentTransform + ' ' + newValue;
+  }
+  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-create2.js

@@ -85,7 +85,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Processing, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Processing, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',

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

@@ -85,6 +85,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
         this.naturalHeight = e.target.naturalHeight;
         this.aspectRatio = this.naturalWidth / this.naturalHeight;
         this.virtualHeight = this.virtualWidth / this.aspectRatio;
+        this.renderedHeight = e.target.offsetWidth / this.aspectRatio;
       } })) : (h("div", null)))));
   }
   get container() { return this; }

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

@@ -210,7 +210,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       const clickedY = e.offsetY;
       const width = defaultWidth(this.placing);
       const height = defaultHeight(this.placing);
-      const { naturalWidth = 612, naturalHeight = 792 } = this.cachedPageInfo[pageNumber];
+      const cachedPage = this.cachedPageInfo[pageNumber];
+      console.log('Cached page', cachedPage);
+      const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const { x, y } = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const field = {
         name: this.generateFieldName(this.placing, pageNumber),

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-02-27T18:32:11",
+  "timestamp": "2023-02-28T16:17:18",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",

package/dist/esm/{interact.min-097cd61a.js → interact.min-6417b511.js}

@@ -1,4 +1,4 @@
-import { c as getDefaultExportFromCjs, d as createCommonjsModule } from './utils-107a7649.js';
+import { c as getDefaultExportFromCjs, d as createCommonjsModule } from './utils-e9a6b9e4.js';
 
 var interact_min = createCommonjsModule(function (module, exports) {
 /* interact.js 1.10.17 | https://interactjs.io/license */

package/dist/esm/{utils-107a7649.js → utils-e9a6b9e4.js}

@@ -265,19 +265,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);
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
-  const currentTransform = el.style.transform;
-  console.log('ct', currentTransform);
-  // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
-  const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
-  console.log('comp', components);
-  el.style.transform = [
-    components //
-      .filter(component => component[1] !== key) // Remove the entry if it's already set
-      .map(component => component[0]),
-    `${key}(${value})`,
-  ].join(' ');
-  console.log('nt', el.style.transform);
+  const currentTransform = el.style.transform || '';
+  const newValue = `${key}(${value})`;
+  if (currentTransform.includes(key)) {
+    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);
+    el.style.transform = currentTransform + ' ' + newValue;
+  }
+  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/esm/verdocs-document-page_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-e64d45e2.js';
-import { t as throttle } from './utils-107a7649.js';
+import { t as throttle } from './utils-e9a6b9e4.js';
 import { c as createPopper } from './popper-f860750c.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-5cb73464.js';
 import { f as format } from './index-d264c496.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-5cb73464.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import './index-24fd1580.js';
 import './Primitives-054bc6e5.js';
 import './Envelopes-eb3eef02.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-107a7649.js';
+import { g as getFieldSettings } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import { f as format } from './index-d264c496.js';
 import './Envelopes-eb3eef02.js';

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-e64d45e2.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-d50a8d28.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils-107a7649.js';
+import { r as renderDocumentField, a as getRoleIndex } from './utils-e9a6b9e4.js';
 import { s as state } from './templateStore-5cb73464.js';
 import { l as loadTemplate } from './Templates-f8a6628a.js';
 import { S as SDKError } from './errors-9b5498c8.js';

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

@@ -4,7 +4,7 @@ import { i as isValidEmail, a as isValidPhone } from './Validators-f110bae2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-5cb73464.js';
 import { l as loadTemplate } from './Templates-f8a6628a.js';
-import { a as getRoleIndex } from './utils-107a7649.js';
+import { a as getRoleIndex } from './utils-e9a6b9e4.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './Token-54690789.js';
 import './index-24fd1580.js';

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

@@ -3,7 +3,7 @@ import { c as getSigningSession, u as updateEnvelopeField, d as updateEnvelopeFi
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-d50a8d28.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators-f110bae2.js';
 import { f as fullNameToInitials } from './Primitives-054bc6e5.js';
-import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils-107a7649.js';
+import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils-e9a6b9e4.js';
 import { g as getEnvelopeById, s as state } from './Envelopes-7f3b60de.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './Token-54690789.js';