@verdocs/web-sdk 1.13.7 → 1.13.11

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);
@@ -248,7 +249,7 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
       console.log('testing field', fieldName);
       i++;
     } while ((_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.some(field => field.name === fieldName));
-    console.log('Will use field name', fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
+    console.log('Will use field name', this, fieldName, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.fields);
     return fieldName;
   }
   // Scale the X,Y clicks to the virtual page dimensions. Also ensure the field doesn't go off the page.
@@ -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, this.selectedRoleName, 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,8 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class extends HTM
     }
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
+    console.log('[FIELDS] Rendering');
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -371,9 +374,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 +382,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);
@@ -247,6 +250,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class extends HTML
   }
   render() {
     var _a, _b, _c, _d, _e, _f;
+    console.log('[ROLES] Rendering');
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }

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 };

package/dist/custom-elements.json

@@ -1,11 +1,24 @@
 {
   "version": 1.1,
   "tags": [
+    {
+      "name": "ipc-test",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "template-id",
+          "description": "The template ID to edit."
+        }
+      ]
+    },
     {
       "name": "verdocs-auth",
       "description": {
         "kind": "markdown",
-        "value": "Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\noccur during the process (especially successful completion). The success callback will be fired immediately if the\nuser is already authenticated with a valid session, so this component may not always display visibly.\n\nTo simplify some types of authentication flows, a visibility flag can force this component to never display. This\nallows you to susbcribe to notifications from the\n\nThis embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\ncontainer to allow sufficient space for the required forms.\n\nAs noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\nthe widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\ncancels) authentication steps.\n\nAuthentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\nembed. This Element will reuse the same session produced by logging in via that Embed.\n\n```typescript\ninterface IAuthStatus {\n  // If true, the user is authenticated with a valid session\n  authenticated: boolean;\n\n  // Details for the user's session\n  session: IActiveSession | null;\n}\n```"
+        "value": "Display an authentication dialog that allows the user to login or sign up. Callbacks are provided for events that\noccur during the process (especially successful completion). If the user is already authenticated with a valid\nsession, this component will hide itself and fire the success callback immediately. It is up to the host application\nto render the next appropriate view for the application.\n\nTo simplify some types of authentication flows, a visibility flag can force this component to never display. This\nallows you to susbcribe to notifications from the\n\nThis embed is responsive / mobile-friendly, but the calling application should provide at least a 300px wide\ncontainer to allow sufficient space for the required forms.\n\nAs noted below, the primary event is `authenticated`. This will always be fired at least once, immediately after\nthe widget is rendered and the user's status has been checked. It may be fired again as the user completes (or\ncancels) authentication steps.\n\nAuthentication is required to demonstrate this Element. You may do this in Storybook by using the Auth\nembed. This Element will reuse the same session produced by logging in via that Embed.\n\n```typescript\ninterface IAuthStatus {\n  // If true, the user is authenticated with a valid session\n  authenticated: boolean;\n\n  // Details for the user's session\n  session: IActiveSession | null;\n}\n```"
       },
       "attributes": [
         {
@@ -25,9 +38,33 @@
         "value": "Display a template building experience."
       },
       "attributes": [
+        {
+          "name": "step",
+          "description": "The step in the creation process to display.",
+          "values": [
+            {
+              "name": "attachments"
+            },
+            {
+              "name": "create"
+            },
+            {
+              "name": "fields"
+            },
+            {
+              "name": "preview"
+            },
+            {
+              "name": "roles"
+            },
+            {
+              "name": "settings"
+            }
+          ]
+        },
         {
           "name": "template-id",
-          "description": "The ID of the template to create the document from."
+          "description": "The ID of the template to create the document from. Unlike most other components, this is an optional parameter here.\nIf the template ID is known, `step` may also be specified to force displaying a specific step in the creation process.\nIf it is not specified, `step` will be ignored and the create step will be shown."
         }
       ]
     },
@@ -687,6 +724,14 @@
         }
       ]
     },
+    {
+      "name": "verdocs-file-chooser",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays a file picker to upload an attachment. This component is just the picker - the host application or component should\nprovide the actual upload functionality."
+      },
+      "attributes": []
+    },
     {
       "name": "verdocs-floating-menu",
       "description": {