@verdocs/web-sdk 4.2.41 → 4.2.43

package/dist/cjs/{TemplateFieldStore-d621e5bd.js → TemplateFieldStore-b8a79eb6.js}

@@ -5,7 +5,6 @@ const index = require('./index-233cb8df.js');
 const templateFieldStores = {};
 const getTemplateFieldStore = (templateId) => {
     if (!templateFieldStores[templateId]) {
-        console.log('Creating template field store', templateId);
         templateFieldStores[templateId] = index.createStore({ fields: [] });
     }
     return templateFieldStores[templateId];

package/dist/cjs/{TemplateRoleStore-b732ca1e.js → TemplateRoleStore-9fc8458d.js}

@@ -5,7 +5,6 @@ const index = require('./index-233cb8df.js');
 const templateRoleStores = {};
 const getTemplateRoleStore = (templateId) => {
     if (!templateRoleStores[templateId]) {
-        console.log('Creating role store', templateId);
         templateRoleStores[templateId] = index.createStore({ roles: [] });
     }
     return templateRoleStores[templateId];
@@ -13,7 +12,14 @@ const getTemplateRoleStore = (templateId) => {
 const createTemplateRoleStore = (template) => {
     console.log('creating role store', template);
     let store = getTemplateRoleStore(template.id);
-    store.set('roles', [...template.roles]);
+    const roles = [...(template.roles || [])];
+    roles.sort((a, b) => {
+        if (a.sequence !== b.sequence) {
+            return a.sequence - b.sequence;
+        }
+        return a.order - b.order;
+    });
+    store.set('roles', roles);
     return store;
 };
 const updateStoreRole = (store, name, newRoleData) => {

package/dist/cjs/{TemplateStore-0dad55bf.js → TemplateStore-75326f80.js}

@@ -2,8 +2,8 @@
 
 const index = require('./index-233cb8df.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
 const index$1 = require('./index-2a189d85.js');
 
 const createTemplateStore = (templateId) => {

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateStore = require('./TemplateStore-0dad55bf.js');
+const TemplateStore = require('./TemplateStore-75326f80.js');
 const errors = require('./errors-017fb835.js');
 require('./index-233cb8df.js');
-require('./TemplateRoleStore-b732ca1e.js');
-require('./TemplateFieldStore-d621e5bd.js');
+require('./TemplateRoleStore-9fc8458d.js');
+require('./TemplateFieldStore-b8a79eb6.js');
 require('./index-2a189d85.js');
 
 const verdocsBuildCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}";

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateStore = require('./TemplateStore-0dad55bf.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateStore = require('./TemplateStore-75326f80.js');
 const errors = require('./errors-017fb835.js');
 const Toast = require('./Toast-d84d7bd3.js');
 require('./index-233cb8df.js');

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d2999878.js');
 const interact_min = require('./interact.min-1744263f.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
 const utils = require('./utils-bd4accd8.js');
 const Icons = require('./Icons-9a6f2f7c.js');
 const Types = require('./Types-db1bd1d8.js');

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
 require('./index-233cb8df.js');
 
 const verdocsFieldPaymentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}";

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
 const utils = require('./utils-bd4accd8.js');
 const Icons = require('./Icons-9a6f2f7c.js');
 require('./index-233cb8df.js');

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateStore = require('./TemplateStore-0dad55bf.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateStore = require('./TemplateStore-75326f80.js');
 const utils = require('./utils-bd4accd8.js');
 const errors = require('./errors-017fb835.js');
 const Icons = require('./Icons-9a6f2f7c.js');
@@ -192,7 +192,6 @@ const VerdocsSend = class {
                 this.rolesCompleted[id] = { ...role, id };
             }
         });
-        console.log('Roles completed', this.rolesCompleted);
     }
     getLevels() {
         var _a;
@@ -210,24 +209,8 @@ const VerdocsSend = class {
             ...role,
             id: `r-${level}-${index}`,
         }));
-        rolesAtLevel.sort((a, b) => a.order - b.order);
         return rolesAtLevel;
     }
-    getRoleLevels() {
-        var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
-        // this.rolesCompleted = {};
-        roles.forEach(role => {
-            const level = role.sequence - 1;
-            rolesAtLevel[level] || (rolesAtLevel[level] = []);
-            const id = `r-${level}-${rolesAtLevel[level].length}`;
-            rolesAtLevel[level].push({ ...role, id });
-        });
-        const levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-        levels.sort((a, b) => a - b);
-        return levels;
-    }
     getLevelIcon(level) {
         const levels = this.getLevels();
         if (level < 0) {
@@ -300,11 +283,12 @@ const VerdocsSend = class {
         const roleNames = TemplateRoleStore.getRoleNames(this.roleStore);
         const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email) || jsSdk.isValidPhone(recipient.phone));
         const allRolesAssigned = rolesAssigned.length >= roleNames.length;
+        console.log('[SEND] Roles completed', this.rolesCompleted);
         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")), levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(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: jsSdk.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: jsSdk.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); } })))));
+            return unknown ? (index.h("div", { class: "recipient", "data-ri": TemplateRoleStore.getRoleIndex(this.roleStore, role.name), "data-rn": role.name, style: { backgroundColor: jsSdk.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: jsSdk.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(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))));
     }
     static get watchers() { return {

package/dist/cjs/verdocs-radio-button_3.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateRoleStore = require('./TemplateRoleStore-b732ca1e.js');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
-const TemplateStore = require('./TemplateStore-0dad55bf.js');
+const TemplateRoleStore = require('./TemplateRoleStore-9fc8458d.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
+const TemplateStore = require('./TemplateStore-75326f80.js');
 const errors = require('./errors-017fb835.js');
 require('./index-233cb8df.js');
 require('./index-2a189d85.js');

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
 const utils = require('./utils-bd4accd8.js');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
 const Toast = require('./Toast-d84d7bd3.js');
 const errors = require('./errors-017fb835.js');
 require('./Types-db1bd1d8.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-d2999878.js');
 const jsSdk = require('@verdocs/js-sdk');
-const TemplateFieldStore = require('./TemplateFieldStore-d621e5bd.js');
+const TemplateFieldStore = require('./TemplateFieldStore-b8a79eb6.js');
 const utils = require('./utils-bd4accd8.js');
 const popper = require('./popper-31badbf8.js');
 require('./index-233cb8df.js');

package/dist/collection/components/embeds/verdocs-send/verdocs-send.js

@@ -106,7 +106,6 @@ export class VerdocsSend {
                 this.rolesCompleted[id] = { ...role, id };
             }
         });
-        console.log('Roles completed', this.rolesCompleted);
     }
     getLevels() {
         var _a;
@@ -124,24 +123,8 @@ export class VerdocsSend {
             ...role,
             id: `r-${level}-${index}`,
         }));
-        rolesAtLevel.sort((a, b) => a.order - b.order);
         return rolesAtLevel;
     }
-    getRoleLevels() {
-        var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
-        // this.rolesCompleted = {};
-        roles.forEach(role => {
-            const level = role.sequence - 1;
-            rolesAtLevel[level] || (rolesAtLevel[level] = []);
-            const id = `r-${level}-${rolesAtLevel[level].length}`;
-            rolesAtLevel[level].push({ ...role, id });
-        });
-        const levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-        levels.sort((a, b) => a - b);
-        return levels;
-    }
     getLevelIcon(level) {
         const levels = this.getLevels();
         if (level < 0) {
@@ -215,11 +198,12 @@ export class VerdocsSend {
         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;
+        console.log('[SEND] Roles completed', this.rolesCompleted);
         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")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(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(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); } })))));
+            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.name), "data-rn": role.name, 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(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 is() { return "verdocs-send"; }

package/dist/collection/utils/TemplateFieldStore.js

@@ -2,7 +2,6 @@ import { createStore } from "@stencil/store";
 const templateFieldStores = {};
 export const getTemplateFieldStore = (templateId) => {
     if (!templateFieldStores[templateId]) {
-        console.log('Creating template field store', templateId);
         templateFieldStores[templateId] = createStore({ fields: [] });
     }
     return templateFieldStores[templateId];

package/dist/collection/utils/TemplateRoleStore.js

@@ -2,7 +2,6 @@ import { createStore } from "@stencil/store";
 const templateRoleStores = {};
 export const getTemplateRoleStore = (templateId) => {
     if (!templateRoleStores[templateId]) {
-        console.log('Creating role store', templateId);
         templateRoleStores[templateId] = createStore({ roles: [] });
     }
     return templateRoleStores[templateId];
@@ -10,7 +9,14 @@ export const getTemplateRoleStore = (templateId) => {
 export const createTemplateRoleStore = (template) => {
     console.log('creating role store', template);
     let store = getTemplateRoleStore(template.id);
-    store.set('roles', [...template.roles]);
+    const roles = [...(template.roles || [])];
+    roles.sort((a, b) => {
+        if (a.sequence !== b.sequence) {
+            return a.sequence - b.sequence;
+        }
+        return a.order - b.order;
+    });
+    store.set('roles', roles);
     return store;
 };
 export const updateStoreRole = (store, name, newRoleData) => {

package/dist/components/TemplateFieldStore.js

@@ -3,7 +3,6 @@ import { c as createStore } from './index3.js';
 const templateFieldStores = {};
 const getTemplateFieldStore = (templateId) => {
     if (!templateFieldStores[templateId]) {
-        console.log('Creating template field store', templateId);
         templateFieldStores[templateId] = createStore({ fields: [] });
     }
     return templateFieldStores[templateId];

package/dist/components/TemplateRoleStore.js

@@ -3,7 +3,6 @@ import { c as createStore } from './index3.js';
 const templateRoleStores = {};
 const getTemplateRoleStore = (templateId) => {
     if (!templateRoleStores[templateId]) {
-        console.log('Creating role store', templateId);
         templateRoleStores[templateId] = createStore({ roles: [] });
     }
     return templateRoleStores[templateId];
@@ -11,7 +10,14 @@ const getTemplateRoleStore = (templateId) => {
 const createTemplateRoleStore = (template) => {
     console.log('creating role store', template);
     let store = getTemplateRoleStore(template.id);
-    store.set('roles', [...template.roles]);
+    const roles = [...(template.roles || [])];
+    roles.sort((a, b) => {
+        if (a.sequence !== b.sequence) {
+            return a.sequence - b.sequence;
+        }
+        return a.order - b.order;
+    });
+    store.set('roles', roles);
     return store;
 };
 const updateStoreRole = (store, name, newRoleData) => {

package/dist/components/verdocs-send2.js

@@ -109,7 +109,6 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
                 this.rolesCompleted[id] = { ...role, id };
             }
         });
-        console.log('Roles completed', this.rolesCompleted);
     }
     getLevels() {
         var _a;
@@ -127,24 +126,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
             ...role,
             id: `r-${level}-${index}`,
         }));
-        rolesAtLevel.sort((a, b) => a.order - b.order);
         return rolesAtLevel;
     }
-    getRoleLevels() {
-        var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
-        // this.rolesCompleted = {};
-        roles.forEach(role => {
-            const level = role.sequence - 1;
-            rolesAtLevel[level] || (rolesAtLevel[level] = []);
-            const id = `r-${level}-${rolesAtLevel[level].length}`;
-            rolesAtLevel[level].push({ ...role, id });
-        });
-        const levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-        levels.sort((a, b) => a - b);
-        return levels;
-    }
     getLevelIcon(level) {
         const levels = this.getLevels();
         if (level < 0) {
@@ -217,11 +200,12 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
         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;
+        console.log('[SEND] Roles completed', this.rolesCompleted);
         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")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(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(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); } })))));
+            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.name), "data-rn": role.name, 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(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 watchers() { return {

package/dist/esm/{TemplateFieldStore-4ee5d16c.js → TemplateFieldStore-002f3d4c.js}

@@ -3,7 +3,6 @@ import { c as createStore } from './index-e58b15f6.js';
 const templateFieldStores = {};
 const getTemplateFieldStore = (templateId) => {
     if (!templateFieldStores[templateId]) {
-        console.log('Creating template field store', templateId);
         templateFieldStores[templateId] = createStore({ fields: [] });
     }
     return templateFieldStores[templateId];

package/dist/esm/{TemplateRoleStore-3a3728a6.js → TemplateRoleStore-69e28e18.js}

@@ -3,7 +3,6 @@ import { c as createStore } from './index-e58b15f6.js';
 const templateRoleStores = {};
 const getTemplateRoleStore = (templateId) => {
     if (!templateRoleStores[templateId]) {
-        console.log('Creating role store', templateId);
         templateRoleStores[templateId] = createStore({ roles: [] });
     }
     return templateRoleStores[templateId];
@@ -11,7 +10,14 @@ const getTemplateRoleStore = (templateId) => {
 const createTemplateRoleStore = (template) => {
     console.log('creating role store', template);
     let store = getTemplateRoleStore(template.id);
-    store.set('roles', [...template.roles]);
+    const roles = [...(template.roles || [])];
+    roles.sort((a, b) => {
+        if (a.sequence !== b.sequence) {
+            return a.sequence - b.sequence;
+        }
+        return a.order - b.order;
+    });
+    store.set('roles', roles);
     return store;
 };
 const updateStoreRole = (store, name, newRoleData) => {

package/dist/esm/{TemplateStore-ee67add4.js → TemplateStore-c2e5147b.js}

@@ -1,7 +1,7 @@
 import { c as createStore } from './index-e58b15f6.js';
 import { getTemplate } from '@verdocs/js-sdk';
-import { c as createTemplateRoleStore, g as getTemplateRoleStore } from './TemplateRoleStore-3a3728a6.js';
-import { c as createTemplateFieldStore, g as getTemplateFieldStore } from './TemplateFieldStore-4ee5d16c.js';
+import { c as createTemplateRoleStore, g as getTemplateRoleStore } from './TemplateRoleStore-69e28e18.js';
+import { c as createTemplateFieldStore, g as getTemplateFieldStore } from './TemplateFieldStore-002f3d4c.js';
 import { u as undefinedType } from './index-7588a071.js';
 
 const createTemplateStore = (templateId) => {

package/dist/esm/verdocs-build.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { g as getTemplateStore } from './TemplateStore-ee67add4.js';
+import { g as getTemplateStore } from './TemplateStore-c2e5147b.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-e58b15f6.js';
-import './TemplateRoleStore-3a3728a6.js';
-import './TemplateFieldStore-4ee5d16c.js';
+import './TemplateRoleStore-69e28e18.js';
+import './TemplateFieldStore-002f3d4c.js';
 import './index-7588a071.js';
 
 const verdocsBuildCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-build{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-build .content{-ms-flex:1;flex:1;gap:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column}verdocs-build verdocs-template-attachments,verdocs-build verdocs-template-roles{margin:20px}verdocs-build verdocs-template-fields{border-top:1px solid #777777}verdocs-build verdocs-template-attachments{padding:20px;background:#ffffff}verdocs-build verdocs-template-fields{width:100%}verdocs-build verdocs-preview{-ms-flex:1;flex:1}verdocs-build .preview-container{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;width:100%;background-color:#eeeeee;max-height:100%}@media all and (max-width: 450px){verdocs-build .preview-container{-ms-flex-direction:column;flex-direction:column}}verdocs-build .preview-send-wrapper{display:-ms-flexbox;display:flex;-ms-flex:0 0 300px;flex:0 0 300px;background-color:#ffffff;-webkit-box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157);box-shadow:1px 1px 6px -2px rgba(0, 0, 0, 0.4980392157)}@media all and (max-width: 450px){verdocs-build .preview-send-wrapper{-ms-flex:0;flex:0}}verdocs-build .preview-preview-wrapper{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;overflow-y:scroll}";

package/dist/esm/verdocs-checkbox_5.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint, updateField, deleteField } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-4ee5d16c.js';
-import { g as getTemplateRoleStore } from './TemplateRoleStore-3a3728a6.js';
-import { g as getTemplateStore } from './TemplateStore-ee67add4.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-002f3d4c.js';
+import { g as getTemplateRoleStore } from './TemplateRoleStore-69e28e18.js';
+import { g as getTemplateStore } from './TemplateStore-c2e5147b.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import './index-e58b15f6.js';

package/dist/esm/verdocs-field-attachment_13.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-3476681c.js';
 import { i as interact } from './interact.min-18f44045.js';
 import { VerdocsEndpoint, updateField, getRGBA, fileToDataUrl } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-3a3728a6.js';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-4ee5d16c.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-69e28e18.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-002f3d4c.js';
 import { g as getFieldSettings, h as commonjsGlobal } from './utils-7d128d3c.js';
 import { S as SettingsIcon } from './Icons-faf0377f.js';
 import { a as FORMAT_DATE, F as FORMAT_TIMESTAMP } from './Types-e4a6eba5.js';

package/dist/esm/verdocs-field-payment.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-3476681c.js';
 import { getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-3a3728a6.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-4ee5d16c.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-69e28e18.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore-002f3d4c.js';
 import './index-e58b15f6.js';
 
 const verdocsFieldPaymentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-payment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-payment .settings-icon svg{fill:#707ae5}verdocs-field-payment .settings-icon:hover{opacity:1}";

package/dist/esm/verdocs-field-radio.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-3476681c.js';
 import { getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-3a3728a6.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-4ee5d16c.js';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore-69e28e18.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore-002f3d4c.js';
 import { g as getFieldSettings } from './utils-7d128d3c.js';
 import { S as SettingsIcon } from './Icons-faf0377f.js';
 import './index-e58b15f6.js';

package/dist/esm/verdocs-preview_10.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-3476681c.js';
 import { VerdocsEndpoint, integerSequence, createEnvelope, isValidEmail, isValidPhone, getRGBA, createTemplateDocument, deleteTemplateDocument, createTemplate, updateField, createField, updateTemplate, createTemplateReminder, updateTemplateReminder, deleteTemplateReminder, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-4ee5d16c.js';
-import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex, u as updateStoreRole } from './TemplateRoleStore-3a3728a6.js';
-import { g as getTemplateStore } from './TemplateStore-ee67add4.js';
+import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore-002f3d4c.js';
+import { g as getTemplateRoleStore, b as getRoleNames, a as getRoleIndex, u as updateStoreRole } from './TemplateRoleStore-69e28e18.js';
+import { g as getTemplateStore } from './TemplateStore-c2e5147b.js';
 import { r as renderDocumentField, c as updateCssTransform, d as removeCssTransform, b as getFieldId, e as defaultWidth, f as defaultHeight } from './utils-7d128d3c.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon$1, b as PageCountIcon, T as TrashIcon } from './Icons-faf0377f.js';
@@ -188,7 +188,6 @@ const VerdocsSend = class {
                 this.rolesCompleted[id] = { ...role, id };
             }
         });
-        console.log('Roles completed', this.rolesCompleted);
     }
     getLevels() {
         var _a;
@@ -206,24 +205,8 @@ const VerdocsSend = class {
             ...role,
             id: `r-${level}-${index}`,
         }));
-        rolesAtLevel.sort((a, b) => a.order - b.order);
         return rolesAtLevel;
     }
-    getRoleLevels() {
-        var _a;
-        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
-        const rolesAtLevel = {};
-        // this.rolesCompleted = {};
-        roles.forEach(role => {
-            const level = role.sequence - 1;
-            rolesAtLevel[level] || (rolesAtLevel[level] = []);
-            const id = `r-${level}-${rolesAtLevel[level].length}`;
-            rolesAtLevel[level].push({ ...role, id });
-        });
-        const levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
-        levels.sort((a, b) => a - b);
-        return levels;
-    }
     getLevelIcon(level) {
         const levels = this.getLevels();
         if (level < 0) {
@@ -296,11 +279,12 @@ const VerdocsSend = class {
         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;
+        console.log('[SEND] Roles completed', this.rolesCompleted);
         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")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(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(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); } })))));
+            return unknown ? (h("div", { class: "recipient", "data-ri": getRoleIndex(this.roleStore, role.name), "data-rn": role.name, 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(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 watchers() { return {

package/dist/esm/verdocs-radio-button_3.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, c as createEvent } from './index-3476681c.js';
 import { VerdocsEndpoint, updateTemplateRole, deleteTemplateRole, updateTemplate } from '@verdocs/js-sdk';
-import { g as getTemplateRoleStore, u as updateStoreRole, d as deleteStoreRole } from './TemplateRoleStore-3a3728a6.js';
-import { g as getTemplateFieldStore } from './TemplateFieldStore-4ee5d16c.js';
-import { g as getTemplateStore } from './TemplateStore-ee67add4.js';
+import { g as getTemplateRoleStore, u as updateStoreRole, d as deleteStoreRole } from './TemplateRoleStore-69e28e18.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore-002f3d4c.js';
+import { g as getTemplateStore } from './TemplateStore-c2e5147b.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './index-e58b15f6.js';
 import './index-7588a071.js';

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-3476681c.js';
 import { VerdocsEndpoint, getSigningSession, getEnvelope, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, fullNameToInitials, integerSequence } from '@verdocs/js-sdk';
 import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, b as getFieldId } from './utils-7d128d3c.js';
-import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore-4ee5d16c.js';
+import { a as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore-002f3d4c.js';
 import { V as VerdocsToast } from './Toast-c4843828.js';
 import { S as SDKError } from './errors-887f1e88.js';
 import './Types-e4a6eba5.js';