@verdocs/web-sdk 1.13.23 → 1.13.26

package/dist/components/VerdocsEndpoint.js

@@ -1,5 +1,35 @@
 import { d as decodeAccessTokenBody } from './Types.js';
 
+var TemplateSenderTypes;
+(function (TemplateSenderTypes) {
+    TemplateSenderTypes["CREATOR"] = "creator";
+    TemplateSenderTypes["ORGANIZATION_MEMBER"] = "organization_member";
+    TemplateSenderTypes["ORGANIZATION_MEMBER_AS_CREATOR"] = "organization_member_as_creator";
+    TemplateSenderTypes["EVERYONE"] = "everyone";
+    TemplateSenderTypes["EVERYONE_AS_CREATOR"] = "everyone_as_creator";
+})(TemplateSenderTypes || (TemplateSenderTypes = {}));
+var TemplateActions;
+(function (TemplateActions) {
+    TemplateActions["CREATE_PERSONAL"] = "create_personal";
+    TemplateActions["CREATE_ORG"] = "create_org";
+    TemplateActions["CREATE_PUBLIC"] = "create_public";
+    TemplateActions["READ"] = "read";
+    TemplateActions["WRITE"] = "write";
+    TemplateActions["DELETE"] = "delete";
+    TemplateActions["CHANGE_VISIBILITY_PERSONAL"] = "change_visibility_personal";
+    TemplateActions["CHANGE_VISIBILITY_ORG"] = "change_visibility_org";
+    TemplateActions["CHANGE_VISIBILITY_PUBLIC"] = "change_visibility_public";
+})(TemplateActions || (TemplateActions = {}));
+var SortOptions;
+(function (SortOptions) {
+    SortOptions["CREATED_AT"] = "created_at";
+    SortOptions["UPDATED_AT"] = "updated_at";
+    SortOptions["NAME"] = "name";
+    SortOptions["LAST_USED_AT"] = "last_used_at";
+    SortOptions["COUNTER"] = "counter";
+    SortOptions["STAR_COUNTER"] = "star_counter";
+})(SortOptions || (SortOptions = {}));
+
 /**
  * Operation within Verdocs that users may perform.
  */
@@ -48,36 +78,6 @@ var Roles;
     Roles["MEMBER"] = "member";
 })(Roles || (Roles = {}));
 
-var TemplateSenderTypes;
-(function (TemplateSenderTypes) {
-    TemplateSenderTypes["CREATOR"] = "creator";
-    TemplateSenderTypes["ORGANIZATION_MEMBER"] = "organization_member";
-    TemplateSenderTypes["ORGANIZATION_MEMBER_AS_CREATOR"] = "organization_member_as_creator";
-    TemplateSenderTypes["EVERYONE"] = "everyone";
-    TemplateSenderTypes["EVERYONE_AS_CREATOR"] = "everyone_as_creator";
-})(TemplateSenderTypes || (TemplateSenderTypes = {}));
-var TemplateActions;
-(function (TemplateActions) {
-    TemplateActions["CREATE_PERSONAL"] = "create_personal";
-    TemplateActions["CREATE_ORG"] = "create_org";
-    TemplateActions["CREATE_PUBLIC"] = "create_public";
-    TemplateActions["READ"] = "read";
-    TemplateActions["WRITE"] = "write";
-    TemplateActions["DELETE"] = "delete";
-    TemplateActions["CHANGE_VISIBILITY_PERSONAL"] = "change_visibility_personal";
-    TemplateActions["CHANGE_VISIBILITY_ORG"] = "change_visibility_org";
-    TemplateActions["CHANGE_VISIBILITY_PUBLIC"] = "change_visibility_public";
-})(TemplateActions || (TemplateActions = {}));
-var SortOptions;
-(function (SortOptions) {
-    SortOptions["CREATED_AT"] = "created_at";
-    SortOptions["UPDATED_AT"] = "updated_at";
-    SortOptions["NAME"] = "name";
-    SortOptions["LAST_USED_AT"] = "last_used_at";
-    SortOptions["COUNTER"] = "counter";
-    SortOptions["STAR_COUNTER"] = "star_counter";
-})(SortOptions || (SortOptions = {}));
-
 const denyList = new Set([
 	'ENOTFOUND',
 	'ENETUNREACH',

package/dist/components/index.d.ts

@@ -1,14 +1,15 @@
 /* VerdocsWebSdk custom elements */
+export { IpcTest as IpcTest } from '../types/components/other/ipctest/ipc-test';
 export { VerdocsAuth as VerdocsAuth } from '../types/components/embeds/verdocs-auth/verdocs-auth';
 export { VerdocsBuild as VerdocsBuild } from '../types/components/embeds/verdocs-build/verdocs-build';
 export { VerdocsButton as VerdocsButton } from '../types/components/controls/verdocs-button/verdocs-button';
 export { VerdocsButtonPanel as VerdocsButtonPanel } from '../types/components/controls/verdocs-button-panel/verdocs-button-panel';
 export { VerdocsCheckbox as VerdocsCheckbox } from '../types/components/controls/verdocs-checkbox/verdocs-checkbox';
-export { VerdocsComponentError as VerdocsComponentError } from '../types/components/elements/verdocs-component-error/verdocs-component-error';
-export { VerdocsContactPicker as VerdocsContactPicker } from '../types/components/elements/verdocs-contact-picker/verdocs-contact-picker';
+export { VerdocsComponentError as VerdocsComponentError } from '../types/components/controls/verdocs-component-error/verdocs-component-error';
+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/elements/verdocs-envelope-document-page/verdocs-envelope-document-page';
-export { VerdocsEnvelopeSidebar as VerdocsEnvelopeSidebar } from '../types/components/elements/verdocs-envelope-sidebar/verdocs-envelope-sidebar';
+export { VerdocsEnvelopeDocumentPage as VerdocsEnvelopeDocumentPage } from '../types/components/envelopes/verdocs-envelope-document-page/verdocs-envelope-document-page';
+export { VerdocsEnvelopeSidebar as VerdocsEnvelopeSidebar } from '../types/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar';
 export { VerdocsFieldAttachment as VerdocsFieldAttachment } from '../types/components/fields/verdocs-field-attachment/verdocs-field-attachment';
 export { VerdocsFieldCheckbox as VerdocsFieldCheckbox } from '../types/components/fields/verdocs-field-checkbox/verdocs-field-checkbox';
 export { VerdocsFieldDate as VerdocsFieldDate } from '../types/components/fields/verdocs-field-date/verdocs-field-date';
@@ -40,9 +41,9 @@ export { VerdocsSelectInput as VerdocsSelectInput } from '../types/components/co
 export { VerdocsSend as VerdocsSend } from '../types/components/embeds/verdocs-send/verdocs-send';
 export { VerdocsSign as VerdocsSign } from '../types/components/embeds/verdocs-sign/verdocs-sign';
 export { VerdocsSignatureDialog as VerdocsSignatureDialog } from '../types/components/dialogs/verdocs-signature-dialog/verdocs-signature-dialog';
-export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/components/controls/verdocs-status-indicator/verdocs-status-indicator';
+export { VerdocsStatusIndicator as VerdocsStatusIndicator } from '../types/components/envelopes/verdocs-status-indicator/verdocs-status-indicator';
 export { VerdocsTemplateAttachments as VerdocsTemplateAttachments } from '../types/components/templates/verdocs-template-attachments/verdocs-template-attachments';
-export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/controls/verdocs-template-card/verdocs-template-card';
+export { VerdocsTemplateCard as VerdocsTemplateCard } from '../types/components/templates/verdocs-template-card/verdocs-template-card';
 export { VerdocsTemplateCreate as VerdocsTemplateCreate } from '../types/components/templates/verdocs-template-create/verdocs-template-create';
 export { VerdocsTemplateDocumentPage as VerdocsTemplateDocumentPage } from '../types/components/templates/verdocs-template-document-page/verdocs-template-document-page';
 export { VerdocsTemplateFieldProperties as VerdocsTemplateFieldProperties } from '../types/components/templates/verdocs-template-field-properties/verdocs-template-field-properties';
@@ -53,7 +54,7 @@ export { VerdocsTemplateReminders as VerdocsTemplateReminders } from '../types/c
 export { VerdocsTemplateRoleProperties as VerdocsTemplateRoleProperties } from '../types/components/templates/verdocs-template-role-properties/verdocs-template-role-properties';
 export { VerdocsTemplateRoles as VerdocsTemplateRoles } from '../types/components/templates/verdocs-template-roles/verdocs-template-roles';
 export { VerdocsTemplateSender as VerdocsTemplateSender } from '../types/components/templates/verdocs-template-sender/verdocs-template-sender';
-export { VerdocsTemplateTags as VerdocsTemplateTags } from '../types/components/controls/verdocs-template-tags/verdocs-template-tags';
+export { VerdocsTemplateTags as VerdocsTemplateTags } from '../types/components/templates/verdocs-template-tags/verdocs-template-tags';
 export { VerdocsTemplateVisibility as VerdocsTemplateVisibility } from '../types/components/templates/verdocs-template-visibillity/verdocs-template-visibility';
 export { VerdocsTextInput as VerdocsTextInput } from '../types/components/controls/verdocs-text-input/verdocs-text-input';
 export { VerdocsToggle as VerdocsToggle } from '../types/components/controls/verdocs-toggle/verdocs-toggle';

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { IpcTest, defineCustomElement as defineCustomElementIpcTest } from './ipc-test.js';
 export { VerdocsAuth, defineCustomElement as defineCustomElementVerdocsAuth } from './verdocs-auth.js';
 export { VerdocsBuild, defineCustomElement as defineCustomElementVerdocsBuild } from './verdocs-build.js';
 export { VerdocsButton, defineCustomElement as defineCustomElementVerdocsButton } from './verdocs-button.js';

package/dist/components/ipc-test.d.ts

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

package/dist/components/ipc-test.js

@@ -0,0 +1,142 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { g as getTemplateStore } from './TemplateStore.js';
+import { d as defineCustomElement$g } from './verdocs-button2.js';
+import { d as defineCustomElement$f } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$e } from './verdocs-component-error2.js';
+import { d as defineCustomElement$d } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$c } from './verdocs-loader2.js';
+import { d as defineCustomElement$b } from './verdocs-ok-dialog2.js';
+import { d as defineCustomElement$a } from './verdocs-radio-button2.js';
+import { d as defineCustomElement$9 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$8 } from './verdocs-template-document-page2.js';
+import { d as defineCustomElement$7 } from './verdocs-template-fields2.js';
+import { d as defineCustomElement$6 } from './verdocs-template-role-properties2.js';
+import { d as defineCustomElement$5 } from './verdocs-template-roles2.js';
+import { d as defineCustomElement$4 } from './verdocs-template-sender2.js';
+import { d as defineCustomElement$3 } from './verdocs-text-input2.js';
+import { d as defineCustomElement$2 } from './verdocs-toolbar-icon2.js';
+
+const ipcTestCss = "ipc-test{max-width:800px;display:block}";
+
+const IpcTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.store = null;
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.templateId = 'e997b94c-9d1b-4c85-8552-dedd24e35550';
+  }
+  async componentWillLoad() {
+    try {
+      this.endpoint.loadSession();
+      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
+    }
+    catch (e) {
+      console.log('[TEMPLATE VISIBILITY] Error loading template', e);
+    }
+  }
+  render() {
+    console.log('[IPC] Rendering');
+    return (h(Host, null, h("div", null, h("pre", null, h("code", null, JSON.stringify(this.store.state, null, 2)))), h("verdocs-template-roles", { templateId: this.templateId }), h("verdocs-template-fields", { templateId: this.templateId })));
+  }
+  static get style() { return ipcTestCss; }
+}, [0, "ipc-test", {
+    "endpoint": [16],
+    "templateId": [1, "template-id"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ipc-test", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-loader", "verdocs-ok-dialog", "verdocs-radio-button", "verdocs-select-input", "verdocs-template-document-page", "verdocs-template-fields", "verdocs-template-role-properties", "verdocs-template-roles", "verdocs-template-sender", "verdocs-text-input", "verdocs-toolbar-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ipc-test":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IpcTest$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "verdocs-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "verdocs-component-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "verdocs-ok-dialog":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "verdocs-radio-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "verdocs-template-document-page":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-template-fields":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-template-role-properties":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-template-roles":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-template-sender":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-toolbar-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const IpcTest = IpcTest$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { IpcTest, defineCustomElement };

package/dist/components/utils.js

@@ -32,7 +32,7 @@ const defaultWidth = (type) => {
     case 'textbox':
       return 150;
     case 'timestamp':
-      return 64;
+      return 120;
     case 'date':
       return 84;
     case 'dropdown':

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { t as throttledGetEnvelope } from './Envelopes.js';
 import './Types.js';
+import { g as getInPersonLink } from './Recipients.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$2 } from './verdocs-dropdown2.js';
@@ -83,7 +84,20 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   handleRecipientAction(recipient, id) {
     var _a;
-    console.log('recipient action', id, recipient);
+    console.log('[SIDEBAR] Recipient action', id, recipient);
+    switch (id) {
+      case 'inperson':
+        getInPersonLink(this.endpoint, recipient.envelope_id, recipient.role_name)
+          // TODO: Can remove "any" once js-sdk is updated
+          .then((response) => {
+          var _a, _b;
+          console.log('Got in person link');
+          return (_b = (_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) === null || _b === void 0 ? void 0 : _b.writeText(response.link);
+        })
+          .then(r => console.log('copy result', r))
+          .catch(e => console.warn('[SIDEBAR] Error getting link', e));
+        break;
+    }
     (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: this.envelope, event: id });
   }
   prepareHistoryEntries() {
@@ -208,9 +222,10 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class extends
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = session.profile_id === this.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
+    console.log('e', this.envelope);
     return (h(Host, { class: this.panelOpen ? 'open' : '' }, h("div", { class: "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), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(this.envelope.updated_at), 'PP pp')), 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.envelope.recipients.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.type), h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
+      _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.envelope.recipients.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) },
         { id: 'inperson', label: 'Get In-Person Link', disabled: !this.canModifyRecipient(recipient) || !['invited', 'opened'].includes(recipient.status) },

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

@@ -2587,7 +2587,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     const { result } = getFieldSettings(this.field);
     flatpickr('#' + this.containerId, {
       positionElement: this.el,
-      dateFormat: 'M d, Y',
+      dateFormat: 'M j, Y',
       defaultDate: result,
       onChange: selectedDate => {
         // console.log('Selected', selectedDate, dateStr, instance);
@@ -2620,7 +2620,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     const disabled = (_b = (_a = this.disabled) !== null && _a !== void 0 ? _a : settings.disabled) !== null && _b !== void 0 ? _b : false;
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     if (this.done) {
-      const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
+      const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'MMM d, y') : '';
       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: () => {

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

@@ -52,7 +52,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     const backgroundColor = this.field['rgba'] || getRGBA(this.roleindex);
     const value = settings.value || new Date().toISOString();
     const dt = new Date(value);
-    const formatted = format(dt, 'MMM d, y');
+    const formatted = format(dt, 'PPpp');
     if (this.done) {
       return h(Host, { class: { done: this.done } }, formatted);
     }

package/dist/components/verdocs-sign.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getSigningSession, t as throttledGetEnvelope, u as updateEnvelopeField, a as updateEnvelopeFieldSignature, b as updateEnvelopeFieldInitials } from './Envelopes.js';
 import { R as RecipientStates } from './Types.js';
+import { e as envelopeRecipientAgree, a as envelopeRecipientDecline, b as envelopeRecipientSubmit } from './Recipients.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators.js';
 import { f as fullNameToInitials, i as integerSequence } from './Primitives.js';
@@ -15,71 +16,6 @@ import { d as defineCustomElement$3 } from './verdocs-ok-dialog2.js';
 import { d as defineCustomElement$2 } from './verdocs-view2.js';
 import { f as format } from './index2.js';
 
-var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-/**
- * Update a recipient's status block
- */
-var updateRecipient = function (endpoint, envelopeId, roleName, params) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        return [2 /*return*/, endpoint.api //
-                .put("/envelopes/".concat(envelopeId, "/recipients/").concat(roleName), params)
-                .then(function (r) { return r.data; })];
-    });
-}); };
-/**
- * Submit an envelope (signing is finished). Note that all fields must be valid/completed for this to succeed.
- */
-var envelopeRecipientSubmit = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'submit' });
-};
-/**
- * Decline to complete an envelope (signing will not terminated).
- */
-var envelopeRecipientDecline = function (endpoint, envelopeId, roleName) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'decline' });
-};
-/**
- * Agree to electronic signing.
- */
-var envelopeRecipientAgree = function (endpoint, envelopeId, roleName, agreed) {
-    return updateRecipient(endpoint, envelopeId, roleName, { action: 'update', agreed: agreed });
-};
-
 /**
  * Create a signature block. In a typical signing workflow, the user is asked at the beginning of the process to "adopt"
  * a signature block to be used for all signature fields in the document. Thus, this is typically called one time to
@@ -466,6 +402,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     const roleIndex = getRoleIndex(this.roleNames, this.recipient.role_name);
     const recipientFields = this.recipient.fields.filter(field => field.page === pageInfo.pageNumber);
     console.log('[SIGN] Page rendered, updating fields', { pageInfo, roleIndex, recipientFields });
+    // First render the fields for the signer
     recipientFields.forEach(field => {
       const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: false, editable: false, draggable: false, done: this.isDone });
       if (!el) {
@@ -477,78 +414,24 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       else {
         this.attachFieldAttributes(pageInfo, field, roleIndex, el);
       }
-      // interact(el).draggable({
-      //   listeners: {
-      //     start(event) {
-      //       console.log('[FIELDS] Drag started', event.type, event.target);
-      //     },
-      //     move(event) {
-      //       const oldX = +(event.target.getAttribute('posX') || 0);
-      //       const oldY = +(event.target.getAttribute('posY') || 0);
-      //       const xScale = +(event.target.getAttribute('xScale') || 1);
-      //       const yScale = +(event.target.getAttribute('yScale') || 1);
-      //       const newX = event.dx / xScale + oldX;
-      //       const newY = event.dy / yScale + oldY;
-      //       event.target.setAttribute('posX', newX);
-      //       event.target.setAttribute('posy', newY);
-      //       updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
-      //     },
-      //     end(event) {
-      //       console.log('[FIELDS] Drag ended', event);
-      //       // event.target.setAttribute('posX', 0);
-      //       // event.target.setAttribute('posy', 0);
-      //       // updateCssTransform(event.target, 'translate', `${0}px, ${0}px`);
-      //     },
-      //   },
-      // });
     });
+    // Now render the fields for other signers who have yet to act
     this.envelope.recipients
-      .filter(r => r.role_name !== this.recipient.role_name && (r.status === RecipientStates.SUBMITTED || r.status === RecipientStates.CANCELED || r.status === RecipientStates.DECLINED))
+      .filter(r => r.role_name !== this.recipient.role_name && (r.status === RecipientStates.INVITED || r.status === RecipientStates.OPENED || r.status === RecipientStates.PENDING))
       .forEach(recipient => {
+      const otherIndex = getRoleIndex(this.roleNames, this.recipient.role_name);
       recipient.fields.forEach(field => {
-        const el = renderDocumentField(field, pageInfo, roleIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
+        const el = renderDocumentField(field, pageInfo, otherIndex, { disabled: true, editable: false, draggable: false, done: this.isDone });
         if (!el) {
           return;
         }
         if (Array.isArray(el)) {
-          el.map(e => this.attachFieldAttributes(pageInfo, field, roleIndex, e));
+          el.map(e => this.attachFieldAttributes(pageInfo, field, otherIndex, e));
         }
         else {
-          this.attachFieldAttributes(pageInfo, field, roleIndex, el);
-        }
-      });
-    });
-    // Render fields for "the other" recipients
-    this.envelope.recipients
-      .filter(recipient => recipient.role_name !== this.recipient.role_name)
-      .forEach(otherRecipient => {
-      const otherRoleIndex = getRoleIndex(this.roleNames, otherRecipient.role_name);
-      const recipientFields = otherRecipient.fields.filter(field => field.page === pageInfo.pageNumber);
-      // We don't render other recipients' fields if they've already acted, because those values are now stamped into the document page.
-      // TODO: Do we want to render alternate treatments for recipients who have declined (red boxes?) and/or if the envelope is cancelled?
-      // TODO: When doing server-side rendering we probably want to "stamp" values into the rendered PDF only once the recipient is done
-      //  acting. Do this once vSign is in Production.
-      // TODO: Changed tacks here. During signing we show the template PDFs and everybody's fields, filled in or no. When done, we switch
-      //  to showing the envelope PDFs with stamped-in values. Confirm this is a good approach.
-      // if (!['submitted', 'signed'].includes(otherRecipient.status)) {
-      recipientFields.forEach(field => {
-        const el = renderDocumentField(field, pageInfo, otherRoleIndex, {
-          disabled: true,
-          editable: false,
-          draggable: false,
-          done: this.isDone,
-        });
-        if (!el) {
-          return;
-        }
-        // TODO: Research why this occurs. There are cases when we're getting "el.setAttribute is not a function"
-        if (el.setAttribute) {
-          el.setAttribute('roleindex', otherRoleIndex);
-          el.setAttribute('xScale', pageInfo.xScale);
-          el.setAttribute('yScale', pageInfo.yScale);
+          this.attachFieldAttributes(pageInfo, field, otherIndex, el);
         }
       });
-      // }
     });
     this.checkRecipientFields();
   }

package/dist/components/verdocs-template-role-properties2.js

@@ -32,7 +32,7 @@ var deleteRole = function (endpoint, templateId, roleName) {
         .then(function (r) { return r.data; });
 };
 
-const verdocsTemplateRolePropertiesCss = "verdocs-template-role-properties{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .background-overlay{position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-role-properties .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-role-properties verdocs-text-input{margin:0 0 10px 0}verdocs-template-role-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}";
+const verdocsTemplateRolePropertiesCss = "verdocs-template-role-properties{font-family:\"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-template-role-properties .background-overlay{position:fixed;z-index:10000;top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background:#0000007f}verdocs-template-role-properties .dialog{width:340px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-template-role-properties .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-template-role-properties .buttons verdocs-button{margin-left:16px}verdocs-template-role-properties form .row{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:0 0 10px 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties form .row .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0;-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-select-input{-ms-flex:1;flex:1;margin:0}verdocs-template-role-properties verdocs-text-input{margin:0 0 10px 0}verdocs-template-role-properties verdocs-text-input label{margin:0;display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-template-role-properties verdocs-text-input .input-label{-ms-flex:0 0 100px;flex:0 0 100px}verdocs-template-role-properties verdocs-text-input input{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties verdocs-text-input verdocs-text-input{margin:0}verdocs-template-role-properties .checkbox-wrapper{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}verdocs-template-role-properties .delete-button{height:34px;display:-ms-flexbox;display:flex;padding:0 6px;cursor:pointer;background:none;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #999;-ms-flex-pack:center;justify-content:center}verdocs-template-role-properties .delete-button svg{width:24px;height:24px}verdocs-template-role-properties .delete-button:active{background:#f3f3f3}";
 
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#a50021"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>`;
 const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -146,7 +146,10 @@ const VerdocsTemplateRoleProperties = /*@__PURE__*/ proxyCustomElement(class ext
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { class: "dialog" }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { id: "verdocs-recipient-name", label: "Role Name", value: this.name, autocomplete: "off", helpText: "A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.", placeholder: "Template Name...", onInput: (e) => {
+    const hasFields = (this.store.state.fields || []).findIndex(field => field.role_name === this.roleName) !== -1;
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { class: "dialog" }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { id: "verdocs-recipient-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        ? 'This role has fields assigned and can no longer be renamed.'
+        : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Template Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = true;
       } }), h("div", { class: "row" }, h("div", { class: "input-label" }, "Type:"), h("verdocs-select-input", { value: this.type, options: [