@verdocs/web-sdk 4.2.158 → 5.0.1

package/dist/collection/components/templates/verdocs-template-build-tabs/verdocs-template-build-tabs.js

@@ -1,9 +1,9 @@
 import { format } from "date-fns";
-import { VerdocsEndpoint } from "@verdocs/js-sdk";
+import { getTemplate, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
-import { getTemplateStore } from "../../../utils/TemplateStore";
 import { VerdocsToast } from "../../../utils/Toast";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 const CopyIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" /></svg>`;
 const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
@@ -12,21 +12,38 @@ const STEPS = ['attachments', 'roles', 'settings', 'fields', 'preview'];
  */
 export class VerdocsTemplateBuildTabs {
     constructor() {
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = null;
         this.step = 'preview';
-        this.templateStore = null;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        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;
+        }
     }
     onTemplateIdChanged(newTemplateId) {
         console.log('[BUILD_TABS] Template ID changed', newTemplateId);
-        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+        this.listenToTemplate();
     }
     onStepChanged(newStep) {
         console.log('[BUILD_TABS] Step changed', newStep);
-        this.loadTemplate(this.templateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.endpoint.session) {
@@ -38,27 +55,16 @@ export class VerdocsTemplateBuildTabs {
                 console.log('[BUILD_TABS] Missing required template ID, forcing view to attachments');
                 return;
             }
-            try {
-                this.templateStore = await getTemplateStore(this.endpoint, this.templateId, false);
-            }
-            catch (e) {
-                console.log('[BUILD_TABS] Error loading 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));
-            }
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[BUILD_TABS] Error loading template', e);
-            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
-        }
-    }
-    async loadTemplate(templateId) {
-        if (templateId) {
-            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
+            (_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));
         }
     }
     setStep(e) {
         var _a;
-        console.log('Selected step', e.detail.tab.id);
+        console.log('[BUILD_TABS] Selected step', e.detail.tab.id);
         e.stopPropagation();
         e.preventDefault();
         this.step = e.detail.tab.id;
@@ -77,18 +83,16 @@ export class VerdocsTemplateBuildTabs {
         });
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        let canPreview = false;
-        let canEditFields = false;
-        let canEditRoles = false;
-        if (this.templateId && this.templateStore && this.templateStore.state) {
-            canEditRoles = ((_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0;
-            canEditFields = canEditRoles && ((_f = (_e = (_d = this.templateStore) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.roles) === null || _f === void 0 ? void 0 : _f.length) > 0;
-            canPreview = canEditFields && ((_j = (_h = (_g = this.templateStore) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.fields) === null || _j === void 0 ? void 0 : _j.length) > 0;
-        }
+        const canEditRoles = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).length > 0;
+        let canEditFields = canEditRoles && (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).length > 0;
+        const canPreview = canEditFields && (((_c = this.template) === null || _c === void 0 ? void 0 : _c.fields) || []).length > 0;
         let selectedStepIndex = Math.max(STEPS.indexOf(this.step), 0);
         if (!canPreview && selectedStepIndex >= 4) {
             selectedStepIndex = 3;
@@ -105,8 +109,8 @@ export class VerdocsTemplateBuildTabs {
                 { id: 'settings', disabled: !canEditFields, label: 'Settings' },
                 { id: 'fields', disabled: !canEditFields, label: 'Fields' },
                 { id: 'preview', disabled: !canPreview, label: 'Preview/Send' },
-            ] }), this.templateId && (h("div", { class: "info" }, h("verdocs-button-panel", { icon: HelpIcon }, h("div", { class: "template-details-panel" }, h("h6", null, "Template Details"), h("div", { class: "row" }, h("label", null, "ID:"), h("div", { class: "value" }, this.templateId), h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), h("div", { class: "row" }, h("label", null, "Name:"), h("div", { class: "value" }, (_l = (_k = this.templateStore) === null || _k === void 0 ? void 0 : _k.state) === null || _l === void 0 ? void 0 : _l.name)), h("div", { class: "row" }, h("label", null, "Visibility:"), h("div", { class: "value" }, ((_o = (_m = this.templateStore) === null || _m === void 0 ? void 0 : _m.state) === null || _o === void 0 ? void 0 : _o.is_public) ? 'Public' : ((_q = (_p = this.templateStore) === null || _p === void 0 ? void 0 : _p.state) === null || _q === void 0 ? void 0 : _q.is_personal) ? 'Private' : 'Shared')), h("div", { class: "row" }, h("label", null, "Created:"), h("div", { class: "value" }, ((_s = (_r = this.templateStore) === null || _r === void 0 ? void 0 : _r.state) === null || _s === void 0 ? void 0 : _s.counter) ? format(new Date((_u = (_t = this.templateStore) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.created_at), 'P p') : '')), h("div", { class: "row" }, h("label", null, "Used:"), h("div", { class: "value" }, (_w = (_v = this.templateStore) === null || _v === void 0 ? void 0 : _v.state) === null || _w === void 0 ? void 0 :
-            _w.counter, " time(s)"))))))));
+            ] }), this.templateId && (h("div", { class: "info" }, h("verdocs-button-panel", { icon: HelpIcon }, h("div", { class: "template-details-panel" }, h("h6", null, "Template Details"), h("div", { class: "row" }, h("label", null, "ID:"), h("div", { class: "value" }, this.templateId), h("div", { class: "icon-button", innerHTML: CopyIcon, onClick: () => this.copyTemplateId() })), h("div", { class: "row" }, h("label", null, "Name:"), h("div", { class: "value" }, (_d = this.template) === null || _d === void 0 ? void 0 : _d.name)), h("div", { class: "row" }, h("label", null, "Visibility:"), h("div", { class: "value" }, ((_e = this.template) === null || _e === void 0 ? void 0 : _e.is_public) ? 'Public' : ((_f = this.template) === null || _f === void 0 ? void 0 : _f.is_personal) ? 'Private' : 'Shared')), h("div", { class: "row" }, h("label", null, "Created:"), h("div", { class: "value" }, ((_g = this.template) === null || _g === void 0 ? void 0 : _g.counter) ? format(new Date((_h = this.template) === null || _h === void 0 ? void 0 : _h.created_at), 'P p') : '')), h("div", { class: "row" }, h("label", null, "Used:"), h("div", { class: "value" }, (_j = this.template) === null || _j === void 0 ? void 0 :
+            _j.counter, " time(s)"))))))));
     }
     static get is() { return "verdocs-template-build-tabs"; }
     static get originalStyleUrls() {
@@ -189,7 +193,8 @@ export class VerdocsTemplateBuildTabs {
     }
     static get states() {
         return {
-            "templateStore": {}
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {

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

@@ -1,6 +1,5 @@
 import { createTemplate, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
-import { getTemplateStore } from "../../../utils/TemplateStore";
 import { SDKError } from "../../../utils/errors";
 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>';
 /**
@@ -41,7 +40,7 @@ export class VerdocsTemplateCreate {
         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) {
@@ -66,22 +65,15 @@ export class VerdocsTemplateCreate {
                 }
             });
             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;
         }
     }

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

@@ -23,4 +23,10 @@ verdocs-template-document-page .verdocs-template-document-page-layer {
 }
 verdocs-template-document-page .verdocs-template-document-page-layer.img {
   width: 100%;
+}
+verdocs-template-document-page .placeholder {
+  opacity: 0.1;
+  width: 612px;
+  height: 792px;
+  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.0588235294);
 }

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

@@ -1,9 +1,9 @@
 // NOTE: This component does not have a story because it's not intended for external use.
-import { getTemplateDocumentPageDisplayUri, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { getTemplate, getTemplateDocumentPageDisplayUri, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { getControlStyles, getFieldId } from "../../../utils/utils";
 import { throttle } from "../../../utils/utils";
+import { Store } from "../../../utils/Datastore";
 /**
  * Represents one document page. This is primarily a layout container used to coordinate positions of
  * page-related layers such as the page itself, signature fields, etc. It is not intended to be used
@@ -11,7 +11,7 @@ import { throttle } from "../../../utils/utils";
  */
 export class VerdocsTemplateDocumentPage {
     constructor() {
-        this.fieldStore = null;
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.editable = false;
         this.disabled = false;
@@ -32,10 +32,12 @@ export class VerdocsTemplateDocumentPage {
         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 => {
@@ -55,12 +57,21 @@ export class VerdocsTemplateDocumentPage {
     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.
@@ -93,58 +104,63 @@ export class VerdocsTemplateDocumentPage {
         });
     }
     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));
+        })));
     }
     static get is() { return "verdocs-template-document-page"; }
     static get originalStyleUrls() {
@@ -360,7 +376,9 @@ export class VerdocsTemplateDocumentPage {
             "skipFirstNotification": {},
             "pageDisplayUri": {},
             "xScale": {},
-            "yScale": {}
+            "yScale": {},
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -1,9 +1,7 @@
 import { h, Host } from "@stencil/core";
-import { deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
-import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
-import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateStore } from "../../../utils/TemplateStore";
+import { deleteField, getTemplate, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
@@ -12,15 +10,12 @@ const HelpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"
  */
 export class VerdocsTemplateFieldProperties {
     constructor() {
-        this.templateStore = null;
-        this.fieldStore = null;
-        this.roleStore = null;
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = '';
         this.fieldName = '';
         this.helpText = '';
         this.dirty = false;
-        this.loading = true;
         this.label = '';
         this.type = 'textbox';
         this.name = '';
@@ -32,6 +27,27 @@ export class VerdocsTemplateFieldProperties {
         this.placeholder = '';
         this.defaultValue = '';
         this.showingHelp = false;
+        this.loading = true;
+        this.template = null;
+    }
+    disconnectedCallback() {
+        this.unlistenToTemplate();
+    }
+    async listenToTemplate() {
+        console.log('[SENT] Loading template', this.templateId);
+        this.unlistenToTemplate();
+        Store.subscribe('templates', this.templateId, () => getTemplate(this.endpoint, this.templateId), false, (template) => {
+            console.log('[SEND] Template Updated', template);
+            this.template = template;
+            this.loading = false;
+            this.resetForm();
+        });
+    }
+    unlistenToTemplate() {
+        if (this.templateListenerId) {
+            Store.store.delListener(this.templateListenerId);
+            this.templateListenerId = null;
+        }
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -49,10 +65,7 @@ export class VerdocsTemplateFieldProperties {
                 console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
                 return;
             }
-            this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
-            this.fieldStore = getTemplateFieldStore(this.templateId);
-            this.roleStore = getTemplateRoleStore(this.templateId);
-            this.resetForm();
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[FIELD PROPERTIES] Error loading template', e);
@@ -61,7 +74,8 @@ export class VerdocsTemplateFieldProperties {
         }
     }
     resetForm() {
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
+        var _a;
+        const field = (((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).find(field => field.name === this.fieldName);
         if (!field) {
             console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
             return;
@@ -102,11 +116,16 @@ export class VerdocsTemplateFieldProperties {
         this.cleanupOptions();
         console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
-            .then(updated => {
+            .then(updatedField => {
             var _a, _b, _c;
-            console.log('[FIELD PROPERTIES] Updated', updated);
-            updateStoreField(this.fieldStore, this.fieldName, updated);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, field: updated });
+            console.log('[FIELD PROPERTIES] Updated', updatedField);
+            const newTemplate = JSON.parse(JSON.stringify(this.template));
+            const fieldIndex = newTemplate.fields.findIndex(field => field.name === this.fieldName);
+            if (fieldIndex > -1) {
+                newTemplate.fields[fieldIndex] = updatedField;
+            }
+            Store.updateTemplate(this.templateId, newTemplate);
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, field: updatedField });
             (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
             (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
         })
@@ -119,7 +138,9 @@ export class VerdocsTemplateFieldProperties {
         deleteField(this.endpoint, this.templateId, this.fieldName)
             .then(() => {
             var _a, _b;
-            this.fieldStore.set('fields', this.fieldStore.get('fields').filter(field => field.name !== this.fieldName));
+            const newTemplate = JSON.parse(JSON.stringify(this.template));
+            newTemplate.fields = newTemplate.fields.filter(field => field.name !== this.fieldName);
+            Store.updateTemplate(this.templateId, newTemplate);
             (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
             (_b = document.getElementById('verdocs-template-field-properties')) === null || _b === void 0 ? void 0 : _b.remove();
         })
@@ -134,13 +155,15 @@ export class VerdocsTemplateFieldProperties {
         }
     }
     render() {
-        var _a;
-        // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
+        var _a, _b;
+        if (this.loading) {
+            return (h(Host, null, h("verdocs-loader", null)));
+        }
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
         // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-        if (!this.endpoint.session || !this.fieldStore.get('fields').some(field => field.name === this.fieldName)) {
+        if (!this.endpoint.session || !(((_a = this.template) === null || _a === void 0 ? void 0 : _a.fields) || []).some(field => field.name === this.fieldName)) {
             return h(Host, { class: "empty" });
         }
         if (this.helpText && this.showingHelp) {
@@ -156,7 +179,7 @@ export class VerdocsTemplateFieldProperties {
             } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, autocomplete: "off", placeholder: "Optional Label...", onInput: (e) => {
                 this.label = e.target.value;
                 this.dirty = true;
-            } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.roleStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+            } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (((_b = this.template) === null || _b === void 0 ? void 0 : _b.roles) || []).map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
                 this.roleName = e.target.value;
                 this.dirty = true;
             } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Default Value", value: this.defaultValue, autocomplete: "off", placeholder: "Pre-filled value...", onInput: (e) => {
@@ -282,7 +305,6 @@ export class VerdocsTemplateFieldProperties {
     static get states() {
         return {
             "dirty": {},
-            "loading": {},
             "label": {},
             "type": {},
             "name": {},
@@ -293,7 +315,9 @@ export class VerdocsTemplateFieldProperties {
             "options": {},
             "placeholder": {},
             "defaultValue": {},
-            "showingHelp": {}
+            "showingHelp": {},
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {