@verdocs/web-sdk 4.2.158 → 5.0.1

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

@@ -3,19 +3,17 @@ import { getRGBA } from "@verdocs/js-sdk";
 import AirDatepicker from "air-datepicker";
 import localeEn from "air-datepicker/locale/en";
 import { h, Host, Fragment } from "@stencil/core";
-import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { SettingsIcon } from "../../../utils/Icons";
 import { FORMAT_DATE } from "../../../utils/Types";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays a date field. When tapped or clicked, the input element will display a date picker component.
  */
 export class VerdocsFieldDate {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
         this.picker = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -38,14 +36,6 @@ export class VerdocsFieldDate {
             this.focused = false;
         }, 500);
     }
-    async componentWillLoad() {
-        if (this.field) {
-            const ts = getTemplateFieldStore(this.templateid);
-            ts.set('fields', [...ts.get('fields'), this.field]);
-        }
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     componentDidLoad() {
         this.picker = new AirDatepicker(`#${this.containerId}`, {
             locale: localeEn,
@@ -73,18 +63,18 @@ export class VerdocsFieldDate {
     }
     // 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 = 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 = 'Date...', value = '', label = '' } = field || {};
+        const backgroundColor = getRGBA(index);
         const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';
         if (this.done) {
             return h(Host, { class: { done } }, formattedValue);
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), 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 && (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 } }, label && h("label", null, label), 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 && (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-${field.name}`, 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-${field.name}`, 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();
@@ -107,7 +97,25 @@ export class VerdocsFieldDate {
     }
     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": {
@@ -119,9 +127,9 @@ export class VerdocsFieldDate {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The template the field is for/from. Only required for the field builder, passed down to the properties component."
+                    "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-dropdown/verdocs-field-dropdown.js

@@ -1,16 +1,14 @@
 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 { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays a dropdown field that allows the user to choose one of a list of options.
  */
 export class VerdocsFieldDropdown {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.editable = false;
@@ -46,15 +44,11 @@ export class VerdocsFieldDropdown {
             settingsPanel.hidePanel();
         }
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = 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 = 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);
+        let { required = false, value = '', label = '', options } = field || {};
+        const backgroundColor = getRGBA(index);
         if (done) {
             return h(Host, { class: { done } }, value);
         }
@@ -64,7 +58,7 @@ export class VerdocsFieldDropdown {
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, onChange: e => this.handleChange(e), ref: el => (this.selectEl = el) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.id === value }, option.label))), !options.length && h("option", { value: "NA" }, "N/A")), 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();
@@ -87,7 +81,25 @@ export class VerdocsFieldDropdown {
     }
     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": {
@@ -99,9 +111,9 @@ export class VerdocsFieldDropdown {
                 "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-initial/verdocs-field-initial.js

@@ -1,8 +1,7 @@
 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 { SettingsIcon } from "../../../utils/Icons";
+import { Store } from "../../../utils/Datastore";
 /**
  * Displays an initial field. If an initial already exists, it will be displayed and the field
  * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
@@ -14,9 +13,8 @@ import { SettingsIcon } from "../../../utils/Icons";
  */
 export class VerdocsFieldInitial {
     constructor() {
-        this.fieldStore = null;
-        this.roleStore = null;
-        this.templateid = '';
+        this.source = 'template';
+        this.sourceid = '';
         this.fieldname = '';
         this.disabled = false;
         this.initials = '';
@@ -33,10 +31,6 @@ export class VerdocsFieldInitial {
     async focusField() {
         this.handleShow();
     }
-    async componentWillLoad() {
-        this.fieldStore = getTemplateFieldStore(this.templateid);
-        this.roleStore = getTemplateRoleStore(this.templateid);
-    }
     hideDialog() {
         var _a;
         (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove();
@@ -72,18 +66,18 @@ export class VerdocsFieldInitial {
         }
     }
     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 = 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, value = '', label = '', settings = {} } = field || {};
+        const backgroundColor = getRGBA(index);
+        const { base64 } = settings;
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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: field.name });
                 return this.hideSettingsPanel();
@@ -106,7 +100,25 @@ export class VerdocsFieldInitial {
     }
     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": {
@@ -118,9 +130,9 @@ export class VerdocsFieldInitial {
                 "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": "''"
             },