@verdocs/web-sdk 1.13.6 → 1.13.10

package/dist/components/verdocs-sign.js

@@ -3,7 +3,7 @@ import { g as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeF
 import { R as RecipientStates } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
-import { f as fullNameToInitials, i as integerSequence, d as defineCustomElement$2 } from './verdocs-view2.js';
+import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
 import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
@@ -12,6 +12,7 @@ import { d as defineCustomElement$6 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$5 } from './verdocs-envelope-document-page2.js';
 import { d as defineCustomElement$4 } from './verdocs-loader2.js';
 import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$2 } from './verdocs-view2.js';
 
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }

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

@@ -1,90 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { g as getTemplateStore } from './TemplateStore.js';
-import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$3 } from './verdocs-component-error2.js';
-import { d as defineCustomElement$2 } from './verdocs-loader2.js';
-
-const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#4c56cb}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b;border:1px solid #cccccc}verdocs-template-attachments svg{width:24px;height:24px;fill:#5c6575;margin:2px 10px 0 0}";
-
-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>';
-const VerdocsTemplateAttachments$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.close = createEvent(this, "close", 7);
-    this.sdkError = createEvent(this, "sdkError", 7);
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.templateId = '';
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.templateId) {
-        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[ROLES] Unable to start builder session, must be authenticated');
-        return;
-      }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      this.endpoint.loadSession();
-    }
-    catch (e) {
-      console.log('[TEMPLATE ATTACHMENTS] 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));
-    }
-  }
-  render() {
-    var _a, _b;
-    if (!this.endpoint.session) {
-      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
-    }
-    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
-    if (!templateState.isLoaded) {
-      return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
-    }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    // Checking
-    if (!this.endpoint.session || !templateState.profile_id) {
-      return h(Host, { class: "empty" });
-    }
-    return (h(Host, null, h("h5", null, "Attachments"), (_b = this.store) === null || _b === void 0 ? void 0 :
-      _b.state.template_documents.map(document => (h("div", { class: "attachment" }, h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
-  }
-  static get style() { return verdocsTemplateAttachmentsCss; }
-}, [0, "verdocs-template-attachments", {
-    "endpoint": [16],
-    "templateId": [1, "template-id"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-template-attachments", "verdocs-component-error", "verdocs-loader"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-template-attachments":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsTemplateAttachments$1);
-      }
-      break;
-    case "verdocs-component-error":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { V as VerdocsTemplateAttachments$1, d as defineCustomElement$1 } from './verdocs-template-attachments2.js';
 
 const VerdocsTemplateAttachments = VerdocsTemplateAttachments$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -0,0 +1,200 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { c as createTemplateDocument, d as deleteTemplateDocument } from './TemplateDocuments.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { D as DocIcon, P as PngIcon, J as JpgIcon, a as PdfIcon, F as FileIcon, b as PageCountIcon, T as TrashIcon, d as defineCustomElement$4 } from './verdocs-file-chooser2.js';
+import { g as getTemplateStore } from './TemplateStore.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$6 } from './verdocs-button2.js';
+import { d as defineCustomElement$5 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$3 } from './verdocs-loader2.js';
+import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$1 } from './verdocs-progress-bar2.js';
+
+const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#46497d}verdocs-template-attachments .attachments{margin:0 0 40px 0}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 0;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b}verdocs-template-attachments .attachment:hover .trash-icon{display:-ms-flexbox;display:flex}verdocs-template-attachments .attachment:hover .pages{display:none}verdocs-template-attachments svg{width:28px;height:28px;fill:#5c6575;margin:2px 0 0 0}verdocs-template-attachments .file-icon{-ms-flex:0;flex:0}verdocs-template-attachments .pages{width:24px;height:24px;-ms-flex:0 0 24px;flex:0 0 24px;padding-left:4px;position:relative;margin:-10px 0 0 0}verdocs-template-attachments .pages .pages-icon{top:0;left:0;width:24px;height:24px;position:absolute}verdocs-template-attachments .pages .count{top:11px;left:7px;z-index:1;width:18px;font-size:12px;font-weight:500;position:absolute;text-align:center;letter-spacing:-2px}verdocs-template-attachments .filename{-ms-flex:1;flex:1;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px dotted #cccccc}verdocs-template-attachments .trash-icon{-ms-flex:0;flex:0;display:none}verdocs-template-attachments .trash-icon:hover{cursor:pointer}verdocs-template-attachments verdocs-file-chooser{margin:10px 0;border:2px dashed #979797}verdocs-template-attachments .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}verdocs-template-attachments .progress-wrapper{padding:20px}verdocs-template-attachments .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-attachments .buttons .flex-fill{-ms-flex:1;flex:1}verdocs-template-attachments ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-moz-placeholder{color:#aaaaaa}verdocs-template-attachments :-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-attachments ::placeholder{color:#aaaaaa}";
+
+const VerdocsTemplateAttachments = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.exit = createEvent(this, "exit", 7);
+    this.next = createEvent(this, "next", 7);
+    this.templateUpdate = createEvent(this, "templateUpdate", 7);
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.uploading = false;
+    this.progressLabel = 'Uploading...';
+    this.progressPercent = 0;
+    this.showDeleteError = false;
+    this.confirmDeleteDocument = null;
+    this.store = null;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+    }
+    catch (e) {
+      console.log('[TEMPLATE ATTACHMENTS] 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));
+    }
+  }
+  handleCancel(e) {
+    e.stopPropagation();
+    this.exit.emit();
+  }
+  handleUploadProgress(percent) {
+    if (percent >= 99) {
+      this.progressPercent = 100;
+      this.progressLabel = 'Processing...';
+    }
+    else {
+      this.progressPercent = percent;
+    }
+  }
+  async handleUpload(e) {
+    var _a, _b, _c;
+    e.stopPropagation();
+    const file = e.detail.file;
+    if (!file) {
+      return;
+    }
+    console.log('[ATTACHMENTS] Uploading...', file);
+    this.uploading = true;
+    this.progressLabel = 'Uploading...';
+    try {
+      const template = await createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
+      console.log('[ATTACHMENTS] Created attachment', template);
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      console.log('[ATTACHMENTS] New template', this.store.state);
+      this.uploading = false;
+      this.progressLabel = '';
+      this.progressPercent = 0;
+    }
+    catch (e) {
+      console.log('[ATTACHMENTS] Error creating 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.uploading = false;
+    }
+  }
+  handleNext(e) {
+    var _a;
+    e.stopPropagation();
+    this.uploading = false;
+    this.progressLabel = '';
+    this.progressPercent = 0;
+    (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit({ template: this.store.state });
+  }
+  async confirmDelete() {
+    await deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
+    this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+    console.log('[ATTACHMENTS] New template', this.store.state);
+    this.confirmDeleteDocument = null;
+  }
+  async handleDelete(document) {
+    var _a;
+    if (((_a = this.store.state) === null || _a === void 0 ? void 0 : _a.template_documents.length) > 1) {
+      this.confirmDeleteDocument = document;
+    }
+    else {
+      this.showDeleteError = true;
+    }
+  }
+  getFileIcon(document) {
+    switch (document.mime) {
+      case 'application/pdf':
+        return PdfIcon;
+      case 'image/jpeg':
+        return JpgIcon;
+      case 'image/png':
+        return PngIcon;
+      case 'application/msword':
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        return DocIcon;
+    }
+    return FileIcon;
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
+    if (!templateState.isLoaded) {
+      return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
+    }
+    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
+    if (!this.endpoint.session || !templateState.profile_id) {
+      return h(Host, { class: "empty" });
+    }
+    return (h(Host, null, h("h5", null, "Existing Attachments"), h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.template_documents.map(document => (h("div", { class: "attachment" }, h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), h("div", { class: "filename", title: document.name }, document.name), h("div", { class: "pages" }, h("div", { class: "count" }, document.page_numbers), h("div", { class: "pages-icon", innerHTML: PageCountIcon })), h("div", { class: "trash-icon", innerHTML: TrashIcon, onClick: () => this.handleDelete(document) }))))), h("h5", null, "Attach a New Document"), this.uploading ? (h("div", { class: "loader-wrapper" }, h("verdocs-loader", null), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleNext(e), disabled: !((_c = this.store) === null || _c === void 0 ? void 0 : _c.state.template_documents.length) || this.uploading })), this.showDeleteError && (h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (h("verdocs-ok-dialog", { heading: "Delete this Attachment?", message: "This operation cannot be undone. All fields placed<br />on the deleted attachment will also be removed.", onNext: () => this.confirmDelete(), showCancel: true, onExit: () => {
+        this.confirmDeleteDocument = null;
+      } }))));
+  }
+  static get style() { return verdocsTemplateAttachmentsCss; }
+}, [0, "verdocs-template-attachments", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"],
+    "uploading": [32],
+    "progressLabel": [32],
+    "progressPercent": [32],
+    "showDeleteError": [32],
+    "confirmDeleteDocument": [32],
+    "store": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-template-attachments", "verdocs-button", "verdocs-component-error", "verdocs-file-chooser", "verdocs-loader", "verdocs-ok-dialog", "verdocs-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-template-attachments":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsTemplateAttachments);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-file-chooser":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsTemplateAttachments as V, defineCustomElement as d };

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

@@ -80,12 +80,12 @@ 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), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
+    return (h(Host, null, 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), this.progressLabel && (h("div", { class: "progress-wrapper" }, h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), h("div", { style: {
         marginTop: '20px',
         marginBottom: '20px',
         fontSize: '16px',
         height: '20px',
-      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating }))));
+      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), h("div", { class: "buttons" }, h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating })))));
   }
   static get style() { return verdocsTemplateCreateCss; }
 }, [0, "verdocs-template-create", {

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

@@ -1,59 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
+import { g as getTemplateDocumentPageDisplayUri } from './TemplateDocuments.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { t as throttle } from './utils.js';
 
-/**
- * A TemplateDocument represents a PDF or other attachment in a Template.
- *
- * @module
- */
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-/**
- * Get a display URI for a given page in a file attached to a template document. These pages are rendered server-side
- * into PNG resources suitable for display in IMG tags although they may be used elsewhere. Note that these are intended
- * for DISPLAY ONLY, are not legally binding documents, and do not contain any encoded metadata from participants. The
- * original asset may be obtained by calling `getTemplateDocumentFile()` or similar.
- */
-var getTemplateDocumentPageDisplayUri = function (endpoint, templateId, documentId, page) { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
-    return [2 /*return*/, endpoint.api.get("/templates/".concat(templateId, "/documents/").concat(documentId, "/pages/").concat(page, "/image")).then(function (r) { return r.data; })];
-}); }); };
-
 const verdocsTemplateDocumentPageCss = "verdocs-template-document-page{width:100%;position:relative}verdocs-template-document-page .verdocs-template-document-page-layer{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-box-shadow:0 0 10px 5px #0000000f;box-shadow:0 0 10px 5px #0000000f}verdocs-template-document-page .verdocs-template-document-page-layer.img{width:100%}";
 
 const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {

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

@@ -3,6 +3,7 @@ import { i as interact } from './interact.min.js';
 import './Types.js';
 import { u as updateField, c as createField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { i as integerSequence } from './Primitives.js';
 import { a as getRoleIndex, r as renderDocumentField, c as updateCssTransform, d as defaultWidth, e as defaultHeight } from './utils.js';
 import { g as getTemplateStore, a as getRoleNames } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
@@ -69,9 +70,9 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
         return;
       }
       this.store = await getTemplateStore(this.endpoint, this.templateId, true);
-      console.log(`[FIELDS] Loading template ${this.templateId}`, this.endpoint.session);
+      console.log(`[FIELDS] Loaded template ${this.templateId}`, this.store.state);
       this.selectedRoleName = ((_d = (_c = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.name) || '';
-      console.log('Starting with role', this.selectedRoleName);
+      console.log('[FIELDS] Starting with role', this.selectedRoleName);
     }
     catch (e) {
       console.log('[FIELDS] Error with preview session', e);
@@ -258,17 +259,18 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     const y = Math.floor(Math.min(Math.max(renderedHeight - viewY, 0) / yScale, yMax));
     return { x, y };
   }
-  async handleClickPage(e, page) {
+  async handleClickPage(e, pageNumber) {
     var _a, _b, _c;
     if (this.placing) {
-      console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
-      const pageNumber = page.sequence;
+      console.log('Placing field', this.placing, pageNumber, e.offsetX, e.offsetY);
+      // console.log('Placing field', this.placing, page.sequence, e.offsetX, e.offsetY);
+      // const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
       const width = defaultWidth(this.placing);
       const height = defaultHeight(this.placing);
       const cachedPage = this.cachedPageInfo[pageNumber];
-      console.log('Cached page', cachedPage);
+      // console.log('Cached page', cachedPage);
       const { naturalWidth = 612, naturalHeight = 792 } = cachedPage;
       const coords = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const x = Math.floor(coords.x);
@@ -363,7 +365,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -371,9 +373,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (!((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.isLoaded)) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    const pages = [...(_b = this.store) === null || _b === void 0 ? void 0 : _b.state.pages];
-    pages.sort((a, b) => a.sequence - b.sequence);
-    const selectableRoles = (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ value: role.name, label: role.name }));
+    const selectableRoles = (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.roles.map(role => ({ value: role.name, label: role.name }));
     return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
       } }, h("div", { id: "verdocs-template-fields-toolbar" }, h("div", { class: "add-for" }, "Add field:"), h("verdocs-select-input", { value: this.selectedRoleName, options: selectableRoles, onInput: (e) => (this.selectedRoleName = e.target.value) }), menuOptions.map(option => (h("verdocs-toolbar-icon", { text: option.tooltip, icon: option.icon, onClick: () => {
@@ -381,11 +381,12 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
           // We have empty tooltips on the separators, quick hack...
           this.placing = option.id;
         }
-      } })))), h("div", { class: "pages" }, pages.map(page => {
-      return (h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+      } })))), h("div", { class: "pages" }, (((_e = (_d = this.store) === null || _d === void 0 ? void 0 : _d.state) === null || _e === void 0 ? void 0 : _e.template_documents) || []).map(document => {
+      const pageNumbers = integerSequence(1, document.page_numbers);
+      return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },
           { name: 'controls', type: 'div' },
-        ] }));
+        ] })));
     }))));
   }
   static get style() { return verdocsTemplateFieldsCss; }

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

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$3 } from './verdocs-loader2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
-const verdocsTemplateNameCss = "verdocs-template-name{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-name.loading{min-height:300px;position:relative;display:block}verdocs-template-name.empty{display:none}verdocs-template-name form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-name form label{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 20px 0}verdocs-template-name form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-name form input:focus{outline:none}verdocs-template-name .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-name ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-name ::-moz-placeholder{color:#aaaaaa}verdocs-template-name :-ms-input-placeholder{color:#aaaaaa}verdocs-template-name ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-name ::placeholder{color:#aaaaaa}";
+const verdocsTemplateNameCss = "";
 
 const VerdocsTemplateName$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

@@ -40,7 +40,7 @@ const VerdocsTemplateProperties$1 = /*@__PURE__*/ proxyCustomElement(class exten
         console.log('[PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
       this.name = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.name;
       this.sendReminders = ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.reminder_id) !== null;
     }

package/dist/components/verdocs-template-role-properties2.js

@@ -77,7 +77,7 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
         this.email = editingRole.email;
         this.phone = editingRole.phone;
         this.allowDelegation = editingRole.delegator;
-        console.log('Got role', editingRole);
+        console.log('[ROLES] Editing role', editingRole);
       }
     }
     catch (e) {
@@ -103,23 +103,26 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
       phone: this.phone,
       delegator: this.allowDelegation,
     })
-      .then(r => {
+      .then(async (r) => {
       var _a;
-      console.log('Update result', r);
+      console.log('[ROLE_PROPERTIES] Update result', r);
       this.saving = false;
       this.dirty = false;
-      const newRoles = [...this.store.state.roles];
-      newRoles.forEach(role => {
-        if (role.name === this.roleName) {
-          role.name = this.name;
-          role.type = this.type;
-          role.full_name = this.fullName;
-          role.email = this.email;
-          role.phone = this.phone;
-          role.delegator = this.allowDelegation;
-        }
-      });
-      this.store.state.roles = newRoles;
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      // this.sortTemplateRoles();
+      // this.renumberTemplateRoles();
+      // const newRoles = [...this.store.state.roles];
+      // newRoles.forEach(role => {
+      //   if (role.name === this.roleName) {
+      //     role.name = this.name;
+      //     role.type = this.type;
+      //     role.full_name = this.fullName;
+      //     role.email = this.email;
+      //     role.phone = this.phone;
+      //     role.delegator = this.allowDelegation;
+      //   }
+      // });
+      // this.store.state.roles = newRoles;
       (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
     })
       .catch(e => {

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

@@ -220,12 +220,15 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
       type: 'signer',
       delegator: false,
     })
-      .then(r => {
-      var _a, _b, _c;
+      .then(async (r) => {
+      var _a, _b;
       console.log('[ROLES] Created role', r);
-      this.store.state.roles = [...(_a = this.store) === null || _a === void 0 ? void 0 : _a.state.roles, r];
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      this.sortTemplateRoles();
       this.renumberTemplateRoles();
-      (_b = this.templateUpdated) === null || _b === void 0 ? void 0 : _b.emit({ event: 'created-role', endpoint: this.endpoint, template: (_c = this.store) === null || _c === void 0 ? void 0 : _c.state });
+      // this.store.state.roles = [...this.store?.state.roles, r];
+      // this.renumberTemplateRoles();
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'created-role', endpoint: this.endpoint, template: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state });
     })
       .catch(e => {
       console.log('[ROLES] Error creating role', e);

package/dist/components/verdocs-view2.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from
 import { t as throttledGetEnvelope, d as cancelEnvelope } from './Envelopes.js';
 import { E as EnvelopeStates } from './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { i as integerSequence } from './Primitives.js';
 import { f as saveEnvelopesAsZip, h as saveCertificate, s as saveAttachment } from './utils.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$5 } from './verdocs-button2.js';
@@ -29,25 +30,6 @@ var userCanCancelEnvelope = function (session, envelope) {
         envelope.status !== EnvelopeStates.CANCELED;
 };
 
-/**
- * Create an array containing a sequence of integers, e.g. [START, START+1, START+2, ...] This is frequently useful
- * in rendering operations when there is no source array to .map() across.
- */
-var integerSequence = function (start, count) {
-    return Array(count)
-        .fill(1)
-        .map(function (_, index) { return index + start; });
-};
-/**
- * Generate suggested initials for a full name, e.g. "John Doe" will yield "JD".
- */
-var fullNameToInitials = function (name) {
-    return name
-        .split(' ')
-        .map(function (word) { return word[0]; })
-        .join('');
-};
-
 const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;min-height:600px;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-view div,verdocs-view canvas{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-view .document{-ms-flex:1;flex:1;width:100%;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;max-width:1200px;position:relative;overflow-y:scroll;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-view .document .inner{width:100%;max-width:1028px}verdocs-view .loading-indicator{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;background-color:rgba(0, 0, 0, 0.7)}#verdocs-view-header{width:100%;color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 20px;font-size:12px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-transition:all 0.25s;transition:all 0.25s;background-color:#33354c;-webkit-box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12)}#verdocs-view-header .inner{width:100%;display:-ms-flexbox;display:flex;margin:0 auto;padding:0 20px;max-width:1200px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}#verdocs-view-header .logo{width:80px;display:none;margin:-6px 0 0 0}#verdocs-view-header .title{font-size:18px;font-weight:500;white-space:nowrap;text-overflow:ellipsis}";
 
 const VerdocsView = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -251,4 +233,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { VerdocsView as V, defineCustomElement as d, fullNameToInitials as f, integerSequence as i };
+export { VerdocsView as V, defineCustomElement as d };