@verdocs/web-sdk 1.14.8 → 1.14.10

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

@@ -1,11 +1,13 @@
 import { format } from 'date-fns';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { throttledGetEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
-import { h, Host } from '@stencil/core';
 import { userIsEnvelopeOwner } from '@verdocs/js-sdk/Envelopes/Permissions';
+import { h, Host } from '@stencil/core';
+import { getInPersonLink, resendInvitation } from '@verdocs/js-sdk/Envelopes/Recipients';
+import { getEnvelopeStore } from '../../../utils/EnvelopeStore';
 import { FORMAT_TIMESTAMP } from '../../../utils/Types';
 import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
+import { cancelEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
 const InformationCircle = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>`;
 const Users = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>`;
 const ClipboardDocuments = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" /></svg>`;
@@ -36,40 +38,42 @@ const ActivityIcons = {
  */
 export class VerdocsEnvelopeSidebar {
   constructor() {
+    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;
@@ -78,20 +82,38 @@ export class VerdocsEnvelopeSidebar {
   }
   // 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' });
@@ -100,21 +122,38 @@ export class VerdocsEnvelopeSidebar {
         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':
@@ -216,27 +255,43 @@ export class VerdocsEnvelopeSidebar {
     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 is() { return "verdocs-envelope-sidebar"; }
@@ -295,12 +350,10 @@ export class VerdocsEnvelopeSidebar {
   }
   static get states() {
     return {
-      "envelope": {},
-      "sortedRecipients": {},
-      "roleNames": {},
       "activeTab": {},
       "panelOpen": {},
       "showManageDialog": {},
+      "showCancelDialog": {},
       "loading": {}
     };
   }

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

@@ -3,7 +3,7 @@ export default {
   title: 'Envelopes/Envelope Sidebar',
   component: 'verdocs-envelope-sidebar',
   args: {
-    envelopeId: 'af083350-0202-4c00-ac90-5346914fa6ff',
+    envelopeId: '98126d3a-b6b0-4041-93a7-5cbd9daf5afa',
   },
   argTypes: {
     envelopeId: { name: 'envelopeId' },

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.css

@@ -2,7 +2,6 @@ verdocs-status-indicator {
   display: flex;
   font-size: 18px;
   flex-wrap: nowrap;
-  padding: 4px 12px;
   border-radius: 6px;
   color: #33364b;
   align-items: center;
@@ -16,7 +15,7 @@ verdocs-status-indicator.has-document:hover {
 verdocs-status-indicator .icon {
   width: 25px;
   height: 25px;
-  margin: 0 10px -4px 0;
+  margin: 0 10px 0 0;
 }
 verdocs-status-indicator.dark {
   color: #ffffff;
@@ -27,7 +26,7 @@ verdocs-status-indicator.small {
 verdocs-status-indicator.small .icon {
   width: 20px;
   height: 20px;
-  margin: 0 8px -4px 0;
+  margin: 0 8px 0 0;
 }
 verdocs-status-indicator .detail-panel {
   display: none;

package/dist/collection/components/fields/verdocs-field-textarea/verdocs-field-textarea.css

@@ -1,26 +1,31 @@
 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;
+  box-sizing: border-box;
   background-color: transparent;
   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 {
-  box-sizing: border-box;
-  color: rgba(0, 0, 0, 0.87);
-  font-weight: 500;
-  transform-origin: 0 0;
-  height: 100%;
   width: 100%;
-  background: none;
+  height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0 3px;
   font-size: 11px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  background: none;
+  font-weight: 500;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
 }
 verdocs-field-textarea textarea.hide {
   display: none;

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

@@ -1,4 +1,7 @@
+import interact from 'interactjs';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 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>';
@@ -7,6 +10,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldTextarea {
   constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
     this.templateid = '';
     this.field = null;
     this.disabled = false;
@@ -14,10 +18,12 @@ export class VerdocsFieldTextarea {
     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}`);
@@ -32,6 +38,51 @@ export class VerdocsFieldTextarea {
     }
     // TemplateStore.updateCount++;
   }
+  componentDidRender() {
+    interact.dynamicDrop(true);
+    if (this.editable) {
+      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 = { ...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;
+      (_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 = getFieldSettings(this.field);
@@ -40,7 +91,7 @@ export class VerdocsFieldTextarea {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, 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 && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, 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 && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, 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,27 @@ export class VerdocsFieldTextarea {
   }
   static get properties() {
     return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      },
       "templateid": {
         "type": "string",
         "mutable": false,
@@ -196,6 +268,42 @@ export class VerdocsFieldTextarea {
         "reflect": false,
         "defaultValue": "0"
       },
+      "xscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled horizontally by this factor."
+        },
+        "attribute": "xscale",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "yscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled vertically by this factor."
+        },
+        "attribute": "yscale",
+        "reflect": false,
+        "defaultValue": "1"
+      },
       "rerender": {
         "type": "number",
         "mutable": false,
@@ -306,4 +414,5 @@ export class VerdocsFieldTextarea {
       }
     };
   }
+  static get elementRef() { return "el"; }
 }

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

@@ -1,9 +1,9 @@
 import interact from 'interactjs';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
+import { updateField } from '@verdocs/js-sdk/Templates/Fields';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import { updateField } from '@verdocs/js-sdk/Templates/Fields';
-import { VerdocsEndpoint } from '@verdocs/js-sdk';
 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>';
 /**
  * Display a text input field.
@@ -18,6 +18,8 @@ export class VerdocsFieldTextbox {
     this.moveable = false;
     this.done = false;
     this.roleindex = 0;
+    this.xscale = 1;
+    this.yscale = 1;
     this.rerender = 0;
   }
   async focusField() {
@@ -54,26 +56,31 @@ export class VerdocsFieldTextbox {
     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 = 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() {
@@ -265,6 +272,42 @@ export class VerdocsFieldTextbox {
         "reflect": false,
         "defaultValue": "0"
       },
+      "xscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled horizontally by this factor."
+        },
+        "attribute": "xscale",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "yscale": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If set, the field will be be scaled vertically by this factor."
+        },
+        "attribute": "yscale",
+        "reflect": false,
+        "defaultValue": "1"
+      },
       "rerender": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.stories.js

@@ -3,7 +3,7 @@ export default {
   title: 'Templates/Fields',
   component: 'verdocs-template-fields',
   args: {
-    templateId: '90c2e63d-6b61-4dd2-a2e2-e137778f5ab5',
+    templateId: '',
   },
   argTypes: {},
   parameters: {