@verdocs/web-sdk 4.2.158 → 5.0.0

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-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);
 }