@verdocs/web-sdk 1.11.4 → 1.11.6

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

@@ -1,24 +1,24 @@
-verdocs-template-recipients {
+verdocs-template-roles {
   display: block;
   min-width: 400px;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
 }
-verdocs-template-recipients > form {
+verdocs-template-roles > form {
   display: flex;
   flex-direction: column;
   background-color: #ffffff;
   padding: 12px;
 }
-verdocs-template-recipients > form h5 {
+verdocs-template-roles > form h5 {
   font-size: 16px;
   font-weight: bold;
   color: #4c56cb;
   margin: 0 0 10px 0;
 }
-verdocs-template-recipients > form .participants {
+verdocs-template-roles > form .participants {
   position: relative;
 }
-verdocs-template-recipients > form .left-line {
+verdocs-template-roles > form .left-line {
   top: 32px;
   left: 11px;
   z-index: 1;
@@ -28,7 +28,7 @@ verdocs-template-recipients > form .left-line {
   background: #ffffff;
   border-left: 3px dotted #9b9b9b;
 }
-verdocs-template-recipients > form .row {
+verdocs-template-roles > form .row {
   display: flex;
   column-gap: 0;
   min-height: 35px;
@@ -37,13 +37,13 @@ verdocs-template-recipients > form .row {
   flex-direction: row;
   padding: 6px 0 4px 0;
 }
-verdocs-template-recipients > form .row .row-recipients {
+verdocs-template-roles > form .row .row-roles {
   flex: 1;
   display: flex;
   column-gap: 10px;
   flex-direction: row;
 }
-verdocs-template-recipients > form .row .icon {
+verdocs-template-roles > form .row .icon {
   top: 14px;
   z-index: 2;
   left: -40px;
@@ -52,7 +52,7 @@ verdocs-template-recipients > form .row .icon {
   position: absolute;
   background: #ffffff;
 }
-verdocs-template-recipients > form .row .sender {
+verdocs-template-roles > form .row .sender {
   height: 30px;
   display: flex;
   font-size: 14px;
@@ -63,7 +63,7 @@ verdocs-template-recipients > form .row .sender {
   border: 1px solid #c6c9cc;
   background-color: #f5f5fa;
 }
-verdocs-template-recipients > form .row .complete {
+verdocs-template-roles > form .row .complete {
   height: 30px;
   display: flex;
   font-size: 14px;
@@ -74,16 +74,16 @@ verdocs-template-recipients > form .row .complete {
   background-color: #f5f5fa;
   border: 1px solid #aeb4bf;
 }
-verdocs-template-recipients > form .row .label {
+verdocs-template-roles > form .row .label {
   font-weight: bold;
   margin-right: 6px;
   color: #33364b;
 }
-verdocs-template-recipients > form .row .settings-button {
+verdocs-template-roles > form .row .settings-button {
   margin: 4px 0 0 9px;
   cursor: pointer;
 }
-verdocs-template-recipients > form .row .recipient {
+verdocs-template-roles > form .row .recipient {
   height: 30px;
   display: flex;
   font-size: 14px;
@@ -94,59 +94,59 @@ verdocs-template-recipients > form .row .recipient {
   white-space: nowrap;
   border: 1px solid #aeb4bf;
 }
-verdocs-template-recipients > form .row .recipient .type-icon {
+verdocs-template-roles > form .row .recipient .type-icon {
   width: 24px;
   height: 24px;
   transform: scale(0.8);
   opacity: 0.6;
   margin: 4px 12px 0 0;
 }
-verdocs-template-recipients > form .row .recipient.dragging {
+verdocs-template-roles > form .row .recipient.dragging {
   position: absolute;
 }
-verdocs-template-recipients > form .row .recipient.dragging + .dropzone {
+verdocs-template-roles > form .row .recipient.dragging + .dropzone {
   display: none !important;
 }
-verdocs-template-recipients > form .row .dropzone {
+verdocs-template-roles > form .row .dropzone {
   width: 14px;
   height: 30px;
   display: none;
 }
-verdocs-template-recipients > form .row .dropzone svg {
+verdocs-template-roles > form .row .dropzone svg {
   fill: #cccccc;
 }
-verdocs-template-recipients > form .row .dropzone.visible {
+verdocs-template-roles > form .row .dropzone.visible {
   margin: 0 7px;
   display: flex;
   flex: 0 0 14px;
 }
-verdocs-template-recipients > form .row .dropzone.active {
+verdocs-template-roles > form .row .dropzone.active {
   flex: 0 0 120px;
   border-radius: 30px;
   background: #654dcb7f;
   border: 1px dashed #654dcb;
 }
-verdocs-template-recipients > form label {
+verdocs-template-roles > form label {
   display: block;
   font-size: 14px;
   font-weight: 500;
   margin: 0 0 4px 0;
   color: #5c6575;
 }
-verdocs-template-recipients > form input {
+verdocs-template-roles > 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 {
+verdocs-template-roles > form input:focus {
   outline: none;
 }
-verdocs-template-recipients .row.add-sequence {
+verdocs-template-roles .row.add-sequence {
   display: none;
 }
-verdocs-template-recipients .add-role {
+verdocs-template-roles .add-role {
   margin: 0;
   padding: 0;
   border: none;
@@ -154,14 +154,14 @@ verdocs-template-recipients .add-role {
   cursor: pointer;
   background: none;
 }
-verdocs-template-recipients .add-role:hover {
+verdocs-template-roles .add-role:hover {
   opacity: 1;
 }
-verdocs-template-recipients .add-role svg {
+verdocs-template-roles .add-role svg {
   width: 32px;
   height: 32px;
 }
-verdocs-template-recipients .add-step {
+verdocs-template-roles .add-step {
   margin: 0;
   padding: 0;
   border: none;
@@ -169,23 +169,23 @@ verdocs-template-recipients .add-step {
   cursor: pointer;
   background: none;
 }
-verdocs-template-recipients .add-step:hover {
+verdocs-template-roles .add-step:hover {
   opacity: 1;
 }
-verdocs-template-recipients .add-step svg {
+verdocs-template-roles .add-step svg {
   width: 32px;
   height: 32px;
 }
-verdocs-template-recipients.dragging .add-role {
+verdocs-template-roles.dragging .add-role {
   display: none;
 }
-verdocs-template-recipients.dragging form .row .recipient + .dropzone {
+verdocs-template-roles.dragging form .row .recipient + .dropzone {
   display: flex;
 }
-verdocs-template-recipients.dragging .row.add-sequence {
+verdocs-template-roles.dragging .row.add-sequence {
   display: flex;
 }
-verdocs-template-recipients.dragging .row.add-sequence .dropzone {
+verdocs-template-roles.dragging .row.add-sequence .dropzone {
   opacity: 0.5;
   flex: 0 0 120px;
   border-radius: 30px;
@@ -194,26 +194,26 @@ verdocs-template-recipients.dragging .row.add-sequence .dropzone {
   justify-content: center;
   border: 1px dashed #654dcb;
 }
-verdocs-template-recipients.dragging .row.add-sequence .dropzone.active {
+verdocs-template-roles.dragging .row.add-sequence .dropzone.active {
   opacity: 1;
 }
-verdocs-template-recipients .buttons {
+verdocs-template-roles .buttons {
   display: flex;
   column-gap: 8px;
   margin-top: 16px;
   flex-direction: row;
 }
-verdocs-template-recipients .empty {
+verdocs-template-roles .empty {
   font-size: 13px;
   margin-top: 15px;
   margin-bottom: 5px;
 }
-verdocs-template-recipients .empty svg {
+verdocs-template-roles .empty svg {
   width: 20px;
   height: 20px;
   stroke: #666666;
   margin-bottom: -5px;
 }
-verdocs-template-recipients ::placeholder {
+verdocs-template-roles ::placeholder {
   color: #aaaaaa;
 }

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/components/index.d.ts

@@ -47,9 +47,9 @@ export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from
 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/verdocs-preview.js

@@ -36,9 +36,9 @@ const VerdocsPreview$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   }
   handlePageRendered(e) {
     const pageInfo = e.detail;
-    console.log('[PREVIEW] Page rendered', pageInfo);
+    // console.log('[PREVIEW] Page rendered', pageInfo);
     const fields = state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
-    console.log('[PREVIEW] Fields on page', fields);
+    // console.log('[PREVIEW] Fields on page', fields);
     fields.forEach(field => renderDocumentField(field, pageInfo, getRoleIndex(state.roleNames, field.role_name), { disabled: true, editable: false, draggable: false }));
   }
   render() {

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

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-component-error2.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
-const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;max-width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end;padding:0 0 30px 0}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
+const verdocsTemplateCreateCss = "verdocs-template-create{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-create form{background-color:#ffffff;padding:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-create form .upload-box{-webkit-box-sizing:border-box;box-sizing:border-box;width:320px;text-align:center;padding:44px 18px 66px;border:2px dashed #979797;color:rgba(0, 0, 0, 0.54)}verdocs-template-create form .upload-box svg{width:64px;fill:#5c6575}verdocs-template-create .loader-wrapper{background-color:#ffffff;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;width:320px;height:320px;text-align:center;border:2px dashed #979797;-ms-flex-pack:end;justify-content:flex-end;padding:0 0 30px 0}verdocs-template-create .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-create .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-create ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-create ::-moz-placeholder{color:#aaaaaa}verdocs-template-create :-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-create ::placeholder{color:#aaaaaa}";
 
 const unicodeNBSP = ' ';
 const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
@@ -43,7 +43,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     (_a = this.cancel) === null || _a === void 0 ? void 0 : _a.emit();
   }
   async handleSubmit(e) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     e.stopPropagation();
     // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
     if (!this.file) {
@@ -55,19 +55,29 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
       console.log('[CREATE] Created template', template);
       const template_document = await createTemplateDocument(this.endpoint, template.id, this.file);
       console.log('[CREATE] Created document', template_document);
-      const finalTemplate = await getTemplate(this.endpoint, template.id);
-      console.log('[CREATE] Retrieved new template', finalTemplate);
-      // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
-      //   console.log('Updating page', pageNumber);
-      //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
-      //   console.log('Created page', page);
-      // }
-      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
-      this.creating = false;
+      let finalTemplate = null;
+      const processingWait = setInterval(async () => {
+        var _a;
+        console.log('[CREATE] Waiting for template to be processed...', template_document);
+        finalTemplate = await getTemplate(this.endpoint, template.id);
+        if (finalTemplate === null || finalTemplate === void 0 ? void 0 : finalTemplate.processed) {
+          console.log('[CREATE] Retrieved new template', finalTemplate);
+          // for await (let pageNumber of Array.from(Array(template_document.page_numbers).keys(), n => n + 1)) {
+          //   console.log('Updating page', pageNumber);
+          //   const page = await createPage(this.endpoint, template.id, {sequence: pageNumber, page_number: pageNumber, document_id: template_document.id});
+          //   console.log('Created page', page);
+          // }
+          if (processingWait) {
+            clearInterval(processingWait);
+          }
+          (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(finalTemplate);
+          this.creating = false;
+        }
+      }, 3000);
     }
     catch (e) {
       console.log('[CREATE] Error creating template', e);
-      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new SDKError(e.message, (_c = e.response) === null || _c === void 0 ? void 0 : _c.status, (_d = e.response) === null || _d === void 0 ? void 0 : _d.data));
+      (_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.creating = false;
     }
   }
@@ -75,7 +85,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Uploading, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+    return (h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), h("div", { class: "loading-text" }, "Processing, please wait..."))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',

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

@@ -90,6 +90,12 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       toolbarTarget.append(toolbarEl);
     }
   }
+  // Stop field-placement mode if ESC is pressed
+  handleKeyDown(ev) {
+    if (ev.key === 'Escape') {
+      this.placing = null;
+    }
+  }
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
     this.rerender++;
@@ -179,10 +185,14 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   generateFieldName(type, pageNumber) {
-    var _a;
-    const page = (_a = state.template.pages) === null || _a === void 0 ? void 0 : _a[pageNumber - 1];
-    const fields = (page === null || page === void 0 ? void 0 : page.fields) || [];
-    return `${type}P${pageNumber}-${fields.length}`;
+    let i = 1;
+    let fieldName;
+    do {
+      fieldName = `${type}P${pageNumber}-${i}`;
+      i++;
+    } while (state.fields.some(field => field.name === fieldName));
+    console.log('Field name', fieldName);
+    return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
   viewCoordinatesToPageCoordinates(viewX, viewY, pageNumber, xMax, yMax) {
@@ -194,6 +204,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
   async handleClickPage(e, page) {
     var _a;
     if (this.placing) {
+      console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
@@ -282,7 +293,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "placing": [32],
     "selectedRoleName": [32],
     "rerender": [32]
-  }]);
+  }, [[4, "keydown", "handleKeyDown"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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;