@verdocs/web-sdk 1.13.20 → 1.13.22

package/dist/cjs/{utils-c218d9c7.js → utils-461b1a90.js}

@@ -117,13 +117,13 @@ const updateDocumentFieldValue = (field) => {
   }
 };
 const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
+  var _a, _b;
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
-  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -140,7 +140,15 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
         return existingField;
       }
-      const el = document.createElement(`verdocs-field-${field.type}`);
+      let { type } = field;
+      if (type === 'textbox') {
+        console.log('Rendering text box', field);
+        if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
+          console.log('Switching to text area', field);
+          type = 'textarea';
+        }
+      }
+      const el = document.createElement(`verdocs-field-${type}`);
       el.field = field;
       el.setAttribute('id', id);
       el.setAttribute('roleIndex', roleIndex);

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

@@ -7,7 +7,7 @@ const popper = require('./popper-9def2535.js');
 const Envelopes = require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const Colors = require('./Colors-e809dcc9.js');
 const index$1 = require('./index-6528b430.js');
 require('./_commonjsHelpers-0c557e26.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.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-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
 
-const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTextarea = class {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70677d67.js');
 const interact_min = require('./interact.min-ba5cc513.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const index$1 = require('./index-6528b430.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 
-const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldTimestampCss = "verdocs-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTimestamp = class {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const TemplateStore = require('./TemplateStore-e8039c08.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');

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

@@ -8,7 +8,7 @@ const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
 const TemplateStore = require('./TemplateStore-e8039c08.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const errors = require('./errors-0396da3d.js');
 require('./Templates-24580a13.js');
 require('./_commonjsHelpers-0c557e26.js');

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

@@ -8,7 +8,7 @@ const Types = require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Files-4bdc0c0f.js');

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

@@ -143,7 +143,7 @@ const VerdocsTemplateAttachments = class {
 };
 VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
 
-const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const unicodeNBSP = ' ';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
@@ -214,7 +214,14 @@ 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(index.Host, null, 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), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (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: {
+    return (index.h(index.Host, null, 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), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("div", { class: "upload-box", onDrop: (e) => {
+        e.preventDefault();
+        e.target.classList.remove('drag-over');
+        this.file = e.dataTransfer.files[0];
+      }, onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, 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',

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

@@ -6,7 +6,7 @@ const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
 const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const popper = require('./popper-9def2535.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');

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

@@ -8,7 +8,7 @@ require('./Types-f89f9116.js');
 const Fields = require('./Fields-705a2168.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const TemplateStore = require('./TemplateStore-e8039c08.js');
 const errors = require('./errors-0396da3d.js');
 const Colors = require('./Colors-e809dcc9.js');
@@ -386,8 +386,10 @@ const VerdocsTemplateFields = class {
           field.setting = { x, y, width, height };
           break;
       }
-      // ??? We don't actually have a unique field type for multi-line text?
+      // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
+      // as a textbox with a leading>0 (typically 16).
       if (field.type === 'textarea') {
+        field.setting.leading = 16;
         field.type = 'textbox';
       }
       const saved = await Fields.createField(this.endpoint, this.templateId, field);

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

@@ -7,7 +7,7 @@ const Envelopes = require('./Envelopes-699531b7.js');
 const Types = require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-1b1836af.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-c218d9c7.js');
+const utils = require('./utils-461b1a90.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Files-4bdc0c0f.js');

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.css

@@ -30,4 +30,22 @@ verdocs-field-textarea.required {
 }
 verdocs-field-textarea.focused {
   animation: verdocs-field-pulse 0.75s 2;
+}
+verdocs-field-textarea verdocs-button-panel {
+  top: -3px;
+  left: -2px;
+  opacity: 0.5;
+  z-index: 1000;
+  cursor: pointer;
+  position: absolute;
+  transform: scale(0.6);
+}
+verdocs-field-textarea verdocs-button-panel[data-active], verdocs-field-textarea verdocs-button-panel:hover {
+  opacity: 1;
+}
+verdocs-field-textarea verdocs-button-panel .icon svg {
+  fill: #333333;
+}
+verdocs-field-textarea verdocs-button-panel .icon:hover svg {
+  fill: #000000;
 }

package/dist/collection/components/fields/verdocs-field-timestamp/verdocs-field-timestamp.css

@@ -1,26 +1,26 @@
 verdocs-field-timestamp {
-  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  width: 150px;
+  width: 160px;
   height: 15px;
+  opacity: 0.5;
   display: block;
-  font-size: 10px;
+  font-size: 9px;
   position: relative;
   background-color: transparent;
   transform-origin: bottom left;
-  opacity: 0.5;
+  font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
 verdocs-field-timestamp.done {
   opacity: 1;
 }
 verdocs-field-timestamp input {
-  box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.87);
-  font-weight: 500;
-  transform-origin: 0 0;
-  height: 100%;
   width: 100%;
+  height: 100%;
+  font-size: 9px;
   background: none;
-  font-size: 10px;
+  font-weight: 500;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
 verdocs-field-timestamp input.hide {

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

@@ -15,6 +15,9 @@ verdocs-template-create form .upload-box {
   border: 2px dashed #979797;
   color: rgba(0, 0, 0, 0.54);
 }
+verdocs-template-create form .upload-box.drag-over {
+  border: 2px solid #4c56cb;
+}
 verdocs-template-create form .upload-box svg {
   width: 64px;
   fill: #5c6575;

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

@@ -71,7 +71,14 @@ 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(Host, null, 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), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (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: {
+    return (h(Host, null, 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), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box", onDrop: (e) => {
+        e.preventDefault();
+        e.target.classList.remove('drag-over');
+        this.file = e.dataTransfer.files[0];
+      }, onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, 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-fields/verdocs-template-fields.js

@@ -350,8 +350,10 @@ export class VerdocsTemplateFields {
           field.setting = { x, y, width, height };
           break;
       }
-      // ??? We don't actually have a unique field type for multi-line text?
+      // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
+      // as a textbox with a leading>0 (typically 16).
       if (field.type === 'textarea') {
+        field.setting.leading = 16;
         field.type = 'textbox';
       }
       const saved = await createField(this.endpoint, this.templateId, field);

package/dist/collection/utils/utils.js

@@ -94,13 +94,13 @@ export const updateDocumentFieldValue = (field) => {
   }
 };
 export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
+  var _a, _b;
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
-  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -117,7 +117,15 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
         return existingField;
       }
-      const el = document.createElement(`verdocs-field-${field.type}`);
+      let { type } = field;
+      if (type === 'textbox') {
+        console.log('Rendering text box', field);
+        if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
+          console.log('Switching to text area', field);
+          type = 'textarea';
+        }
+      }
+      const el = document.createElement(`verdocs-field-${type}`);
       el.field = field;
       el.setAttribute('id', id);
       el.setAttribute('roleIndex', roleIndex);

package/dist/components/utils.js

@@ -115,13 +115,13 @@ const updateDocumentFieldValue = (field) => {
   }
 };
 const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
+  var _a, _b;
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
-  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -138,7 +138,15 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
         return existingField;
       }
-      const el = document.createElement(`verdocs-field-${field.type}`);
+      let { type } = field;
+      if (type === 'textbox') {
+        console.log('Rendering text box', field);
+        if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
+          console.log('Switching to text area', field);
+          type = 'textarea';
+        }
+      }
+      const el = document.createElement(`verdocs-field-${type}`);
       el.field = field;
       el.setAttribute('id', id);
       el.setAttribute('roleIndex', roleIndex);

package/dist/components/verdocs-field-textarea.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

package/dist/components/verdocs-field-timestamp.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$3 } from './verdocs-template-field-properties2
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 import { f as format } from './index2.js';
 
-const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldTimestampCss = "verdocs-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -8,7 +8,7 @@ import { d as defineCustomElement$3 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$2 } from './verdocs-loader2.js';
 import { d as defineCustomElement$1 } from './verdocs-progress-bar2.js';
 
-const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box.drag-over{border:2px solid #4c56cb}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .progress-wrapper{padding:20px}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const unicodeNBSP = ' ';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
@@ -80,7 +80,14 @@ 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(Host, null, 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), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (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: {
+    return (h(Host, null, 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), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box", onDrop: (e) => {
+        e.preventDefault();
+        e.target.classList.remove('drag-over');
+        this.file = e.dataTransfer.files[0];
+      }, onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, 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-fields2.js

@@ -361,8 +361,10 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
           field.setting = { x, y, width, height };
           break;
       }
-      // ??? We don't actually have a unique field type for multi-line text?
+      // TODO: We don't actually have a unique field type for multi-line text. Instead a "text area" is stored
+      // as a textbox with a leading>0 (typically 16).
       if (field.type === 'textarea') {
+        field.setting.leading = 16;
         field.type = 'textbox';
       }
       const saved = await createField(this.endpoint, this.templateId, field);

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-04-18T17:05:30",
+  "timestamp": "2023-04-25T00:21:05",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",

package/dist/esm/{utils-39fef438.js → utils-3c5246f9.js}

@@ -115,13 +115,13 @@ const updateDocumentFieldValue = (field) => {
   }
 };
 const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
+  var _a, _b;
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
   const controlsDiv = document.getElementById(docPage.containerId + '-controls');
   if (!controlsDiv) {
     console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
     return;
   }
-  // @ts-ignore
   switch (field.type) {
     case 'attachment':
     case 'date':
@@ -138,7 +138,15 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
         setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
         return existingField;
       }
-      const el = document.createElement(`verdocs-field-${field.type}`);
+      let { type } = field;
+      if (type === 'textbox') {
+        console.log('Rendering text box', field);
+        if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
+          console.log('Switching to text area', field);
+          type = 'textarea';
+        }
+      }
+      const el = document.createElement(`verdocs-field-${type}`);
       el.field = field;
       el.setAttribute('id', id);
       el.setAttribute('roleIndex', roleIndex);

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

@@ -3,7 +3,7 @@ import { c as createPopper } from './popper-bfa25c7f.js';
 import { f as getEnvelopeDocumentPageDisplayUri } from './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-ca592138.js';
-import { t as throttle } from './utils-39fef438.js';
+import { t as throttle } from './utils-3c5246f9.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Files-70a192df.js';
 import './index-d264c496.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-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-39fef438.js';
+import { g as getFieldSettings } from './utils-3c5246f9.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.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-b18c0348.js';
-import { g as getFieldSettings } from './utils-39fef438.js';
+import { g as getFieldSettings } from './utils-3c5246f9.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { f as format } from './index-d264c496.js';
 import './_commonjsHelpers-5ec8f9b7.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-b18c0348.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-39fef438.js';
+import { g as getFieldSettings } from './utils-3c5246f9.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';