@verdocs/web-sdk 2.3.30 → 2.3.32

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

@@ -2,7 +2,7 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host, Fragment } from '@stencil/core';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
-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';
 /**
  * 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 show a dialog to adopt an initial.
@@ -75,7 +75,7 @@ export class VerdocsFieldInitial {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
     }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), 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 }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), 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: () => {

package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -2,9 +2,9 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host, Fragment } from '@stencil/core';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
+import { SettingsIcon } from '../../../utils/Icons';
 const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
 const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
-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>';
 /**
  * Displays a radio button.
  */
@@ -54,7 +54,7 @@ export class VerdocsFieldRadioButton {
     if (this.done) {
       return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), 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, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: field.name, value: option.id, tabIndex: settings.order, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), 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: () => {

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

@@ -2,7 +2,7 @@ import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host, Fragment } from '@stencil/core';
 import { getTemplateFieldStore } from '../../../utils/TemplateFieldStore';
 import { getFieldSettings } from '../../../utils/utils';
-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';
 /**
  * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
  * button will be shown. Clicking the button will show a dialog to adopt a signature.
@@ -76,7 +76,7 @@ export class VerdocsFieldSignature {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
     }
-    return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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 }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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: () => {

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

@@ -3,9 +3,9 @@ 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 { getFieldSettings } from '../../../utils/utils';
+import { SettingsIcon } from '../../../utils/Icons';
 /**
  * Display a multi-line text input field.
  */
@@ -102,7 +102,7 @@ export class VerdocsFieldTextarea {
     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: () => {

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,7 +21,6 @@ export class VerdocsFieldTextbox {
     this.editable = false;
     this.moveable = false;
     this.done = false;
-    this.roleindex = 0;
     this.xscale = 1;
     this.yscale = 1;
     this.rerender = 0;
@@ -42,6 +43,7 @@ export class VerdocsFieldTextbox {
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   componentDidRender() {
     interact.dynamicDrop(true);
@@ -93,12 +95,14 @@ export class VerdocsFieldTextbox {
   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);
+    console.log('rendering tb', field.name, roleIndex, backgroundColor);
     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 +110,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 +265,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,

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

@@ -1,10 +1,10 @@
 import { format } from 'date-fns';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host, Fragment } from '@stencil/core';
+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.
  */
@@ -59,7 +59,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: () => {

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,6 +218,8 @@ export class VerdocsTemplateFields {
     updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
+    // 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/TemplateStore.js

@@ -33,6 +33,8 @@ 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);
 
 const createTemplateStore = (templateId) => {
   const now = new Date().toISOString();
@@ -114,6 +116,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 { getTemplateRoleStore as a, getRoleIndex as b, getRoleNames as c, createTemplateRoleStore as d, deleteStoreRole as e, getTemplateStore as g, updateStoreRole as u };

package/dist/components/utils.js

@@ -116,7 +116,7 @@ const updateDocumentFieldValue = (field) => {
     existingField.setAttribute('disabled', false); // We need this to trigger a re-render
   }
 };
-const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
+const renderDocumentField = (field, docPage, fieldOptions) => {
   var _a, _b;
   // console.log('rdf', field);
   const { disabled = false, editable = false, draggable = false, done = false } = fieldOptions;
@@ -151,7 +151,6 @@ 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) {
@@ -185,7 +184,6 @@ 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);
@@ -213,7 +211,6 @@ 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);
@@ -242,7 +239,6 @@ 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);
@@ -272,7 +268,6 @@ const renderDocumentField = (field, docPage, roleIndex, fieldOptions) => {
       return null;
   }
 };
-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`.
 const getFieldSettings = (field) => {
@@ -382,4 +377,4 @@ const convertToE164 = (input) => {
   return `+1${temp}`;
 };
 
-export { saveAttachment as a, getRoleIndex as b, getFieldId as c, convertToE164 as d, renderedTextWidth as e, updateCssTransform as f, getFieldSettings as g, defaultWidth as h, defaultHeight as i, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };
+export { saveAttachment as a, getFieldId as b, convertToE164 as c, renderedTextWidth as d, updateCssTransform as e, defaultWidth as f, getFieldSettings as g, defaultHeight as h, renderDocumentField as r, saveEnvelopesAsZip as s, throttle as t, updateDocumentFieldValue as u };

package/dist/components/verdocs-contact-picker2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { d as convertToE164 } from './utils.js';
+import { c as convertToE164 } from './utils.js';
 import { d as defineCustomElement$2 } from './verdocs-button2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 

package/dist/components/verdocs-field-attachment.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from
 import { g as getRGBA } from './Colors.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
+import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
 import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$8 } from './verdocs-component-error2.js';
@@ -16,7 +17,6 @@ const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\
 
 const PaperclipIcon = `<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 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>';
 const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -78,7 +78,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     const { url } = settings;
     console.log('Attachment settings', url, settings);
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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: settings.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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: () => {

package/dist/components/verdocs-field-checkbox.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from
 import { g as getRGBA } from './Colors.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
+import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
@@ -13,7 +14,6 @@ import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
 const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{cursor:inherit;width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-checkbox .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-checkbox .settings-icon svg{fill:#707ae5}verdocs-field-checkbox .settings-icon:hover{opacity:1}";
 
-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>';
 const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -63,7 +63,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), 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: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), 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: () => {