@verdocs/web-sdk 4.2.158 → 5.0.1

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h } from './index-272d51a4.js';
 import { VerdocsEndpoint } from '@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/esm/verdocs-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-c8587076.js';
+import { r as registerInstance, h, H as Host } from './index-272d51a4.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/esm/verdocs-search-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h } from './index-272d51a4.js';
 import { VerdocsEndpoint } from '@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/esm/verdocs-search-tabs.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-c8587076.js';
+import { r as registerInstance, h } from './index-272d51a4.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/esm/verdocs-sign.entry.js

@@ -1,13 +1,11 @@
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-272d51a4.js';
 import { VerdocsEndpoint, startSigningSession, getKbaStep, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, sortFields, envelopeRecipientSubmit, getEnvelope, uploadEnvelopeFieldAttachment, deleteEnvelopeFieldAttachment, formatFullName, fullNameToInitials, submitKbaPin, submitKbaIdentity, submitKbaChallengeResponse, integerSequence } from '@verdocs/js-sdk';
-import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils-27fa12eb.js';
-import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore-909147d8.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils-47de6f79.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-95d86a44.js';
 import './format-b8602175.js';
-import './index-24d8ae6a.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;
@@ -35,7 +33,6 @@ const VerdocsSign = class {
         this.roleId = null;
         this.inviteCode = null;
         this.headerTargetId = null;
-        this.envelope = null;
         this.roleNames = [];
         this.sortedRecipients = [];
         this.recipient = null;
@@ -58,6 +55,8 @@ const VerdocsSign = class {
         this.kbaQuestions = [];
         this.showSpinner = false;
         this.kbaChoices = [];
+        this.loading = true;
+        this.envelope = null;
     }
     componentWillLoad() {
         if (!this.endpoint) {
@@ -81,11 +80,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 startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
             console.log(`[SIGN] Loaded signing session`, envelope, recipient);
             this.recipient = recipient;
             this.envelope = envelope;
-            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;
@@ -467,7 +467,7 @@ const VerdocsSign = class {
                 const updateResult = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
                 this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
-                const newEl = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                const newEl = renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
                 this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
@@ -485,7 +485,7 @@ const VerdocsSign = class {
                 console.log('[SIGN] Deleted attachment', updateResult);
                 this.updateRecipientFieldValue(field.name, updateResult);
                 this.checkRecipientFields();
-                const newEl = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
+                const newEl = renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
                 this.attachFieldAttributes(pageInfo, field, newEl);
                 this.showSpinner = false;
             }
@@ -523,7 +523,7 @@ const VerdocsSign = class {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
+            const el = renderDocumentField('envelope', field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
             }
@@ -541,7 +541,7 @@ const VerdocsSign = class {
             this.getRecipientFields()
                 .filter(field => field.page === pageInfo.pageNumber)
                 .forEach(field => {
-                const el = renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
+                const el = renderDocumentField('envelope', field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
                 if (!el) {
                     return;
                 }
@@ -568,7 +568,7 @@ const VerdocsSign = class {
             return (h(Host, { class: { agreed: this.agreed } }, h("div", { class: "fatal-error" }, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" }), h("div", { class: "message" }, h("div", { class: "header" }, this.fatalErrorHeader), h("p", null, this.fatalErrorMessage)))));
         }
         if (this.isDone) {
-            return (h(Host, { class: { agreed: this.agreed } }, 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 && (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 (h(Host, { class: { agreed: this.agreed } }, 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 && (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;
@@ -661,7 +661,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/esm/verdocs-spinner.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-c8587076.js';
+import { r as registerInstance, h, H as Host } from './index-272d51a4.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/esm/verdocs-status-indicator.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-c8587076.js';
+import { r as registerInstance, h, H as Host } from './index-272d51a4.js';
 import { formatFullName } from '@verdocs/js-sdk';
 import { c as createPopper } from './popper-0fbeff6d.js';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-c8587076.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-272d51a4.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/esm/verdocs-template-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-c8587076.js';
+import { r as registerInstance, h, H as Host } from './index-272d51a4.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/{components/p-f9cc62a7.js → esm/verdocs-template-create.entry.js}

@@ -1,20 +1,14 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-7786799a.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-272d51a4.js';
 import { VerdocsEndpoint, createTemplate } from '@verdocs/js-sdk';
-import { g as getTemplateStore } from './p-09d28afd.js';
-import { S as SDKError } from './p-fd97809c.js';
-import { d as defineCustomElement$4 } from './p-ac7578f6.js';
-import { d as defineCustomElement$3 } from './p-921297ba.js';
-import { d as defineCustomElement$2 } from './p-90540412.js';
-import { d as defineCustomElement$1 } from './p-556596e4.js';
+import { S as SDKError } from './errors-887f1e88.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 = /*@__PURE__*/ proxyCustomElement(class VerdocsTemplateCreate extends H {
-    constructor() {
-        super();
-        this.__registerHost();
+const VerdocsTemplateCreate = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
         this.exit = createEvent(this, "exit", 7);
         this.next = createEvent(this, "next", 7);
         this.sdkError = createEvent(this, "sdkError", 7);
@@ -51,7 +45,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
         this.exit.emit();
     }
     async handleSubmit(e) {
-        var _a, _b, _c;
+        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) {
@@ -76,22 +70,15 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
                 }
             });
             console.log('[CREATE] Created template', template);
-            getTemplateStore(this.endpoint, template.id, true)
-                .then(() => {
-                var _a, _b;
-                (_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(e);
-            });
+            (_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);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new 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;
         }
     }
@@ -111,48 +98,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
                 e.dataTransfer.dropEffect = 'copy';
             }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, h("span", { innerHTML: FileIcon, style: { display: 'flex', justifyContent: 'center' } }), h("p", null, this.file ? this.file.name : 'Drag and drop your files here'), h("p", { class: "subscript" }, "Supported files: PDF, Word"), 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 && h("div", { class: "error" }, this.errorMessage), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating || !!this.errorMessage })))));
     }
-    static get style() { return VerdocsTemplateCreateStyle0; }
-}, [0, "verdocs-template-create", {
-        "endpoint": [16],
-        "maxSize": [1026, "max-size"],
-        "file": [32],
-        "creating": [32],
-        "progressLabel": [32],
-        "progressPercent": [32],
-        "errorMessage": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["verdocs-template-create", "verdocs-button", "verdocs-component-error", "verdocs-loader", "verdocs-progress-bar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "verdocs-template-create":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, VerdocsTemplateCreate);
-            }
-            break;
-        case "verdocs-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "verdocs-component-error":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "verdocs-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "verdocs-progress-bar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
+};
+VerdocsTemplateCreate.style = VerdocsTemplateCreateStyle0;
 
-export { VerdocsTemplateCreate as V, defineCustomElement as d };
+export { VerdocsTemplateCreate as verdocs_template_create };

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

@@ -1,21 +1,20 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-c8587076.js';
-import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-909147d8.js';
-import { t as throttle, j as getControlStyles, g as getFieldId } from './utils-27fa12eb.js';
+import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-272d51a4.js';
+import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri, getTemplate } from '@verdocs/js-sdk';
+import { t as throttle, j as getControlStyles, g as getFieldId } from './utils-47de6f79.js';
+import { S as Store } from './Datastore-52fcbac6.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
-import './index-24d8ae6a.js';
 import './_commonjsHelpers-bdec4bbd.js';
 import './Types-95d86a44.js';
 import './format-b8602175.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) {
         registerInstance(this, hostRef);
         this.pageRendered = createEvent(this, "pageRendered", 7);
-        this.fieldStore = null;
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.editable = false;
         this.disabled = false;
@@ -36,10 +35,12 @@ const VerdocsTemplateDocumentPage = class {
         this.pageDisplayUri = '';
         this.xScale = 1;
         this.yScale = 1;
+        this.loading = true;
+        this.template = null;
     }
     async componentWillLoad() {
         this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.documentId, this.pageNumber);
-        this.fieldStore = getTemplateFieldStore(this.templateId);
+        this.listenToTemplate();
     }
     componentDidLoad() {
         this.resizeObserver = new ResizeObserver(throttle(entries => {
@@ -59,12 +60,21 @@ const VerdocsTemplateDocumentPage = class {
     disconnectedCallback() {
         var _a;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            this.template = template;
+            this.loading = false;
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            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.
@@ -97,58 +107,63 @@ const VerdocsTemplateDocumentPage = class {
         });
     }
     render() {
+        if (this.loading) {
+            return (h(Host, null, h("img", { src: "https://public-assets.verdocs.com/loading-placeholder.png", class: "placeholder", alt: "Placeholder page" })));
+        }
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: '1e8a98b5849ce5cc222baf9f7bcd544456c07a35', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (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 = 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 (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: getControlStyles(field, xScale, yScale) }));
-                    case 'textarea':
-                        return (h("verdocs-field-textarea", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'date':
-                        return (h("verdocs-field-date", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'attachment':
-                        return (h("verdocs-field-attachment", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'dropdown':
-                        return (h("verdocs-field-dropdown", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'initial':
-                        return (h("verdocs-field-initial", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'signature':
-                        return (h("verdocs-field-signature", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale) }));
-                    case 'timestamp':
-                        return (h("verdocs-field-timestamp", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'checkbox':
-                        return (h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    case 'radio':
-                        return (h("verdocs-field-radio", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
-                    default:
-                        return h(Fragment, null, name);
-                }
-            }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
-                // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
-                // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
-                // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
-                // 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;
-            } })) : (h("div", null)))));
+        return (h(Host, { id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => {
+            var _a;
+            return layer.type === 'div' ? (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 = 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 (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: getControlStyles(field, xScale, yScale) }));
+                        case 'textarea':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'date':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'attachment':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'dropdown':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'initial':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'signature':
+                            return (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: getControlStyles(field, this.xScale, this.yScale) }));
+                        case 'timestamp':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'checkbox':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        case 'radio':
+                            return (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: getControlStyles(field, xScale, yScale) }));
+                        default:
+                            return h(Fragment, null, name);
+                    }
+                }))) : this.pageDisplayUri ? (h("img", { class: "verdocs-template-document-page-layer img", id: `${this.containerId}-${layer.name}`, src: this.pageDisplayUri, alt: `Page ${this.pageNumber}`, "aria-hidden": true, loading: "lazy", onLoad: (e) => {
+                    // Note that all we really care about is the aspect ratio. We track the natural Width and Height but they aren't really that
+                    // useful as individual values. The image will already have been scaled down to fit a DIV for display (100%, auto height).
+                    // Builder places fields offset into the rendered display area, not the original document's dimensions. So its X/Y values
+                    // 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;
+                } })) : (h("div", null));
+        })));
     }
     get container() { return getElement(this); }
 };