@verdocs/web-sdk 4.2.158 → 5.0.1

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

@@ -2,19 +2,17 @@ import interact from "interactjs";
 import { VerdocsEndpoint } from "@verdocs/js-sdk";
 import { updateField, getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 /**
  * Display a multi-line text input field. Reminder: the "position" of the field is specified
  * as the BOTTOM-LEFT corner.
  */
 export class VerdocsFieldTextarea {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
         this.endpoint = VerdocsEndpoint.getDefault();
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -41,10 +39,6 @@ export class VerdocsFieldTextarea {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     componentDidRender() {
         interact.dynamicDrop(true);
         if (this.editable) {
@@ -76,7 +70,7 @@ export class VerdocsFieldTextarea {
         Object.assign(e.target.dataset, { x, y, h });
     }
     handleResizeEnd(e) {
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        const { field } = Store.getField(this.source, this.sourceid, this.fieldname);
         if (!field) {
             return h(Fragment, null);
         }
@@ -85,7 +79,7 @@ export class VerdocsFieldTextarea {
         const height = Math.round(parseFloat(e.target.style.height) / this.yscale);
         const x = Math.round(field.x + translateX / this.xscale);
         const y = Math.round(field.y - translateY / this.yscale);
-        updateField(this.endpoint, this.templateid, this.fieldname, { x, y, width, height })
+        updateField(this.endpoint, this.sourceid, this.fieldname, { x, y, width, height })
             .then(field => {
             var _a;
             (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname, field });
@@ -94,17 +88,17 @@ export class VerdocsFieldTextarea {
             .catch(e => console.log('Field update failed', e));
     }
     render() {
-        const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', placeholder = '', value = '', label = '' } = field || {};
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        const { required = false, placeholder = '', value = '', label = '' } = field || {};
+        const backgroundColor = getRGBA(index);
         if (done) {
             return h(Host, { class: { done } }, value);
         }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -149,7 +143,25 @@ export class VerdocsFieldTextarea {
                 },
                 "defaultValue": "VerdocsEndpoint.getDefault()"
             },
-            "templateid": {
+            "source": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'template' | 'envelope'",
+                    "resolved": "\"envelope\" | \"template\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields may be attached to templates or envelopes, but only template fields may be edited."
+                },
+                "attribute": "source",
+                "reflect": true,
+                "defaultValue": "'template'"
+            },
+            "sourceid": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -161,9 +173,9 @@ export class VerdocsFieldTextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+                    "text": "The source template or envelope ID the field is found in."
                 },
-                "attribute": "templateid",
+                "attribute": "sourceid",
                 "reflect": true,
                 "defaultValue": "''"
             },

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

@@ -23,6 +23,37 @@ verdocs-field-textbox {
   transform-origin: bottom left;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
+verdocs-field-textbox .edge-top,
+verdocs-field-textbox .edge-right,
+verdocs-field-textbox .edge-left,
+verdocs-field-textbox .edge-bottom {
+  position: absolute;
+  z-index: 10;
+}
+verdocs-field-textbox .edge-top {
+  top: -2px;
+  left: 0;
+  right: 0;
+  height: 5px;
+}
+verdocs-field-textbox .edge-right {
+  top: 0;
+  bottom: 0;
+  right: -2px;
+  width: 5px;
+}
+verdocs-field-textbox .edge-left {
+  top: 0;
+  left: -2px;
+  bottom: 0;
+  width: 5px;
+}
+verdocs-field-textbox .edge-bottom {
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  height: 5px;
+}
 verdocs-field-textbox input {
   cursor: inherit;
   width: 100%;

package/dist/collection/components/fields/verdocs-field-textbox/verdocs-field-textbox.js

@@ -1,18 +1,15 @@
 import interact from "interactjs";
 import { getRGBA, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 /**
  * Display a simple 1-line text input field.
  */
 export class VerdocsFieldTextbox {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.endpoint = VerdocsEndpoint.getDefault();
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.multiline = false;
@@ -41,15 +38,16 @@ export class VerdocsFieldTextbox {
         }
         this.showingProperties = false;
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     componentDidRender() {
         interact.dynamicDrop(true);
         if (this.editable) {
             interact(this.el).resizable({
-                edges: { top: true, bottom: false, left: true, right: true },
+                edges: {
+                    top: '.edge-top',
+                    left: '.edge-left',
+                    bottom: '.edge-bottom',
+                    right: '.edge-right',
+                },
                 modifiers: [
                     interact.modifiers.restrictSize({
                         min: { width: 30, height: 15 },
@@ -68,55 +66,61 @@ export class VerdocsFieldTextbox {
         e.stopPropagation();
     }
     handleResize(e) {
-        let { x = 0, y = 0, h = 0 } = e.target.dataset;
         let { width, height } = e.rect;
-        x = (parseFloat(x) || 0) + e.deltaRect.left;
-        y = (parseFloat(y) || 0) + e.deltaRect.top;
-        h = (parseFloat(h) || 0) + e.deltaRect.height;
+        const dX = e.deltaRect.left;
+        const dY = e.deltaRect.bottom;
+        const currentLeft = parseFloat(e.target.style.left);
+        const currentBottom = parseFloat(e.target.style.bottom);
         width /= this.xscale;
         height /= this.yscale;
         Object.assign(e.target.style, {
             width: `${width}px`,
             height: `${height}px`,
-            transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
+            left: `${currentLeft + dX}px`,
+            bottom: `${currentBottom - dY}px`,
         });
-        Object.assign(e.target.dataset, { x, y, h });
     }
     handleResizeEnd(e) {
-        const { fieldname = '' } = this;
+        const { sourceid, fieldname } = this;
         const width = Math.round(parseFloat(e.target.style.width));
         let height = Math.round(parseFloat(e.target.style.height));
         if (height < 20) {
             height = 15;
         }
         const multiline = height > 15;
-        updateField(this.endpoint, this.templateid, this.fieldname, { width, height, multiline })
-            .then(field => {
+        updateField(VerdocsEndpoint.getDefault(), sourceid, fieldname, { width, height, multiline })
+            .then(async (updatedField) => {
             var _a;
-            updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, field });
+            const template = await Store.getTemplate(VerdocsEndpoint.getDefault(), this.sourceid);
+            const newTemplate = JSON.parse(JSON.stringify(template));
+            const fieldIndex = newTemplate.fields.findIndex(field => field.name === fieldname);
+            if (fieldIndex > -1) {
+                newTemplate.fields[fieldIndex] = updatedField;
+            }
+            Store.updateTemplate(this.sourceid, newTemplate);
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, field: updatedField });
             Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
         })
             .catch(e => console.log('Field update failed', e));
     }
     render() {
-        const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        let { required = false, role_name = '', placeholder = '', label = '', width = 150, default: value = '', multiline = false } = field || {};
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        let { required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false } = field || {};
+        const backgroundColor = getRGBA(index);
         // TODO: Consolidate value/defaultValue handling between template and envelope fields
         if (field.value) {
             value = field.value;
         }
         // TODO: This is an outdated technique from the old system. We should compute it.
         const maxlength = width / 5;
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), multiline ? (h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (h("input", { type: "text", name: fieldname, value: value, disabled: disabled, required: required, placeholder: placeholder, maxlength: maxlength, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) })), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, editable && h("div", { class: "edge-top" }), editable && h("div", { class: "edge-right" }), editable && h("div", { class: "edge-left" }), editable && h("div", { class: "edge-bottom" }), label && h("label", null, label), multiline ? (h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (h("input", { type: "text", name: fieldname, value: value, disabled: disabled, required: required, placeholder: placeholder, maxlength: maxlength, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) })), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -139,29 +143,25 @@ export class VerdocsFieldTextbox {
     }
     static get properties() {
         return {
-            "endpoint": {
-                "type": "unknown",
+            "source": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "VerdocsEndpoint",
-                    "resolved": "VerdocsEndpoint",
-                    "references": {
-                        "VerdocsEndpoint": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::VerdocsEndpoint"
-                        }
-                    }
+                    "original": "'template' | 'envelope'",
+                    "resolved": "\"envelope\" | \"template\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+                    "text": "Fields may be attached to templates or envelopes, but only template fields may be edited."
                 },
-                "defaultValue": "VerdocsEndpoint.getDefault()"
+                "attribute": "source",
+                "reflect": true,
+                "defaultValue": "'template'"
             },
-            "templateid": {
+            "sourceid": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -173,9 +173,9 @@ export class VerdocsFieldTextbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+                    "text": "The source template or envelope ID the field is found in."
                 },
-                "attribute": "templateid",
+                "attribute": "sourceid",
                 "reflect": true,
                 "defaultValue": "''"
             },

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

@@ -1,19 +1,17 @@
 import { format } from "date-fns/format";
 import { getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { FORMAT_TIMESTAMP } from "../../../utils/Types";
 import { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 /**
  * Display a timestamp. Timestamps are not editable by signers. Instead, they are automatically
  * filled when the signer submits the document.
  */
 export class VerdocsFieldTimestamp {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -40,15 +38,11 @@ export class VerdocsFieldTimestamp {
         }
         this.showingProperties = false;
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', placeholder = '', value = '', label = '' } = field || {};
-        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { index, field } = Store.getField(source, sourceid, fieldname);
+        const { required = false, placeholder = '', value = '', label = '' } = field || {};
+        const backgroundColor = getRGBA(index);
         const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
         if (done) {
             return h(Host, { class: { done } }, formatted);
@@ -56,7 +50,7 @@ export class VerdocsFieldTimestamp {
         return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("label", null, label), h("input", { type: "text", placeholder: placeholder, value: formatted, disabled: true, ref: el => (this.el = el) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -79,7 +73,25 @@ export class VerdocsFieldTimestamp {
     }
     static get properties() {
         return {
-            "templateid": {
+            "source": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'template' | 'envelope'",
+                    "resolved": "\"envelope\" | \"template\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fields may be attached to templates or envelopes, but only template fields may be edited."
+                },
+                "attribute": "source",
+                "reflect": true,
+                "defaultValue": "'template'"
+            },
+            "sourceid": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -91,9 +103,9 @@ export class VerdocsFieldTimestamp {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+                    "text": "The source template or envelope ID the field is found in."
                 },
-                "attribute": "templateid",
+                "attribute": "sourceid",
                 "reflect": true,
                 "defaultValue": "''"
             },

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

@@ -1,14 +1,15 @@
 import { h, Host } from "@stencil/core";
-import { createTemplateDocument, deleteTemplateDocument, VerdocsEndpoint } from "@verdocs/js-sdk";
+import { createTemplateDocument, deleteTemplateDocument, getTemplate, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { DocIcon, FileIcon, JpgIcon, PageCountIcon, PdfIcon, PngIcon, TrashIcon } from "../../../utils/Icons";
-import { getTemplateStore } from "../../../utils/TemplateStore";
 import { SDKError } from "../../../utils/errors";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays an edit form that allows the user to view, add, or remove a template's attachments.
  * Note that an active session and valid template ID must be supplied.
  */
 export class VerdocsTemplateAttachments {
     constructor() {
+        this.templateListenerId = null;
         this.endpoint = VerdocsEndpoint.getDefault();
         this.templateId = '';
         this.uploading = false;
@@ -16,7 +17,8 @@ export class VerdocsTemplateAttachments {
         this.progressPercent = 0;
         this.showDeleteError = false;
         this.confirmDeleteDocument = null;
-        this.store = null;
+        this.loading = true;
+        this.template = null;
     }
     async componentWillLoad() {
         var _a, _b, _c;
@@ -30,13 +32,29 @@ export class VerdocsTemplateAttachments {
                 console.log('[ROLES] Unable to start builder session, must be authenticated');
                 return;
             }
-            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+            this.listenToTemplate();
         }
         catch (e) {
             console.log('[TEMPLATE ATTACHMENTS] 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));
         }
     }
+    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;
+        }
+    }
     handleCancel(e) {
         e.stopPropagation();
         this.exit.emit();
@@ -63,9 +81,10 @@ export class VerdocsTemplateAttachments {
         try {
             const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
             console.log('[ATTACHMENTS] Created attachment', template);
-            this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-            console.log('[ATTACHMENTS] Updated template', this.store.state);
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.store.state, event: 'attachments' });
+            // TODO: Just updated it in place.
+            this.template = await Store.getTemplate(this.endpoint, this.templateId, true);
+            console.log('[ATTACHMENTS] Updated template', this.template);
+            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: this.template, event: 'attachments' });
             this.uploading = false;
             this.progressLabel = '';
             this.progressPercent = 0;
@@ -82,17 +101,18 @@ export class VerdocsTemplateAttachments {
         this.uploading = false;
         this.progressLabel = '';
         this.progressPercent = 0;
-        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
+        (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.template });
     }
     async confirmDelete() {
         await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
-        this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-        console.log('[ATTACHMENTS] New template', this.store.state);
+        // TODO: Update it in place
+        this.template = await Store.getTemplate(this.endpoint, this.templateId, true);
+        console.log('[ATTACHMENTS] New template', this.template);
         this.confirmDeleteDocument = null;
     }
     async handleDelete(document) {
         var _a;
-        if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.documents.length) > 1) {
+        if ((((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).length > 1) {
             this.confirmDeleteDocument = document;
         }
         else {
@@ -114,19 +134,18 @@ export class VerdocsTemplateAttachments {
         return FileIcon;
     }
     render() {
-        var _a, _b, _c;
+        var _a, _b;
         if (!this.endpoint.session) {
             return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
         }
-        const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
-        if (!templateState.isLoaded) {
+        if (this.loading) {
             return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
         }
         // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-        if (!this.endpoint.session || !templateState.profile_id) {
+        if (!this.endpoint.session || !this.template) {
             return h(Host, { class: "empty" });
         }
-        return (h(Host, null, h("h5", null, "Existing Attachments"), h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.documents.map(document => (h("div", { class: "attachment" }, h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), h("div", { class: "filename", title: document.name }, document.name), h("div", { class: "pages" }, h("div", { class: "count" }, document.pages), h("div", { class: "pages-icon", innerHTML: PageCountIcon })), h("div", { class: "trash-icon", innerHTML: TrashIcon, onClick: () => this.handleDelete(document) }))))), h("h5", null, "Attach a New Document"), this.uploading ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.documents.length) || this.uploading })), this.showDeleteError && (h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
+        return (h(Host, null, h("h5", null, "Existing Attachments"), h("div", { class: "attachments" }, (((_a = this.template) === null || _a === void 0 ? void 0 : _a.documents) || []).map(document => (h("div", { class: "attachment" }, h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), h("div", { class: "filename", title: document.name }, document.name), h("div", { class: "pages" }, h("div", { class: "count" }, document.pages), h("div", { class: "pages-icon", innerHTML: PageCountIcon })), h("div", { class: "trash-icon", innerHTML: TrashIcon, onClick: () => this.handleDelete(document) }))))), h("h5", null, "Attach a New Document"), this.uploading ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !(((_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) || []).length || this.uploading })), this.showDeleteError && (h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
                 this.confirmDeleteDocument = null;
             } }))));
     }
@@ -192,7 +211,8 @@ export class VerdocsTemplateAttachments {
             "progressPercent": {},
             "showDeleteError": {},
             "confirmDeleteDocument": {},
-            "store": {}
+            "loading": {},
+            "template": {}
         };
     }
     static get events() {