@verdocs/web-sdk 2.3.31 → 2.3.33

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

@@ -8,8 +8,10 @@ require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Fields = require('./Fields-705a2168.js');
 const Colors = require('./Colors-e809dcc9.js');
+const TemplateRoleStore = require('./TemplateRoleStore-e17bb006.js');
 const TemplateFieldStore = require('./TemplateFieldStore-ecf695a7.js');
-const utils = require('./utils-aeaf4a31.js');
+const utils = require('./utils-ac526133.js');
+const Icons = require('./Icons-3286d014.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./index-f712049c.js');
 require('./Envelopes-0b9deb2c.js');
@@ -19,13 +21,13 @@ require('./index-7c19ba1d.js');
 
 const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{cursor:inherit;width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;position:absolute;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}verdocs-field-textbox .settings-icon{position:absolute;top:-4px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-textbox .settings-icon svg{fill:#707ae5}verdocs-field-textbox .settings-icon:hover{opacity:1}";
 
-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>';
 const VerdocsFieldTextbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.fieldname = '';
@@ -33,10 +35,8 @@ const VerdocsFieldTextbox = class {
     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() {
@@ -56,6 +56,7 @@ const VerdocsFieldTextbox = class {
   }
   async componentWillLoad() {
     this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+    this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
   }
   componentDidRender() {
     interact_min.interact_min.dynamicDrop(true);
@@ -107,12 +108,14 @@ const VerdocsFieldTextbox = class {
   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 = TemplateRoleStore.getRoleIndex(this.roleStore, field.role_name);
+    const backgroundColor = field['rgba'] || Colors.getRGBA(roleIndex);
     if (!field) {
       return index.h(index.Fragment, null);
     }
     const settings = utils.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'] || Colors.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.
@@ -120,7 +123,7 @@ const VerdocsFieldTextbox = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value);
     }
-    return (index.h(index.Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, index.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 && (index.h(index.Fragment, null, index.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 (index.h(index.Host, { class: { required: field.required, disabled, done: this.done }, style: { backgroundColor } }, index.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 && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
         e.stopPropagation();
         this.showingProperties = !this.showingProperties;
       } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {

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

@@ -4,33 +4,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-aeaf4a31.js');
-const Types = require('./Types-fb95ed6b.js');
+const TemplateRoleStore = require('./TemplateRoleStore-e17bb006.js');
 const TemplateFieldStore = require('./TemplateFieldStore-ecf695a7.js');
+const utils = require('./utils-ac526133.js');
+const Types = require('./Types-fb95ed6b.js');
+const Icons = require('./Icons-3286d014.js');
 const index$1 = require('./index-7c19ba1d.js');
+require('./index-f712049c.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
-require('./index-f712049c.js');
 
 const verdocsFieldTimestampCss = "verdocs-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{position:absolute;cursor:inherit;width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-timestamp .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.6}verdocs-field-timestamp .settings-icon svg{fill:#707ae5}verdocs-field-timestamp .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 VerdocsFieldTimestamp = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
     this.fieldStore = null;
+    this.roleStore = null;
     this.templateid = '';
     this.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 = class {
   }
   async componentWillLoad() {
     this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateid);
+    this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateid);
   }
   render() {
     var _a, _b;
     const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+    const roleIndex = TemplateRoleStore.getRoleIndex(this.roleStore, field.role_name);
+    const backgroundColor = field['rgba'] || Colors.getRGBA(roleIndex);
     if (!field) {
       return index.h(index.Fragment, null);
     }
     const settings = utils.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'] || Colors.getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
     const formatted = index$1.format(dt, Types.FORMAT_TIMESTAMP);
@@ -71,7 +73,7 @@ const VerdocsFieldTimestamp = class {
     return (index.h(index.Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled }, style: { backgroundColor } }, index.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 && (index.h(index.Fragment, null, index.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 && (index.h(index.Fragment, null, index.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: Icons.SettingsIcon, onClick: (e) => {
         e.stopPropagation();
         this.showingProperties = !this.showingProperties;
       } }), this.showingProperties && (index.h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {

package/dist/cjs/verdocs-file-chooser_2.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
-const Icons = require('./Icons-a11fb3fc.js');
+const Icons = require('./Icons-3286d014.js');
 
 const verdocsFileChooserCss = "verdocs-file-chooser{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-file-chooser .upload-box{text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 15px;color:rgba(0, 0, 0, 0.54)}verdocs-file-chooser .upload-box svg{width:64px;height:64px;fill:#5c6575}verdocs-file-chooser .selected-filename{font-size:20px;font-weight:bold;overflow-wrap:anywhere}verdocs-file-chooser .or-prefer{height:20px;margin:20px 0;font-size:16px}";
 

package/dist/cjs/verdocs-pagination_2.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5463795e.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-aeaf4a31.js');
+const utils = require('./utils-ac526133.js');
 const popper = require('./popper-d7adcfc6.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');

package/dist/cjs/verdocs-portal_2.cjs.entry.js

@@ -8,7 +8,8 @@ require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Fields = require('./Fields-705a2168.js');
 const TemplateFieldStore = require('./TemplateFieldStore-ecf695a7.js');
-const TemplateStore = require('./TemplateStore-78b8944b.js');
+const TemplateRoleStore = require('./TemplateRoleStore-e17bb006.js');
+const TemplateStore = require('./TemplateStore-e62c16a8.js');
 const errors = require('./errors-0396da3d.js');
 require('./index-f712049c.js');
 
@@ -325,7 +326,7 @@ const VerdocsTemplateFieldProperties = class {
       }
       this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId);
       this.fieldStore = await TemplateFieldStore.getTemplateFieldStore(this.templateId);
-      this.roleStore = await TemplateStore.getTemplateRoleStore(this.templateId);
+      this.roleStore = await TemplateRoleStore.getTemplateRoleStore(this.templateId);
       // console.log('tfs', this.fieldStore?.state);
       const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
       // console.log('gf', field);

package/dist/cjs/verdocs-preview_8.cjs.entry.js

@@ -5,21 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
-const utils = require('./utils-aeaf4a31.js');
-const TemplateStore = require('./TemplateStore-78b8944b.js');
+const TemplateRoleStore = require('./TemplateRoleStore-e17bb006.js');
+const TemplateStore = require('./TemplateStore-e62c16a8.js');
+const utils = require('./utils-ac526133.js');
 const errors = require('./errors-0396da3d.js');
 const Envelopes = require('./Envelopes-0b9deb2c.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
 const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
-const Icons = require('./Icons-a11fb3fc.js');
+const Icons = require('./Icons-3286d014.js');
 const Toast = require('./Toast-06880504.js');
+require('./index-f712049c.js');
+require('./TemplateFieldStore-ecf695a7.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
-require('./index-f712049c.js');
-require('./TemplateFieldStore-ecf695a7.js');
 
 /**
  * Enable automatic reminders. setup_time is the number of days after the envelope is sent that the first reminder
@@ -53,7 +54,8 @@ const VerdocsPreview = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sdkError = index.createEvent(this, "sdkError", 7);
-    this.store = null;
+    this.templateStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = null;
   }
@@ -69,7 +71,8 @@ const VerdocsPreview = class {
         console.log('[PREVIEW] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+      this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+      this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
       console.log(`[PREVIEW] Loading template ${this.templateId}`, this.endpoint.session);
     }
     catch (e) {
@@ -80,17 +83,17 @@ const VerdocsPreview = class {
   handlePageRendered(e) {
     var _a, _b;
     const pageInfo = e.detail;
-    const fields = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     console.log('[PREVIEW] Page rendered', pageInfo, fields);
-    fields.forEach(field => utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(TemplateStore.getRoleNames(this.store), field.role_name), { disabled: true, editable: false, draggable: false }));
+    fields.forEach(field => utils.renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false }));
   }
   render() {
     var _a, _b, _c, _d;
     // TODO: Render a better error
-    if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
+    if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
       return (index.h(index.Host, null, index.h("verdocs-loader", null)));
     }
-    const pages = [...(_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.pages];
+    const pages = [...(_d = (_c = this.templateStore) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
     return (index.h(index.Host, null, pages.map(page => {
       return (index.h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
@@ -116,7 +119,8 @@ const VerdocsSend = class {
     this.sdkError = index.createEvent(this, "sdkError", 7);
     this.searchContacts = index.createEvent(this, "searchContacts", 7);
     this.levels = [];
-    this.store = null;
+    this.templateStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.environment = 'web';
@@ -131,7 +135,7 @@ const VerdocsSend = class {
     this.rolesCompleted = {};
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f;
     try {
       const loadSessionResult = this.endpoint.loadSession();
       if (!this.templateId) {
@@ -142,14 +146,15 @@ const VerdocsSend = class {
         console.log('[SEND] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
+      this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+      this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
+      if (!((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
         console.warn(`[SEND] Template is not sendable`, this.templateId);
       }
-      if ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) {
+      if (this.roleStore.get('roles')) {
         const rolesAtLevel = {};
         this.rolesCompleted = {};
-        (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.roles.forEach(role => {
+        this.roleStore.get('roles').forEach(role => {
           const level = role.sequence - 1;
           rolesAtLevel[level] || (rolesAtLevel[level] = []);
           const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -162,7 +167,7 @@ const VerdocsSend = class {
         this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
         this.levels.sort((a, b) => a - b);
       }
-      if ((_g = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _g === void 0 ? void 0 : _g.profile) {
+      if ((_c = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _c === void 0 ? void 0 : _c.profile) {
         this.sessionContacts.push({
           id: loadSessionResult.session.profile.id,
           name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
@@ -173,7 +178,7 @@ const VerdocsSend = class {
     }
     catch (e) {
       console.log('[SEND] Error with preview session', e);
-      (_h = this.sdkError) === null || _h === void 0 ? void 0 : _h.emit(new errors.SDKError(e.message, (_j = e.response) === null || _j === void 0 ? void 0 : _j.status, (_k = e.response) === null || _k === void 0 ? void 0 : _k.data));
+      (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new errors.SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
     }
   }
   getLevelIcon(level) {
@@ -208,7 +213,7 @@ const VerdocsSend = class {
     this.sending = true;
     const details = {
       template_id: this.templateId,
-      name: (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name,
+      name: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name,
       environment: this.environment,
       roles: Object.values(this.rolesCompleted),
       // TODO
@@ -235,15 +240,15 @@ const VerdocsSend = class {
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    var _a, _b, _c, _d;
-    const roleNames = (((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).map(role => role.name) || [];
+    var _a, _b;
+    const roleNames = TemplateRoleStore.getRoleNames(this.roleStore);
     const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => Validators.isValidEmail(recipient.email) || Validators.isValidPhone(recipient.phone));
     const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (index.h(index.Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (index.h(index.Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
       const elId = `verdocs-send-recipient-${role.name}`;
-      return unknown ? (index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
+      return unknown ? (index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index.h("div", { class: "recipient", style: { borderColor: Colors.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
     })))), index.h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { class: "complete" }, "Signing Complete"))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index.h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index.h("verdocs-spinner", null))));
   }
 };

package/dist/cjs/verdocs-settings-api-keys_4.cjs.entry.js

@@ -10,7 +10,7 @@ const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
 const Profiles = require('./Profiles-1a26e4eb.js');
 const index$1 = require('./index-7c19ba1d.js');
-const utils = require('./utils-aeaf4a31.js');
+const utils = require('./utils-ac526133.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Files-4bdc0c0f.js');

package/dist/cjs/verdocs-sign.cjs.entry.js

@@ -9,7 +9,7 @@ const Recipients = require('./Recipients-f3d6cf10.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-aeaf4a31.js');
+const utils = require('./utils-ac526133.js');
 const TemplateFieldStore = require('./TemplateFieldStore-ecf695a7.js');
 const Types = require('./Types-fb95ed6b.js');
 const Toast = require('./Toast-06880504.js');
@@ -415,7 +415,7 @@ const VerdocsSign = class {
       this.nextSubmits = false;
     }
   }
-  attachFieldAttributes(pageInfo, field, roleIndex, el) {
+  attachFieldAttributes(pageInfo, field, el) {
     var _a;
     el.addEventListener('input', (e) => {
       console.log('[SIGN] onfieldInput', e.detail, e.target.value);
@@ -443,7 +443,6 @@ const VerdocsSign = class {
     el.setAttribute('templateid', this.envelope.template_id);
     el.setAttribute('fieldname', field.name);
     el.setAttribute('page', pageInfo.pageNumber);
-    el.setAttribute('roleindex', roleIndex);
     el.setAttribute('xScale', pageInfo.xScale);
     el.setAttribute('yScale', pageInfo.yScale);
     el.setAttribute('initials', this.recipient ? Primitives.fullNameToInitials(this.recipient.full_name) : '');
@@ -451,7 +450,7 @@ const VerdocsSign = class {
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    const roleIndex = utils.getRoleIndex(this.roleNames, this.recipient.role_name);
+    // const roleIndex = getRoleIndex(this.roleStore, this.recipient.role_name);
     console.log('hpr', this.recipient, this.envelope.fields.filter(field => field.recipient_role === this.recipient.role_name));
     const recipientFields = this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
     // console.log('[SIGN] Page rendered, updating fields', {pageInfo, roleIndex, recipientFields});
@@ -459,34 +458,33 @@ const VerdocsSign = class {
     recipientFields
       .filter(field => field.page === pageInfo.pageNumber)
       .forEach(field => {
-      const el = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false, done: this.isDone });
+      const el = utils.renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone });
       if (!el) {
         return;
       }
       if (Array.isArray(el)) {
-        el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+        el.map(e => this.attachFieldAttributes(pageInfo, field, e));
       }
       else {
-        this.attachFieldAttributes(pageInfo, field, roleIndex, el);
+        this.attachFieldAttributes(pageInfo, field, el);
       }
     });
     // Now render the fields for other signers who have yet to act
     this.sortedRecipients
       .filter(r => r.role_name !== this.recipient.role_name && (r.status === Types$1.RecipientStates.INVITED || r.status === Types$1.RecipientStates.OPENED || r.status === Types$1.RecipientStates.PENDING))
-      .forEach(recipient => {
-      const otherIndex = utils.getRoleIndex(this.roleNames, recipient.role_name);
+      .forEach(() => {
       this.getRecipientFields()
         .filter(field => field.page === pageInfo.pageNumber)
         .forEach(field => {
-        const el = utils.renderDocumentField(field, pageInfo, otherIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
+        const el = utils.renderDocumentField(field, pageInfo, { disabled: true, editable: false, draggable: false, done: this.isDone });
         if (!el) {
           return;
         }
         if (Array.isArray(el)) {
-          el.map(e => this.attachFieldAttributes(pageInfo, field, otherIndex, e));
+          el.map(e => this.attachFieldAttributes(pageInfo, field, e));
         }
         else {
-          this.attachFieldAttributes(pageInfo, field, otherIndex, el);
+          this.attachFieldAttributes(pageInfo, field, el);
         }
       });
     });

package/dist/cjs/verdocs-template-document-page_2.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-5463795e.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
-const utils = require('./utils-aeaf4a31.js');
+const utils = require('./utils-ac526133.js');
 const popper = require('./popper-d7adcfc6.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Envelopes-0b9deb2c.js');

package/dist/cjs/verdocs-template-fields_4.cjs.entry.js

@@ -8,17 +8,18 @@ require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Fields = require('./Fields-705a2168.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-aeaf4a31.js');
-const TemplateStore = require('./TemplateStore-78b8944b.js');
 const TemplateFieldStore = require('./TemplateFieldStore-ecf695a7.js');
+const utils = require('./utils-ac526133.js');
+const TemplateRoleStore = require('./TemplateRoleStore-e17bb006.js');
+const TemplateStore = require('./TemplateStore-e62c16a8.js');
 const errors = require('./errors-0396da3d.js');
 const Colors = require('./Colors-e809dcc9.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
+require('./index-f712049c.js');
 require('./Envelopes-0b9deb2c.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-fb95ed6b.js');
 require('./index-7c19ba1d.js');
-require('./index-f712049c.js');
 
 /**
  * A "role" is an individual participant in a signing flow, such as a signer or CC contact. Roles are identified by
@@ -102,7 +103,7 @@ const VerdocsTemplateFields = class {
       }
       this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
       this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
-      this.roleStore = TemplateStore.getTemplateRoleStore(this.templateId);
+      this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
       this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
       console.log('Sel role', this.selectedRoleName);
     }
@@ -139,7 +140,7 @@ const VerdocsTemplateFields = class {
   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;
@@ -153,7 +154,6 @@ const VerdocsTemplateFields = class {
     });
     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);
@@ -170,19 +170,19 @@ const VerdocsTemplateFields = class {
   }
   reRenderField(field, pageNumber) {
     const pageInfo = this.cachedPageInfo[pageNumber];
-    const roleIndex = utils.getRoleIndex(TemplateStore.getRoleNames(this.templateStore), field.role_name);
-    const el = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });
+    // const roleIndex = getRoleIndex(getRoleNames(this.roleStore), field.role_name);
+    const el = utils.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);
     }
   }
@@ -255,7 +255,8 @@ const VerdocsTemplateFields = class {
     TemplateFieldStore.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) {
@@ -446,7 +447,7 @@ const VerdocsTemplateRoleProperties = class {
       }
       this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
       this.fieldStore = TemplateFieldStore.getTemplateFieldStore(this.templateId);
-      this.roleStore = TemplateStore.createTemplateRoleStore(this.templateStore.state);
+      this.roleStore = TemplateRoleStore.createTemplateRoleStore(this.templateStore.state);
       const editingRole = this.roleStore.state.roles.find(role => role.name === this.roleName);
       if (editingRole) {
         this.name = editingRole.name;
@@ -494,7 +495,7 @@ const VerdocsTemplateRoleProperties = class {
       console.log('[ROLE_PROPERTIES] Update result', r);
       this.saving = false;
       this.dirty = false;
-      TemplateStore.updateStoreRole(this.roleStore, this.roleName, r);
+      TemplateRoleStore.updateStoreRole(this.roleStore, this.roleName, r);
       (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
     })
       .catch(e => {
@@ -508,7 +509,7 @@ const VerdocsTemplateRoleProperties = class {
       deleteRole(this.endpoint, this.templateId, this.roleName)
         .then(() => {
         var _a;
-        TemplateStore.deleteStoreRole(this.roleStore, this.roleName);
+        TemplateRoleStore.deleteStoreRole(this.roleStore, this.roleName);
         (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
@@ -592,7 +593,7 @@ const VerdocsTemplateRoles = class {
         return;
       }
       this.templateStore = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
-      this.roleStore = TemplateStore.getTemplateRoleStore(this.templateId);
+      this.roleStore = TemplateRoleStore.getTemplateRoleStore(this.templateId);
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
@@ -641,7 +642,7 @@ const VerdocsTemplateRoles = class {
         const roleName = event.relatedTarget.dataset.rolename;
         const targetSequence = +event.target.dataset.sequence;
         const targetOrder = +event.target.dataset.order;
-        TemplateStore.updateStoreRole(this.roleStore, roleName, { sequence: targetSequence, order: targetOrder });
+        TemplateRoleStore.updateStoreRole(this.roleStore, roleName, { sequence: targetSequence, order: targetOrder });
         await this.renumberTemplateRoles();
         console.log('[ROLES] Updated roles', this.getSortedRoles());
         (_a = this.rolesUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, roles: this.getSortedRoles() });
@@ -773,7 +774,7 @@ const VerdocsTemplateRoles = class {
     console.log('Rendering', roleNames, sequences);
     return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("h5", null, "Roles and Workflow"), index.h("div", { class: "participants" }, index.h("div", { class: "left-line" }), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: startIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "sender" }, index.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], ' ', index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingSenderDialog = true), "aria-role": "button" })))), index.h("div", { class: "row add-sequence", "data-sequence": 0 }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), sequences.map(sequence => (index.h(index.Fragment, null, index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: stepIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), this.getRolesAtSequence(sequence).map(role => {
       const unknown = !role.email;
-      return unknown ? (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { borderColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
+      return unknown ? (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence }))) : (index.h(index.Fragment, null, index.h("div", { class: "recipient", style: { borderColor: Colors.getRGBA(TemplateRoleStore.getRoleIndex(this.roleStore, role.name)) }, "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }), role.full_name, " ", index.h("div", { class: "settings-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" })), index.h("div", { class: "dropzone", "data-order": role.order + 0.5, "data-sequence": sequence })));
     }), index.h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), sequences.length > 0 && (index.h("div", { class: "row add-sequence", "data-sequence": sequence }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("div", { class: "dropzone", "data-sequence": sequence + 1, "data-order": 1 }, "Add Step"))))))), index.h("div", { class: "row", "data-sequence": sequences.length + 1 }, index.h("div", { class: "row-roles" }, index.h("div", { class: "icon", innerHTML: plusIcon }), index.h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, sequences.length + 1) }))), index.h("div", { class: "row" }, index.h("div", { class: "icon", innerHTML: doneIcon }), index.h("div", { class: "row-roles" }, index.h("div", { class: "complete" }, "Document Complete")))), roleNames.length < 1 && (index.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index.h("br", null), " Click the ", index.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index.h("div", { class: "buttons" }, index.h("div", { class: "flex-fill" }), index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index.h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
       }, onDelete: async () => {

package/dist/cjs/verdocs-view.cjs.entry.js

@@ -8,7 +8,7 @@ const Permissions = require('./Permissions-1436f847.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-8f298664.js');
 const Primitives = require('./Primitives-a59870a2.js');
-const utils = require('./utils-aeaf4a31.js');
+const utils = require('./utils-ac526133.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-1fbbf0eb.js');
 require('./Files-4bdc0c0f.js');