@verdocs/web-sdk 2.3.31 → 2.3.33

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

@@ -3,15 +3,17 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host, Fragment } from '@stencil/core';
-import { getFieldSettings } from '../../../utils/utils';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
-const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
+import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
+import { getFieldSettings } from '../../../utils/utils';
+import { SettingsIcon } from '../../../utils/Icons';
 /**
  * Display a multi-line text input field.
  */
 export class VerdocsFieldTextarea {
   constructor() {
     this.fieldStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.fieldname = '';
@@ -19,10 +21,8 @@ export class VerdocsFieldTextarea {
     this.editable = false;
     this.moveable = false;
     this.done = false;
-    this.roleindex = 0;
     this.xscale = 1;
     this.yscale = 1;
-    this.rerender = 0;
     this.showingProperties = false;
   }
   async focusField() {
@@ -42,6 +42,7 @@ export class VerdocsFieldTextarea {
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   componentDidRender() {
     interact.dynamicDrop(true);
@@ -75,6 +76,9 @@ export class VerdocsFieldTextarea {
   }
   handleResizeEnd(e) {
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+    if (!field) {
+      return h(Fragment, null);
+    }
     const newSettings = { ...getFieldSettings(field) };
     const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
     newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
@@ -92,17 +96,18 @@ export class VerdocsFieldTextarea {
   render() {
     var _a, _b;
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
+    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
     if (!field) {
       return h(Fragment, null);
     }
     const settings = getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
-    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, disabled: disabled, name: field.name, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el) }, value), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled, done: this.done }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, disabled: disabled, name: field.name, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el) }, value), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.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-${this.fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -257,24 +262,6 @@ export class VerdocsFieldTextarea {
         "reflect": false,
         "defaultValue": "false"
       },
-      "roleindex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set, the field will be colored using this index value to select the background color."
-        },
-        "attribute": "roleindex",
-        "reflect": false,
-        "defaultValue": "0"
-      },
       "xscale": {
         "type": "number",
         "mutable": false,
@@ -310,24 +297,6 @@ export class VerdocsFieldTextarea {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
-      },
-      "rerender": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "May be used to force the field to re-render."
-        },
-        "attribute": "rerender",
-        "reflect": false,
-        "defaultValue": "0"
       }
     };
   }

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

@@ -3,15 +3,17 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host, Fragment } from '@stencil/core';
+import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
-const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" /></svg>';
+import { SettingsIcon } from '../../../utils/Icons';
 /**
  * Display a text input field.
  */
 export class VerdocsFieldTextbox {
   constructor() {
     this.fieldStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.fieldname = '';
@@ -19,10 +21,8 @@ export class VerdocsFieldTextbox {
     this.editable = false;
     this.moveable = false;
     this.done = false;
-    this.roleindex = 0;
     this.xscale = 1;
     this.yscale = 1;
-    this.rerender = 0;
     this.showingProperties = false;
   }
   async focusField() {
@@ -42,6 +42,7 @@ export class VerdocsFieldTextbox {
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   componentDidRender() {
     interact.dynamicDrop(true);
@@ -93,12 +94,14 @@ export class VerdocsFieldTextbox {
   render() {
     var _a, _b;
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+    console.log('Rendering tb', this.fieldname, field);
+    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
+    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
     if (!field) {
       return h(Fragment, null);
     }
     const settings = getFieldSettings(field);
     let disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
     const width = settings.width || 150;
     // TODO: This is an outdated technique from the old system. We should compute it.
@@ -106,7 +109,7 @@ export class VerdocsFieldTextbox {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+    return (h(Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", name: field.name, placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), maxlength: maxlength }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.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: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -261,24 +264,6 @@ export class VerdocsFieldTextbox {
         "reflect": false,
         "defaultValue": "false"
       },
-      "roleindex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set, the field will be colored using this index value to select the background color."
-        },
-        "attribute": "roleindex",
-        "reflect": false,
-        "defaultValue": "0"
-      },
       "xscale": {
         "type": "number",
         "mutable": false,
@@ -314,24 +299,6 @@ export class VerdocsFieldTextbox {
         "attribute": "yscale",
         "reflect": false,
         "defaultValue": "1"
-      },
-      "rerender": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "May be used to force the field to re-render."
-        },
-        "attribute": "rerender",
-        "reflect": false,
-        "defaultValue": "0"
       }
     };
   }

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

@@ -1,24 +1,24 @@
 import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host, Fragment } from '@stencil/core';
+import { getRoleIndex, getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
+import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
 import { FORMAT_TIMESTAMP } from '../../../utils/Types';
-import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
-const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
+import { SettingsIcon } from '../../../utils/Icons';
 /**
  * Display a timestamp field.
  */
 export class VerdocsFieldTimestamp {
   constructor() {
     this.fieldStore = null;
+    this.roleStore = null;
     this.templateid = '';
     this.fieldname = '';
     this.disabled = false;
     this.editable = false;
     this.moveable = false;
     this.done = false;
-    this.roleindex = 0;
-    this.rerender = 0;
     this.xscale = 1;
     this.yscale = 1;
     this.showingProperties = false;
@@ -40,16 +40,18 @@ export class VerdocsFieldTimestamp {
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   render() {
     var _a, _b;
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+    const roleIndex = getRoleIndex(this.roleStore, field.role_name);
+    const backgroundColor = field['rgba'] || getRGBA(roleIndex);
     if (!field) {
       return h(Fragment, null);
     }
     const settings = getFieldSettings(field);
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
-    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
     const formatted = format(dt, FORMAT_TIMESTAMP);
@@ -59,7 +61,7 @@ export class VerdocsFieldTimestamp {
     return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: settingsIcon, onClick: (e) => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.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: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -193,42 +195,6 @@ export class VerdocsFieldTimestamp {
         "reflect": false,
         "defaultValue": "false"
       },
-      "roleindex": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If set, the field will be colored using this index value to select the background color."
-        },
-        "attribute": "roleindex",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "rerender": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "May be used to force the field to re-render."
-        },
-        "attribute": "rerender",
-        "reflect": false,
-        "defaultValue": "0"
-      },
       "xscale": {
         "type": "number",
         "mutable": false,

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

@@ -2,11 +2,11 @@ import interact from 'interactjs';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 import { createField, updateField } from '@verdocs/js-sdk/Templates/Fields';
-import { h, Host } from '@stencil/core';
-import { defaultHeight, defaultWidth, getRoleIndex, renderDocumentField, updateCssTransform } from '../../../utils/utils';
-import { getRoleNames, getTemplateStore } from '../../../utils/TemplateStore';
 import { getTemplateFieldStore, updateStoreField } from '../../../utils/TemplateFieldStore';
+import { defaultHeight, defaultWidth, renderDocumentField, updateCssTransform } from '../../../utils/utils';
+import { h, Host } from '@stencil/core';
 import { getTemplateRoleStore } from '../../../utils/TemplateRoleStore';
+import { getTemplateStore } from '../../../utils/TemplateStore';
 import { SDKError } from '../../../utils/errors';
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconTextarea = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
@@ -103,7 +103,7 @@ export class VerdocsTemplateFields {
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
   }
-  attachFieldAttributes(pageInfo, field, roleIndex, el) {
+  attachFieldAttributes(pageInfo, field, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
       var _a, _b;
@@ -117,7 +117,6 @@ export class VerdocsTemplateFields {
     });
     el.setAttribute('templateid', this.templateId);
     el.setAttribute('fieldname', field.name);
-    el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
     el.setAttribute('yScale', pageInfo.yScale);
@@ -134,19 +133,19 @@ export class VerdocsTemplateFields {
   }
   reRenderField(field, pageNumber) {
     const pageInfo = this.cachedPageInfo[pageNumber];
-    const roleIndex = getRoleIndex(getRoleNames(this.templateStore), field.role_name);
-    const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    // const roleIndex = getRoleIndex(getRoleNames(this.roleStore), field.role_name);
+    const el = renderDocumentField(field, pageInfo, { disabled: true, editable: true, draggable: true });
     if (!el) {
       return;
     }
     if (Array.isArray(el)) {
       el.forEach(childEl => {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, childEl);
+        this.attachFieldAttributes(pageInfo, field, childEl);
         this.makeDraggable(childEl);
       });
     }
     else {
-      this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+      this.attachFieldAttributes(pageInfo, field, el);
       this.makeDraggable(el);
     }
   }
@@ -219,7 +218,8 @@ export class VerdocsTemplateFields {
     updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
-    this.reRenderField(newFieldData, pageNumber);
+    // this.reRenderField(newFieldData, pageNumber);
+    console.log('[FIELDS] Updated', name, newFieldData);
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
   generateFieldName(type, pageNumber) {

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '',
+    templateId: 'd2338742-f3a1-465b-8592-806587413cc1',
   },
   argTypes: {},
   parameters: {

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

@@ -4,9 +4,8 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { createRole, updateRole } from '@verdocs/js-sdk/Templates/Roles';
 import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
 import { h, Fragment, Host } from '@stencil/core';
-import { getTemplateRoleStore, updateStoreRole } from '../../../utils/TemplateRoleStore';
+import { getRoleIndex, getTemplateRoleStore, updateStoreRole } from '../../../utils/TemplateRoleStore';
 import { getTemplateStore } from '../../../utils/TemplateStore';
-import { getRoleIndex } from '../../../utils/utils';
 import { SDKError } from '../../../utils/errors';
 const senderLabels = {
   [TemplateSenderTypes.EVERYONE]: 'Everyone',
@@ -230,7 +229,7 @@ export class VerdocsTemplateRoles {
     console.log('Rendering', roleNames, sequences);
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-roles" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[(_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.sender], ' ', h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), h("div", { class: "row add-sequence", "data-sequence": 0 }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-roles" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
       const unknown = !role.email;
-      return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+      return unknown ? (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (h(Fragment, null, h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
     }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), h("div", { class: "row", "data-sequence": sequences.length + 1 }, h("div", { class: "row-roles" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-roles" }, h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
       }, onDelete: async () => {

package/dist/collection/utils/Icons.js

@@ -71,3 +71,4 @@ export const PageCountIcon = `<svg width="19" height="24" viewBox="0 0 19 24" fi
 <rect x="4.5" y="4.5" width="14" height="19" rx="0.5" fill="white" stroke="#375367"/>
 </svg>
 `;
+export const SettingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" /></svg>';

package/dist/collection/utils/TemplateRoleStore.js

@@ -30,3 +30,5 @@ export const deleteStoreRole = (store, name) => {
   const newRoles = [...store.get('roles').filter(field => field.name !== name)];
   store.set('roles', newRoles);
 };
+export const getRoleNames = (store) => store.get('roles').map(role => role.name);
+export const getRoleIndex = (store, name) => getRoleNames(store).findIndex(roleName => roleName === name);

package/dist/collection/utils/TemplateStore.js

@@ -1,8 +1,8 @@
 import { createStore } from '@stencil/store';
 import { getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { TemplateSenderTypes } from '@verdocs/js-sdk/Templates/Types';
-import { createTemplateFieldStore, getTemplateFieldStore } from './TemplateFieldStore';
 import { createTemplateRoleStore, getTemplateRoleStore } from './TemplateRoleStore';
+import { createTemplateFieldStore, getTemplateFieldStore } from './TemplateFieldStore';
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
   return createStore({
@@ -88,4 +88,3 @@ export const getTemplateStore = async (endpoint, templateId, forceReload = false
   }
   return store;
 };
-export const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };

package/dist/collection/utils/utils.js

@@ -95,7 +95,7 @@ export const updateDocumentFieldValue = (field) => {
     existingField.setAttribute('disabled', false); // We need this to trigger a re-render
   }
 };
-export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
+export const renderDocumentField = (field, docPage, fieldOptions) => {
   var _a, _b;
   // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
@@ -130,7 +130,6 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
       const el = document.createElement(`verdocs-field-${type}`);
       el.field = field;
       el.setAttribute('id', id);
-      el.setAttribute('roleIndex', roleIndex);
       el.setAttribute('fieldname', field.name);
       el.setAttribute('templateid', 'template_id' in field ? field.template_id : 'PREVIEW');
       if (disabled) {
@@ -164,7 +163,6 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
       const cbEl = document.createElement(`verdocs-field-checkbox`);
       cbEl.field = field;
       cbEl.setAttribute('id', id);
-      cbEl.setAttribute('roleIndex', roleIndex);
       cbEl.setAttribute('option', 0);
       if (disabled) {
         cbEl.setAttribute('disabled', true);
@@ -192,7 +190,6 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         const cbEl = document.createElement(`verdocs-field-checkbox`);
         cbEl.field = field;
         cbEl.setAttribute('id', id);
-        cbEl.setAttribute('roleIndex', roleIndex);
         cbEl.setAttribute('option', checkboxIndex);
         if (disabled) {
           cbEl.setAttribute('disabled', true);
@@ -221,7 +218,6 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
         const radioEl = document.createElement(`verdocs-field-radio-button`);
         radioEl.field = field;
         radioEl.setAttribute('id', id);
-        radioEl.setAttribute('roleIndex', roleIndex);
         radioEl.setAttribute('option', buttonIndex);
         if (disabled) {
           radioEl.setAttribute('disabled', true);
@@ -251,7 +247,6 @@ export const renderDocumentField = (field, docPage, roleIndex, fieldOptions) =>
       return null;
   }
 };
-export const getRoleIndex = (roles, role) => roles.indexOf(role) || 0;
 // TODO: We can clean this up a lot if we alter the API to emit both setting and settings regardless of the source type,
 //   but then merge the SDK types to encourage developers to use just `settings`.
 export const getFieldSettings = (field) => {
@@ -330,15 +325,6 @@ export const throttle = (f, delay) => {
     timer = setTimeout(() => f.apply(this, args), delay);
   };
 };
-/**
- * Convert a browser File object's data into a base64-encoded string.
- */
-export const fileToBase64 = (file) => new Promise((resolve, reject) => {
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.onload = () => { var _a; return resolve(((_a = reader.result) === null || _a === void 0 ? void 0 : _a.toString()) || ''); };
-  reader.onerror = error => reject(error);
-});
 /**
  * Compute the rendered width of a given text string, using a given font.
  */

package/dist/{esm/Icons-c29eb0fa.js → components/Icons.js}

@@ -71,5 +71,6 @@ const PageCountIcon = `<svg width="19" height="24" viewBox="0 0 19 24" fill="non
 <rect x="4.5" y="4.5" width="14" height="19" rx="0.5" fill="white" stroke="#375367"/>
 </svg>
 `;
+const SettingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" /></svg>';
 
-export { DocIcon as D, FileIcon as F, JpgIcon as J, PngIcon as P, TrashIcon as T, PdfIcon as a, PageCountIcon as b, unicodeNBSP as u };
+export { DocIcon as D, FileIcon as F, JpgIcon as J, PngIcon as P, SettingsIcon as S, TrashIcon as T, PdfIcon as a, PageCountIcon as b, unicodeNBSP as u };

package/dist/components/TemplateRoleStore.js

@@ -0,0 +1,37 @@
+import { c as createStore } from './index4.js';
+
+const templateRoleStores = {};
+const getTemplateRoleStore = (templateId) => templateRoleStores[templateId];
+const createTemplateRoleStore = (template) => {
+  let store = getTemplateRoleStore(template.id);
+  if (!store) {
+    console.log('Creating template role store for template', template.id);
+    store = createStore({ roles: [] });
+    templateRoleStores[template.id] = store;
+  }
+  else {
+    console.log('Resetting template role store for template', template.id);
+    store.reset();
+  }
+  store.set('roles', [...template.roles]);
+  return store;
+};
+const updateStoreRole = (store, name, newRoleData) => {
+  const newRoles = [
+    ...store.get('roles').map(role => {
+      if (role.name !== name) {
+        return role;
+      }
+      return { ...role, ...newRoleData };
+    }),
+  ];
+  store.set('roles', newRoles);
+};
+const deleteStoreRole = (store, name) => {
+  const newRoles = [...store.get('roles').filter(field => field.name !== name)];
+  store.set('roles', newRoles);
+};
+const getRoleNames = (store) => store.get('roles').map(role => role.name);
+const getRoleIndex = (store, name) => getRoleNames(store).findIndex(roleName => roleName === name);
+
+export { getRoleIndex as a, getRoleNames as b, createTemplateRoleStore as c, deleteStoreRole as d, getTemplateRoleStore as g, updateStoreRole as u };

package/dist/components/TemplateStore.js

@@ -1,39 +1,8 @@
 import { c as createStore } from './index4.js';
 import { g as getTemplate, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
+import { c as createTemplateRoleStore } from './TemplateRoleStore.js';
 import { a as createTemplateFieldStore } from './TemplateFieldStore.js';
 
-const templateRoleStores = {};
-const getTemplateRoleStore = (templateId) => templateRoleStores[templateId];
-const createTemplateRoleStore = (template) => {
-  let store = getTemplateRoleStore(template.id);
-  if (!store) {
-    console.log('Creating template role store for template', template.id);
-    store = createStore({ roles: [] });
-    templateRoleStores[template.id] = store;
-  }
-  else {
-    console.log('Resetting template role store for template', template.id);
-    store.reset();
-  }
-  store.set('roles', [...template.roles]);
-  return store;
-};
-const updateStoreRole = (store, name, newRoleData) => {
-  const newRoles = [
-    ...store.get('roles').map(role => {
-      if (role.name !== name) {
-        return role;
-      }
-      return { ...role, ...newRoleData };
-    }),
-  ];
-  store.set('roles', newRoles);
-};
-const deleteStoreRole = (store, name) => {
-  const newRoles = [...store.get('roles').filter(field => field.name !== name)];
-  store.set('roles', newRoles);
-};
-
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
   return createStore({
@@ -114,6 +83,5 @@ const getTemplateStore = async (endpoint, templateId, forceReload = false) => {
   }
   return store;
 };
-const getRoleNames = (store) => { var _a; return (((_a = store === null || store === void 0 ? void 0 : store.state) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name); };
 
-export { getRoleNames as a, getTemplateRoleStore as b, createTemplateRoleStore as c, deleteStoreRole as d, getTemplateStore as g, updateStoreRole as u };
+export { getTemplateStore as g };