@verdocs/web-sdk 2.0.2 → 2.0.4

package/dist/collection/components/envelopes/verdocs-envelope-recipient-summary/verdocs-envelope-recipient-summary.js

@@ -6,13 +6,7 @@ import { getEnvelopeStore } from '../../../utils/EnvelopeStore';
 import { VerdocsToast } from '../../../utils/Toast';
 import { SDKError } from '../../../utils/errors';
 /**
- * Displays an icon and message describing a document's completion status. For convenience, the status may be passed in either
- * directly as a status field or the whole document object may be passed in.
- *
- * If the document is provided, the status flag will indicate the document's overall status. This also makes the component clickable
- * to display a popup panel with per-recipient status data.
- *
- * If the status is provided as a string it can be either a `TRecipientStatus` or `TDocumentStatus` value.
+ * Displays a list of recipients with options to get in-person signing links for each one.
  */
 export class VerdocsEnvelopeRecipientSummary {
   constructor() {
@@ -22,7 +16,6 @@ export class VerdocsEnvelopeRecipientSummary {
     this.canSendAnother = true;
     this.canView = true;
     this.canDone = true;
-    this.envelope = undefined;
     this.isOpen = undefined;
     this.loading = true;
     this.recipientStatusIcons = [];
@@ -213,26 +206,6 @@ export class VerdocsEnvelopeRecipientSummary {
         "attribute": "can-done",
         "reflect": false,
         "defaultValue": "true"
-      },
-      "envelope": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IEnvelope",
-          "resolved": "IEnvelope",
-          "references": {
-            "IEnvelope": {
-              "location": "import",
-              "path": "@verdocs/js-sdk/Envelopes/Types"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The document to display status for. Ignored if `status` is set directly."
-        }
       }
     };
   }

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

@@ -1,13 +1,13 @@
 import { format } from 'date-fns';
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { cancelEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
+import { resendInvitation } from '@verdocs/js-sdk/Envelopes/Recipients';
 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>`;
@@ -44,6 +44,7 @@ export class VerdocsEnvelopeSidebar {
     this.activeTab = 1;
     this.panelOpen = false;
     this.showManageDialog = false;
+    this.showRecipientDialog = '';
     this.showCancelDialog = false;
     this.loading = true;
   }
@@ -86,12 +87,6 @@ export class VerdocsEnvelopeSidebar {
     return (!['pending', 'declined', 'submitted', 'canceled'].includes(recipient.status) && //
       !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
   }
-  canModifyRecipient(recipient) {
-    var _a, _b;
-    return (!recipient.claimed && //
-      !['declined', 'signed', 'submitted', 'canceled'].includes(recipient.status) &&
-      !['complete', 'declined', 'canceled'].includes((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.status));
-  }
   handleRecipientAction(recipient, id) {
     var _a, _b;
     console.log('[SIDEBAR] Recipient action', id, recipient);
@@ -107,13 +102,7 @@ export class VerdocsEnvelopeSidebar {
         });
         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' });
-        });
+        this.showRecipientDialog = recipient.role_name;
         break;
       case 'modify':
         VerdocsToast('This feature will be enabled in a future release. Please try again later.', { style: 'info' });
@@ -255,12 +244,11 @@ 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;
-  }
+  // canModify(recipient: IRecipient) {
+  //   const invalidRecipientStatus = ['declined', 'signed', 'submitted', 'canceled'];
+  //   const invalidEnvelopeStatus = ['complete', 'declined', 'canceled'];
+  //   return recipient.claimed !== true && invalidRecipientStatus.indexOf(recipient.status) === -1 && invalidEnvelopeStatus.indexOf(this.store?.state?.status) === -1;
+  // }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     if (!this.store.state) {
@@ -274,7 +262,7 @@ export class VerdocsEnvelopeSidebar {
       _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 canGetInPersonLink = recipient.status !== 'signed' && recipient.status !== 'submitted' && recipient.status !== 'canceled' && recipient.status !== 'declined';
         const canSendReminder = this.canResendRecipient(recipient);
         return (h("div", { class: "recipient-detail" }, h("div", { class: "recipient-header" }, h("div", { class: "recipient-number" }, index + 1), h("div", { class: "recipient-type" }, recipient.role_name), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && !functionsDisabled && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
             { id: 'reminder', label: 'Send Reminder', disabled: !canSendReminder },
@@ -283,13 +271,11 @@ export class VerdocsEnvelopeSidebar {
             // 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: () => {
+      }), 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.showRecipientDialog && (h("verdocs-envelope-recipient-link", { envelopeId: this.envelopeId, roleName: this.showRecipientDialog, onNext: () => (this.showRecipientDialog = '') })), this.showManageDialog && (h("verdocs-envelope-recipient-summary", { envelopeId: this.envelopeId, canView: false, onAnother: () => {
         var _a;
         this.showManageDialog = false;
         (_a = this.another) === null || _a === void 0 ? void 0 : _a.emit({ envelope: this.store.state });
-      }, onNext: () => {
-        this.showManageDialog = false;
-      } })), this.showCancelDialog && (h("verdocs-ok-dialog", { heading: "Cancel Envelope?", message: 'Are you sure you want to cancel this Envelope? This action cannot be undone.', onNext: () => {
+      }, 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();
       } }))));
@@ -353,6 +339,7 @@ export class VerdocsEnvelopeSidebar {
       "activeTab": {},
       "panelOpen": {},
       "showManageDialog": {},
+      "showRecipientDialog": {},
       "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: '98126d3a-b6b0-4041-93a7-5cbd9daf5afa',
+    envelopeId: 'c64b09c1-23d8-4612-bc66-86723ab7ede3',
   },
   argTypes: {
     envelopeId: { name: 'envelopeId' },

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

@@ -14,8 +14,8 @@ verdocs-field-attachment.disabled span {
   cursor: inherit;
 }
 verdocs-field-attachment span {
+  cursor: inherit;
   width: 20px;
-  cursor: pointer;
 }
 verdocs-field-attachment.required span {
   border: 1px solid #cc0000;

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

@@ -11,6 +11,7 @@ verdocs-field-checkbox.disabled {
   opacity: 0.5;
 }
 verdocs-field-checkbox label {
+  cursor: inherit;
   width: 14px;
   height: 14px;
   display: block;

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

@@ -823,6 +823,7 @@ verdocs-field-date.disabled {
   opacity: 0.5;
 }
 verdocs-field-date input {
+  cursor: inherit;
   box-sizing: border-box;
   color: rgba(0, 0, 0, 0.87);
   font-weight: 500;

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

@@ -1,16 +1,16 @@
+import { format } from 'date-fns';
 import flatpickr from 'flatpickr';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { FORMAT_DATE } from '../../../utils/Types';
-import { format } from 'date-fns';
 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>';
 /**
  * Displays a date field. When tapped or clicked, the input element will display a date picker component.
  */
 export class VerdocsFieldDate {
   constructor() {
-    this.templateId = '';
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -53,7 +53,6 @@ export class VerdocsFieldDate {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    // TemplateStore.updateCount++;
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
@@ -65,7 +64,7 @@ export class VerdocsFieldDate {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, 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: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { name: this.field.name, type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, 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: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -88,7 +87,7 @@ export class VerdocsFieldDate {
   }
   static get properties() {
     return {
-      "templateId": {
+      "templateid": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -102,7 +101,7 @@ export class VerdocsFieldDate {
           "tags": [],
           "text": "The template the field is for/from. Only required for the field builder, passed down to the properties component."
         },
-        "attribute": "template-id",
+        "attribute": "templateid",
         "reflect": false,
         "defaultValue": "''"
       },

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

@@ -12,6 +12,7 @@ verdocs-field-dropdown.disabled {
   opacity: 0.5;
 }
 verdocs-field-dropdown select {
+  cursor: inherit;
   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;

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

@@ -22,6 +22,7 @@ verdocs-field-initial img {
   max-height: 100%;
 }
 verdocs-field-initial button {
+  cursor: inherit;
   box-sizing: border-box;
   border: none;
   color: rgba(0, 0, 0, 0.87);

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

@@ -18,6 +18,9 @@ verdocs-field-radio-button.disabled {
 verdocs-field-radio-button.disabled.done {
   opacity: 1;
 }
+verdocs-field-radio-button input {
+  cursor: inherit;
+}
 verdocs-field-radio-button.done input[type=radio] {
   margin: 0;
   padding: 0;

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

@@ -23,6 +23,7 @@ verdocs-field-signature img {
   max-height: 100%;
 }
 verdocs-field-signature button {
+  cursor: inherit;
   box-sizing: border-box;
   border: none;
   color: rgba(0, 0, 0, 0.87);

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

@@ -14,6 +14,7 @@ verdocs-field-textarea.disabled {
   opacity: 0.5;
 }
 verdocs-field-textarea textarea {
+  cursor: inherit;
   width: 100%;
   height: 100%;
   resize: none;

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

@@ -15,6 +15,7 @@ verdocs-field-textbox.disabled {
   opacity: 0.5;
 }
 verdocs-field-textbox input {
+  cursor: inherit;
   width: 100%;
   height: 100%;
   border: none;

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

@@ -13,6 +13,7 @@ verdocs-field-timestamp.done {
   opacity: 1;
 }
 verdocs-field-timestamp input {
+  cursor: inherit;
   width: 100%;
   height: 100%;
   font-size: 9px;

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -37,7 +37,7 @@ export class VerdocsTemplateFieldProperties {
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+        console.log(`[FIELD PROPERTIES] Missing required template ID ${this.templateId}`);
         return;
       }
       if (!this.fieldName) {
@@ -45,7 +45,7 @@ export class VerdocsTemplateFieldProperties {
         return;
       }
       if (!this.endpoint.session) {
-        console.log('[ROLES] Unable to start builder session, must be authenticated');
+        console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
       this.store = await getTemplateStore(this.endpoint, this.templateId, false);
@@ -184,9 +184,8 @@ export class VerdocsTemplateFieldProperties {
     e.stopPropagation();
     if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
       deleteField(this.endpoint, this.templateId, this.fieldName)
-        .then(r => {
+        .then(() => {
         var _a, _b, _c, _d, _e;
-        console.log('Field deleted', r);
         this.store.state.fields = [...(_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.name !== this.fieldName)];
         (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.forEach(role => {
           role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
@@ -194,7 +193,7 @@ export class VerdocsTemplateFieldProperties {
         (_e = this.delete) === null || _e === void 0 ? void 0 : _e.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
-        console.log('Deletion error', e);
+        console.log('[FIELD PROPERTIES] Deletion error', e);
       });
     }
   }

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

@@ -184,7 +184,6 @@ export class VerdocsTemplateFields {
     var _a;
     const pageNumber = event.target.getAttribute('pageNumber');
     const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
-    console.log('[FIELDS] Drag ended', pageNumber, event.target);
     const clientRect = event.target.getBoundingClientRect();
     const parent = event.target.parentElement;
     const parentRect = parent.getBoundingClientRect();
@@ -196,7 +195,6 @@ export class VerdocsTemplateFields {
     const name = event.target.getAttribute('name');
     const option = +(event.target.getAttribute('option') || '0');
     const field = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state.fields.find(field => field.name === name);
-    console.log('[FIELDS] Will update', name, option, field);
     if (field) {
       switch (field.type) {
         case 'attachment':
@@ -222,10 +220,13 @@ export class VerdocsTemplateFields {
           }
           break;
       }
+      console.log('[FIELDS] Will update', name, option, field);
       const newFieldData = await updateField(this.endpoint, this.templateId, name, field);
       const pageInfo = this.cachedPageInfo[pageNumber];
       const roleIndex = getRoleIndex(getRoleNames(this.store), field.role_name);
       this.handleFieldSettingsChange(pageInfo, field, roleIndex, event.target, newFieldData);
+      event.target.removeAttribute('posX');
+      event.target.removeAttribute('posY');
     }
   }
   generateFieldName(type, pageNumber) {
@@ -304,8 +305,6 @@ export class VerdocsTemplateFields {
         case 'date':
           field.setting = { x, y, width, height, result: '' };
           break;
-        // TODO: What is this?
-        // case 'placeholder':break;
         case 'dropdown':
           field.required = false;
           field.setting = { x, y, width, height, value: null, placeholder: 'Choose', options: [{ id: 'option-1', value: 'Option 1' }] };

package/dist/components/EnvelopeStore.js

@@ -0,0 +1,81 @@
+import { c as createStore } from './index3.js';
+import { i as getEnvelope } from './Envelopes.js';
+
+const createEnvelopeStore = (envelopeId) => {
+  const now = new Date().toISOString();
+  return createStore({
+    isLoading: true,
+    isLoaded: false,
+    isError: false,
+    error: null,
+    updateCount: 0,
+    roleNames: [],
+    id: envelopeId,
+    template_id: '',
+    name: '',
+    status: 'pending',
+    profile_id: '',
+    organization_id: '',
+    no_contact: false,
+    created_at: now,
+    updated_at: now,
+    canceled_at: null,
+    reminder_id: null,
+    envelope_document_id: '',
+    certificate_document_id: null,
+    visibility: 'private',
+    histories: [],
+    recipients: [],
+    profile: undefined,
+    certificate: undefined,
+    document: undefined,
+    documents: undefined,
+    fields: undefined,
+  });
+};
+const envelopeStores = {};
+const getEnvelopeStore = async (endpoint, envelopeId, forceReload = false) => {
+  let created = false;
+  if (!envelopeStores[envelopeId]) {
+    console.debug('[ENVELOPES] No envelope store found for ID, creating', envelopeId);
+    envelopeStores[envelopeId] = createEnvelopeStore(envelopeId);
+    created = true;
+  }
+  const store = envelopeStores[envelopeId];
+  // NOTE: If we need it, store.use() returns an unsubcribe function
+  // See https://github.com/ionic-team/stencil-store#storeusesubscriptions
+  store.use({
+    reset: () => console.debug('[ENVELOPES] Store got reset'),
+    dispose: () => console.debug('[ENVELOPES] Store got disposed'),
+  });
+  // TODO: This can create a race condition if two components call this at the same time.
+  //  For now we can probably defer doing something smart here because it's only a
+  //  double-load issue.
+  if (created || forceReload) {
+    console.debug('[ENVELOPES] Reloading envelope', { envelopeId, created, forceReload });
+    store.state.isLoading = true;
+    store.state.isLoaded = false;
+    store.state.isError = false;
+    store.state.error = undefined;
+    try {
+      const envelope = await getEnvelope(endpoint, envelopeId);
+      console.debug('[ENVELOPES] Got envelope', envelope);
+      Object.assign(store.state, envelope);
+      store.state.isLoaded = true;
+      store.state.isError = false;
+      store.state.error = undefined;
+    }
+    catch (e) {
+      console.error('[ENVELOPES] Error loading envelope', e);
+      store.state.isLoaded = false;
+      store.state.isError = true;
+      store.state.error = e;
+      throw e;
+    }
+    store.state.isLoading = false;
+    store.state.updateCount++;
+  }
+  return store;
+};
+
+export { getEnvelopeStore as g };

package/dist/components/Envelopes.js

@@ -195,4 +195,4 @@ var throttledGetEnvelope = function (endpoint, envelopeId) {
     });
 };
 
-export { getSigningSession as a, updateEnvelopeFieldSignature as b, cancelEnvelope as c, updateEnvelopeFieldInitials as d, getEnvelopeDocumentPageDisplayUri as e, getEnvelope as f, getSummary as g, getEnvelopeFile as h, getFieldAttachment as i, searchEnvelopes as s, throttledGetEnvelope as t, updateEnvelopeField as u };
+export { getSigningSession as a, updateEnvelopeFieldSignature as b, cancelEnvelope as c, updateEnvelopeFieldInitials as d, getEnvelopeDocumentPageDisplayUri as e, getEnvelopeFile as f, getSummary as g, getFieldAttachment as h, getEnvelope as i, searchEnvelopes as s, throttledGetEnvelope as t, updateEnvelopeField as u };

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export { VerdocsComponentError as VerdocsComponentError } from '../types/compone
 export { VerdocsContactPicker as VerdocsContactPicker } from '../types/components/envelopes/verdocs-contact-picker/verdocs-contact-picker';
 export { VerdocsDropdown as VerdocsDropdown } from '../types/components/controls/verdocs-dropdown/verdocs-dropdown';
 export { VerdocsEnvelopeDocumentPage as VerdocsEnvelopeDocumentPage } from '../types/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page';
+export { VerdocsEnvelopeRecipientLink as VerdocsEnvelopeRecipientLink } from '../types/components/envelopes/verdocs-envelope-recipient-link/verdocs-envelope-recipient-link';
 export { VerdocsEnvelopeRecipientSummary as VerdocsEnvelopeRecipientSummary } from '../types/components/envelopes/verdocs-envelope-recipient-summary/verdocs-envelope-recipient-summary';
 export { VerdocsEnvelopeSidebar as VerdocsEnvelopeSidebar } from '../types/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar';
 export { VerdocsEnvelopesList as VerdocsEnvelopesList } from '../types/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list';

package/dist/components/index.js

@@ -10,6 +10,7 @@ export { VerdocsComponentError, defineCustomElement as defineCustomElementVerdoc
 export { VerdocsContactPicker, defineCustomElement as defineCustomElementVerdocsContactPicker } from './verdocs-contact-picker.js';
 export { VerdocsDropdown, defineCustomElement as defineCustomElementVerdocsDropdown } from './verdocs-dropdown.js';
 export { VerdocsEnvelopeDocumentPage, defineCustomElement as defineCustomElementVerdocsEnvelopeDocumentPage } from './verdocs-envelope-document-page.js';
+export { VerdocsEnvelopeRecipientLink, defineCustomElement as defineCustomElementVerdocsEnvelopeRecipientLink } from './verdocs-envelope-recipient-link.js';
 export { VerdocsEnvelopeRecipientSummary, defineCustomElement as defineCustomElementVerdocsEnvelopeRecipientSummary } from './verdocs-envelope-recipient-summary.js';
 export { VerdocsEnvelopeSidebar, defineCustomElement as defineCustomElementVerdocsEnvelopeSidebar } from './verdocs-envelope-sidebar.js';
 export { VerdocsEnvelopesList, defineCustomElement as defineCustomElementVerdocsEnvelopesList } from './verdocs-envelopes-list.js';

package/dist/components/utils.js

@@ -1,5 +1,5 @@
 import { a as createCommonjsModule, c as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers.js';
-import { h as getEnvelopeFile, i as getFieldAttachment } from './Envelopes.js';
+import { f as getEnvelopeFile, h as getFieldAttachment } from './Envelopes.js';
 import './Types.js';
 import { d as downloadBlob } from './Files.js';
 import { a as FORMAT_DATE } from './Types2.js';

package/dist/components/verdocs-envelope-recipient-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsEnvelopeRecipientLink extends Components.VerdocsEnvelopeRecipientLink, HTMLElement {}
+export const VerdocsEnvelopeRecipientLink: {
+  prototype: VerdocsEnvelopeRecipientLink;
+  new (): VerdocsEnvelopeRecipientLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { V as VerdocsEnvelopeRecipientLink$1, d as defineCustomElement$1 } from './verdocs-envelope-recipient-link2.js';
+
+const VerdocsEnvelopeRecipientLink = VerdocsEnvelopeRecipientLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsEnvelopeRecipientLink, defineCustomElement };