@verdocs/web-sdk 1.14.8 → 1.14.10

package/dist/cjs/verdocs-envelope-sidebar.cjs.entry.js

@@ -5,14 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-70677d67.js');
 const Envelopes = require('./Envelopes-e5ffb6a5.js');
 const Permissions = require('./Permissions-4b710db2.js');
+const Recipients = require('./Recipients-f3d6cf10.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f2af9468.js');
+const EnvelopeStore = require('./EnvelopeStore-a4231cf7.js');
 const Types = require('./Types-ee5afdf8.js');
 const Toast = require('./Toast-06880504.js');
 const errors = require('./errors-0396da3d.js');
-const index$1 = require('./index-6528b430.js');
+const index$1 = require('./index-7c19ba1d.js');
+require('./index-e84e0687.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 +48,42 @@ const VerdocsEnvelopeSidebar = class {
     this.envelopeUpdated = index.createEvent(this, "envelopeUpdated", 7);
     this.toggle = index.createEvent(this, "toggle", 7);
     this.another = index.createEvent(this, "another", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.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 Envelopes.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 EnvelopeStore.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 errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
+  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 +92,38 @@ const VerdocsEnvelopeSidebar = class {
   }
   // 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':
-        Toast.VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
+        Recipients.resendInvitation(this.endpoint, this.envelopeId, recipient.role_name)
+          .then(() => {
+          Toast.VerdocsToast('Reminder Sent', { style: 'success' });
+        })
+          .catch(e => {
+          console.log('[SIDEBAR] Error resending invitation', e);
+          Toast.VerdocsToast('Error resending invitation: ' + e.message, { style: 'error' });
+        });
+        break;
+      case 'inperson':
+        Recipients.getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
+          .then(({ link }) => navigator.clipboard.writeText(link))
+          .then(() => Toast.VerdocsToast('Link copied to clipboard.', { style: 'success', duration: 2000 }))
+          .catch(e => {
+          console.log('[RECIPIENTS] Error getting link', e);
+          Toast.VerdocsToast('Unable to get link: ' + e.message, { style: 'error' });
+        });
         break;
       case 'modify':
         Toast.VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
@@ -109,21 +132,38 @@ const VerdocsEnvelopeSidebar = class {
         Toast.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() {
+    Envelopes.cancelEnvelope(this.endpoint, this.envelopeId)
+      .then(async (r) => {
+      var _a, _b;
+      console.log('[SIDEBAR] Envelope canceled', r);
+      Toast.VerdocsToast('Envelope canceled', { style: 'success' });
+      this.store = await EnvelopeStore.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);
+      Toast.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,27 +265,43 @@ const VerdocsEnvelopeSidebar = class {
     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 index.h(index.Host, null);
     }
     const session = this.endpoint.getSession();
-    const isEnvelopeOwner = Permissions.userIsEnvelopeOwner(session, this.envelope);
+    const isEnvelopeOwner = Permissions.userIsEnvelopeOwner(session, this.store.state);
     const historyEntries = this.prepareHistoryEntries();
-    return (index.h(index.Host, { class: this.panelOpen ? 'open' : '' }, index.h("div", { class: "side-buttons" }, index.h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), index.h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), index.h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Details"), index.h("div", { class: "label" }, "Envelope ID"), index.h("div", { class: "value" }, this.envelope.id), index.h("div", { class: "label" }, "Date Created"), index.h("div", { class: "value" }, index$1.format(new Date(this.envelope.created_at), Types.FORMAT_TIMESTAMP)), index.h("div", { class: "label" }, "Last Modified"), index.h("div", { class: "value" }, index$1.format(new Date(this.envelope.updated_at), Types.FORMAT_TIMESTAMP)), index.h("div", { class: "label" }, "Status"), index.h("div", { class: "value" }, this.envelope.status), index.h("div", { class: "label" }, "Verdoc Owner ID"), index.h("div", { class: "value" }, this.envelope.profile_id), index.h("div", { class: "label" }, "Verdoc Owner Name"), index.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), index.h("div", { class: "label" }, "Verdoc Owner Email"), index.h("div", { class: "value" }, (_c = this.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Recipients"), this.sortedRecipients.map((recipient, index$1) => (index.h("div", { class: "recipient-detail" }, index.h("div", { class: "recipient-header" }, index.h("div", { class: "recipient-number" }, index$1 + 1), index.h("div", { class: "recipient-type" }, recipient.role_name), index.h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (index.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'},
-      ] }))), index.h("dic", { class: "recipient-content" }, index.h("div", { class: "recipient-name" }, recipient.full_name), index.h("div", { class: "recipient-name" }, recipient.email), index.h("div", { class: "recipient-name" }, recipient.phone))))), isEnvelopeOwner && index.h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Manage Recipients", onClick: () => (this.showManageDialog = true) }))), this.activeTab === 3 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "History"), historyEntries.map(entry => (index.h("div", { class: "history-entry" }, index.h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), index.h("div", { class: "activity-details" }, index.h("div", { class: "activity-text" }, entry.message), index.h("div", { class: "activity-date" }, index$1.format(entry.date, Types.FORMAT_TIMESTAMP)))))))), this.showManageDialog && (index.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 (index.h(index.Host, { class: this.panelOpen ? 'open' : '' }, index.h("div", { class: "side-buttons" }, index.h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), index.h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), index.h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Details"), index.h("div", { class: "label" }, "Envelope ID"), index.h("div", { class: "value" }, (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.id), index.h("div", { class: "label" }, "Date Created"), index.h("div", { class: "value" }, index$1.format(new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.created_at), Types.FORMAT_TIMESTAMP)), index.h("div", { class: "label" }, "Last Modified"), index.h("div", { class: "value" }, index$1.format(new Date((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.updated_at), Types.FORMAT_TIMESTAMP)), index.h("div", { class: "label" }, "Status"), index.h("div", { class: "value" }, (_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.status), index.h("div", { class: "label" }, "Verdoc Owner ID"), index.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), index.h("div", { class: "label" }, "Verdoc Owner Name"), index.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), index.h("div", { class: "label" }, "Verdoc Owner Email"), index.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 && (index.h("div", { class: "content" }, index.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$1) => {
+        const canGetInPersonLink = !this.canModify(recipient) || (recipient.status !== 'invited' && recipient.status !== 'opened');
+        const canSendReminder = this.canResendRecipient(recipient);
+        return (index.h("div", { class: "recipient-detail" }, index.h("div", { class: "recipient-header" }, index.h("div", { class: "recipient-number" }, index$1 + 1), index.h("div", { class: "recipient-type" }, recipient.role_name), index.h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && !functionsDisabled && (index.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'},
+          ] }))), index.h("dic", { class: "recipient-content" }, index.h("div", { class: "recipient-name" }, recipient.full_name), index.h("div", { class: "recipient-name" }, recipient.email), index.h("div", { class: "recipient-name" }, recipient.phone))));
+      }), isEnvelopeOwner && (index.h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Turn On Reminders", onClick: () => (this.showManageDialog = !functionsDisabled), disabled: functionsDisabled })), isEnvelopeOwner && (index.h("verdocs-button", { class: "manage-recipients-button", variant: "standard", label: "Cancel Verdoc", onClick: () => (this.showCancelDialog = !functionsDisabled), disabled: functionsDisabled })))), this.activeTab === 3 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "History"), historyEntries.map(entry => (index.h("div", { class: "history-entry" }, index.h("div", { class: "activity-icon", innerHTML: ActivityIcons[entry.icon] || entry.icon }), index.h("div", { class: "activity-details" }, index.h("div", { class: "activity-text" }, entry.message), index.h("div", { class: "activity-date" }, index$1.format(entry.date, Types.FORMAT_TIMESTAMP)))))))), this.showManageDialog && (index.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 && (index.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();
       } }))));
   }
 };

package/dist/cjs/verdocs-field-checkbox.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{width:16px;height:16px;padding:1px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label{width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 

package/dist/cjs/verdocs-field-date.cjs.entry.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 const Colors = require('./Colors-e809dcc9.js');
 const Types = require('./Types-ee5afdf8.js');
-const index$1 = require('./index-6528b430.js');
+const index$1 = require('./index-7c19ba1d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');

package/dist/cjs/verdocs-field-dropdown.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 6px, calc(100% - 3px) 6px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2);padding:0 5px}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{display:block;margin-left:-33px;margin-top:-1px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 

package/dist/cjs/verdocs-field-initial.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}";
 

package/dist/cjs/verdocs-field-payment.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 

package/dist/cjs/verdocs-field-radio-button.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 

package/dist/cjs/verdocs-field-signature.cjs.entry.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px}verdocs-field-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}";
 

package/dist/cjs/verdocs-field-textarea.cjs.entry.js

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
+const interact_min = require('./interact.min-ba5cc513.js');
+require('./Types-f89f9116.js');
+const Fields = require('./Fields-705a2168.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-f2af9468.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
-require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
-const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}";
+const verdocsFieldTextareaCss = "verdocs-field-textarea{width:150px;height:15px;display:block;font-size:11px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{width:100%;height:100%;resize:none;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textarea verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textarea verdocs-button-panel[data-active],verdocs-field-textarea verdocs-button-panel:hover{opacity:1}verdocs-field-textarea verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textarea verdocs-button-panel .icon:hover svg{fill:#000000}";
 
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 const VerdocsFieldTextarea = class {
@@ -20,6 +23,7 @@ const VerdocsFieldTextarea = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -27,10 +31,12 @@ const VerdocsFieldTextarea = class {
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
-    this.el.focus();
+    this.inputEl.focus();
   }
   async showSettingsPanel() {
     const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
@@ -45,6 +51,51 @@ const VerdocsFieldTextarea = class {
     }
     // TemplateStore.updateCount++;
   }
+  componentDidRender() {
+    interact_min.interact.dynamicDrop(true);
+    if (this.editable) {
+      interact_min.interact(this.el).resizable({
+        edges: { top: true, bottom: true, left: true, right: true },
+        listeners: {
+          start: this.handleResizeStart.bind(this),
+          move: this.handleResize.bind(this),
+          end: this.handleResizeEnd.bind(this),
+        },
+      });
+    }
+  }
+  handleResizeStart(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  handleResize(e) {
+    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 newSettings = { ...utils.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);
+    Fields.updateField(this.endpoint, this.templateid, this.field.name, { setting: 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() {
     var _a, _b;
     const settings = utils.getFieldSettings(this.field);
@@ -53,7 +104,7 @@ const VerdocsFieldTextarea = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, settings.value);
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, name: this.field.name, required: settings.required, ref: el => (this.inputEl = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -63,6 +114,7 @@ const VerdocsFieldTextarea = class {
         return this.hideSettingsPanel();
       } })))));
   }
+  get el() { return index.getElement(this); }
 };
 VerdocsFieldTextarea.style = verdocsFieldTextareaCss;
 

package/dist/cjs/verdocs-field-textbox.cjs.entry.js

@@ -4,16 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const interact_min = require('./interact.min-ba5cc513.js');
-const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
-const Fields = require('./Fields-705a2168.js');
 require('./Types-f89f9116.js');
+const Fields = require('./Fields-705a2168.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-f2af9468.js');
+const Colors = require('./Colors-e809dcc9.js');
+const utils = require('./utils-618c13f1.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Files-4bdc0c0f.js');
 require('./Types-ee5afdf8.js');
-require('./index-6528b430.js');
+require('./index-7c19ba1d.js');
 
 const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;border:none;outline:none;padding:0 3px;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87)}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 
@@ -31,6 +31,8 @@ const VerdocsFieldTextbox = class {
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
@@ -67,26 +69,31 @@ const VerdocsFieldTextbox = class {
     e.stopPropagation();
   }
   handleResize(e) {
-    console.log('resize', 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) {
-    console.log('resizeEnd', e);
-    const resizeWidth = +(e.target.getAttribute('resizeX') || 0);
-    const settings = utils.getFieldSettings(this.field);
-    const newWidth = (settings.width || 150) + resizeWidth;
-    const newSettings = { ...utils.getFieldSettings(this.field), width: Math.round(newWidth) };
-    delete newSettings['result'];
+    const newSettings = { ...utils.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);
     Fields.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() {

package/dist/cjs/verdocs-field-timestamp.cjs.entry.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-70677d67.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-f4efefe3.js');
+const utils = require('./utils-618c13f1.js');
 const Types = require('./Types-ee5afdf8.js');
-const index$1 = require('./index-6528b430.js');
+const index$1 = require('./index-7c19ba1d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-e5ffb6a5.js');
 require('./Types-f89f9116.js');