@verdocs/web-sdk 2.3.88 → 4.0.5

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

@@ -1,11 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as cancelEnvelope } from './Envelopes.js';
-import { u as userIsEnvelopeOwner } from './Permissions.js';
-import { r as resendInvitation } from './Recipients.js';
-import './Types.js';
-import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { VerdocsEndpoint, resendInvitation, cancelEnvelope, userIsEnvelopeOwner } from '@verdocs/js-sdk';
 import { g as getEnvelopeStore } from './EnvelopeStore.js';
-import { F as FORMAT_TIMESTAMP } from './Types2.js';
+import { a as FORMAT_TIMESTAMP } from './Types.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$6 } from './verdocs-button2.js';
@@ -13,336 +9,337 @@ import { d as defineCustomElement$5 } from './verdocs-dropdown2.js';
 import { d as defineCustomElement$4 } from './verdocs-envelope-recipient-link2.js';
 import { d as defineCustomElement$3 } from './verdocs-envelope-recipient-summary2.js';
 import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.js';
-import { f as format } from './index2.js';
+import { d as dateFns } from './index4.js';
 
 const verdocsEnvelopeSidebarCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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;max-width:100%;width:400px}@media screen and (max-width: 500px){verdocs-envelope-sidebar.open{-ms-flex:0 0 300px;flex:0 0 300px;width:300px}}verdocs-envelope-sidebar .side-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 .side-buttons button{height:50px;outline:none;border:none;border-left:2px solid transparent;background:none;width:100%}verdocs-envelope-sidebar .side-buttons button.active{border-left:2px solid #50bd80}verdocs-envelope-sidebar .side-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;overflow-y:scroll}verdocs-envelope-sidebar verdocs-ok-dialog .content{color:black}verdocs-envelope-sidebar .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400}verdocs-envelope-sidebar .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap;width:100%;margin:0 0 10px 0}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}verdocs-envelope-sidebar .manage-recipients-button button{width:100%}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;font-size:14px;padding:3px 0}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}@media screen and (max-width: 500px){verdocs-envelope-sidebar .recipient-status{-ms-flex:1 1 60px;flex:1 1 60px;max-width:60px;min-width:60px}}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .recipient-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}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 VerdocsEnvelopeSidebarStyle0 = verdocsEnvelopeSidebarCss;
 
 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>`,
-  contact_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>`,
+    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>`,
+    contact_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.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
-    this.toggle = createEvent(this, "toggle", 7);
-    this.another = createEvent(this, "another", 7);
-    this.store = null;
-    this.endpoint = VerdocsEndpoint.getDefault();
-    this.envelopeId = '';
-    this.activeTab = 1;
-    this.panelOpen = false;
-    this.showManageDialog = false;
-    this.showRecipientDialog = '';
-    this.showCancelDialog = false;
-    this.loading = true;
-  }
-  async componentWillLoad() {
-    var _a, _b, _c;
-    try {
-      this.endpoint.loadSession();
-      if (!this.envelopeId) {
-        console.log(`[SIDEBAR] Missing required envelope ID ${this.envelopeId}`);
-        return;
-      }
-      if (!this.endpoint.session) {
-        console.log('[SIDEBAR] Unable to start session, must be authenticated');
-        return;
-      }
-      this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-      this.sortEnvelopeRecipients();
-      this.loading = false;
+const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsEnvelopeSidebar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.sdkError = createEvent(this, "sdkError", 7);
+        this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
+        this.toggle = createEvent(this, "toggle", 7);
+        this.another = createEvent(this, "another", 7);
+        this.store = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
+        this.envelopeId = '';
+        this.activeTab = 1;
+        this.panelOpen = false;
+        this.showManageDialog = false;
+        this.showRecipientDialog = '';
+        this.showCancelDialog = false;
+        this.loading = true;
     }
-    catch (e) {
-      console.log('[SIDEBAR] Error loading envelope', 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));
+    async componentWillLoad() {
+        var _a, _b, _c;
+        try {
+            this.endpoint.loadSession();
+            if (!this.envelopeId) {
+                console.log(`[SIDEBAR] Missing required envelope ID ${this.envelopeId}`);
+                return;
+            }
+            if (!this.endpoint.session) {
+                console.log('[SIDEBAR] Unable to start session, must be authenticated');
+                return;
+            }
+            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
+            this.sortEnvelopeRecipients();
+            this.loading = false;
+        }
+        catch (e) {
+            console.log('[SIDEBAR] Error loading envelope', 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));
+        }
     }
-  }
-  sortEnvelopeRecipients() {
-    var _a, _b;
-    (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients.sort((a, b) => {
-      return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
-    });
-  }
-  setTab(tab) {
-    var _a;
-    this.panelOpen = tab !== this.activeTab || !this.panelOpen;
-    (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ open: this.panelOpen });
-    this.activeTab = tab;
-  }
-  // TODO: Refactor to a common library?
-  canResendRecipient(recipient) {
-    var _a, _b;
-    return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
-      !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
-  }
-  handleRecipientAction(recipient, id) {
-    var _a, _b;
-    console.log('[SIDEBAR] Recipient action', id, recipient);
-    switch (id) {
-      case 'reminder':
-        resendInvitation(this.endpoint, this.envelopeId, recipient.role_name)
-          .then(() => {
-          VerdocsToast('Reminder Sent', { style: 'success' });
-        })
-          .catch(e => {
-          console.log('[SIDEBAR] Error resending invitation', e);
-          VerdocsToast('Error resending invitation: ' + e.message, { style: 'error' });
+    sortEnvelopeRecipients() {
+        var _a, _b;
+        (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.recipients.sort((a, b) => {
+            return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
         });
-        break;
-      case 'inperson':
-        this.showRecipientDialog = recipient.role_name;
-        break;
-      case 'modify':
-        VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
-        break;
-      case 'details':
-        VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
-        break;
     }
-    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: id });
-  }
-  cancelEnvelope() {
-    this.loading = true;
-    cancelEnvelope(this.endpoint, this.envelopeId)
-      .then(async (r) => {
-      var _a, _b;
-      console.log('[SIDEBAR] Envelope canceled', r);
-      VerdocsToast('Envelope canceled', { style: 'success' });
-      this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
-      this.sortEnvelopeRecipients();
-      this.loading = false;
-      (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'canceled' });
-    })
-      .catch(e => {
-      console.log('[SIDEBAR] Error canceling envelope', e);
-      this.loading = false;
-      VerdocsToast('Error canceling envelope: ' + e.message, { style: 'error' });
-    });
-  }
-  prepareHistoryEntries() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const entries = [];
-    const histories = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.histories) || [];
-    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.created_at) });
-    if (((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.status) === 'complete') {
-      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.updated_at) });
+    setTab(tab) {
+        var _a;
+        this.panelOpen = tab !== this.activeTab || !this.panelOpen;
+        (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ open: this.panelOpen });
+        this.activeTab = tab;
     }
-    const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
-    if (((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.status) === 'canceled' && !ownerCanceled) {
-      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.canceled_at) });
+    // TODO: Refactor to a common library?
+    canResendRecipient(recipient) {
+        var _a, _b;
+        return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
+            !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
     }
-    histories.forEach(history => {
-      var _a;
-      const user = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.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('[SIDEBAR] Unknown history type', history);
-          break;
-      }
-    });
-    entries.sort((a, b) => b.date.getTime() - a.date.getTime());
-    return entries;
-  }
-  // canModify(recipient: IRecipient) {
-  //   const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
-  //   const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
-  //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.store?.state?.status) === -1;
-  // }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    if (!this.store.state) {
-      return h(Host, null);
+    handleRecipientAction(recipient, id) {
+        var _a, _b;
+        console.log('[SIDEBAR] Recipient action', id, recipient);
+        switch (id) {
+            case 'reminder':
+                resendInvitation(this.endpoint, this.envelopeId, recipient.role_name)
+                    .then(() => {
+                    VerdocsToast('Reminder Sent', { style: 'success' });
+                })
+                    .catch(e => {
+                    console.log('[SIDEBAR] Error resending invitation', e);
+                    VerdocsToast('Error resending invitation: ' + e.message, { style: 'error' });
+                });
+                break;
+            case 'inperson':
+                this.showRecipientDialog = recipient.role_name;
+                break;
+            case 'modify':
+                VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
+                break;
+            case 'details':
+                VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
+                break;
+        }
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: id });
     }
-    const session = this.endpoint.getSession();
-    const isEnvelopeOwner = userIsEnvelopeOwner(session, this.store.state);
-    const historyEntries = this.prepareHistoryEntries();
-    const functionsDisabled = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status) !== 'pending' && ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.status) !== 'in progress';
-    return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-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" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, (_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, (_p = (_o = this.store) === null || _o === void 0 ? void 0 : _o.state) === null || _p === void 0 ? void 0 : _p.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_s = (_r = (_q = this.store) === null || _q === void 0 ? void 0 : _q.state) === null || _r === void 0 ? void 0 : _r.profile) === null || _s === void 0 ? void 0 :
-      _s.first_name, " ", (_v = (_u = (_t = this.store) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.profile) === null || _v === void 0 ? void 0 :
-      _v.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_y = (_x = (_w = this.store) === null || _w === void 0 ? void 0 : _w.state) === null || _x === void 0 ? void 0 : _x.profile) === null || _y === void 0 ? void 0 : _y.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_0 = (_z = this.store) === null || _z === void 0 ? void 0 : _z.state) === null || _0 === void 0 ? void 0 :
-      _0.recipients.map((recipient, index) => {
-        const canGetInPersonLink = recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
-        const canSendReminder = this.canResendRecipient(recipient);
-        return (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.role_name), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && !functionsDisabled && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
-            { id: 'reminder', label: 'Send Reminder', disabled: !canSendReminder },
-            { id: 'inperson', label: 'Get In-Person Link', disabled: !canGetInPersonLink },
-            // {id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient)},
-            // 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))));
-      }), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Verdoc", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), 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, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
-        var _a;
-        this.showManageDialog = false;
-        (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
-      }, onNext: () => (this.showManageDialog = false) })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
-        this.showCancelDialog = false;
-        this.cancelEnvelope();
-      } }))));
-  }
-  static get style() { return verdocsEnvelopeSidebarCss; }
+    cancelEnvelope() {
+        this.loading = true;
+        cancelEnvelope(this.endpoint, this.envelopeId)
+            .then(async (r) => {
+            var _a, _b;
+            console.log('[SIDEBAR] Envelope canceled', r);
+            VerdocsToast('Envelope canceled', { style: 'success' });
+            this.store = await getEnvelopeStore(this.endpoint, this.envelopeId, true);
+            this.sortEnvelopeRecipients();
+            this.loading = false;
+            (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: (_b = this.store) === null || _b === void 0 ? void 0 : _b.state, event: 'canceled' });
+        })
+            .catch(e => {
+            console.log('[SIDEBAR] Error canceling envelope', e);
+            this.loading = false;
+            VerdocsToast('Error canceling envelope: ' + e.message, { style: 'error' });
+        });
+    }
+    prepareHistoryEntries() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const entries = [];
+        const histories = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.history_entries) || [];
+        entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.created_at) });
+        if (((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.status) === 'complete') {
+            entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.updated_at) });
+        }
+        const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
+        if (((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.status) === 'canceled' && !ownerCanceled) {
+            entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.canceled_at) });
+        }
+        histories.forEach(history => {
+            var _a;
+            const user = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.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('[SIDEBAR] Unknown history type', history);
+                    break;
+            }
+        });
+        entries.sort((a, b) => b.date.getTime() - a.date.getTime());
+        return entries;
+    }
+    // canModify(recipient: IRecipient) {
+    //   const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
+    //   const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
+    //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.store?.state?.status) === -1;
+    // }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        if (!this.store.state) {
+            return h(Host, null);
+        }
+        const session = this.endpoint.getSession();
+        const isEnvelopeOwner = userIsEnvelopeOwner(session, this.store.state);
+        const historyEntries = this.prepareHistoryEntries();
+        const functionsDisabled = ((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status) !== 'pending' && ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.status) !== 'in progress';
+        return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "side-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" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, dateFns.format(new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, dateFns.format(new Date((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, (_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, (_p = (_o = this.store) === null || _o === void 0 ? void 0 : _o.state) === null || _p === void 0 ? void 0 : _p.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_s = (_r = (_q = this.store) === null || _q === void 0 ? void 0 : _q.state) === null || _r === void 0 ? void 0 : _r.profile) === null || _s === void 0 ? void 0 :
+            _s.first_name, " ", (_v = (_u = (_t = this.store) === null || _t === void 0 ? void 0 : _t.state) === null || _u === void 0 ? void 0 : _u.profile) === null || _v === void 0 ? void 0 :
+            _v.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_y = (_x = (_w = this.store) === null || _w === void 0 ? void 0 : _w.state) === null || _x === void 0 ? void 0 : _x.profile) === null || _y === void 0 ? void 0 : _y.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), (_0 = (_z = this.store) === null || _z === void 0 ? void 0 : _z.state) === null || _0 === void 0 ? void 0 :
+            _0.recipients.map((recipient, index) => {
+                const canGetInPersonLink = recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
+                const canSendReminder = this.canResendRecipient(recipient);
+                return (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.role_name), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && !functionsDisabled && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
+                        { id: 'reminder', label: 'Send Reminder', disabled: !canSendReminder },
+                        { id: 'inperson', label: 'Get In-Person Link', disabled: !canGetInPersonLink },
+                        // {id: 'modify', label: 'Modify Recipient', disabled: !this.canModifyRecipient(recipient)},
+                        // 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))));
+            }), isEnvelopeOwner && (h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Verdoc", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), 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" }, dateFns.format(entry.date, FORMAT_TIMESTAMP)))))))), this.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
+                var _a;
+                this.showManageDialog = false;
+                (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
+            }, onNext: () => (this.showManageDialog = false) })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
+                this.showCancelDialog = false;
+                this.cancelEnvelope();
+            } }))));
+    }
+    static get style() { return VerdocsEnvelopeSidebarStyle0; }
 }, [0, "verdocs-envelope-sidebar", {
-    "endpoint": [16],
-    "envelopeId": [1, "envelope-id"],
-    "activeTab": [32],
-    "panelOpen": [32],
-    "showManageDialog": [32],
-    "showRecipientDialog": [32],
-    "showCancelDialog": [32],
-    "loading": [32]
-  }]);
+        "endpoint": [16],
+        "envelopeId": [1, "envelope-id"],
+        "activeTab": [32],
+        "panelOpen": [32],
+        "showManageDialog": [32],
+        "showRecipientDialog": [32],
+        "showCancelDialog": [32],
+        "loading": [32]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["verdocs-envelope-sidebar", "verdocs-button", "verdocs-dropdown", "verdocs-envelope-recipient-link", "verdocs-envelope-recipient-summary", "verdocs-ok-dialog"];
-  components.forEach(tagName => { switch (tagName) {
-    case "verdocs-envelope-sidebar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, VerdocsEnvelopeSidebar$1);
-      }
-      break;
-    case "verdocs-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "verdocs-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "verdocs-envelope-recipient-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-envelope-recipient-summary":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "verdocs-ok-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-envelope-sidebar", "verdocs-button", "verdocs-dropdown", "verdocs-envelope-recipient-link", "verdocs-envelope-recipient-summary", "verdocs-ok-dialog"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-envelope-sidebar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsEnvelopeSidebar$1);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-envelope-recipient-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-envelope-recipient-summary":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-ok-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();