@verdocs/web-sdk 1.9.38 → 1.9.41

package/dist/components/verdocs-envelope-sidebar.js

@@ -0,0 +1,242 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { g as getEnvelopeById, s as state } from './Envelopes.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$2 } from './verdocs-dropdown2.js';
+import { f as format } from './index2.js';
+
+const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .buttons{-ms-flex-direction:column;flex-direction:column;-ms-flex:0 0 56px;flex:0 0 56px;display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .buttons button svg{color:white;width:24px;height:24px}verdocs-envelope-sidebar .content{-ms-flex:1;flex:1;display:none;color:white;-ms-flex-direction:column;flex-direction:column;padding:12px 16px 16px}verdocs-envelope-sidebar.open .content{display:-ms-flexbox;display:flex}verdocs-envelope-sidebar .title{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .recipient-detail{-ms-flex:0;flex:0;padding:8px;position:relative;-ms-flex-direction:column;flex-direction:column;border:solid 1px #979797;margin-bottom:16px}verdocs-envelope-sidebar .recipient-header{-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;place-content:center space-between;-ms-flex-align:center;align-items:center;margin-bottom:4px}verdocs-envelope-sidebar .recipient-number{width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:24px;font-size:14px;font-weight:500;margin-right:10px;border:solid 1px #979797}verdocs-envelope-sidebar .recipient-type{-ms-flex:1 1 88px;flex:1 1 88px;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:88px;min-width:88px;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 100px;flex:1 1 100px;border-radius:5px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100px;min-width:100px;background-color:#616161;text-transform:capitalize}verdocs-envelope-sidebar .recipient-status.invited{background-color:#ff8f00}verdocs-envelope-sidebar .recipient-status.opened{background-color:#616161}verdocs-envelope-sidebar .recipient-status.signed,verdocs-envelope-sidebar .recipient-status.submitted{background-color:#2e7d32}verdocs-envelope-sidebar .recipient-status.pending{background-color:#0277bd}verdocs-envelope-sidebar .recipient-status.canceled,verdocs-envelope-sidebar .recipient-status.declined{background-color:#c62828}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
+
+const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;
+const Users = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>`;
+const ClipboardDocuments = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
+// https://materialui.co/icon/verified-user and https://heroicons.com/
+const ActivityIcons = {
+  visibility: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" /><path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" /></svg>`,
+  pencil: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z" /></svg>`,
+  mail: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>`,
+  done: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path fill-rule="evenodd" d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z" clip-rule="evenodd" /></svg>`,
+  send: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>`,
+  gesture: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M4.59 6.89c.7-.71 1.4-1.35 1.71-1.22.5.2 0 1.03-.3 1.52-.25.42-2.86 3.89-2.86 6.31 0 1.28.48 2.34 1.34 2.98.75.56 1.74.73 2.64.46 1.07-.31 1.95-1.4 3.06-2.77 1.21-1.49 2.83-3.44 4.08-3.44 1.63 0 1.65 1.01 1.76 1.79-3.78.64-5.38 3.67-5.38 5.37 0 1.7 1.44 3.09 3.21 3.09 1.63 0 4.29-1.33 4.69-6.1H21v-2.5h-2.47c-.15-1.65-1.09-4.2-4.03-4.2-2.25 0-4.18 1.91-4.94 2.84-.58.73-2.06 2.48-2.29 2.72-.25.3-.68.84-1.11.84-.45 0-.72-.83-.36-1.92.35-1.09 1.4-2.86 1.85-3.52.78-1.14 1.3-1.92 1.3-3.28C8.95 3.69 7.31 3 6.44 3 5.12 3 3.97 4 3.72 4.25c-.36.36-.66.66-.88.93l1.75 1.71zm9.29 11.66c-.31 0-.74-.26-.74-.72 0-.6.73-2.2 2.87-2.76-.3 2.69-1.43 3.48-2.13 3.48z"/></svg>`,
+  clear: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>`,
+  check_circle: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`,
+  link: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>`,
+  cancel: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>`,
+  done_all: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>`,
+  create: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>`,
+  perm_identity: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>`,
+  people: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>`,
+  contact_email: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M21 8V7l-3 2-3-2v1l3 2 3-2zm1-5H2C.9 3 0 3.9 0 5v14c0 1.1.9 2 2 2h20c1.1 0 1.99-.9 1.99-2L24 5c0-1.1-.9-2-2-2zM8 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H2v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1zm8-6h-8V6h8v6z"/></svg>`,
+  textsms: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z"/></svg>`,
+  verified_user: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path fill-rule="evenodd" d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" /></svg>`,
+  account_circle: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>`,
+};
+const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.envelopeId = '';
+    this.activeTab = 1;
+    this.panelOpen = false;
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
+  // TODO: Handling signing vs preview-as-user cases
+  // TODO: Handle anonymous case and failure to load due to not being logged in
+  async componentDidLoad() {
+    var _a, _b, _c;
+    if (!this.envelopeId) {
+      console.error(`[SIDEBAR] Missing required envelopeId`);
+      return;
+    }
+    try {
+      await getEnvelopeById(this.endpoint, this.envelopeId);
+    }
+    catch (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));
+    }
+  }
+  setTab(tab) {
+    this.panelOpen = tab !== this.activeTab || !this.panelOpen;
+    this.activeTab = tab;
+  }
+  // TODO: Refactor to a common library?
+  canResendRecipient(recipient) {
+    return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
+      !['complete', 'declined', 'canceled'].includes(state.envelope.status));
+  }
+  canModifyRecipient(recipient) {
+    return (!recipient.claimed && //
+      !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
+      !['complete', 'declined', 'canceled'].includes(state.envelope.status));
+  }
+  handleRecipientAction(recipient, id) {
+    console.log('recipient action', id, recipient);
+  }
+  prepareHistoryEntries() {
+    const entries = [];
+    const histories = state.envelope.histories || [];
+    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(state.envelope.created_at) });
+    if (state.envelope.status === 'complete') {
+      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(state.envelope.updated_at) });
+    }
+    const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
+    if (state.envelope.status === 'canceled' && !ownerCanceled) {
+      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(state.envelope.canceled_at) });
+    }
+    histories.forEach(history => {
+      const user = state.envelope.recipients.find(recipient => recipient.role_name === history.role_name);
+      const name = (user === null || user === void 0 ? void 0 : user.full_name) || '';
+      switch (history.event.toLowerCase()) {
+        case 'recipient:signed':
+          entries.push({ icon: 'gesture', message: `Signed by ${name}.`, date: new Date(history.created_at) });
+          break;
+        case 'recipient:declined':
+          entries.push({ icon: 'clear', message: `Declined by ${name}.`, date: new Date(history.created_at) });
+          break;
+        case 'recipient:opened':
+          switch (history.event_detail) {
+            // TODO: Sync these up with reality
+            case 'email':
+            case 'mail':
+              entries.push({ icon: 'visibility', message: `Opened by ${name}, via email.`, date: new Date(history.created_at) });
+              break;
+            case 'sms':
+              entries.push({ icon: 'visibility', message: `Opened by ${name}, via SMS.`, date: new Date(history.created_at) });
+              break;
+            case 'in_person_link':
+              entries.push({ icon: 'visibility', message: `Opened by ${name}, via In-person link.`, date: new Date(history.created_at) });
+              break;
+            case 'in_app':
+              entries.push({ icon: 'visibility', message: `Opened by ${name}, via dashboard.`, date: new Date(history.created_at) });
+              break;
+            default:
+              entries.push({ icon: 'visibility', message: `Opened by ${name}.`, date: new Date(history.created_at) });
+          }
+          break;
+        case 'recipient:submitted':
+          switch (history.event_detail) {
+            // TODO: Sync up
+            case 'approver':
+              entries.push({ icon: 'check_circle', message: `Approved by ${name}.`, date: new Date(history.created_at) });
+              break;
+            default:
+              entries.push({ icon: 'send', message: `Submitted by ${name}.`, date: new Date(history.created_at) });
+              break;
+          }
+          break;
+        case 'recipient:prepared':
+          entries.push({ icon: 'send', message: `Prepared by ${name}.`, date: new Date(history.created_at) });
+          break;
+        case 'recipient:claimed':
+          if (history.event_detail === 'guest') {
+            entries.push({ icon: 'account_circle', message: `${name} claimed the Verdoc as a guest.`, date: new Date(history.created_at) });
+          }
+          else if (history.event_detail === 'profile') {
+            entries.push({ icon: 'verified_user', message: `${name} claimed the Verdoc as a verified user.`, date: new Date(history.created_at) });
+          }
+          break;
+        case 'recipient:agreed':
+          entries.push({ icon: 'done', message: `${name} agreed to use electronic records and signatures.`, date: new Date(history.created_at) });
+          break;
+        case 'recipient:invited':
+          if (history.event_detail === 'sms') {
+            entries.push({ icon: 'textsms', message: `${name} has been invited via SMS.`, date: new Date(history.created_at) });
+          }
+          else {
+            entries.push({ icon: 'mail', message: `${name} has been invited via email.`, date: new Date(history.created_at) });
+          }
+          break;
+        case 'invitation:resent':
+          entries.push({
+            icon: 'mail',
+            message: `Invitation was resent to ${name} ${history.event_detail === 'reminder' ? ' by reminder' : ''}.`,
+            date: new Date(history.created_at),
+          });
+          break;
+        case 'envelope:cc':
+          entries.push({ icon: 'contact_mail', message: `A copy has been sent to ${name}.`, date: new Date(history.created_at) });
+          break;
+        case 'recipient:delegated':
+          entries.push({ icon: 'people', message: history.event_detail, date: new Date(history.created_at) });
+          break;
+        case 'recipient:updated_info':
+          entries.push({ icon: 'perm_identity', message: history.event_detail, date: new Date(history.created_at) });
+          break;
+        case 'owner:updated_recipient_info':
+          entries.push({ icon: 'perm_identity', message: history.event_detail, date: new Date(history.created_at) });
+          break;
+        case 'created':
+          entries.push({ icon: 'create', message: `Envelope was created.`, date: new Date(history.created_at) });
+          break;
+        case 'completed':
+          entries.push({ icon: 'done_all', message: `Envelope was completed.`, date: new Date(history.created_at) });
+          break;
+        case 'canceled':
+        case 'owner:canceled':
+          entries.push({ icon: 'cancel', message: `Envelope was canceled by the creator.`, date: new Date(history.created_at) });
+          break;
+        case 'owner:get_in_person_link':
+          entries.push({ icon: 'link', message: `Owner accessed the In-person link for ${user}.`, date: new Date(history.created_at) });
+          break;
+        default:
+          console.log('unknown', history);
+          break;
+      }
+    });
+    entries.sort((a, b) => b.date.getTime() - a.date.getTime());
+    return entries;
+  }
+  render() {
+    var _a, _b, _c;
+    if (!state.envelope) {
+      return h(Host, null);
+    }
+    const session = this.endpoint.getSession();
+    const isEnvelopeOwner = session.profile_id === state.envelope.profile_id; // TODO: What about org admins?
+    const historyEntries = this.prepareHistoryEntries();
+    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "buttons" }, h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (h("div", { class: "content" }, h("div", { class: "title" }, "Details"), h("div", { class: "label" }, "Envelope ID"), h("div", { class: "value" }, state.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(state.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(state.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, state.envelope.status), h("div", { class: "label" }, "Verdoc Owner UUID"), h("div", { class: "value" }, state.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = state.envelope.profile) === null || _a === void 0 ? void 0 :
+      _a.first_name, " ", (_b = state.envelope.profile) === null || _b === void 0 ? void 0 :
+      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = state.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), state.envelope.recipients.map((recipient, index) => (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
+        { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },
+        { id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient) },
+        { id: 'inperson', label: 'Get In-Person Link', disabled: !this.canModifyRecipient(recipient) || !['invited', 'opened'].includes(recipient.status) },
+        // TODO: Details dialog
+        // {id:'details',label: 'View Details'},
+      ] }))), h("dic", { class: "recipient-content" }, h("div", { class: "recipient-name" }, recipient.full_name), h("div", { class: "recipient-name" }, recipient.email), h("div", { class: "recipient-name" }, recipient.phone))))))), this.activeTab === 3 && (h("div", { class: "content" }, h("div", { class: "title" }, "History"), historyEntries.map(entry => (h("div", { class: "history-entry" }, h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), h("div", { class: "activity-details" }, h("div", { class: "activity-text" }, entry.message), h("div", { class: "activity-date" }, format(entry.date, 'PP pp'))))))))));
+  }
+  static get style() { return verdocsEnvelopeSidebarCss; }
+}, [0, "verdocs-envelope-sidebar", {
+    "endpoint": [16],
+    "envelopeId": [1, "envelope-id"],
+    "activeTab": [32],
+    "panelOpen": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-envelope-sidebar", "verdocs-dropdown"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-envelope-sidebar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsEnvelopeSidebar$1);
+      }
+      break;
+    case "verdocs-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsEnvelopeSidebar = VerdocsEnvelopeSidebar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsEnvelopeSidebar, defineCustomElement };

package/dist/components/verdocs-search-activity2.js

@@ -25,7 +25,7 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        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]) {

package/dist/components/verdocs-sign.js

@@ -1,10 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { b as getSigningSession, s as savePDF, u as updateDocumentFieldValue, c as updateEnvelopeField, d as updateEnvelopeFieldSignature, e as updateEnvelopeFieldInitials, a as getRoleIndex, r as renderDocumentField, f as getFieldId } from './utils.js';
+import { g as getSigningSession, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes2.js';
 import './Types.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials } from './Primitives.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { g as getEnvelopeById, s as state, d as defineCustomElement$2 } from './verdocs-view2.js';
+import { s as savePDF, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils.js';
+import { g as getEnvelopeById, s as state } from './Envelopes.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -12,6 +13,7 @@ import { d as defineCustomElement$6 } from './verdocs-document-page2.js';
 import { d as defineCustomElement$5 } from './verdocs-dropdown2.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); }); }
@@ -28,7 +30,7 @@ var __generator = (undefined && undefined.__generator) || function (thisArg, bod
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        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]) {

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

@@ -3,7 +3,7 @@ import { i as interact } from './interact.min.js';
 import './Types.js';
 import { g as getRGBA } from './Colors.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { r as renderDocumentField, a as getRoleIndex, h as updateCssTransform } from './utils.js';
+import { r as renderDocumentField, a as getRoleIndex, c as updateCssTransform } from './utils.js';
 import { s as state } from './templateStore.js';
 import { l as loadTemplate } from './Templates.js';
 import { S as SDKError } from './errors.js';

package/dist/components/verdocs-view2.js

@@ -1,78 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { i as getEnvelope, s as savePDF } from './utils.js';
-import { c as createStore } from './index3.js';
-import { g as getTemplate } from './Templates2.js';
+import { g as getEnvelopeById, s as state } from './Envelopes.js';
 import { S as SDKError } from './errors.js';
+import { s as savePDF } from './utils.js';
 import { d as defineCustomElement$3 } from './verdocs-document-page2.js';
 import { d as defineCustomElement$2 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$1 } from './verdocs-loader2.js';
 
-// NOTE: Do not attempt to convert this to a named-export module. It triggers compilation issues in Rollup that I spent days trying to
-const { state, onChange } = createStore({
-  envelope: null,
-  template: null,
-  loadProgress: 0,
-  loading: true,
-  error: '',
-  roleNames: [],
-  dirty: false,
-});
-onChange('envelope', async (newEnvelope) => {
-  if (!newEnvelope) {
-    console.log('[ENVELOPESTORE] Clearing envelope');
-    state.roleNames = [];
-    state.dirty = false;
-    state.loading = false;
-    state.error = '';
-    state.loadProgress = 0;
-    return;
-  }
-  console.log('[ENVELOPESTORE] Loaded envelope', newEnvelope);
-  state.roleNames = newEnvelope.recipients.map(recipient => recipient.role_name);
-  console.log('[ENVELOPESTORE] Loaded roles', state.roleNames);
-});
-
-// Allows envelope data to be cached for reuse between components, without parent components having to prop-drill entire envelopes into
-// child elements.
-const getEnvelopeById = async (endpoint, envelopeId) => {
-  var _a, _b;
-  if (!envelopeId) {
-    console.log(`[ENVELOPES] Missing required envelope ID`);
-    return;
-  }
-  if (((_a = state.envelope) === null || _a === void 0 ? void 0 : _a.id) === envelopeId) {
-    console.log(`[ENVELOPES] Skipping load for already-loaded envelope ID`);
-    return;
-  }
-  state.error = '';
-  state.loading = true;
-  state.envelope = null;
-  try {
-    console.log(`[ENVELOPES] Loading envelope ${envelopeId}`);
-    const envelope = await getEnvelope(endpoint, envelopeId, true);
-    if (!envelope) {
-      console.log('[ENVELOPES] Unable to load envelope');
-      return;
-    }
-    state.envelope = envelope;
-    const template = await getTemplate(endpoint, envelope.template_id, true);
-    if (!envelope) {
-      console.log('[ENVELOPES] Unable to load template');
-      return;
-    }
-    state.template = template;
-    state.loading = false;
-  }
-  catch (e) {
-    state.loading = false;
-    state.error = ((_b = e === null || e === void 0 ? void 0 : e.response) === null || _b === void 0 ? void 0 : _b.status) === 401 ? 'Authentication required' : e.message;
-    console.log('[ENVELOPES] Error loading envelope', e);
-    throw e;
-  }
-};
-
 const verdocsViewCss = "verdocs-view{display:-ms-flexbox;display:flex;overflow:hidden;position:relative;min-height:600px;-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 .header{color:#fff;display:-ms-flexbox;display:flex;z-index:1000;-ms-flex:0 0 56px;flex:0 0 56px;padding:0 15px;font-size:12px;-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 .logo{width:80px;display:none;margin:-6px 0 0 10px}verdocs-view .header .title{padding-left:16px;font-size:18px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}verdocs-view .document{-ms-flex:1;flex:1;height:100%;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;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;-ms-flex-pack:center;justify-content:center}verdocs-view .document .inner{width:100%;max-width:1028px}";
 
 const menuOptions = [
@@ -192,4 +127,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { VerdocsView as V, defineCustomElement as d, getEnvelopeById as g, state as s };
+export { VerdocsView as V, defineCustomElement as d };

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-01-31T16:52:38",
+  "timestamp": "2023-01-31T22:37:07",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.20.0",
@@ -919,11 +919,15 @@
       "slots": [],
       "parts": [],
       "dependents": [
+        "verdocs-envelope-sidebar",
         "verdocs-sign",
         "verdocs-view"
       ],
       "dependencies": [],
       "dependencyGraph": {
+        "verdocs-envelope-sidebar": [
+          "verdocs-dropdown"
+        ],
         "verdocs-sign": [
           "verdocs-dropdown"
         ],
@@ -932,6 +936,74 @@
         ]
       }
     },
+    {
+      "filePath": "./src/components/elements/verdocs-envelope-sidebar/verdocs-envelope-sidebar.tsx",
+      "encapsulation": "none",
+      "tag": "verdocs-envelope-sidebar",
+      "docs": "Displays a file upload mechanism suitable for the first step of creating a template.\nThis is typically the first step in a template creation workflow.",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "endpoint",
+          "type": "VerdocsEndpoint",
+          "mutable": false,
+          "reflectToAttr": false,
+          "docs": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.",
+          "docsTags": [],
+          "default": "VerdocsEndpoint.getDefault()",
+          "values": [
+            {
+              "type": "VerdocsEndpoint"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "envelopeId",
+          "type": "string",
+          "mutable": false,
+          "attr": "envelope-id",
+          "reflectToAttr": false,
+          "docs": "The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored.",
+          "docsTags": [],
+          "default": "''",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "sdkError",
+          "detail": "SDKError",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "verdocs-dropdown"
+      ],
+      "dependencyGraph": {
+        "verdocs-envelope-sidebar": [
+          "verdocs-dropdown"
+        ]
+      }
+    },
     {
       "filePath": "./src/components/elements/verdocs-field-attachment/verdocs-field-attachment.tsx",
       "encapsulation": "none",

package/dist/esm/Envelopes-130fd6ea.js

@@ -0,0 +1,111 @@
+import { d as decodeAccessTokenBody } from './Token-54690789.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 };
+    }
+};
+/**
+ * Get a signing session for an Envelope.
+ */
+var getSigningSession = function (endpoint, params) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .get("/envelopes/".concat(params.envelopeId, "/recipients/").concat(encodeURIComponent(params.roleId), "/invitation/").concat(params.inviteCode))
+                .then(function (r) {
+                var _a;
+                // Avoiding a jsonwebtoken dependency here - we don't actually need the whole library
+                var signerToken = ((_a = r.headers) === null || _a === void 0 ? void 0 : _a.signer_token) || '';
+                var session = decodeAccessTokenBody(signerToken);
+                endpoint.setToken(signerToken);
+                return { recipient: r.data, session: session, signerToken: signerToken };
+            })];
+    });
+}); };
+/**
+ * Get all metadata for an Envelope.
+ */
+var getEnvelope = function (endpoint, envelopeId, ssr) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .get("/envelopes/".concat(envelopeId) + (ssr ? '?ssr=true' : ''))
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Get (binary download) a file attached to an Envelope. It is important to use this method
+ * rather than a direct A HREF or similar link to set the authorization headers for the
+ * request.
+ */
+var getEnvelopeFile = function (endpoint, envelopeId, documentId) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .get("/envelopes/".concat(envelopeId, "/envelope_documents/").concat(documentId, "?file=true"), { responseType: 'blob' })
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Update a Document field. Typically called during the signing process as a Recipient fills in fields.
+ */
+var updateEnvelopeField = function (endpoint, envelopeId, fieldName, value) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .put("/envelopes/".concat(envelopeId, "/fields/").concat(fieldName), value)
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Update a Document signature field. Signature fields are ID-driven. Call `Document.createSignature()` first to create a
+ * signature for a Recipient, then call `Documents.updateDocumentFieldSignature()` to attach it to a field.
+ */
+var updateEnvelopeFieldSignature = function (endpoint, envelopeId, fieldName, signatureId) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .put("/envelopes/".concat(envelopeId, "/fields/").concat(fieldName, "/signature/").concat(signatureId))
+                .then(function (r) { return r.data; })];
+    });
+}); };
+/**
+ * Update a Document signature field. Signature fields are ID-driven. Call `Document.createSignature()` first to create a
+ * signature for a Recipient, then call `Documents.updateDocumentFieldSignature()` to attach it to a field.
+ */
+var updateEnvelopeFieldInitials = function (endpoint, envelopeId, fieldName, initialId) { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        return [2 /*return*/, endpoint.api //
+                .put("/envelopes/".concat(envelopeId, "/fields/").concat(fieldName, "/initial/").concat(initialId))
+                .then(function (r) { return r.data; })];
+    });
+}); };
+
+export { getEnvelopeFile as a, getSigningSession as b, updateEnvelopeFieldSignature as c, updateEnvelopeFieldInitials as d, getEnvelope as g, updateEnvelopeField as u };

package/dist/esm/{Envelopes-779de57c.js → Envelopes-6982dfc6.js}

@@ -1,4 +1,4 @@
-import { h as getEnvelope } from './utils-06d58b15.js';
+import { g as getEnvelope } from './Envelopes-130fd6ea.js';
 import { c as createStore } from './index-fd7b8a34.js';
 import { g as getTemplate } from './Templates-0638b1e4.js';