@verdocs/web-sdk 1.13.23 → 1.13.26

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

@@ -5,80 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70677d67.js');
 const Envelopes = require('./Envelopes-699531b7.js');
 const Types = require('./Types-f89f9116.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
+const Recipients = require('./Recipients-2b21fdea.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-f2af9468.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-461b1a90.js');
+const utils = require('./utils-12a82a63.js');
 const errors = require('./errors-0396da3d.js');
 const index$1 = require('./index-6528b430.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Files-4bdc0c0f.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); }); }
-    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 };
-    }
-};
-/**
- * Update a recipient's status block
- */
-var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, endpoint.api //
-                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
-                .then(function (r) { return r.data; })];
-    });
-}); };
-/**
- * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
- */
-var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
-};
-/**
- * Decline to complete an envelope (signing will not terminated).
- */
-var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
-};
-/**
- * Agree to electronic signing.
- */
-var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
-};
-
 /**
  * Create a signature block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
  * a signature block to be used for all signature fields in the document. Thus, this is typically called one time to
@@ -218,7 +154,7 @@ const VerdocsSign = class {
   }
   handleClickAgree() {
     this.submitting = true;
-    envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
+    Recipients.envelopeRecipientAgree(this.endpoint, this.envelopeId, this.roleId, true)
       .then(() => {
       var _a;
       this.nextButtonLabel = 'Next';
@@ -249,7 +185,7 @@ const VerdocsSign = class {
       case 'decline':
         {
           this.submitting = true;
-          const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
+          const declineResult = await Recipients.envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
           console.log('Decline result', declineResult);
           (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
           this.submitting = false;
@@ -384,7 +320,7 @@ const VerdocsSign = class {
     if (this.nextSubmits) {
       try {
         this.submitting = true;
-        const result = await envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
+        const result = await Recipients.envelopeRecipientSubmit(this.endpoint, this.envelopeId, this.roleId);
         console.log('[SIGN] Submitted successfully', result);
         this.recipient.status = 'submitted';
         this.showDone = true;
@@ -464,6 +400,7 @@ const VerdocsSign = class {
     const roleIndex = utils.getRoleIndex(this.roleNames, this.recipient.role_name);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
     console.log('[SIGN] Page rendered, updating fields', { pageInfo, roleIndex, recipientFields });
+    // First render the fields for the signer
     recipientFields.forEach(field => {
       const el = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false, done: this.isDone });
       if (!el) {
@@ -475,78 +412,24 @@ const VerdocsSign = class {
       else {
         this.attachFieldAttributes(pageInfo, field, roleIndex, el);
       }
-      // interact(el).draggable({
-      //   listeners: {
-      //     start(event) {
-      //       console.log('[FIELDS] Drag started', event.type, event.target);
-      //     },
-      //     move(event) {
-      //       const oldX = +(event.target.getAttribute('posX') || 0);
-      //       const oldY = +(event.target.getAttribute('posY') || 0);
-      //       const xScale = +(event.target.getAttribute('xScale') || 1);
-      //       const yScale = +(event.target.getAttribute('yScale') || 1);
-      //       const newX = event.dx / xScale + oldX;
-      //       const newY = event.dy / yScale + oldY;
-      //       event.target.setAttribute('posX', newX);
-      //       event.target.setAttribute('posy', newY);
-      //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-      //     },
-      //     end(event) {
-      //       console.log('[FIELDS] Drag ended', event);
-      //       // event.target.setAttribute('posX', 0);
-      //       // event.target.setAttribute('posy', 0);
-      //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);
-      //     },
-      //   },
-      // });
     });
+    // Now render the fields for other signers who have yet to act
     this.envelope.recipients
-      .filter(r => r.role_name !== this.recipient.role_name && (r.status === Types.RecipientStates.SUBMITTED || r.status === Types.RecipientStates.CANCELED || r.status === Types.RecipientStates.DECLINED))
+      .filter(r => r.role_name !== this.recipient.role_name && (r.status === Types.RecipientStates.INVITED || r.status === Types.RecipientStates.OPENED || r.status === Types.RecipientStates.PENDING))
       .forEach(recipient => {
+      const otherIndex = utils.getRoleIndex(this.roleNames, this.recipient.role_name);
       recipient.fields.forEach(field => {
-        const el = utils.renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
+        const el = utils.renderDocumentField(field, pageInfo, otherIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
         if (!el) {
           return;
         }
         if (Array.isArray(el)) {
-          el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+          el.map(e => this.attachFieldAttributes(pageInfo, field, otherIndex, e));
         }
         else {
-          this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-        }
-      });
-    });
-    // Render fields for "the other" recipients
-    this.envelope.recipients
-      .filter(recipient => recipient.role_name !== this.recipient.role_name)
-      .forEach(otherRecipient => {
-      const otherRoleIndex = utils.getRoleIndex(this.roleNames, otherRecipient.role_name);
-      const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);
-      // We don't render other recipients' fields if they've already acted, because those values are now stamped into the document page.
-      // TODO: Do we want to render alternate treatments for recipients who have declined (red boxes?) and/or if the envelope is cancelled?
-      // TODO: When doing server-side rendering we probably want to "stamp" values into the rendered PDF only once the recipient is done
-      //  acting. Do this once vSign is in Production.
-      // TODO: Changed tacks here. During signing we show the template PDFs and everybody's fields, filled in or no. When done, we switch
-      //  to showing the envelope PDFs with stamped-in values. Confirm this is a good approach.
-      // if (!['submitted', 'signed'].includes(otherRecipient.status)) {
-      recipientFields.forEach(field => {
-        const el = utils.renderDocumentField(field, pageInfo, otherRoleIndex, {
-          disabled: true,
-          editable: false,
-          draggable: false,
-          done: this.isDone,
-        });
-        if (!el) {
-          return;
-        }
-        // TODO: Research why this occurs. There are cases when we're getting "el.setAttribute is not a function"
-        if (el.setAttribute) {
-          el.setAttribute('roleindex', otherRoleIndex);
-          el.setAttribute('xScale', pageInfo.xScale);
-          el.setAttribute('yScale', pageInfo.yScale);
+          this.attachFieldAttributes(pageInfo, field, otherIndex, el);
         }
       });
-      // }
     });
     this.checkRecipientFields();
   }

package/dist/cjs/verdocs-template-attachments_2.cjs.entry.js

@@ -0,0 +1,235 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-70677d67.js');
+require('./Types-f89f9116.js');
+const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-f2af9468.js');
+const Icons = require('./Icons-a11fb3fc.js');
+const TemplateStore = require('./TemplateStore-95728963.js');
+const errors = require('./errors-0396da3d.js');
+const Templates = require('./Templates-24580a13.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.exit = index.createEvent(this, "exit", 7);
+    this.next = index.createEvent(this, "next", 7);
+    this.templateUpdate = index.createEvent(this, "templateUpdate", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.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 TemplateStore.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 errors.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 TemplateDocuments.createTemplateDocument(this.endpoint, this.templateId, file, this.handleUploadProgress.bind(this));
+      console.log('[ATTACHMENTS] Created attachment', template);
+      this.store = await TemplateStore.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 errors.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 TemplateDocuments.deleteTemplateDocument(this.endpoint, this.templateId, this.confirmDeleteDocument.id);
+    this.store = await TemplateStore.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 Icons.PdfIcon;
+      case 'image/jpeg':
+        return Icons.JpgIcon;
+      case 'image/png':
+        return Icons.PngIcon;
+      case 'application/msword':
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        return Icons.DocIcon;
+    }
+    return Icons.FileIcon;
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.endpoint.session) {
+      return (index.h(index.Host, null, index.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 (index.h(index.Host, { class: "loading" }, index.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 index.h(index.Host, { class: "empty" });
+    }
+    return (index.h(index.Host, null, index.h("h5", null, "Existing Attachments"), index.h("div", { class: "attachments" }, (_b = this.store) === null || _b === void 0 ? void 0 : _b.state.template_documents.map(document => (index.h("div", { class: "attachment" }, index.h("div", { class: "file-icon", innerHTML: this.getFileIcon(document) }), index.h("div", { class: "filename", title: document.name }, document.name), index.h("div", { class: "pages" }, index.h("div", { class: "count" }, document.page_numbers), index.h("div", { class: "pages-icon", innerHTML: Icons.PageCountIcon })), index.h("div", { class: "trash-icon", innerHTML: Icons.TrashIcon, onClick: () => this.handleDelete(document) }))))), index.h("h5", null, "Attach a New Document"), this.uploading ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("verdocs-file-chooser", { onFileSelected: e => this.handleUpload(e) })), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.uploading }), index.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 && (index.h("verdocs-ok-dialog", { heading: "Unable to Delete Attachment", message: "Templates must contain at least one attachment.", onNext: () => (this.showDeleteError = false) })), this.confirmDeleteDocument && (index.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;
+      } }))));
+  }
+};
+VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
+
+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.drag-over{border:2px solid #4c56cb}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}verdocs-template-create .progress-wrapper{padding:20px}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>';
+const VerdocsTemplateCreate = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.exit = index.createEvent(this, "exit", 7);
+    this.next = index.createEvent(this, "next", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.file = undefined;
+    this.creating = false;
+    this.progressLabel = 'Uploading...';
+    this.progressPercent = 0;
+  }
+  componentWillLoad() {
+    this.endpoint.setTimeout(30000);
+    this.endpoint.loadSession();
+  }
+  handleFileChanged(e) {
+    var _a;
+    this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
+    console.log('[CREATE] Selected file', this.file);
+    // this.filePath = e.target.files?.[0]?.name;
+  }
+  handleUpload(e) {
+    e.stopPropagation();
+    const fileElem = document.getElementById('verdocs-template-create-file');
+    fileElem.click();
+  }
+  handleCancel(e) {
+    e.stopPropagation();
+    this.exit.emit();
+  }
+  async handleSubmit(e) {
+    var _a, _b, _c, _d;
+    e.stopPropagation();
+    console.log('Submitting');
+    // Should be true if we're here because onClick is only enabled then. We're just guarding this for Typescript.
+    if (!this.file) {
+      return;
+    }
+    this.creating = true;
+    this.progressLabel = 'Uploading...';
+    try {
+      const template = await Templates.createTemplate(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
+        if (percent >= 99) {
+          this.progressLabel = 'Processing...';
+          this.progressPercent = 100;
+        }
+        else {
+          this.progressPercent = percent;
+        }
+      });
+      console.log('[CREATE] Created template', template);
+      (_a = this.next) === null || _a === void 0 ? void 0 : _a.emit(template);
+      this.creating = false;
+      this.progressLabel = '';
+      this.progressPercent = 0;
+    }
+    catch (e) {
+      console.log('[CREATE] Error creating template', e);
+      (_b = this.sdkError) === null || _b === void 0 ? void 0 : _b.emit(new errors.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));
+      this.creating = false;
+    }
+  }
+  render() {
+    if (!this.endpoint.session) {
+      return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
+    return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("input", { type: "file", id: "verdocs-template-create-file", multiple: true, accept: "application/pdf", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), this.creating ? (index.h("div", { class: "loader-wrapper" }, index.h("verdocs-loader", null), this.progressLabel && (index.h("div", { class: "progress-wrapper" }, index.h("verdocs-progress-bar", { showPercent: true, percent: this.progressPercent, label: this.progressLabel }))))) : (index.h("div", { class: "upload-box", onDrop: (e) => {
+        e.preventDefault();
+        e.target.classList.remove('drag-over');
+        this.file = e.dataTransfer.files[0];
+      }, onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+      }, onDragEnter: (e) => e.target.classList.add('drag-over'), onDragLeave: (e) => e.target.classList.remove('drag-over') }, index.h("div", null, index.h("span", { innerHTML: FileIcon })), index.h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold', overflowWrap: 'anywhere' } }, this.file ? this.file.name : 'Drag a file here'), index.h("div", { style: {
+        marginTop: '20px',
+        marginBottom: '20px',
+        fontSize: '16px',
+        height: '20px',
+      } }, this.file ? unicodeNBSP : 'Or, if you prefer...'), index.h("verdocs-button", { label: this.file ? 'Select a different file' : 'Select a file from your computer', size: "small", onClick: e => this.handleUpload(e) }))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: e => this.handleCancel(e), disabled: this.creating }), index.h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file || this.creating })))));
+  }
+};
+VerdocsTemplateCreate.style = verdocsTemplateCreateCss;
+
+exports.verdocs_template_attachments = VerdocsTemplateAttachments;
+exports.verdocs_template_create = VerdocsTemplateCreate;

package/dist/cjs/{verdocs-template-document-page.cjs.entry.js → verdocs-template-document-page_2.cjs.entry.js}

@@ -5,8 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70677d67.js');
 require('./Types-f89f9116.js');
 const TemplateDocuments = require('./TemplateDocuments-e2e0e6b7.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-e6517a50.js');
-const utils = require('./utils-461b1a90.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-f2af9468.js');
+const utils = require('./utils-12a82a63.js');
+const popper = require('./popper-9def2535.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Files-4bdc0c0f.js');
@@ -101,4 +102,48 @@ const VerdocsTemplateDocumentPage = class {
 };
 VerdocsTemplateDocumentPage.style = verdocsTemplateDocumentPageCss;
 
+const verdocsToolbarIconCss = "verdocs-toolbar-icon{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-toolbar-icon .icon{display:inline-block;cursor:pointer}verdocs-toolbar-icon .icon svg{fill:#5c6575}verdocs-toolbar-icon .tooltip{display:none;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;background:#ffffff;color:#33364b;max-width:240px;font-weight:bold;padding:5px 10px;font-size:13px;position:relative;border-radius:4px;z-index:20000;white-space:nowrap}verdocs-toolbar-icon .tooltip .arrow,verdocs-toolbar-icon .tooltip .arrow::before{position:absolute;width:8px;height:8px;background:inherit}verdocs-toolbar-icon .tooltip .arrow{visibility:hidden;top:-4px}verdocs-toolbar-icon .tooltip .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}verdocs-toolbar-icon .tooltip[data-show]{display:block}verdocs-toolbar-icon .tooltip[data-popper-placement^=top]>.arrow{bottom:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=bottom]>.arrow{top:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=right]>.arrow{left:-4px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]{padding:3px 10px}verdocs-toolbar-icon .tooltip[data-popper-placement^=left]>.arrow{right:-1px}";
+
+const VerdocsToolbarIcon = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.text = '';
+    this.icon = '';
+    this.placement = 'bottom';
+    this.containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;
+  }
+  componentDidLoad() {
+    this.popperInstance = popper.createPopper(this.iconEl, this.tooltip, {
+      placement: this.placement,
+      modifiers: this.placement === 'left' ? [{ name: 'offset', options: { offset: [0, 20] } }] : [],
+    });
+    // placement: 'top-end',
+    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+    // });
+  }
+  disconnectedCallback() {
+    if (this.popperInstance) {
+      this.popperInstance.destroy();
+      this.popperInstance = null;
+    }
+  }
+  show() {
+    var _a, _b;
+    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+  }
+  hide() {
+    var _a;
+    (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+  }
+  // handlePress() {
+  //   this.press?.emit();
+  // }
+  render() {
+    return (index.h(index.Host, { class: {} }, index.h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), index.h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": this.placement, ref: el => (this.tooltip = el) }, this.text, index.h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+  }
+};
+VerdocsToolbarIcon.style = verdocsToolbarIconCss;
+
 exports.verdocs_template_document_page = VerdocsTemplateDocumentPage;
+exports.verdocs_toolbar_icon = VerdocsToolbarIcon;