@verdocs/web-sdk 2.3.32 → 2.3.33

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
@@ -2573,14 +2574,13 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     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.containerId = `verdocs-date-picker-${Math.random().toString(36).substring(2, 11)}`;
@@ -2591,6 +2591,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   componentDidLoad() {
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
@@ -2628,12 +2629,13 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   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);
     if (this.done) {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
       return h(Host, { class: { done: this.done } }, formatted);
@@ -2659,8 +2661,6 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "editable": [4],
     "moveable": [4],
     "done": [4],
-    "roleindex": [2],
-    "rerender": [2],
     "xscale": [2],
     "yscale": [2],
     "containerId": [32],

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
@@ -22,14 +23,13 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     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;
@@ -54,16 +54,18 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   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 === null || settings === void 0 ? void 0 : settings.value) || '';
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
@@ -89,8 +91,6 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "editable": [4],
     "moveable": [4],
     "done": [4],
-    "roleindex": [2],
-    "rerender": [2],
     "xscale": [2],
     "yscale": [2],
     "showingProperties": [32],

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
@@ -26,6 +27,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.templateid = '';
     this.fieldname = '';
     this.disabled = false;
@@ -33,8 +35,6 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.editable = false;
     this.moveable = false;
     this.done = false;
-    this.roleindex = 0;
-    this.rerender = 0;
     this.xscale = 1;
     this.yscale = 1;
     this.showingProperties = false;
@@ -45,6 +45,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   hideDialog() {
     var _a;
@@ -61,7 +62,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   handleShow() {
     this.dialog = document.createElement('verdocs-initial-dialog');
     this.dialog.setAttribute('initials', this.initials);
-    this.dialog.setAttribute('roleindex', this.roleindex);
+    // this.dialog.setAttribute('roleindex', this.roleindex);
     this.dialog.addEventListener('exit', () => this.hideDialog());
     this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
@@ -81,13 +82,14 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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 value = settings.base64 || this.tempInitials;
     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);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
     }
@@ -113,8 +115,6 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "editable": [4],
     "moveable": [4],
     "done": [4],
-    "roleindex": [2],
-    "rerender": [2],
     "xscale": [2],
     "yscale": [2],
     "showingProperties": [32],

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 
@@ -14,6 +15,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.templateid = '';
     this.fieldname = '';
     this.disabled = false;
@@ -32,7 +34,6 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.signed = false;
     this.xscale = 1;
     this.yscale = 1;
-    this.rerender = 0;
     this.preparedMessage = undefined;
     this.signatureUrl = '';
     this.roleindex = 0;
@@ -40,6 +41,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
     // Load validators
     // Load fields
     // Get role names
@@ -66,13 +68,13 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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;
-    console.log('Payment field', settings);
-    const backgroundColor = field['rgba'] || getRGBA(this.roleindex);
     return (h(Host, { class: { focused: this.focused, disabled }, style: { backgroundColor } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" })));
   }
   static get style() { return verdocsFieldPaymentCss; }
@@ -95,7 +97,6 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "signed": [4],
     "xscale": [2],
     "yscale": [2],
-    "rerender": [2],
     "roleindex": [2],
     "preparedMessage": [32],
     "signatureUrl": [32],

package/dist/components/verdocs-field-radio-button.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
@@ -23,15 +24,14 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.templateid = '';
     this.fieldname = '';
     this.option = 0;
     this.disabled = false;
     this.done = false;
-    this.roleindex = 0;
     this.editable = false;
     this.moveable = false;
-    this.rerender = 0;
     this.xscale = 1;
     this.yscale = 1;
     this.showingProperties = false;
@@ -50,16 +50,18 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   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 required = field.required;
     const option = settings.options[this.option];
     const id = `${field.name}-${option.id}`;
@@ -86,10 +88,8 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     "option": [2],
     "disabled": [4],
     "done": [4],
-    "roleindex": [2],
     "editable": [4],
     "moveable": [4],
-    "rerender": [2],
     "xscale": [2],
     "yscale": [2],
     "showingProperties": [32],

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
@@ -24,6 +25,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.templateid = '';
     this.fieldname = '';
     this.name = '';
@@ -31,8 +33,6 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.editable = false;
     this.moveable = false;
     this.done = false;
-    this.roleindex = 0;
-    this.rerender = 0;
     this.xscale = 1;
     this.yscale = 1;
     this.showingProperties = false;
@@ -57,7 +57,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   handleShow() {
     this.dialog = document.createElement('verdocs-signature-dialog');
     this.dialog.setAttribute('name', this.name);
-    this.dialog.setAttribute('roleindex', this.roleindex);
+    // this.dialog.setAttribute('roleindex', this.roleindex);
     this.dialog.addEventListener('exit', () => this.hideDialog());
     this.dialog.addEventListener('next', e => this.handleAdopt(e));
     document.body.append(this.dialog);
@@ -76,17 +76,19 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   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 value = settings.base64 || this.tempSignature;
     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);
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
     }
@@ -112,8 +114,6 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     "editable": [4],
     "moveable": [4],
     "done": [4],
-    "roleindex": [2],
-    "rerender": [2],
     "xscale": [2],
     "yscale": [2],
     "showingProperties": [32],

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

@@ -5,6 +5,7 @@ import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField } from './Fields.js';
 import { g as getRGBA } from './Colors.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
@@ -25,6 +26,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.fieldname = '';
@@ -32,10 +34,8 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     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() {
@@ -55,6 +55,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   async componentWillLoad() {
     this.fieldStore = getTemplateFieldStore(this.templateid);
+    this.roleStore = getTemplateRoleStore(this.templateid);
   }
   componentDidRender() {
     interact_min.dynamicDrop(true);
@@ -88,6 +89,9 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   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);
@@ -105,13 +109,14 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   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);
     }
@@ -138,10 +143,8 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "editable": [4],
     "moveable": [4],
     "done": [4],
-    "roleindex": [2],
     "xscale": [2],
     "yscale": [2],
-    "rerender": [2],
     "showingProperties": [32],
     "focusField": [64],
     "showSettingsPanel": [64],

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

@@ -4,7 +4,7 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField } from './Fields.js';
 import { g as getRGBA } from './Colors.js';
-import { a as getTemplateRoleStore, b as getRoleIndex } from './TemplateStore.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
@@ -36,7 +36,6 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.done = false;
     this.xscale = 1;
     this.yscale = 1;
-    this.rerender = 0;
     this.showingProperties = false;
   }
   async focusField() {
@@ -108,9 +107,9 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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);
-    console.log('rendering tb', field.name, roleIndex, backgroundColor);
     if (!field) {
       return h(Fragment, null);
     }
@@ -148,7 +147,6 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "done": [4],
     "xscale": [2],
     "yscale": [2],
-    "rerender": [2],
     "showingProperties": [32],
     "focusField": [64],
     "showSettingsPanel": [64],

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { F as FORMAT_TIMESTAMP } from './Types2.js';
@@ -23,14 +24,13 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
     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;
@@ -52,16 +52,18 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   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);
@@ -92,8 +94,6 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     "editable": [4],
     "moveable": [4],
     "done": [4],
-    "roleindex": [2],
-    "rerender": [2],
     "xscale": [2],
     "yscale": [2],
     "showingProperties": [32],

package/dist/components/verdocs-preview2.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { g as getTemplateStore, a as getTemplateRoleStore } from './TemplateStore.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { r as renderDocumentField } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$2 } from './verdocs-loader2.js';

package/dist/components/verdocs-send2.js

@@ -4,7 +4,8 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidEmail, i as isValidPhone } from './Validators.js';
 import { g as getRGBA } from './Colors.js';
-import { g as getTemplateStore, a as getTemplateRoleStore, c as getRoleNames, b as getRoleIndex } from './TemplateStore.js';
+import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './TemplateRoleStore.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$5 } from './verdocs-button2.js';
 import { d as defineCustomElement$4 } from './verdocs-contact-picker2.js';

package/dist/components/verdocs-template-field-properties2.js

@@ -4,7 +4,8 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, d as deleteField } from './Fields.js';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
-import { g as getTemplateStore, a as getTemplateRoleStore } from './TemplateStore.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$6 } from './verdocs-button2.js';
 import { d as defineCustomElement$5 } from './verdocs-checkbox2.js';

package/dist/components/verdocs-template-fields2.js

@@ -6,7 +6,8 @@ import { u as updateField, c as createField } from './Fields.js';
 import { i as integerSequence } from './Primitives.js';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { r as renderDocumentField, e as updateCssTransform, f as defaultWidth, h as defaultHeight } from './utils.js';
-import { g as getTemplateStore, a as getTemplateRoleStore } from './TemplateStore.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$7 } from './verdocs-button2.js';
 import { d as defineCustomElement$6 } from './verdocs-component-error2.js';

package/dist/components/verdocs-template-role-properties2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
-import { g as getTemplateStore, d as createTemplateRoleStore, u as updateStoreRole, e as deleteStoreRole } from './TemplateStore.js';
+import { c as createTemplateRoleStore, u as updateStoreRole, d as deleteStoreRole } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$5 } from './verdocs-button2.js';
 import { d as defineCustomElement$4 } from './verdocs-checkbox2.js';

package/dist/components/verdocs-template-roles2.js

@@ -4,7 +4,8 @@ import './Types.js';
 import { V as VerdocsEndpoint, b as TemplateSenderTypes } from './VerdocsEndpoint.js';
 import { u as updateRole, c as createRole, d as defineCustomElement$3 } from './verdocs-template-role-properties2.js';
 import { g as getRGBA } from './Colors.js';
-import { g as getTemplateStore, a as getTemplateRoleStore, u as updateStoreRole, b as getRoleIndex } from './TemplateStore.js';
+import { g as getTemplateRoleStore, u as updateStoreRole, a as getRoleIndex } from './TemplateRoleStore.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
 import { d as defineCustomElement$9 } from './verdocs-checkbox2.js';