@verdocs/web-sdk 4.2.157 → 5.0.0

package/dist/cjs/verdocs-progress-bar.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ccac8641.js');
+
+const verdocsProgressBarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-progress-bar{font-family:\"Inter\", \"Barlow\", sans-serif;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-progress-bar .labels{display:-ms-flexbox;display:flex;margin:0 0 8px 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}verdocs-progress-bar .labels .label{display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin-right:8px;color:#33364b}verdocs-progress-bar .bar{display:-ms-flexbox;display:flex;-ms-flex:0 0 10px;flex:0 0 10px;border-radius:5px;background-color:#cccccc}verdocs-progress-bar .bar .slider{display:-ms-flexbox;display:flex;border-radius:5px;background-color:#55bc81}";
+const VerdocsProgressBarStyle0 = verdocsProgressBarCss;
+
+const VerdocsProgressBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = '';
+        this.showPercent = false;
+        this.percent = 0;
+    }
+    render() {
+        const widthPercent = Math.ceil((100 * Math.min(this.percent, 100)) / 100);
+        console.log('Rendering progress bar', { widthPercent, label: this.label, showPercent: this.showPercent, percent: this.percent });
+        return (index.h(index.Host, { key: 'c57b566587b7fe5f95f7082964dc7d27c46008cb' }, index.h("div", { key: 'b44243b4c65cdd5ddb7a47028db07e47e1c9373b', class: "labels" }, this.label && index.h("div", { key: '58715d2cd0a47260618472ed06d3eeda095ea852', class: "label" }, this.label), this.showPercent && index.h("div", { key: '38b9fa2f2180eee29cdc6aff0562475c9d6cc943', class: "label" }, this.percent, "%")), index.h("div", { key: '1258f3696cb5852865e7d1af59bf2acb7acfda50', class: "bar" }, index.h("div", { key: 'eb1346d2b9f7ccce786c358ef247fd3ec62de67f', class: "slider", style: { width: `${widthPercent}%` } }))));
+    }
+};
+VerdocsProgressBar.style = VerdocsProgressBarStyle0;
+
+exports.verdocs_progress_bar = VerdocsProgressBar;

package/dist/cjs/verdocs-quick-functions.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 
 const verdocsQuickFunctionsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-quick-functions{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-quick-functions .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:240px;background-color:#1e2031;text-transform:uppercase;padding:10px 10px 20px 10px;font-family:sans-serif;color:#ffffff}verdocs-quick-functions .title{font-size:22px;font-weight:700;line-height:30px;margin:1em 0 40px 0}verdocs-quick-functions button{width:140px;height:40px;border:none;display:-ms-flexbox;display:flex;color:#ffffff;cursor:pointer;font-size:14px;font-weight:700;line-height:25px;-ms-flex-align:center;align-items:center;margin-bottom:20px;border-radius:5px;text-transform:uppercase;-ms-flex-pack:space-evenly;justify-content:space-evenly;background-color:#55bc81}verdocs-quick-functions button svg{fill:#ffffff}";

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 
 const verdocsRadioButtonCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-radio-button.disabled{opacity:0.5}verdocs-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-radio-button input[type=radio]+label:before{content:\"\";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:16px;height:16px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-radio-button.hide{display:none}verdocs-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 const VerdocsRadioButtonStyle0 = verdocsRadioButtonCss;

package/dist/cjs/verdocs-search-box.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 
 const verdocsSearchBoxCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-search-box{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-search-box form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:45px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:5px 0 0;border-radius:5px;-ms-flex-align:center;align-items:center;background-color:#fff;padding:0 8px;border-width:1px;border-style:solid;border-color:#707ae5}verdocs-search-box form input{-webkit-box-sizing:border-box;box-sizing:border-box;height:43px;width:100%;font-size:18px;border:none}verdocs-search-box form input:focus{outline:none}verdocs-search-box form button.search{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border:none;width:100px;height:28px;font-weight:700;font-size:10px;letter-spacing:1px;background-color:#55bc81;text-transform:uppercase;color:#fff}verdocs-search-box form .type{background-color:#707ae5;height:30px;display:-ms-inline-flexbox;display:inline-flex;padding:1px 0 2px 10px;font-size:13px;line-height:16px;border-radius:4px;-ms-flex-pack:center;justify-content:center;text-transform:uppercase;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#fff;margin-right:10px}verdocs-search-box form .type button{border:none;color:#fff;margin:5px 0 0 8px;background:transparent}verdocs-search-box form svg{width:12px;height:12px;margin-right:6px}verdocs-search-box ::-webkit-input-placeholder{color:#aeb4bf}verdocs-search-box ::-moz-placeholder{color:#aeb4bf}verdocs-search-box :-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::-ms-input-placeholder{color:#aeb4bf}verdocs-search-box ::placeholder{color:#aeb4bf}";

package/dist/cjs/verdocs-search-tabs.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 
 const verdocsSearchTabsCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-search-tabs{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:block}";
 const VerdocsSearchTabsStyle0 = verdocsSearchTabsCss;

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

@@ -2,16 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const utils = require('./utils-5accd019.js');
-const TemplateFieldStore = require('./TemplateFieldStore-7bcc0f7a.js');
+const utils = require('./utils-ba1e95e0.js');
 const Toast = require('./Toast-d84d7bd3.js');
 const errors = require('./errors-017fb835.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
 require('./format-dc0f3757.js');
-require('./index-76d03a35.js');
 
 const verdocsSignCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-sign{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-sign div{display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-sign input{vertical-align:top}verdocs-sign>.document{-ms-flex:1;flex:1;width:100%;height:100%;-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;max-width:1200px;min-height:200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-sign>.document .inner{width:100%;max-width:1028px}verdocs-sign .cover{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:5000;position:absolute;padding-top:100px;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;background:rgba(0, 0, 0, 0.5)}verdocs-sign .agree{-ms-flex:0;flex:0;width:600px;display:-ms-flexbox;display:flex;max-width:90%;padding:30px 15px;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff}verdocs-sign .agree .header{-ms-flex:0 0 56px;flex:0 0 56px}verdocs-sign .agree li{margin:0.5em 0}verdocs-sign verdocs-ok-dialog .background-overlay{-ms-flex-align:start;align-items:flex-start;padding-top:100px}verdocs-sign .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}verdocs-sign .fatal-error{position:absolute;z-index:100;top:0;left:0;right:0;bottom:0;background-color:#4a4a4a;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-sign .fatal-error .placeholder{position:absolute;opacity:0.1;z-index:-1;top:0;left:0;right:0;bottom:0;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);margin-top:15px}verdocs-sign .fatal-error .message{width:50%;font-size:16px;background:white;border-radius:5px;-webkit-box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235);box-shadow:3px 3px 9px -1px rgba(0, 0, 0, 0.2470588235)}verdocs-sign .fatal-error .header{color:white;font-size:18px;font-weight:500;padding:5px 10px;margin:0 0 10px 0;background:#654dcb}verdocs-sign .fatal-error p{margin:1rem;font-size:14px;font-weight:400}@media print{verdocs-sign .header{display:none}}#verdocs-sign-header{color:#fff;width:100%;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 46px;flex:0 0 46px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-sign-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 12px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-sign-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-sign-header .title{font-size:18px;font-weight:500;overflow:hidden;white-space:nowrap;padding:0 10px 0 0;text-overflow:ellipsis}.spinner-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}";
 const VerdocsSignStyle0 = verdocsSignCss;
@@ -39,7 +37,6 @@ const VerdocsSign = class {
         this.roleId = null;
         this.inviteCode = null;
         this.headerTargetId = null;
-        this.envelope = null;
         this.roleNames = [];
         this.sortedRecipients = [];
         this.recipient = null;
@@ -62,6 +59,8 @@ const VerdocsSign = class {
         this.kbaQuestions = [];
         this.showSpinner = false;
         this.kbaChoices = [];
+        this.loading = true;
+        this.envelope = null;
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -85,11 +84,12 @@ const VerdocsSign = class {
         }
         try {
             console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
+            // NOTE: We don't listen to the store here because we are often an independent
+            // session and might have a different "view" of the envelope.
             const { envelope, recipient } = await jsSdk.startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
             console.log(`[SIGN] Loaded signing session`, envelope, recipient);
             this.recipient = recipient;
             this.envelope = envelope;
-            TemplateFieldStore.createTemplateFieldStoreFromEnvelope(this.envelope);
             this.sortedRecipients = [...this.envelope.recipients];
             this.sortedRecipients.sort((a, b) => {
                 return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
@@ -471,7 +471,7 @@ const VerdocsSign = class {
                 const updateResult = await jsSdk.uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
                 this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
-                const newEl = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                const newEl = utils.renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
                 this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
@@ -489,7 +489,7 @@ const VerdocsSign = class {
                 console.log('[SIGN] Deleted attachment', updateResult);
                 this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
-                const newEl = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                const newEl = utils.renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
                 this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
@@ -527,7 +527,7 @@ const VerdocsSign = class {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            const el = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
+            const el = utils.renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
             }
@@ -545,7 +545,7 @@ const VerdocsSign = class {
             this.getRecipientFields()
                 .filter(field => field.page === pageInfo.pageNumber)
                 .forEach(field => {
-                const el = utils.renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
+                const el = utils.renderDocumentField('envelope', field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
                 if (!el) {
                     return;
                 }
@@ -572,7 +572,7 @@ const VerdocsSign = class {
             return (index.h(index.Host, { class: { agreed: this.agreed } }, index.h("div", { class: "fatal-error" }, index.h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" }), index.h("div", { class: "message" }, index.h("div", { class: "header" }, this.fatalErrorHeader), index.h("p", null, this.fatalErrorMessage)))));
         }
         if (this.isDone) {
-            return (index.h(index.Host, { class: { agreed: this.agreed } }, index.h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, envelope: this.envelope, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.showDone && (index.h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: (e) => {
+            return (index.h(index.Host, { class: { agreed: this.agreed } }, index.h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }), this.showDone && (index.h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.showDone = false;
@@ -665,7 +665,6 @@ const VerdocsSign = class {
                 // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
                 // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
                 // field vales (so far) stamped into them.
-                // const templatePage = EnvelopeStore.template?.pages.find(p => p.sequence === page.sequence);
                 // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
                 //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
                 // console.log('tp', templatePage, page);

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 
 const verdocsSpinnerCss = "verdocs-spinner{display:inline-block;border-radius:50%;-webkit-animation:spin 1s ease-in-out infinite;animation:spin 1s ease-in-out infinite}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
 const VerdocsSpinnerStyle0 = verdocsSpinnerCss;

package/dist/cjs/verdocs-status-indicator.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
 const popper = require('./popper-31badbf8.js');
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 
 const verdocsTableCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-table{width:100%;display:block;margin:0 0 10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-table .table-wrapper{margin:10px 0;padding:0}verdocs-table .table{width:100%;border:none;border-collapse:collapse}verdocs-table .row.data-row{border:1px solid #d4d4d8;background-color:#ffffff}verdocs-table .header-col{color:#5c6575;font-weight:600;text-align:left;padding:8px 16px}verdocs-table .data-col{font-weight:400;padding:8px 16px}";
 const VerdocsTableStyle0 = verdocsTableCss;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 
 const verdocsTemplateCardCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-card{font-family:\"Inter\", \"Barlow\", sans-serif;width:320px;height:320px;display:-ms-flexbox;display:flex;padding:25px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;-webkit-box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05);box-shadow:2px 2px 5px rgba(51, 54, 75, 0.05)}verdocs-template-card .thumbnail{width:272px;height:158px;-o-object-fit:cover;object-fit:cover;margin-bottom:22px;-o-object-position:-20% 0;object-position:-20% 0}verdocs-template-card .name{font-size:18px;font-weight:700;margin-bottom:7px}verdocs-template-card .org-name{font-size:14px;font-weight:700;margin-bottom:6px}verdocs-template-card hr{width:100%;margin-bottom:17px;background-color:#aeb4bf}verdocs-template-card .controls{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;text-align:center;font-size:16px}verdocs-template-card .controls .control{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;margin-right:8px;-ms-flex-align:start;align-items:flex-start;border-right:1px solid #aeb4bf}verdocs-template-card .controls .control.secondary{-ms-flex-pack:center;justify-content:center}verdocs-template-card .controls .control svg{fill:#aeb4bf;height:16px;max-width:16px;margin:0 8px -2px 0}verdocs-template-card .additional-controls svg{margin-right:0;fill:#654dcb}";
 const VerdocsTemplateCardStyle0 = verdocsTemplateCardCss;

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

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-ccac8641.js');
+const jsSdk = require('@verdocs/js-sdk');
+const errors = require('./errors-017fb835.js');
+
+const verdocsTemplateCreateCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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 p{color:#33364b;margin-top:20px;font-size:18px;font-weight:500;overflow-wrap:anywhere}verdocs-template-create p.subscript{color:#5c6575;font-size:14px;margin:20px}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}verdocs-template-create .error{margin:20px 0;color:#cc0000}";
+const VerdocsTemplateCreateStyle0 = verdocsTemplateCreateCss;
+
+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>';
+const VerdocsTemplateCreate = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.exit = index.createEvent(this, "exit", 7);
+        this.next = index.createEvent(this, "next", 7);
+        this.sdkError = index.createEvent(this, "sdkError", 7);
+        this.templateCreated = index.createEvent(this, "templateCreated", 7);
+        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
+        this.maxSize = 20.5 * 1024 * 1024;
+        this.file = undefined;
+        this.creating = false;
+        this.progressLabel = 'Uploading...';
+        this.progressPercent = 0;
+        this.errorMessage = '';
+    }
+    componentWillLoad() {
+        this.endpoint.setTimeout(30000);
+        this.endpoint.loadSession();
+    }
+    handleFileChanged(e) {
+        var _a;
+        this.errorMessage = '';
+        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
+        console.log('[CREATE] Selected file', this.file);
+        const totalSize = this.file.size;
+        if (totalSize > this.maxSize) {
+            this.errorMessage = 'Total file size must not exceed 20MB.';
+        }
+    }
+    handleUpload(e) {
+        e.stopPropagation();
+        const fileElem = document.getElementById('verdocs-template-create-file');
+        fileElem.click();
+    }
+    handleCancel(e) {
+        e.stopPropagation();
+        this.exit.emit();
+    }
+    async handleSubmit(e) {
+        var _a, _b, _c, _d, _e;
+        e.stopPropagation();
+        // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
+        if (!this.file) {
+            return;
+        }
+        this.creating = true;
+        this.progressLabel = 'Uploading...';
+        try {
+            const template = await jsSdk.createTemplate(this.endpoint, {
+                name: this.file.name,
+                // TODO: Make optional in the SDK
+                initial_reminder: 0,
+                followup_reminders: 0,
+                documents: [this.file],
+            }, percent => {
+                if (percent >= 99) {
+                    this.progressLabel = 'Processing...';
+                    this.progressPercent = 100;
+                }
+                else {
+                    this.progressPercent = percent;
+                }
+            });
+            console.log('[CREATE] Created template', template);
+            (_a = this.templateCreated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template, templateId: template.id });
+            (_b = this.next) === null || _b === void 0 ? void 0 : _b.emit(template);
+            this.creating = false;
+            this.progressLabel = '';
+            this.progressPercent = 0;
+        }
+        catch (e) {
+            console.log('[CREATE] Error creating template', e);
+            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new errors.SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+            this.creating = false;
+        }
+    }
+    render() {
+        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: ".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", 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];
+                if (this.file.size > this.maxSize) {
+                    this.errorMessage = 'Total file size must not exceed 20MB.';
+                }
+            }, 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("span", { innerHTML: FileIcon, style: { display: 'flex', justifyContent: 'center' } }), index.h("p", null, this.file ? this.file.name : 'Drag and drop your files here'), index.h("p", { class: "subscript" }, "Supported files: PDF, Word"), index.h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), !!this.errorMessage && index.h("div", { class: "error" }, this.errorMessage), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating || !!this.errorMessage })))));
+    }
+};
+VerdocsTemplateCreate.style = VerdocsTemplateCreateStyle0;
+
+exports.verdocs_template_create = VerdocsTemplateCreate;

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

@@ -2,24 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateFieldStore = require('./TemplateFieldStore-7bcc0f7a.js');
-const utils = require('./utils-5accd019.js');
+const utils = require('./utils-ba1e95e0.js');
+const Datastore = require('./Datastore-b1742da2.js');
 const popper = require('./popper-31badbf8.js');
-require('./index-76d03a35.js');
 require('./_commonjsHelpers-e6ff1d6e.js');
 require('./Types-7a726ff3.js');
 require('./format-dc0f3757.js');
 
-const verdocsTemplateDocumentPageCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}";
+const verdocsTemplateDocumentPageCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}verdocs-template-document-page .placeholder{opacity:0.1;width:612px;height:792px;-webkit-box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294);box-shadow:0 0 10px 5px rgba(0, 0, 0, 0.0588235294)}";
 const VerdocsTemplateDocumentPageStyle0 = verdocsTemplateDocumentPageCss;
 
 const VerdocsTemplateDocumentPage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.pageRendered = index.createEvent(this, "pageRendered", 7);
-        this.fieldStore = null;
+        this.templateListenerId = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
         this.editable = false;
         this.disabled = false;
@@ -40,10 +39,12 @@ const VerdocsTemplateDocumentPage = class {
         this.pageDisplayUri = '';
         this.xScale = 1;
         this.yScale = 1;
+        this.loading = true;
+        this.template = null;
     }
     async componentWillLoad() {
         this.pageDisplayUri = await jsSdk.getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
+        this.listenToTemplate();
     }
     componentDidLoad() {
         this.resizeObserver = new ResizeObserver(utils.throttle(entries => {
@@ -63,12 +64,21 @@ const VerdocsTemplateDocumentPage = class {
     disconnectedCallback() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Datastore.Store.subscribe('templates', this.templateId, () => jsSdk.getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Datastore.Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
-    // Left here for documentation purposes in case we find an edge case where this isn't true. But we apparently don't need this.
-    // When we add the resize observer it will always be triggered at least once so notifying here as well is just a dupe.
-    // componentDidRender() {
-    //   this.notifyRenderedSize();
-    // }
     notifyRenderedSize() {
         // We skip one notification because by default we will always get at least two, one when rendering the initial size
         // and a second once we're able to compute the scale size, when the resizeObserver sets renderedWidth/renderedHeight.
@@ -101,58 +111,63 @@ const VerdocsTemplateDocumentPage = class {
         });
     }
     render() {
+        if (this.loading) {
+            return (index.h(index.Host, null, index.h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" })));
+        }
         const height = `${this.renderedHeight}px`;
-        return (index.h(index.Host, { key: '1e8a98b5849ce5cc222baf9f7bcd544456c07a35', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (index.h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
-            this.fieldStore
-                .get('fields')
-                .filter(field => field && field.page === this.pageNumber)
-                .map(field => {
-                var _a, _b;
-                const id = utils.getFieldId(field);
-                let { name, type, multiline } = field;
-                const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
-                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) {
-                    type = 'textarea';
-                    multiline = true;
-                }
-                switch (type) {
-                    case 'textbox':
-                        return (index.h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'textarea':
-                        return (index.h("verdocs-field-textarea", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'date':
-                        return (index.h("verdocs-field-date", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'attachment':
-                        return (index.h("verdocs-field-attachment", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'dropdown':
-                        return (index.h("verdocs-field-dropdown", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'initial':
-                        return (index.h("verdocs-field-initial", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'signature':
-                        return (index.h("verdocs-field-signature", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, this.xScale, this.yScale) }));
-                    case 'timestamp':
-                        return (index.h("verdocs-field-timestamp", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'checkbox':
-                        return (index.h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    case 'radio':
-                        return (index.h("verdocs-field-radio", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
-                    default:
-                        return index.h(index.Fragment, null, name);
-                }
-            }))) : 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
-                // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
-                // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
-                // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
-                // TODO: Store this in the DB with each page.
-                this.naturalWidth = e.target.naturalWidth;
-                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)))));
+        return (index.h(index.Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => {
+            var _a;
+            return layer.type === 'div' ? (index.h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+                (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || [])
+                    .filter(field => field && field.page === this.pageNumber)
+                    .map(field => {
+                    var _a, _b;
+                    const id = utils.getFieldId(field);
+                    let { name, type, multiline } = field;
+                    const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
+                    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) {
+                        type = 'textarea';
+                        multiline = true;
+                    }
+                    switch (type) {
+                        case 'textbox':
+                            return (index.h("verdocs-field-textbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'textarea':
+                            return (index.h("verdocs-field-textarea", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'date':
+                            return (index.h("verdocs-field-date", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'attachment':
+                            return (index.h("verdocs-field-attachment", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'dropdown':
+                            return (index.h("verdocs-field-dropdown", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'initial':
+                            return (index.h("verdocs-field-initial", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'signature':
+                            return (index.h("verdocs-field-signature", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, this.xScale, this.yScale) }));
+                        case 'timestamp':
+                            return (index.h("verdocs-field-timestamp", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'checkbox':
+                            return (index.h("verdocs-field-checkbox", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        case 'radio':
+                            return (index.h("verdocs-field-radio", { id: id, fieldname: name, source: "template", sourceid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: utils.getControlStyles(field, xScale, yScale) }));
+                        default:
+                            return index.h(index.Fragment, null, name);
+                    }
+                }))) : 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
+                    // for a field are based on the responsive Web view the Template editor was seeing. The IMG was scaled down there in the
+                    // exact same way, so we just honor it. We capture the natural width and height here more as information. Then we use the
+                    // aspect ratio to adjust the "virtual" height in case the page is not 8.5"x11".
+                    // TODO: Store this in the DB with each page.
+                    this.naturalWidth = e.target.naturalWidth;
+                    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); }
 };