@verdocs/web-sdk 1.9.38 → 1.10.0

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

@@ -0,0 +1,299 @@
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { getEnvelopeById } from '../../../utils/Envelopes';
+import EnvelopeStore from '../../../utils/envelopeStore';
+import { SDKError } from '../../../utils/errors';
+import { format } from 'date-fns';
+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>`,
+};
+/**
+ * Displays a file upload mechanism suitable for the first step of creating a template.
+ * This is typically the first step in a template creation workflow.
+ */
+export class VerdocsEnvelopeSidebar {
+  constructor() {
+    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(EnvelopeStore.envelope.status));
+  }
+  canModifyRecipient(recipient) {
+    return (!recipient.claimed && //
+      !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
+      !['complete', 'declined', 'canceled'].includes(EnvelopeStore.envelope.status));
+  }
+  handleRecipientAction(recipient, id) {
+    console.log('recipient action', id, recipient);
+    switch (id) {
+      case 'reminder':
+      case 'modify':
+      case 'inperson':
+      case 'details':
+        break;
+    }
+  }
+  prepareHistoryEntries() {
+    const entries = [];
+    const histories = EnvelopeStore.envelope.histories || [];
+    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(EnvelopeStore.envelope.created_at) });
+    if (EnvelopeStore.envelope.status === 'complete') {
+      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(EnvelopeStore.envelope.updated_at) });
+    }
+    const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
+    if (EnvelopeStore.envelope.status === 'canceled' && !ownerCanceled) {
+      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(EnvelopeStore.envelope.canceled_at) });
+    }
+    histories.forEach(history => {
+      const user = EnvelopeStore.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 (!EnvelopeStore.envelope) {
+      return h(Host, null);
+    }
+    const session = this.endpoint.getSession();
+    const isEnvelopeOwner = session.profile_id === EnvelopeStore.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" }, EnvelopeStore.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(EnvelopeStore.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, EnvelopeStore.envelope.status), h("div", { class: "label" }, "Verdoc Owner UUID"), h("div", { class: "value" }, EnvelopeStore.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = EnvelopeStore.envelope.profile) === null || _a === void 0 ? void 0 :
+      _a.first_name, " ", (_b = EnvelopeStore.envelope.profile) === null || _b === void 0 ? void 0 :
+      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = EnvelopeStore.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), EnvelopeStore.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 is() { return "verdocs-envelope-sidebar"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-envelope-sidebar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-envelope-sidebar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
+      "envelopeId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The envelope ID to render. Set ONE OF templateId or envelopeId. If both are set, envelopeId will be ignored."
+        },
+        "attribute": "envelope-id",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "activeTab": {},
+      "panelOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "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."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/elements/verdocs-envelope-sidebar/verdocs-envelope-sidebar.stories.js

@@ -0,0 +1,12 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Elements/Envelope Sidebar',
+  component: 'verdocs-envelope-sidebar',
+  args: {
+    envelopeId: 'f0fa431d-e3eb-4fd7-b30e-6d95e2e87b38',
+  },
+  argTypes: {
+    envelopeId: { name: 'envelopeId' },
+  },
+};
+export const EnvelopeSidebar = ({ envelopeId }) => html `<verdocs-envelope-sidebar .envelopeId=${envelopeId} />`;

package/dist/collection/components/elements/verdocs-field-radio-button-group/verdocs-field-radio-button.css

@@ -1,7 +1,7 @@
 verdocs-field-radio-button {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   display: block;
   font-size: 11px;
   position: relative;

package/dist/collection/components/elements/verdocs-field-textbox/verdocs-field-textbox.css

@@ -8,6 +8,7 @@ verdocs-field-textbox {
   letter-spacing: -0.2px;
   background-color: transparent;
   transform-origin: bottom left;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
 verdocs-field-textbox.disabled {
   opacity: 0.5;
@@ -21,9 +22,7 @@ verdocs-field-textbox input {
   transform-origin: 0 0;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.87);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-verdocs-field-textbox input:focus {
+  border: none;
   outline: none;
 }
 verdocs-field-textbox input.hide {

package/dist/collection/components/elements/verdocs-template-create/verdocs-template-create.js

@@ -1,5 +1,5 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { createTemplateDocument } from '@verdocs/js-sdk/Templates/TemplateDocuments';
 import { createTemplate, getTemplate } from '@verdocs/js-sdk/Templates/Templates';
 import { SDKError } from '../../../utils/errors';
@@ -15,7 +15,9 @@ export class VerdocsTemplateCreate {
     this.endpoint = VerdocsEndpoint.getDefault();
     this.file = undefined;
   }
-  componentWillLoad() { }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+  }
   handleFileChanged(e) {
     var _a;
     console.log('files', e.target.files);
@@ -60,6 +62,9 @@ export class VerdocsTemplateCreate {
     }
   }
   render() {
+    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) }), h("div", { class: "upload-box" }, h("div", null, h("span", { innerHTML: FileIcon })), h("div", { style: { marginTop: '20px', fontSize: '20px', fontWeight: 'bold' } }, "Drag a file here"), h("div", { style: { marginTop: '20px', marginBottom: '20px', fontSize: '16px' } }, "Or, if you prefer..."), h("verdocs-button", { label: "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) }), h("verdocs-button", { label: "Next", size: "small", onClick: e => this.handleSubmit(e), disabled: !this.file }))));
   }
   static get is() { return "verdocs-template-create"; }

package/dist/collection/components/elements/verdocs-template-fields/verdocs-template-fields.css

@@ -1,5 +1,6 @@
 verdocs-template-fields {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+  position: relative;
 }
 verdocs-template-fields .page-0 {
   padding: 65px 15px 0 15px;
@@ -21,47 +22,6 @@ verdocs-template-fields .page-0 .user-placed-fields .title {
   position: absolute;
   background: #46497d;
 }
-verdocs-template-fields .fields-bar {
-  height: 50px;
-  display: flex;
-  z-index: 10000;
-  position: fixed;
-  padding: 5px 20px;
-  line-height: 28px;
-  align-items: center;
-  flex-direction: row;
-  box-sizing: border-box;
-  background: #46497d;
-}
-verdocs-template-fields .fields-bar .label {
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: bold;
-  margin-right: 8px;
-}
-verdocs-template-fields .fields-bar .icon {
-  margin: 0 4px;
-  display: flex;
-  transform: scale(0.8, 0.8);
-}
-verdocs-template-fields .fields-bar .icon svg {
-  fill: #ffffff;
-}
-verdocs-template-fields .fields-bar .operation {
-  border: none;
-  outline: none;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 16px;
-  margin-left: 10px;
-  background: transparent;
-  text-transform: uppercase;
-}
-verdocs-template-fields .fields-bar .operation:disabled {
-  color: #cccccc;
-  cursor: inherit;
-  pointer-events: none;
-}
 verdocs-template-fields .pages {
   display: flex;
   padding: 15px;
@@ -75,4 +35,37 @@ verdocs-template-fields .pages {
 verdocs-template-fields .pages div,
 verdocs-template-fields .pages canvas {
   box-sizing: border-box;
+}
+verdocs-template-fields.placing-attachment {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-checkbox {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-date {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-dropdown {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-initial {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-payment {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-radio {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-signature {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-textarea {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-textbox {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z'/%3E%3C/svg%3E") 16 16, pointer;
+}
+verdocs-template-fields.placing-timestamp {
+  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
 }