@verdocs/web-sdk 4.2.157 → 5.0.0

package/dist/cjs/verdocs-field-attachment_13.cjs.entry.js

@@ -2,22 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2589e4d1.js');
+const index = require('./index-ccac8641.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-e8bb00ec.js');
-const TemplateFieldStore = require('./TemplateFieldStore-7bcc0f7a.js');
-const Icons = require('./Icons-9a6f2f7c.js');
+const Icons = require('./Icons-02a47df1.js');
+const Datastore = require('./Datastore-b1742da2.js');
 const _commonjsHelpers = require('./_commonjsHelpers-e6ff1d6e.js');
 const Types = require('./Types-7a726ff3.js');
 const format = require('./format-dc0f3757.js');
 const interact_min = require('./interact.min-e6956f8b.js');
-require('./index-76d03a35.js');
 
 const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled svg{opacity:0.5}verdocs-field-attachment.disabled svg span{cursor:inherit}verdocs-field-attachment .attach{cursor:inherit;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-attachment.required .attach{border:1px solid #cc0000}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldAttachmentStyle0 = verdocsFieldAttachmentCss;
 
 const PaperclipIcon$1 = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
-// const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
 const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#339933" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-check"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="m9 15 2 2 4-4"/></svg>`;
 const VerdocsFieldAttachment = class {
     constructor(hostRef) {
@@ -25,8 +22,6 @@ const VerdocsFieldAttachment = class {
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.attached = index.createEvent(this, "attached", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
         this.handleUploadNext = (e) => {
             var _a;
             console.log('Upload next', e);
@@ -43,7 +38,8 @@ const VerdocsFieldAttachment = class {
             (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname });
         };
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -77,18 +73,14 @@ const VerdocsFieldAttachment = class {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     handleShow() {
         this.dialogOpen = true;
     }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', value = '', label = '', settings = {} } = field || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, value = '', label = '', settings = {} } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         const hasFile = value || !!this.selectedFile;
         if (done) {
             return (index.h(index.Host, { class: { done } }, index.h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon$1 })));
@@ -96,7 +88,7 @@ const VerdocsFieldAttachment = class {
         return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), index.h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon$1, onClick: () => !disabled && this.handleShow() }), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -118,9 +110,8 @@ const VerdocsFieldCheckbox = class {
         index.registerInstance(this, hostRef);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.done = false;
@@ -151,25 +142,19 @@ const VerdocsFieldCheckbox = class {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1, focused } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', label = '', value = false } = field || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
-        const fieldId = `${fieldname}`;
-        // const fieldId = `${fieldname}-${id}`;
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, label = '', value = false } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         const checked = value === 'true';
         if (done) {
             return index.h(index.Host, { class: { done } }, checked ? '✓' : '☐');
         }
-        return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("div", { class: "label" }, label), index.h("label", { htmlFor: fieldId }, index.h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required }), index.h("span", null), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
+        return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("div", { class: "label" }, label), index.h("label", { htmlFor: fieldname }, index.h("input", { id: fieldname, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required }), index.h("span", null), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
@@ -219,10 +204,9 @@ const VerdocsFieldDate = class {
         this.settingsPress = index.createEvent(this, "settingsPress", 7);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
         this.picker = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -245,14 +229,6 @@ const VerdocsFieldDate = class {
             this.focused = false;
         }, 500);
     }
-    async componentWillLoad() {
-        if (this.field) {
-            const ts = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-            ts.set('fields', [...ts.get('fields'), this.field]);
-        }
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     componentDidLoad() {
         this.picker = new AirDatepicker(`#${this.containerId}`, {
             locale: default_1,
@@ -280,18 +256,18 @@ const VerdocsFieldDate = class {
     }
     // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
     render() {
-        const { templateid, fieldname = '', containerId = '', 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 = 'Date...', value = '', label = '' } = field || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, placeholder = 'Date...', value = '', label = '' } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         const formattedValue = value ? format.format(new Date(value), Types.FORMAT_DATE) : '';
         if (this.done) {
             return index.h(index.Host, { class: { done } }, formattedValue);
         }
-        return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), index.h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: containerId, disabled: disabled, placeholder: placeholder, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
+        return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), index.h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: fieldname, disabled: disabled, placeholder: placeholder, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -314,9 +290,8 @@ const VerdocsFieldDropdown = class {
         this.fieldChange = index.createEvent(this, "fieldChange", 7);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -352,15 +327,11 @@ const VerdocsFieldDropdown = class {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        let { required = false, role_name = '', value = '', label = '', options } = field || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        let { required = false, value = '', label = '', options } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         if (done) {
             return index.h(index.Host, { class: { done } }, value);
         }
@@ -370,7 +341,7 @@ const VerdocsFieldDropdown = class {
         return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), index.h("select", { disabled: disabled, onChange: e => this.handleChange(e), ref: el => (this.selectEl = el) }, index.h("option", { value: "" }, "Select..."), options.map(option => (index.h("option", { value: option.id, selected: option.id === value }, option.label))), !options.length && index.h("option", { value: "NA" }, "N/A")), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -395,9 +366,8 @@ const VerdocsFieldInitial = class {
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.settingsPress = index.createEvent(this, "settingsPress", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.initials = '';
@@ -414,10 +384,6 @@ const VerdocsFieldInitial = class {
     async focusField() {
         this.handleShow();
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     hideDialog() {
         var _a;
         (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
@@ -453,18 +419,18 @@ const VerdocsFieldInitial = class {
         }
     }
     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 = '', value = '', label = '' } = field || {};
-        const { base64 } = field.settings || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, value = '', label = '', settings = {} } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
+        const { base64 } = settings;
         if (done) {
             return index.h(index.Host, { class: { done } }, value && index.h("img", { src: value, alt: "Initial" }));
         }
         return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), base64 ? index.h("img", { src: base64, alt: "Initial" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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: field.name });
                 return this.hideSettingsPanel();
@@ -487,9 +453,8 @@ const VerdocsFieldRadio = class {
         index.registerInstance(this, hostRef);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.required = false;
@@ -521,25 +486,19 @@ const VerdocsFieldRadio = class {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { name, required = false, role_name = '', label = '', group = '', value = false } = field || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
-        const fieldId = `${fieldname}`;
-        // const fieldId = `${fieldname}-${id}`;
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { name, required = false, label = '', group = '', value = false } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         const selected = value === 'true';
         if (done) {
             return (index.h(index.Host, { class: { done }, style: { maxWidth: '10px' } }, index.h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
         }
-        return (index.h(index.Host, { class: { required: this.required || required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("div", { class: "label" }, label), editable && group && index.h("div", { class: "group" }, group), index.h("input", { id: fieldId, type: "radio", name: group || fieldname, value: name, checked: !!selected, disabled: disabled, required: required }), index.h("label", { htmlFor: fieldId }), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
+        return (index.h(index.Host, { class: { required: this.required || required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("div", { class: "label" }, label), editable && group && index.h("div", { class: "group" }, group), index.h("input", { id: fieldname, type: "radio", name: group || fieldname, value: name, checked: !!selected, disabled: disabled, required: required }), index.h("label", { htmlFor: fieldname }), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -562,9 +521,8 @@ const VerdocsFieldSignature = class {
         this.settingsPress = index.createEvent(this, "settingsPress", 7);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.name = '';
         this.disabled = false;
@@ -616,23 +574,19 @@ const VerdocsFieldSignature = class {
         }
         this.showingProperties = false;
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     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 = '', value = '', label = '' } = field || {};
-        const { base64 } = field.settings || {};
-        const backgroundColor = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, value = '', label = '', settings = {} } = field || {};
+        const { base64 } = settings;
+        const backgroundColor = jsSdk.getRGBA(index$1);
         if (done) {
             return index.h(index.Host, { class: { done } }, value && index.h("img", { src: base64, alt: "" }));
         }
         return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), base64 ? index.h("img", { src: base64, alt: "" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -653,10 +607,9 @@ const VerdocsFieldTextarea = class {
         index.registerInstance(this, hostRef);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
         this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -683,10 +636,6 @@ const VerdocsFieldTextarea = class {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     componentDidRender() {
         interact_min.interact.dynamicDrop(true);
         if (this.editable) {
@@ -718,7 +667,7 @@ const VerdocsFieldTextarea = class {
         Object.assign(e.target.dataset, { x, y, h });
     }
     handleResizeEnd(e) {
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        const { field } = Datastore.Store.getField(this.source, this.sourceid, this.fieldname);
         if (!field) {
             return index.h(index.Fragment, null);
         }
@@ -727,7 +676,7 @@ const VerdocsFieldTextarea = class {
         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);
-        jsSdk.updateField(this.endpoint, this.templateid, this.fieldname, { x, y, width, height })
+        jsSdk.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 });
@@ -736,17 +685,17 @@ const VerdocsFieldTextarea = class {
             .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 = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, placeholder = '', value = '', label = '' } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         if (done) {
             return index.h(index.Host, { class: { done } }, value);
         }
         return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), index.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 && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -760,7 +709,7 @@ const VerdocsFieldTextarea = class {
 };
 VerdocsFieldTextarea.style = VerdocsFieldTextareaStyle0;
 
-const verdocsFieldTextboxCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.disabled input{opacity:0.5}verdocs-field-textbox textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox textarea.hide{display:none}verdocs-field-textbox.disabled textarea{opacity:0.5}verdocs-field-textbox label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textbox.required{border:1px solid rgb(204, 0, 0)}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
+const verdocsFieldTextboxCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;scroll-margin:20px 0;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;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%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.disabled input{opacity:0.5}verdocs-field-textbox textarea{cursor:inherit;width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox textarea.hide{display:none}verdocs-field-textbox.disabled textarea{opacity:0.5}verdocs-field-textbox label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-textbox.required{border:1px solid rgb(204, 0, 0)}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-18px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldTextboxStyle0 = verdocsFieldTextboxCss;
 
 const VerdocsFieldTextbox = class {
@@ -768,10 +717,8 @@ const VerdocsFieldTextbox = class {
         index.registerInstance(this, hostRef);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.endpoint = jsSdk.VerdocsEndpoint.getDefault();
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.multiline = false;
@@ -800,15 +747,16 @@ const VerdocsFieldTextbox = class {
         }
         this.showingProperties = false;
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
-    }
     componentDidRender() {
         interact_min.interact.dynamicDrop(true);
         if (this.editable) {
             interact_min.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_min.interact.modifiers.restrictSize({
                         min: { width: 30, height: 15 },
@@ -827,55 +775,61 @@ const VerdocsFieldTextbox = class {
         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;
-        jsSdk.updateField(this.endpoint, this.templateid, this.fieldname, { width, height, multiline })
-            .then(field => {
+        jsSdk.updateField(jsSdk.VerdocsEndpoint.getDefault(), sourceid, fieldname, { width, height, multiline })
+            .then(async (updatedField) => {
             var _a;
-            TemplateFieldStore.updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, field });
+            const template = await Datastore.Store.getTemplate(jsSdk.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;
+            }
+            Datastore.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: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        let { required = false, placeholder = '', label = '', width = 150, default: value = '', multiline = false } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         // 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 = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
         if (done) {
             return index.h(index.Host, { class: { done } }, value);
         }
-        return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && index.h("label", null, label), multiline ? (index.h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (index.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 && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
+        return (index.h(index.Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, editable && index.h("div", { class: "edge-top" }), editable && index.h("div", { class: "edge-right" }), editable && index.h("div", { class: "edge-left" }), editable && index.h("div", { class: "edge-bottom" }), label && index.h("label", null, label), multiline ? (index.h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (index.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 && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();
@@ -897,9 +851,8 @@ const VerdocsFieldTimestamp = class {
         index.registerInstance(this, hostRef);
         this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
         this.deleted = index.createEvent(this, "deleted", 7);
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -926,15 +879,11 @@ const VerdocsFieldTimestamp = class {
         }
         this.showingProperties = false;
     }
-    async componentWillLoad() {
-        this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
-        this.roleStore = TemplateRoleStore.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 = jsSdk.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role_name));
+        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { index: index$1, field } = Datastore.Store.getField(source, sourceid, fieldname);
+        const { required = false, placeholder = '', value = '', label = '' } = field || {};
+        const backgroundColor = jsSdk.getRGBA(index$1);
         const formatted = format.format(new Date(value || new Date().toISOString()), Types.FORMAT_TIMESTAMP);
         if (done) {
             return index.h(index.Host, { class: { done } }, formatted);
@@ -942,7 +891,7 @@ const VerdocsFieldTimestamp = class {
         return (index.h(index.Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && index.h("label", null, label), index.h("input", { type: "text", placeholder: placeholder, value: formatted, disabled: true, ref: el => (this.el = el) }), editable && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+            } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, index.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();