@verdocs/web-sdk 1.11.5 → 1.11.7

package/dist/collection/components/templates/verdocs-template-recipients/{verdocs-template-recipients.js → verdocs-template-roles.js}

@@ -24,9 +24,9 @@ const iconSigner = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="2
 const iconApprover = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>`;
 const iconCC = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" /><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" /></svg>`;
 /**
- * Displays an edit form that allows the user to adjust a template's recipients and workflow.
+ * Displays an edit form that allows the user to adjust a template's roles and workflow.
  */
-export class VerdocsTemplateRecipients {
+export class VerdocsTemplateRoles {
   constructor() {
     this.sequences = [];
     this.endpoint = VerdocsEndpoint.getDefault();
@@ -41,19 +41,19 @@ export class VerdocsTemplateRecipients {
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.log(`[RECIPIENTS] Missing required template ID ${this.templateId}`);
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
         return;
       }
       if (!this.endpoint.session) {
-        console.log('[RECIPIENTS] Unable to start builder session, must be authenticated');
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
         return;
       }
       try {
-        console.log(`[RECIPIENTS] Loading template ${this.templateId}`, this.endpoint.session);
+        console.log(`[ROLES] Loading template ${this.templateId}`, this.endpoint.session);
         await loadTemplate(this.endpoint, this.templateId, true);
       }
       catch (e) {
-        console.log('[RECIPIENTS] Error loading template', e);
+        console.log('[ROLES] Error loading template', e);
         (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
       }
       this.sortTemplateRoles();
@@ -124,8 +124,8 @@ export class VerdocsTemplateRecipients {
             sequence: role.sequence,
             order: role.order,
           })))
-            .then(() => console.log('[RECIPIENTS] Updated roles'))
-            .catch(e => console.log('[RECIPIENTS] Role updates failed', e));
+            .then(() => console.log('[ROLES] Updated roles'))
+            .catch(e => console.log('[ROLES] Role updates failed', e));
         }
       }.bind(this),
       ondropactivate: e => {
@@ -188,7 +188,7 @@ export class VerdocsTemplateRecipients {
     this.extractSequenceNumbers();
   }
   // Look for name conflicts, because they're UGC and can be anything, regardless of order.
-  getNextRecipientName() {
+  getNextRoleName() {
     var _a, _b;
     let name = '';
     let nextNumber = (_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles.length;
@@ -202,7 +202,7 @@ export class VerdocsTemplateRecipients {
     e.stopPropagation();
     // We don't need to look for a unique order number because we're already working with a sorted/renumbered set by now.
     const order = TemplateStore.template.roles.filter(role => role.sequence === sequence).length + 1;
-    const name = this.getNextRecipientName();
+    const name = this.getNextRoleName();
     console.log('Will create', name, sequence, order);
     createRole(this.endpoint, this.templateId, {
       template_id: this.templateId,
@@ -228,7 +228,7 @@ export class VerdocsTemplateRecipients {
   handleAddStep(e, sequence) {
     e.stopPropagation();
     const order = 1;
-    const name = this.getNextRecipientName();
+    const name = this.getNextRoleName();
     console.log('Will create', name, sequence, order);
     createRole(this.endpoint, this.templateId, {
       template_id: this.templateId,
@@ -260,12 +260,11 @@ export class VerdocsTemplateRecipients {
       return (h(Host, null, h("verdocs-loader", null)));
     }
     const roleNames = (((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
-    console.log('s', this.sequences);
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-recipients" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[TemplateStore.template.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-recipients" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), TemplateStore.template.roles
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), 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[TemplateStore.template.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"))), this.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 }), TemplateStore.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, 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("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, 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": this.sequences.length + 1 }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, 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: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.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": this.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, this.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: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {
@@ -275,15 +274,15 @@ export class VerdocsTemplateRecipients {
         this.forceRerender++;
       } })), this.showingSenderDialog && h("verdocs-template-sender", { endpoint: this.endpoint, templateId: this.templateId, onClose: () => (this.showingSenderDialog = false) })));
   }
-  static get is() { return "verdocs-template-recipients"; }
+  static get is() { return "verdocs-template-roles"; }
   static get originalStyleUrls() {
     return {
-      "$": ["verdocs-template-recipients.scss"]
+      "$": ["verdocs-template-roles.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["verdocs-template-recipients.css"]
+      "$": ["verdocs-template-roles.css"]
     };
   }
   static get properties() {

package/dist/collection/components/templates/verdocs-template-recipients/{verdocs-template-recipients.stories.js → verdocs-template-roles.stories.js}

@@ -1,7 +1,7 @@
 import { html } from 'lit-html';
 export default {
-  title: 'Templates/Recipients',
-  component: 'verdocs-template-recipients',
+  title: 'Templates/Roles',
+  component: 'verdocs-template-roles',
   args: {
     // templateId: 'ea7a792f-7e46-4662-a0ff-db6bd389306e',
     templateId: '951016b0-c5ef-450d-b628-9a0c5b84b163',
@@ -11,4 +11,4 @@ export default {
     onCancel: { action: 'cancel' },
   },
 };
-export const Recipients = ({ templateId, onCancel, onSave }) => html `<verdocs-template-recipients .templateId=${templateId} @cancel=${onCancel} @save=${onSave} />`;
+export const Roles = ({ templateId, onCancel, onSave }) => html `<verdocs-template-roles .templateId=${templateId} @cancel=${onCancel} @save=${onSave} />`;

package/dist/collection/utils/templateStore.js

@@ -17,7 +17,6 @@ const { state, onChange } = createStore({
   dirty: false,
 });
 onChange('template', async (newTemplate) => {
-  console.log('nt', newTemplate);
   if (!newTemplate) {
     console.log('[TEMPLATESTORE] Clearing template');
     state.fields = [];

package/dist/collection/utils/utils.js

@@ -228,14 +228,17 @@ export const getFieldSettings = (field) => {
 export const updateCssTransform = (el, key, value) => {
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform;
+  console.log('ct', currentTransform);
   // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
   const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
+  console.log('comp', components);
   el.style.transform = [
     components //
       .filter(component => component[1] !== key) // Remove the entry if it's already set
       .map(component => component[0]),
     `${key}(${value})`,
   ].join(' ');
+  console.log('nt', el.style.transform);
 };
 export const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
 const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));

package/dist/components/index.d.ts

@@ -42,14 +42,14 @@ export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/compo
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
 export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/controls/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
-export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../types/components/elements/verdocs-template-document-page/verdocs-template-document-page';
+export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../types/components/templates/verdocs-template-document-page/verdocs-template-document-page';
 export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
 export { VerdocsTemplateFields as VerdocsTemplateFields } from '../types/components/templates/verdocs-template-fields/verdocs-template-fields';
 export { VerdocsTemplateName as VerdocsTemplateName } from '../types/components/templates/verdocs-template-name/verdocs-template-name';
 export { VerdocsTemplateProperties as VerdocsTemplateProperties } from '../types/components/templates/verdocs-template-properties/verdocs-template-properties';
-export { VerdocsTemplateRecipients as VerdocsTemplateRecipients } from '../types/components/templates/verdocs-template-recipients/verdocs-template-recipients';
 export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/components/templates/verdocs-template-reminders/verdocs-template-reminders';
 export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
+export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-recipients/verdocs-template-roles';
 export { VerdocsTemplateSender as VerdocsTemplateSender } from '../types/components/templates/verdocs-template-sender/verdocs-template-sender';
 export { VerdocsTemplateTags as VerdocsTemplateTags } from '../types/components/controls/verdocs-template-tags/verdocs-template-tags';
 export { VerdocsTemplateVisibility as VerdocsTemplateVisibility } from '../types/components/templates/verdocs-template-visibillity/verdocs-template-visibility';

package/dist/components/index.js

@@ -47,9 +47,9 @@ export { VerdocsTemplateFieldProperties, defineCustomElement as defineCustomElem
 export { VerdocsTemplateFields, defineCustomElement as defineCustomElementVerdocsTemplateFields } from './verdocs-template-fields.js';
 export { VerdocsTemplateName, defineCustomElement as defineCustomElementVerdocsTemplateName } from './verdocs-template-name.js';
 export { VerdocsTemplateProperties, defineCustomElement as defineCustomElementVerdocsTemplateProperties } from './verdocs-template-properties.js';
-export { VerdocsTemplateRecipients, defineCustomElement as defineCustomElementVerdocsTemplateRecipients } from './verdocs-template-recipients.js';
 export { VerdocsTemplateReminders, defineCustomElement as defineCustomElementVerdocsTemplateReminders } from './verdocs-template-reminders.js';
 export { VerdocsTemplateRoleProperties, defineCustomElement as defineCustomElementVerdocsTemplateRoleProperties } from './verdocs-template-role-properties.js';
+export { VerdocsTemplateRoles, defineCustomElement as defineCustomElementVerdocsTemplateRoles } from './verdocs-template-roles.js';
 export { VerdocsTemplateSender, defineCustomElement as defineCustomElementVerdocsTemplateSender } from './verdocs-template-sender.js';
 export { VerdocsTemplateTags, defineCustomElement as defineCustomElementVerdocsTemplateTags } from './verdocs-template-tags.js';
 export { VerdocsTemplateVisibility, defineCustomElement as defineCustomElementVerdocsTemplateVisibility } from './verdocs-template-visibility.js';

package/dist/components/templateStore.js

@@ -17,7 +17,6 @@ const { state, onChange } = createStore({
   dirty: false,
 });
 onChange('template', async (newTemplate) => {
-  console.log('nt', newTemplate);
   if (!newTemplate) {
     console.log('[TEMPLATESTORE] Clearing template');
     state.fields = [];

package/dist/components/utils.js

@@ -267,14 +267,17 @@ const getFieldSettings = (field) => {
 const updateCssTransform = (el, key, value) => {
   // e.g. 'scale(1.87908, 1.87908) translate(0px, 0px);'
   const currentTransform = el.style.transform;
+  console.log('ct', currentTransform);
   // e.g. ['scale(1.87908, 1.87908)', 'scale', '1.87908, 1.87908', ...], [ 'translate(0px, 0px)', 'translate', '0px, 0px']]
   const components = [...currentTransform.matchAll(/(\w+)\(([^)]*)\)/gi)];
+  console.log('comp', components);
   el.style.transform = [
     components //
       .filter(component => component[1] !== key) // Remove the entry if it's already set
       .map(component => component[0]),
     `${key}(${value})`,
   ].join(' ');
+  console.log('nt', el.style.transform);
 };
 const formatLocalDate = (date) => format(date, 'P').replace(/\//g, '-');
 const formatEnvelopeDate = (envelope) => formatLocalDate(new Date(envelope.updated_at));

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

@@ -25,6 +25,9 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.showSuggestions = false;
     this.showMessage = false;
     this.delegator = false;
+    this.nameFieldId = `verdocs-contact-picker-name-${Math.random().toString(36).substring(2, 11)}`;
+    this.emailFieldId = `verdocs-contact-picker-email-${Math.random().toString(36).substring(2, 11)}`;
+    this.phoneFieldId = `verdocs-contact-picker-phone-${Math.random().toString(36).substring(2, 11)}`;
   }
   componentWillLoad() {
     if (this.templateRole) {
@@ -75,13 +78,15 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.phone = suggestion.phone;
     this.showSuggestions = false;
   }
+  // The reason for the random names/IDs is to disable browser autocomplete. We set the autocomplete tags but many browsers ignore them
+  // and show a duplicate autocomplete picker on top of our own.
   render() {
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-name" }, "Name:"), h("input", { id: "verdocs-contact-picker-name", name: "verdocs-contact-picker-name", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("label", { htmlFor: this.nameFieldId }, "Name:"), h("input", { id: this.nameFieldId, name: this.nameFieldId, type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.name, placeholder: "Recipient Name...", onFocus: () => { var _a; return (this.showSuggestions = ((_a = this.contactSuggestions) === null || _a === void 0 ? void 0 : _a.length) > 0); },
       // onBlur={() => (this.showSuggestions = false)}
       onInput: e => this.handleNameChange(e) }), this.showSuggestions && (h("div", { class: "dropdown" }, this.contactSuggestions.map(suggestion => {
       var _a;
       return (h("div", { key: (_a = suggestion.id) !== null && _a !== void 0 ? _a : suggestion.name, class: "suggestion", onClick: e => this.handleSelectSuggestion(e, suggestion) }, suggestion.avatar ? h("img", { alt: "Avatar", class: "avatar", src: suggestion.avatar }) : h("div", { class: "avatar", innerHTML: placeholderIcon }), h("div", { class: "details" }, h("div", { class: "name" }, suggestion.name), suggestion.email && h("div", { class: "destination" }, suggestion.email), suggestion.phone && h("div", { class: "destination" }, suggestion.phone))));
-    })))), h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-email" }, "Email:"), h("input", { id: "verdocs-contact-picker-email", name: "verdocs-contact-picker-email", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-phone" }, "Phone:"), h("input", { id: "verdocs-contact-picker-phone", name: "verdocs-contact-picker-phone", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { class: "buttons" }, h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
+    })))), h("div", { class: "row" }, h("label", { htmlFor: this.emailFieldId }, "Email:"), h("input", { id: this.emailFieldId, name: this.emailFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.email, placeholder: "Email Address...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleEmailChange(e) })), h("div", { class: "row" }, h("label", { htmlFor: this.phoneFieldId }, "Phone:"), h("input", { id: this.phoneFieldId, name: this.phoneFieldId, type: "text", "data-lpignore": "true", autoComplete: "blocked", value: this.phone, placeholder: "Phone Number...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handlePhoneChange(e) })), this.showMessage && (h("div", { class: "row" }, h("label", { htmlFor: "verdocs-contact-picker-message" }, "Message:"), h("input", { id: "verdocs-contact-picker-message", name: "verdocs-contact-picker-message", type: "text", "data-lpignore": "true", autocomplete: "blocked", value: this.message, placeholder: "Invitation Message...", onFocus: () => (this.showSuggestions = false), onInput: e => this.handleMessageChange(e) }))), h("div", { class: "buttons" }, h("verdocs-toggle-button", { icon: messageIcon, size: "small", active: this.showMessage, onToggle: e => {
         this.showMessage = e.detail.active;
         this.showSuggestions = false;
       } }), h("verdocs-toggle-button", { icon: delegateIcon, size: "small", active: this.delegator, onToggle: e => {
@@ -100,7 +105,10 @@ const VerdocsContactPicker = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "message": [32],
     "showSuggestions": [32],
     "showMessage": [32],
-    "delegator": [32]
+    "delegator": [32],
+    "nameFieldId": [32],
+    "emailFieldId": [32],
+    "phoneFieldId": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/verdocs-template-document-page2.js

@@ -27,9 +27,7 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class exten
     this.pageDisplayUri = '';
   }
   async componentWillLoad() {
-    const uri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
-    console.log('pd', uri);
-    this.pageDisplayUri = uri;
+    this.pageDisplayUri = await getTemplateDocumentPageDisplayUri(this.endpoint, this.templateId, this.documentId, this.pageNumber);
   }
   componentDidLoad() {
     this.resizeObserver = new ResizeObserver(throttle(entries => {

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

@@ -124,12 +124,12 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[FIELDS] Page rendered', pageInfo);
+    console.log('[FIELDS] Page rendered', pageInfo.pageNumber, pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
     const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
-    console.log('[FIELDS] Fields on page', fields);
+    // console.log('[FIELDS] Fields on page', fields);
     fields.forEach(field => {
       const roleIndex = getRoleIndex(state.roleNames, field.role_name);
       const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: true, draggable: true });

package/dist/components/verdocs-template-roles.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsTemplateRoles extends Components.VerdocsTemplateRoles, HTMLElement {}
+export const VerdocsTemplateRoles: {
+  prototype: VerdocsTemplateRoles;
+  new (): VerdocsTemplateRoles;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/{verdocs-template-recipients.js → verdocs-template-roles.js}

@@ -17,7 +17,7 @@ import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$3 } from './verdocs-template-sender2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsTemplateRecipientsCss = "verdocs-template-recipients{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-recipients>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-recipients>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-recipients>form .participants{position:relative}verdocs-template-recipients>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-recipients>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-recipients>form .row .row-recipients{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-direction:row;flex-direction:row}verdocs-template-recipients>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-recipients>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 5px 0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-recipients>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-recipients>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-recipients>form .row .settings-button{margin:4px 0 0 9px;cursor:pointer}verdocs-template-recipients>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:1px solid #aeb4bf}verdocs-template-recipients>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:4px 12px 0 0}verdocs-template-recipients>form .row .recipient.dragging{position:absolute}verdocs-template-recipients>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-recipients>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-recipients>form .row .dropzone svg{fill:#cccccc}verdocs-template-recipients>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-recipients>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-recipients>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-recipients>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-recipients>form input:focus{outline:none}verdocs-template-recipients .row.add-sequence{display:none}verdocs-template-recipients .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-recipients .add-role:hover{opacity:1}verdocs-template-recipients .add-role svg{width:32px;height:32px}verdocs-template-recipients .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-recipients .add-step:hover{opacity:1}verdocs-template-recipients .add-step svg{width:32px;height:32px}verdocs-template-recipients.dragging .add-role{display:none}verdocs-template-recipients.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-recipients.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-recipients.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:#654dcb7f;-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-recipients.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-recipients .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-recipients .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-recipients .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-recipients ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::-moz-placeholder{color:#aaaaaa}verdocs-template-recipients :-ms-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-recipients ::placeholder{color:#aaaaaa}";
+const verdocsTemplateRolesCss = "verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 5px 0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{margin:0 0 0 9px;cursor:pointer}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:1px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:#654dcb7f;-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
 
 const senderLabels = {
   [TemplateSenderTypes.EVERYONE]: 'Everyone',
@@ -34,7 +34,7 @@ const plusIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" viewBox
 const iconSigner = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
 const iconApprover = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>`;
 const iconCC = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" /><path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" /></svg>`;
-const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const VerdocsTemplateRoles$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -55,19 +55,19 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.log(`[RECIPIENTS] Missing required template ID ${this.templateId}`);
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
         return;
       }
       if (!this.endpoint.session) {
-        console.log('[RECIPIENTS] Unable to start builder session, must be authenticated');
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
         return;
       }
       try {
-        console.log(`[RECIPIENTS] Loading template ${this.templateId}`, this.endpoint.session);
+        console.log(`[ROLES] Loading template ${this.templateId}`, this.endpoint.session);
         await loadTemplate(this.endpoint, this.templateId, true);
       }
       catch (e) {
-        console.log('[RECIPIENTS] Error loading template', e);
+        console.log('[ROLES] Error loading template', e);
         (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
       }
       this.sortTemplateRoles();
@@ -138,8 +138,8 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
             sequence: role.sequence,
             order: role.order,
           })))
-            .then(() => console.log('[RECIPIENTS] Updated roles'))
-            .catch(e => console.log('[RECIPIENTS] Role updates failed', e));
+            .then(() => console.log('[ROLES] Updated roles'))
+            .catch(e => console.log('[ROLES] Role updates failed', e));
         }
       }.bind(this),
       ondropactivate: e => {
@@ -202,7 +202,7 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
     this.extractSequenceNumbers();
   }
   // Look for name conflicts, because they're UGC and can be anything, regardless of order.
-  getNextRecipientName() {
+  getNextRoleName() {
     var _a, _b;
     let name = '';
     let nextNumber = (_a = state.template) === null || _a === void 0 ? void 0 : _a.roles.length;
@@ -216,7 +216,7 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
     e.stopPropagation();
     // We don't need to look for a unique order number because we're already working with a sorted/renumbered set by now.
     const order = state.template.roles.filter(role => role.sequence === sequence).length + 1;
-    const name = this.getNextRecipientName();
+    const name = this.getNextRoleName();
     console.log('Will create', name, sequence, order);
     createRole(this.endpoint, this.templateId, {
       template_id: this.templateId,
@@ -242,7 +242,7 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
   handleAddStep(e, sequence) {
     e.stopPropagation();
     const order = 1;
-    const name = this.getNextRecipientName();
+    const name = this.getNextRoleName();
     console.log('Will create', name, sequence, order);
     createRole(this.endpoint, this.templateId, {
       template_id: this.templateId,
@@ -274,12 +274,11 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
       return (h(Host, null, h("verdocs-loader", null)));
     }
     const roleNames = (((_a = state.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name);
-    console.log('s', this.sequences);
-    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), h("div", { class: "participants" }, h("div", { class: "left-line" }), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: startIcon }), h("div", { class: "row-recipients" }, h("div", { class: "sender" }, h("span", { class: "label" }, "Sender:"), " ", senderLabels[state.template.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-recipients" }, h("div", { class: "dropzone", "data-sequence": 0, "data-order": 1 }, "Add Step"))), this.sequences.map(sequence => (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("div", { class: "dropzone", "data-order": 0.5, "data-sequence": sequence }), state.template.roles
+    return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off", "data-r": this.forceRerender }, h("h5", null, "Roles"), 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[state.template.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"))), this.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 }), state.template.roles
       .filter(role => role.sequence === sequence)
       .map(role => {
       return (h(Fragment, null, h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, "data-rolename": role.name }, 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("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.sequences.length > 0 && (h("div", { class: "row add-sequence", "data-sequence": sequence }, h("div", { class: "row-recipients" }, 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": this.sequences.length + 1 }, h("div", { class: "row-recipients" }, h("div", { class: "icon", innerHTML: plusIcon }), h("button", { class: "add-step", innerHTML: plusIcon, onClick: e => this.handleAddStep(e, this.sequences.length + 1) }))), this.sequences.length < 1 && (h(Fragment, null, h("div", { class: "row" }, h("div", { class: "icon", innerHTML: stepIcon }), h("div", { class: "row-recipients" }, h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, 1) }))))), h("div", { class: "row" }, h("div", { class: "icon", innerHTML: doneIcon }), h("div", { class: "row-recipients" }, 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: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
+    }), h("button", { class: "add-role", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) }))), this.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": this.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, this.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: e => this.handleCancel(e) }), h("verdocs-button", { label: "OK", size: "small", onClick: e => this.handleSubmit(e), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
         this.showingRoleDialog = null;
         this.forceRerender++;
       }, onDelete: e => {
@@ -290,8 +289,8 @@ const VerdocsTemplateRecipients$1 = /*@__PURE__*/ proxyCustomElement(class exten
       } })), this.showingSenderDialog && h("verdocs-template-sender", { endpoint: this.endpoint, templateId: this.templateId, onClose: () => (this.showingSenderDialog = false) })));
   }
   get el() { return this; }
-  static get style() { return verdocsTemplateRecipientsCss; }
-}, [0, "verdocs-template-recipients", {
+  static get style() { return verdocsTemplateRolesCss; }
+}, [0, "verdocs-template-roles", {
     "endpoint": [16],
     "templateId": [1, "template-id"],
     "showingRoleDialog": [32],
@@ -303,11 +302,11 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-template-recipients", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-radio-button", "verdocs-select-input", "verdocs-template-role-properties", "verdocs-template-sender", "verdocs-text-input"];
+  const components = ["verdocs-template-roles", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-radio-button", "verdocs-select-input", "verdocs-template-role-properties", "verdocs-template-sender", "verdocs-text-input"];
   components.forEach(tagName => { switch (tagName) {
-    case "verdocs-template-recipients":
+    case "verdocs-template-roles":
       if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsTemplateRecipients$1);
+        customElements.define(tagName, VerdocsTemplateRoles$1);
       }
       break;
     case "verdocs-button":
@@ -364,7 +363,7 @@ function defineCustomElement$1() {
 }
 defineCustomElement$1();
 
-const VerdocsTemplateRecipients = VerdocsTemplateRecipients$1;
+const VerdocsTemplateRoles = VerdocsTemplateRoles$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { VerdocsTemplateRecipients, defineCustomElement };
+export { VerdocsTemplateRoles, defineCustomElement };