@verdocs/web-sdk 1.10.10 → 1.11.1

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

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-7f17b088.js';
-import { g as getEnvelopeById, s as state } from './Envelopes-91d7e139.js';
+import { g as getEnvelopeById, s as state } from './Envelopes-b8945309.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import { f as format } from './index-d264c496.js';
 import './Token-54690789.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './index-fd7b8a34.js';
 import './Templates-8e4ab976.js';
 
@@ -38,6 +38,7 @@ const VerdocsEnvelopeSidebar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.envelopeUpdated = createEvent(this, "envelopeUpdated", 7);
     this.endpoint = VerdocsEndpoint.getDefault();
     this.envelopeId = '';
     this.activeTab = 1;
@@ -76,7 +77,9 @@ const VerdocsEnvelopeSidebar = class {
       !['complete', 'declined', 'canceled'].includes(state.envelope.status));
   }
   handleRecipientAction(recipient, id) {
+    var _a;
     console.log('recipient action', id, recipient);
+    (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: id });
   }
   prepareHistoryEntries() {
     const entries = [];
@@ -200,7 +203,7 @@ const VerdocsEnvelopeSidebar = class {
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = session.profile_id === state.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
-    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" }, state.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(state.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(state.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, state.envelope.status), h("div", { class: "label" }, "Verdoc Owner UUID"), h("div", { class: "value" }, state.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = state.envelope.profile) === null || _a === void 0 ? void 0 :
+    return (h(Host, { class: this.panelOpen ? 'open' : '', "data-r": state.updateCount }, 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" }, state.envelope.id), h("div", { class: "label" }, "Date Created"), h("div", { class: "value" }, format(new Date(state.envelope.created_at), 'PP pp')), h("div", { class: "label" }, "Last Modified"), h("div", { class: "value" }, format(new Date(state.envelope.updated_at), 'PP pp')), h("div", { class: "label" }, "Status"), h("div", { class: "value" }, state.envelope.status), h("div", { class: "label" }, "Verdoc Owner UUID"), h("div", { class: "value" }, state.envelope.profile_id), h("div", { class: "label" }, "Verdoc Owner Name"), h("div", { class: "value" }, (_a = state.envelope.profile) === null || _a === void 0 ? void 0 :
       _a.first_name, " ", (_b = state.envelope.profile) === null || _b === void 0 ? void 0 :
       _b.last_name), h("div", { class: "label" }, "Verdoc Owner Email"), h("div", { class: "value" }, (_c = state.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (h("div", { class: "content" }, h("div", { class: "title" }, "Recipients"), state.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: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 
@@ -45,7 +46,11 @@ const VerdocsFieldCheckbox = class {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-fd4beaae.js';
 import { f as format } from './index-d264c496.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
 import './index-fd7b8a34.js';
@@ -2617,7 +2617,11 @@ const VerdocsFieldDate = class {
       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: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 
@@ -73,7 +74,11 @@ const VerdocsFieldInitial = class {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 
@@ -49,7 +50,11 @@ const VerdocsFieldRadioButton = class {
     if (this.done) {
       return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 
@@ -72,7 +73,11 @@ const VerdocsFieldSignature = class {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,10 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 
@@ -46,7 +47,11 @@ const VerdocsFieldTextarea = class {
     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, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,12 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-fd4beaae.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 
 const verdocsFieldTextboxCss = "verdocs-field-textbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;letter-spacing:-0.2px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textbox.disabled{opacity:0.5}verdocs-field-textbox input{width:100%;height:100%;font-size:11px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:none;outline:none}verdocs-field-textbox input.hide{display:none}verdocs-field-textbox.required{border:1px solid #cc0000}verdocs-field-textbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-textbox verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-textbox verdocs-button-panel[data-active],verdocs-field-textbox verdocs-button-panel:hover{opacity:1}verdocs-field-textbox verdocs-button-panel .icon svg{fill:#333333}verdocs-field-textbox verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-textbox [data-lastpass-icon-root]{display:none !important}";
 
@@ -47,7 +48,11 @@ const VerdocsFieldTextbox = class {
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

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

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { g as getFieldSettings } from './utils-274e2e93.js';
+import { g as getFieldSettings } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
 import { f as format } from './index-d264c496.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
 import './index-fd7b8a34.js';
@@ -53,7 +53,11 @@ const VerdocsFieldTimestamp = class {
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("h6", null, "Field Settings"), h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
+        return this.hideSettingsPanel();
+      }, onSettingsChanged: e => {
         var _a;
         (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
         return this.hideSettingsPanel();

package/dist/esm/verdocs-preview.entry.js

@@ -1,12 +1,13 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-f78d163d.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-7f17b088.js';
-import { r as renderDocumentField, a as getRoleIndex } from './utils-274e2e93.js';
+import { r as renderDocumentField, a as getRoleIndex } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
 import { l as loadTemplate } from './Templates-a7530314.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './Token-54690789.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 import './Templates-8e4ab976.js';

package/dist/esm/verdocs-send.entry.js

@@ -4,14 +4,15 @@ import { i as isValidEmail, a as isValidPhone } from './Validators-f110bae2.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { s as state } from './templateStore-fd4beaae.js';
 import { l as loadTemplate } from './Templates-a7530314.js';
-import { a as getRoleIndex } from './utils-274e2e93.js';
+import { a as getRoleIndex } from './utils-8065a62d.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './Token-54690789.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 import './Templates-8e4ab976.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 
 const verdocsSendCss = "verdocs-send{display:-ms-flexbox;display:flex;padding:10px;position:relative;background:#ffffff;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-send .recipients{position:relative}verdocs-send .left-line{top:32px;left:20px;z-index:1;width:12px;bottom:30px;position:absolute;background:#ffffff;border-left:3px dotted #9b9b9b}verdocs-send .level{display:-ms-flexbox;display:flex;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin-left:50px;position:relative;-ms-flex-direction:row;flex-direction:row;padding:8px 0 4px 0;border-bottom:1px solid #97979744}verdocs-send .level .level-icon{top:14px;z-index:2;left:-40px;width:24px;height:24px;position:absolute;background:#ffffff}verdocs-send .level .level-icon svg{fill:#00000089}verdocs-send .level .recipient{height:30px;display:-ms-flexbox;display:flex;-ms-flex:0 0 30px;flex:0 0 30px;color:#000000;cursor:pointer;font-size:14px;-ms-flex-align:center;align-items:center;border-radius:30px;-ms-flex-direction:row;flex-direction:row;background:#dddddd;white-space:nowrap;padding:2px 10px 2px 14px}verdocs-send .level .recipient .icon{width:22px;height:22px;-ms-flex:0 0 22px;flex:0 0 22px;margin:0 0 0 10px}verdocs-send .level .recipient .icon svg{width:22px;height:22px;fill:#333333;outline:none}verdocs-send .level .complete{-ms-flex:1;flex:1;height:30px;display:-ms-flexbox;display:flex;color:#000000;font-size:14px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;padding:3px 10px 3px 2px}verdocs-send .buttons{display:-ms-flexbox;display:flex;margin-top:10px;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;-ms-flex-direction:row;flex-direction:row}verdocs-send verdocs-contact-picker{left:0;top:41px;z-index:10;position:absolute;border:1px solid #dddddd;-webkit-box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1);box-shadow:0 0 6px 3px rgba(0, 0, 0, 0.1)}";
 

package/dist/esm/verdocs-sign.entry.js

@@ -1,13 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment } from './index-f78d163d.js';
-import { b as getSigningSession, u as updateEnvelopeField, c as updateEnvelopeFieldSignature, d as updateEnvelopeFieldInitials } from './Envelopes-130fd6ea.js';
+import { c as getSigningSession, u as updateEnvelopeField, d as updateEnvelopeFieldSignature, e as updateEnvelopeFieldInitials } from './Envelopes-eb3eef02.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-7f17b088.js';
 import { a as isValidPhone, i as isValidEmail } from './Validators-f110bae2.js';
 import { f as fullNameToInitials } from './Primitives-054bc6e5.js';
-import { s as savePDF, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils-274e2e93.js';
-import { g as getEnvelopeById, s as state } from './Envelopes-91d7e139.js';
+import { s as saveAttachment, u as updateDocumentFieldValue, a as getRoleIndex, r as renderDocumentField, b as getFieldId } from './utils-8065a62d.js';
+import { g as getEnvelopeById, s as state } from './Envelopes-b8945309.js';
 import { S as SDKError } from './errors-9b5498c8.js';
 import './Token-54690789.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Templates-8e4ab976.js';
 
@@ -213,29 +214,35 @@ const VerdocsSign = class {
     });
   }
   async handleOptionSelected(e) {
+    var _a, _b, _c, _d, _e;
     switch (e.detail.id) {
       case 'later':
         this.finishLater = true;
         this.showFinishLater = true;
+        (_a = this.envelopeUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'later' });
         // this.router.navigate([`view/sign/${this.envelopeId}/role/${this.roleName}/saved`]);
         break;
       case 'claim':
         window.alert('This feature will be available in an upcoming release.');
+        (_b = this.envelopeUpdated) === null || _b === void 0 ? void 0 : _b.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'claimed' });
         break;
       case 'decline':
         {
           const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
           console.log('Decline result', declineResult);
+          (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'declined' });
           this.isDone = true;
         }
         break;
       case 'print':
         window.print();
+        (_d = this.envelopeUpdated) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'printed' });
         break;
       case 'download':
-        savePDF(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(e => {
+        saveAttachment(this.endpoint, state.envelope, state.envelope.envelope_document_id).catch(e => {
           console.log('Error downloading PDF', e);
         });
+        (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: state.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -491,7 +498,7 @@ const VerdocsSign = class {
     if (state.loading || !state.envelope) {
       return (h(Host, null, h("verdocs-loader", null)));
     }
-    return (h(Host, { class: { agreed: this.agreed } }, !this.isDone && !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (h("div", { class: "header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), this.isDone ? (
+    return (h(Host, { class: { agreed: this.agreed }, "data-r": state.updateCount }, !this.isDone && !this.finishLater && h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (h("div", { class: "header" }, !this.agreed ? (h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (h(Fragment, null, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, state.envelope.name), h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? h("div", { class: "cover" }) : h("div", { style: { display: 'none' } }), this.isDone ? (
     // <div>test</div>
     h("verdocs-view", { endpoint: this.endpoint, envelopeId: this.envelopeId, onSdkError: e => { var _a; return (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })) : (h("div", { class: "document" }, (state.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];

package/dist/esm/verdocs-template-attachments.entry.js

@@ -34,6 +34,9 @@ const VerdocsTemplateAttachments = class {
     }
   }
   render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
     if (this.loading) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }

package/dist/esm/verdocs-template-create_2.entry.js

@@ -2,14 +2,15 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-f
 import { c as createTemplate, g as getTemplate } from './Templates-8e4ab976.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-7f17b088.js';
 import { S as SDKError } from './errors-9b5498c8.js';
-import { i as interact } from './interact.min-32c1c1e4.js';
+import { i as interact } from './interact.min-e472871a.js';
 import { u as updateField, c as createField } from './Fields-c82e6df3.js';
-import { a as getRoleIndex, r as renderDocumentField, c as updateCssTransform, d as defaultWidth, e as defaultHeight } from './utils-274e2e93.js';
+import { a as getRoleIndex, r as renderDocumentField, e as updateCssTransform, f as defaultWidth, h as defaultHeight } from './utils-8065a62d.js';
 import { s as state } from './templateStore-fd4beaae.js';
 import { l as loadTemplate } from './Templates-a7530314.js';
 import './Token-54690789.js';
-import './Envelopes-130fd6ea.js';
+import './Envelopes-eb3eef02.js';
 import './Files-70a192df.js';
+import './index-d264c496.js';
 import './index-fd7b8a34.js';
 import './Primitives-054bc6e5.js';
 
@@ -124,12 +125,12 @@ const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" widt
 const iconSignature = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="m9.225 21.225 4.65-4.65h8.45v4.65Zm-5.35-2.2H5.05l8.5-8.5-1.175-1.175-8.5 8.5Zm14.25-9.95L13.8 4.8l1.325-1.325q.625-.65 1.525-.663.9-.012 1.6.663l1.225 1.175q.675.675.663 1.562-.013.888-.663 1.513ZM16.7 10.55 6 21.225H1.675V16.9L12.35 6.225Zm-3.725-.625-.6-.575 1.175 1.175Z"/></svg>';
 const iconInitial = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path d="M6.225 20.775V7h-5V3.225H15V7h-5v13.775Zm9.775 0v-8h-3V9h9.775v3.775h-3v8Z"/></svg>';
 const menuOptions = [
-  { id: 'attachment', tooltip: 'Attachment', icon: 'A' },
+  // {id: 'attachment', tooltip: 'Attachment', icon: 'A'},
   { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck },
   { id: 'date', tooltip: 'Date', icon: iconDatepicker },
   { id: 'dropdown', tooltip: 'Dropdown', icon: 'O' },
   { id: 'initial', tooltip: 'Initials', icon: iconInitial },
-  { id: 'payment', tooltip: 'Payment', icon: 'P' },
+  // {id: 'payment', tooltip: 'Payment', icon: 'P'},
   { id: 'radio', tooltip: 'Radio Button', icon: iconRadio },
   { id: 'signature', tooltip: 'Signature', icon: iconSignature },
   { id: 'textarea', tooltip: 'Text Area', icon: iconMultiline },
@@ -142,12 +143,14 @@ const VerdocsTemplateFields = class {
     this.next = createEvent(this, "next", 7);
     this.cancel = createEvent(this, "cancel", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.templateUpdated = createEvent(this, "templateUpdated", 7);
     this.pageHeights = {};
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.placing = null;
     this.selectedRoleName = '';
+    this.rerender = 1;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e, _f;
@@ -182,11 +185,16 @@ const VerdocsTemplateFields = class {
   }
   async handleFieldChange(field, e, optionId) {
     console.log('[FIELDS] handleFieldChange', field, e, optionId);
+    this.rerender++;
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
     el.addEventListener('settingsChanged', () => {
+      var _a;
+      console.log('settings changed', this, field);
       el.setAttribute('roleindex', getRoleIndex(state.roleNames, field.role_name));
+      this.rerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'updated-field' });
     });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
@@ -270,6 +278,7 @@ const VerdocsTemplateFields = class {
     return { x, y };
   }
   async handleClickPage(e, page) {
+    var _a;
     if (this.placing) {
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
@@ -328,11 +337,11 @@ const VerdocsTemplateFields = class {
       console.log('Saved field', saved);
       state.fields.push(saved);
       this.placing = null;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: state.template, event: 'added-field' });
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
   render() {
-    console.log('rendering', state.updateCount);
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -342,7 +351,7 @@ const VerdocsTemplateFields = class {
     }
     const pages = [...state.template.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
-    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": state.updateCount, onSubmit: () => {
+    return (h(Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
       } }, h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);

package/dist/esm/verdocs-template-name.entry.js

@@ -52,13 +52,12 @@ const VerdocsTemplateName = class {
     (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
     if (this.loading) {
       return (h(Host, { class: "loading" }, h("verdocs-loader", null)));
     }
-    // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !state.template) {
-      return h(Host, { class: "empty" });
-    }
     return (h(Host, null, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), h("verdocs-text-input", { id: "verdocs-template-name", value: this.name, autocomplete: "off", placeholder: "Template Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = this.name !== state.template.name;