@verdocs/web-sdk 2.3.31 → 2.3.33

package/dist/components/verdocs-send2.js

@@ -4,8 +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 getTemplateRoleStore, b as getRoleNames, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateStore } from './TemplateStore.js';
-import { b as getRoleIndex } from './utils.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';
@@ -28,7 +28,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.sdkError = createEvent(this, "sdkError", 7);
     this.searchContacts = createEvent(this, "searchContacts", 7);
     this.levels = [];
-    this.store = null;
+    this.templateStore = null;
+    this.roleStore = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.environment = 'web';
@@ -43,7 +44,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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) {
@@ -54,14 +55,15 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         console.log('[SEND] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await 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 getTemplateStore(this.endpoint, this.templateId, false);
+      this.roleStore = 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}`;
@@ -74,7 +76,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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}`,
@@ -85,7 +87,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     catch (e) {
       console.log('[SEND] Error with preview session', e);
-      (_h = this.sdkError) === null || _h === void 0 ? void 0 : _h.emit(new 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 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) {
@@ -120,7 +122,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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
@@ -147,15 +149,15 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     (_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 = getRoleNames(this.roleStore);
     const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
     const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (h(Host, { class: { sendable: (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (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 ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(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, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, 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); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(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, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, 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 ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(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, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, 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); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(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, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, 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); } })))));
     })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
   }
   static get style() { return verdocsSendCss; }

package/dist/components/verdocs-settings-organization2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { z } from './index3.js';
 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 { V as VerdocsToast } from './Toast.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';

package/dist/components/verdocs-settings-profile2.js

@@ -3,7 +3,7 @@ import { z } from './index3.js';
 import { a as getCurrentProfile, u as updateProfile } from './Profiles.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import './Types.js';
-import { d as convertToE164 } from './utils.js';
+import { c as convertToE164 } from './utils.js';
 import { V as VerdocsToast } from './Toast.js';
 import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-help-icon2.js';

package/dist/components/verdocs-sign.js

@@ -5,7 +5,7 @@ import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, b as envelo
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { i as isValidPhone, a as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
-import { a as saveAttachment, u as updateDocumentFieldValue, b as getRoleIndex, r as renderDocumentField, c as getFieldId } from './utils.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, b as getFieldId } from './utils.js';
 import { c as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
 import { a as FORMAT_DATE } from './Types2.js';
 import { V as VerdocsToast } from './Toast.js';
@@ -416,7 +416,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       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);
@@ -444,7 +444,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     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 ? fullNameToInitials(this.recipient.full_name) : '');
@@ -452,7 +451,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    const roleIndex = 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});
@@ -460,34 +459,33 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     recipientFields
       .filter(field => field.page === pageInfo.pageNumber)
       .forEach(field => {
-      const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false, done: this.isDone });
+      const el = 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 === RecipientStates.INVITED || r.status === RecipientStates.OPENED || r.status === RecipientStates.PENDING))
-      .forEach(recipient => {
-      const otherIndex = getRoleIndex(this.roleNames, recipient.role_name);
+      .forEach(() => {
       this.getRecipientFields()
         .filter(field => field.page === pageInfo.pageNumber)
         .forEach(field => {
-        const el = renderDocumentField(field, pageInfo, otherIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
+        const el = 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/components/verdocs-template-attachments2.js

@@ -2,11 +2,12 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { c as createTemplateDocument, d as deleteTemplateDocument } from './TemplateDocuments.js';
-import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon, b as PageCountIcon, T as TrashIcon, d as defineCustomElement$4 } from './verdocs-file-chooser2.js';
+import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon, b as PageCountIcon, T as TrashIcon } from './Icons.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-component-error2.js';
+import { d as defineCustomElement$4 } from './verdocs-file-chooser2.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
 import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$1 } from './verdocs-progress-bar2.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, b 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

@@ -4,9 +4,10 @@ import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, c as createField } from './Fields.js';
 import { i as integerSequence } from './Primitives.js';
-import { b as getRoleIndex, r as renderDocumentField, f as updateCssTransform, h as defaultWidth, i as defaultHeight } from './utils.js';
-import { g as getTemplateStore, b as getTemplateRoleStore, a as getRoleNames } from './TemplateStore.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 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';
@@ -113,7 +114,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   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;
@@ -127,7 +128,6 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     });
     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);
@@ -144,19 +144,19 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   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);
     }
   }
@@ -229,7 +229,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     updateStoreField(this.fieldStore, name, newFieldData);
     event.target.removeAttribute('posX');
     event.target.removeAttribute('posY');
-    this.reRenderField(newFieldData, pageNumber);
+    // this.reRenderField(newFieldData, pageNumber);
+    console.log('[FIELDS] Updated', name, newFieldData);
     (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
   }
   generateFieldName(type, pageNumber) {

package/dist/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, c as createTemplateRoleStore, u as updateStoreRole, d 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,8 +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, b as getTemplateRoleStore, u as updateStoreRole } from './TemplateStore.js';
-import { b as getRoleIndex } from './utils.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';
@@ -244,7 +244,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
     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 () => {