@verdocs/web-sdk 1.14.9 → 1.14.11

package/dist/components/verdocs-envelope-document-page2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as getEnvelopeDocumentPageDisplayUri } from './Envelopes.js';
+import { d as getEnvelopeDocumentPageDisplayUri } from './Envelopes.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { t as throttle } from './utils.js';

package/dist/components/verdocs-envelope-recipient-summary2.js

@@ -4,7 +4,7 @@ import { g as getInPersonLink } from './Recipients.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { c as createStore } from './index3.js';
-import { d as getEnvelope } from './Envelopes.js';
+import { e as getEnvelope } from './Envelopes.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
@@ -223,4 +223,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { VerdocsEnvelopeRecipientSummary as V, defineCustomElement as d };
+export { VerdocsEnvelopeRecipientSummary as V, defineCustomElement as d, getEnvelopeStore as g };

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

@@ -1,17 +1,19 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { t as throttledGetEnvelope } from './Envelopes.js';
+import { c as cancelEnvelope } from './Envelopes.js';
 import { u as userIsEnvelopeOwner } from './Permissions.js';
+import { g as getInPersonLink, r as resendInvitation } from './Recipients.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { g as getEnvelopeStore, d as defineCustomElement$3 } from './verdocs-envelope-recipient-summary2.js';
 import { F as FORMAT_TIMESTAMP } from './Types2.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$4 } from './verdocs-button2.js';
-import { d as defineCustomElement$3 } from './verdocs-dropdown2.js';
-import { d as defineCustomElement$2 } from './verdocs-envelope-recipient-summary2.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-dropdown2.js';
+import { d as defineCustomElement$2 } from './verdocs-ok-dialog2.js';
 import { f as format } from './index2.js';
 
-const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .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 .title{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .manage-recipients-button{-ms-flex-item-align:center;align-self:center;white-space:nowrap}verdocs-envelope-sidebar .manage-recipients-button .label{color:#ffffff;font-size:14px}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}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
+const verdocsEnvelopeSidebarCss = "verdocs-envelope-sidebar{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex;-ms-flex:0 0 56px;flex:0 0 56px;width:56px;min-height:400px;height:100%;background:#41435e;-webkit-transition:0.5s cubic-bezier(0.35, 0, 0.25, 1);transition:0.5s cubic-bezier(0.35, 0, 0.25, 1)}verdocs-envelope-sidebar.open{-ms-flex:0 0 400px;flex:0 0 400px;width:400px}verdocs-envelope-sidebar .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{margin-bottom:12px;font-size:16px;line-height:24px;font-weight:400;-ms-flex:0;flex:0}verdocs-envelope-sidebar .label{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54);-ms-flex:0;flex:0}verdocs-envelope-sidebar .value{margin-bottom:14px;font-size:14px;font-weight:500;line-height:16px;color:#fff;-ms-flex:0;flex:0}verdocs-envelope-sidebar .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}verdocs-envelope-sidebar .recipient-content{-ms-flex-direction:column;flex-direction:column}verdocs-envelope-sidebar .history-entry{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:8px 0 0;margin:8px 0 0;border-top:1px solid #dddddd}verdocs-envelope-sidebar .history-entry .activity-icon{margin-right:14px}verdocs-envelope-sidebar .history-entry .activity-icon svg{width:24px;height:24px;fill:#ffffff}verdocs-envelope-sidebar .history-entry .activity-text{font-size:14px;line-height:16px;margin-bottom:4px}verdocs-envelope-sidebar .history-entry .activity-date{font-size:12px;line-height:16px;color:rgba(255, 255, 255, 0.54)}verdocs-envelope-sidebar .content .history-entry:first-of-type{border-top:none}";
 
 const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;
 const Users = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>`;
@@ -45,40 +47,42 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     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.envelope = null;
-    this.sortedRecipients = [];
-    this.roleNames = [];
     this.activeTab = 1;
     this.panelOpen = false;
     this.showManageDialog = false;
+    this.showCancelDialog = false;
     this.loading = true;
   }
-  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 componentWillRender() {
+  async componentWillLoad() {
     var _a, _b, _c;
-    if (!this.envelopeId) {
-      console.error(`[SIDEBAR] Missing required envelopeId`);
-      return;
-    }
     try {
-      this.envelope = await throttledGetEnvelope(this.endpoint, this.envelopeId);
-      this.sortedRecipients = [...this.envelope.recipients];
-      this.sortedRecipients.sort((a, b) => {
-        return a.sequence === b.sequence ? a.order - b.order : a.sequence - b.sequence;
-      });
-      this.roleNames = this.sortedRecipients.map(r => r.role_name);
+      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;
@@ -87,20 +91,38 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   // TODO: Refactor to a common library?
   canResendRecipient(recipient) {
+    var _a, _b;
     return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
-      !['complete', 'declined', 'canceled'].includes(this.envelope.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));
   }
   canModifyRecipient(recipient) {
+    var _a, _b;
     return (!recipient.claimed && //
       !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
-      !['complete', 'declined', 'canceled'].includes(this.envelope.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;
+    var _a, _b;
     console.log('[SIDEBAR] Recipient action', id, recipient);
     switch (id) {
       case 'reminder':
-        VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
+        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':
+        getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
+          .then(({ link }) => navigator.clipboard.writeText(link))
+          .then(() => VerdocsToast('Link copied to clipboard.', { style: 'success', duration: 2000 }))
+          .catch(e => {
+          console.log('[RECIPIENTS] Error getting link', e);
+          VerdocsToast('Unable to get link: ' + e.message, { style: 'error' });
+        });
         break;
       case 'modify':
         VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
@@ -109,21 +131,38 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
         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: this.envelope, event: id });
+    (_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() {
+    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();
+      (_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);
+      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 = this.envelope.histories || [];
-    entries.push({ icon: 'pencil', message: 'Envelope created.', date: new Date(this.envelope.created_at) });
-    if (this.envelope.status === 'complete') {
-      entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date(this.envelope.updated_at) });
+    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) });
     }
     const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
-    if (this.envelope.status === 'canceled' && !ownerCanceled) {
-      entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date(this.envelope.canceled_at) });
+    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 => {
-      const user = this.sortedRecipients.find(recipient => recipient.role_name === history.role_name);
+      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':
@@ -225,46 +264,60 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     entries.sort((a, b) => b.date.getTime() - a.date.getTime());
     return entries;
   }
+  canModify(recipient) {
+    var _a, _b;
+    const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
+    const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
+    return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status) === -1;
+  }
   render() {
-    var _a, _b, _c;
-    if (!this.envelope || this.loading) {
+    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.envelope);
+    const isEnvelopeOwner = userIsEnvelopeOwner(session, this.store.state);
     const historyEntries = this.prepareHistoryEntries();
-    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" }, this.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(this.envelope.created_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), FORMAT_TIMESTAMP)), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, this.envelope.status), h("div", { class: "label" }, "Verdoc Owner ID"), h("div", { class: "value" }, this.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = this.envelope.profile) === null || _a === void 0 ? void 0 :
-      _a.first_name, " ", (_b = this.envelope.profile) === null || _b === void 0 ? void 0 :
-      _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = this.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), this.sortedRecipients.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.role_name), 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) },
-        // 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: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), 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.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
+    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 = !this.canModify(recipient) || (recipient.status !== 'invited' && recipient.status !== 'opened');
+        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: "Turn On Reminders", onClick: () => (this.showManageDialog = !functionsDisabled), disabled: functionsDisabled })), 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.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.envelope });
+        (_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; }
 }, [0, "verdocs-envelope-sidebar", {
     "endpoint": [16],
     "envelopeId": [1, "envelope-id"],
-    "envelope": [32],
-    "sortedRecipients": [32],
-    "roleNames": [32],
     "activeTab": [32],
     "panelOpen": [32],
     "showManageDialog": [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-summary"];
+  const components = ["verdocs-envelope-sidebar", "verdocs-button", "verdocs-dropdown", "verdocs-envelope-recipient-summary", "verdocs-ok-dialog"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-envelope-sidebar":
       if (!customElements.get(tagName)) {
@@ -273,15 +326,20 @@ function defineCustomElement$1() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        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();
       }

package/dist/components/verdocs-field-textarea.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as interact } from './interact.min.js';
 import './Types.js';
 import { u as updateField } from './Fields.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { i as interact } from './interact.min.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -31,6 +31,8 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
@@ -67,25 +69,31 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     e.stopPropagation();
   }
   handleResize(e) {
-    const oldX = +(e.target.getAttribute('resizeX') || 0);
-    const oldY = +(e.target.getAttribute('resizeY') || 0);
-    const newX = e.dx + oldX;
-    const newY = e.dy + oldY;
-    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
-    this.el.style.height = `${parseFloat(this.el.style.height || '0') + e.dy}px`;
-    e.target.setAttribute('resizeX', newX);
-    e.target.setAttribute('resizeY', newY);
+    let { x = 0, y = 0, h = 0 } = e.target.dataset;
+    let { width, height } = e.rect;
+    x = (parseFloat(x) || 0) + e.deltaRect.left;
+    y = (parseFloat(y) || 0) + e.deltaRect.top;
+    h = (parseFloat(h) || 0) + e.deltaRect.height;
+    Object.assign(e.target.style, {
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translate(${x}px, ${y + h}px)`,
+    });
+    Object.assign(e.target.dataset, { x, y, h });
   }
   handleResizeEnd(e) {
-    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
-    const resizeHeight = +(e.target.getAttribute('resizeY') || 0);
-    const settings = getFieldSettings(this.field);
-    const newWidth = (settings.width || 150) + resizeWidth;
-    const newHeight = (settings.height || 41) + resizeHeight;
-    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth), height: Math.round(newHeight) };
-    delete newSettings['result'];
+    const newSettings = { ...getFieldSettings(this.field) };
+    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
+    newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
+    newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
+    newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
+    newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
     updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
-      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .then(() => {
+      var _a;
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
+      Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
+    })
       .catch(e => console.log('Field update failed', e));
   }
   render() {
@@ -117,6 +125,8 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     "moveable": [4],
     "done": [4],
     "roleindex": [2],
+    "xscale": [2],
+    "yscale": [2],
     "rerender": [2],
     "focusField": [64],
     "showSettingsPanel": [64],

package/dist/components/verdocs-field-textbox.js

@@ -31,6 +31,8 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
@@ -67,24 +69,31 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     e.stopPropagation();
   }
   handleResize(e) {
-    const oldX = +(e.target.getAttribute('resizeX') || 0);
-    const oldY = +(e.target.getAttribute('resizeY') || 0);
-    const newX = e.dx + oldX;
-    const newY = e.dy + oldY;
-    this.el.style.width = `${parseFloat(this.el.style.width || '0') + e.dx}px`;
-    // Single line text fields are not resizeable in height
-    // this.el.style.height = `${parseFloat(this.el.style.height || '0') + event.dy}px`;
-    e.target.setAttribute('resizeX', newX);
-    e.target.setAttribute('resizeY', newY);
+    let { x = 0, y = 0, h = 0 } = e.target.dataset;
+    let { width, height } = e.rect;
+    x = (parseFloat(x) || 0) + e.deltaRect.left;
+    y = (parseFloat(y) || 0) + e.deltaRect.top;
+    h = (parseFloat(h) || 0) + e.deltaRect.height;
+    Object.assign(e.target.style, {
+      width: `${width}px`,
+      height: `${height}px`,
+      transform: `translate(${x}px, ${y + h}px)`,
+    });
+    Object.assign(e.target.dataset, { x, y, h });
   }
   handleResizeEnd(e) {
-    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
-    const settings = getFieldSettings(this.field);
-    const newWidth = (settings.width || 150) + resizeWidth;
-    const newSettings = { ...getFieldSettings(this.field), width: Math.round(newWidth) };
-    delete newSettings['result'];
+    const newSettings = { ...getFieldSettings(this.field) };
+    const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
+    newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
+    newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
+    newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
+    newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
     updateField(this.endpoint, this.templateid, this.field.name, { setting: newSettings })
-      .then(() => { var _a; return (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings }); })
+      .then(() => {
+      var _a;
+      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name, settings: newSettings });
+      Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
+    })
       .catch(e => console.log('Field update failed', e));
   }
   render() {
@@ -120,6 +129,8 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     "moveable": [4],
     "done": [4],
     "roleindex": [2],
+    "xscale": [2],
+    "yscale": [2],
     "rerender": [2],
     "focusField": [64],
     "showSettingsPanel": [64],

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

@@ -11,16 +11,26 @@ import { d as defineCustomElement$4 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 
+/**
+ * Enable automatic reminders. setup_time is the number of days after the envelope is sent that the first reminder
+ * should be sent. interval_time is the number of days between reminders.
+ */
 var createReminder = function (endpoint, templateId, params) {
     return endpoint.api //
         .post("/templates/".concat(templateId, "/reminder/"), params)
         .then(function (r) { return r.data; });
 };
+/**
+ * Update the reminder configuration for a template.
+ */
 var updateReminder = function (endpoint, templateId, reminderId, params) {
     return endpoint.api //
         .put("/templates/".concat(templateId, "/reminder/").concat(reminderId), params)
         .then(function (r) { return r.data; });
 };
+/**
+ * Delete the reminder configuration for a template.
+ */
 var deleteReminder = function (endpoint, templateId, reminderId) {
     return endpoint.api //
         .delete("/templates/".concat(templateId, "/reminder/").concat(reminderId))

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

@@ -17,7 +17,7 @@ import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-sender2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
-const verdocsTemplateRolesCss = "verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 15px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{display:-ms-flexbox;display:flex;cursor:pointer;margin:0 0 0 9px}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:2px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:#654dcb7f;-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
+const verdocsTemplateRolesCss = "verdocs-template-roles{display:block;min-width:400px;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-roles>form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ffffff;padding:12px}verdocs-template-roles>form h5{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 10px 0}verdocs-template-roles>form .participants{position:relative}verdocs-template-roles>form .left-line{top:32px;left:11px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-template-roles>form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0;min-height:35px;margin-left:40px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:6px 0 4px 0}verdocs-template-roles>form .row .row-roles{-ms-flex:1;flex:1;gap:10px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles>form .row .icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-template-roles>form .row .sender{height:30px;display:-ms-flexbox;display:flex;font-size:14px;line-height:30px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 15px;border:1px solid #c6c9cc;background-color:#f5f5fa}verdocs-template-roles>form .row .complete{height:30px;display:-ms-flexbox;display:flex;font-size:14px;padding:0 15px;line-height:30px;-ms-flex-direction:row;flex-direction:row;border-radius:30px;background-color:#f5f5fa;border:1px solid #aeb4bf}verdocs-template-roles>form .row .label{font-weight:bold;margin-right:6px;color:#33364b}verdocs-template-roles>form .row .settings-button{display:-ms-flexbox;display:flex;cursor:pointer;margin:0 0 0 9px}verdocs-template-roles>form .row .recipient{height:30px;display:-ms-flexbox;display:flex;font-size:14px;border-radius:30px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:0 5px 0 6px;white-space:nowrap;border:2px solid #aeb4bf}verdocs-template-roles>form .row .recipient .type-icon{width:24px;height:24px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.6;margin:0 12px 0 0}verdocs-template-roles>form .row .recipient.dragging{position:absolute}verdocs-template-roles>form .row .recipient.dragging+.dropzone{display:none !important}verdocs-template-roles>form .row .dropzone{width:14px;height:30px;display:none}verdocs-template-roles>form .row .dropzone svg{fill:#cccccc}verdocs-template-roles>form .row .dropzone.visible{margin:0 7px;display:-ms-flexbox;display:flex;-ms-flex:0 0 14px;flex:0 0 14px}verdocs-template-roles>form .row .dropzone.active{-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;background:#654dcb7f;border:1px dashed #654dcb}verdocs-template-roles>form label{display:block;font-size:14px;font-weight:500;margin:0 0 4px 0;color:#5c6575}verdocs-template-roles>form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-roles>form input:focus{outline:none}verdocs-template-roles .row.add-sequence{display:none}verdocs-template-roles .add-role{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-role:hover{opacity:1}verdocs-template-roles .add-role svg{width:32px;height:32px}verdocs-template-roles .add-step{margin:0;padding:0;border:none;opacity:0.5;cursor:pointer;background:none}verdocs-template-roles .add-step:hover{opacity:1}verdocs-template-roles .add-step svg{width:32px;height:32px}verdocs-template-roles.dragging .add-role{display:none}verdocs-template-roles.dragging form .row .recipient+.dropzone{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence{display:-ms-flexbox;display:flex}verdocs-template-roles.dragging .row.add-sequence .dropzone{opacity:0.5;-ms-flex:0 0 120px;flex:0 0 120px;border-radius:30px;-ms-flex-align:center;align-items:center;background:#654dcb7f;-ms-flex-pack:center;justify-content:center;border:1px dashed #654dcb}verdocs-template-roles.dragging .row.add-sequence .dropzone.active{opacity:1}verdocs-template-roles .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-roles .empty{font-size:13px;margin-top:15px;margin-bottom:5px}verdocs-template-roles .empty svg{width:20px;height:20px;stroke:#666666;margin-bottom:-5px}verdocs-template-roles ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-moz-placeholder{color:#aaaaaa}verdocs-template-roles :-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-roles ::placeholder{color:#aaaaaa}";
 
 const senderLabels = {
   [TemplateSenderTypes.EVERYONE]: 'Everyone',

package/dist/components/verdocs-view2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { t as throttledGetEnvelope, e as cancelEnvelope } from './Envelopes.js';
+import { t as throttledGetEnvelope, c as cancelEnvelope } from './Envelopes.js';
 import { a as userCanCancelEnvelope } from './Permissions.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';