@verdocs/web-sdk 1.10.10 → 1.11.1

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1329d89c.js');
 const popper = require('./popper-11d5f714.js');
 
-const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
+const verdocsDropdownCss = "verdocs-dropdown{font-family:\"Barlow\", sans-serif;display:block}verdocs-dropdown .arrow{width:32px;height:26px;background:#fff;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;border:1px solid #cccccc;-ms-flex-pack:center;justify-content:center}verdocs-dropdown .arrow svg{fill:#55bc81;-webkit-transition:0.3s;transition:0.3s}verdocs-dropdown .items{width:200px;display:none;z-index:10000;border-radius:5px;background:#33354c;border:1px solid #654dcb}verdocs-dropdown .items[data-show]{display:block}verdocs-dropdown .option{width:100%;color:#fff;border:none;display:block;text-align:left;background:none;padding:10px 20px}verdocs-dropdown .option:hover{cursor:pointer;background:#55bc81}verdocs-dropdown .option[disabled]{color:#aaaaaa}verdocs-dropdown .option[disabled]:hover{color:#aaaaaa;cursor:inherit;background:transparent}verdocs-dropdown .separator{border-top:1px solid #ffffff5f;height:1px;padding-top:5px;margin-top:5px}verdocs-dropdown.open .items{display:block}verdocs-dropdown.open .arrow{background:#4c56cb;border:1px solid #707ae5}verdocs-dropdown.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1);fill:#fff}";
 
 const DropdownArrow = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#50BE80"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 10l5 5 5-5H7z"/></svg>`;
 const VerdocsDropdown = class {
@@ -79,7 +79,7 @@ const VerdocsDropdown = class {
   }
   render() {
     var _a;
-    return (index.h(index.Host, { class: { open: !!this.open } }, index.h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), index.h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (index.h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
+    return (index.h(index.Host, { class: { open: !!this.open } }, index.h("button", { class: "arrow", innerHTML: DropdownArrow, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), index.h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => option.label ? (index.h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label)) : (index.h("div", { class: "separator" }))))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const Envelopes = require('./Envelopes-4cc18551.js');
+const Envelopes = require('./Envelopes-9886af0f.js');
 const errors = require('./errors-0396da3d.js');
 const index$1 = require('./index-6528b430.js');
 require('./Token-576f0e8a.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./index-eb130f52.js');
 require('./Templates-ed812768.js');
 
@@ -42,6 +42,7 @@ const VerdocsEnvelopeSidebar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.envelopeUpdated = index.createEvent(this, "envelopeUpdated", 7);
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.envelopeId = '';
     this.activeTab = 1;
@@ -80,7 +81,9 @@ const VerdocsEnvelopeSidebar = class {
       !['complete', 'declined', 'canceled'].includes(Envelopes.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: Envelopes.state.envelope, event: id });
   }
   prepareHistoryEntries() {
     const entries = [];
@@ -204,7 +207,7 @@ const VerdocsEnvelopeSidebar = class {
     const session = this.endpoint.getSession();
     const isEnvelopeOwner = session.profile_id === Envelopes.state.envelope.profile_id; // TODO: What about org admins?
     const historyEntries = this.prepareHistoryEntries();
-    return (index.h(index.Host, { class: this.panelOpen ? 'open' : '' }, index.h("div", { class: "buttons" }, index.h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), index.h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), index.h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Details"), index.h("div", { class: "label" }, "Envelope ID"), index.h("div", { class: "value" }, Envelopes.state.envelope.id), index.h("div", { class: "label" }, "Date Created"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.created_at), 'PP pp')), index.h("div", { class: "label" }, "Last Modified"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.updated_at), 'PP pp')), index.h("div", { class: "label" }, "Status"), index.h("div", { class: "value" }, Envelopes.state.envelope.status), index.h("div", { class: "label" }, "Verdoc Owner UUID"), index.h("div", { class: "value" }, Envelopes.state.envelope.profile_id), index.h("div", { class: "label" }, "Verdoc Owner Name"), index.h("div", { class: "value" }, (_a = Envelopes.state.envelope.profile) === null || _a === void 0 ? void 0 :
+    return (index.h(index.Host, { class: this.panelOpen ? 'open' : '', "data-r": Envelopes.state.updateCount }, index.h("div", { class: "buttons" }, index.h("button", { class: this.activeTab === 1 ? 'active' : '', onClick: () => this.setTab(1), innerHTML: InformationCircle }), index.h("button", { class: this.activeTab === 2 ? 'active' : '', onClick: () => this.setTab(2), innerHTML: Users }), index.h("button", { class: this.activeTab === 3 ? 'active' : '', onClick: () => this.setTab(3), innerHTML: ClipboardDocuments })), this.activeTab === 1 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Details"), index.h("div", { class: "label" }, "Envelope ID"), index.h("div", { class: "value" }, Envelopes.state.envelope.id), index.h("div", { class: "label" }, "Date Created"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.created_at), 'PP pp')), index.h("div", { class: "label" }, "Last Modified"), index.h("div", { class: "value" }, index$1.format(new Date(Envelopes.state.envelope.updated_at), 'PP pp')), index.h("div", { class: "label" }, "Status"), index.h("div", { class: "value" }, Envelopes.state.envelope.status), index.h("div", { class: "label" }, "Verdoc Owner UUID"), index.h("div", { class: "value" }, Envelopes.state.envelope.profile_id), index.h("div", { class: "label" }, "Verdoc Owner Name"), index.h("div", { class: "value" }, (_a = Envelopes.state.envelope.profile) === null || _a === void 0 ? void 0 :
       _a.first_name, " ", (_b = Envelopes.state.envelope.profile) === null || _b === void 0 ? void 0 :
       _b.last_name), index.h("div", { class: "label" }, "Verdoc Owner Email"), index.h("div", { class: "value" }, (_c = Envelopes.state.envelope.profile) === null || _c === void 0 ? void 0 : _c.email))), this.activeTab === 2 && (index.h("div", { class: "content" }, index.h("div", { class: "title" }, "Recipients"), Envelopes.state.envelope.recipients.map((recipient, index$1) => (index.h("div", { class: "recipient-detail" }, index.h("div", { class: "recipient-header" }, index.h("div", { class: "recipient-number" }, index$1 + 1), index.h("div", { class: "recipient-type" }, recipient.type), index.h("div", { class: { 'recipient-status': true, [recipient.status]: true } }, recipient.status), isEnvelopeOwner && (index.h("verdocs-dropdown", { onOptionSelected: item => this.handleRecipientAction(recipient, item.detail.id), options: [
         { id: 'reminder', label: 'Send Reminder', disabled: !this.canResendRecipient(recipient) },

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
@@ -49,7 +50,11 @@ const VerdocsFieldCheckbox = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("label", null, index.h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), index.h("span", null), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("label", null, index.h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), index.h("span", null), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-date.cjs.entry.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const index$1 = require('./index-6528b430.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
 require('./index-eb130f52.js');
@@ -2621,7 +2621,11 @@ const VerdocsFieldDate = class {
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? index$1.format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'MMM d, y') : '';
       return index.h(index.Host, { class: { done: this.done } }, formatted);
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-dropdown.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
@@ -77,7 +78,11 @@ const VerdocsFieldInitial = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value && index.h("img", { src: value, alt: "Initials" }));
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (index.h("img", { src: value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (index.h("img", { src: value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-payment.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 

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

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
@@ -53,7 +54,11 @@ const VerdocsFieldRadioButton = class {
     if (this.done) {
       return (index.h(index.Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, index.h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (index.h(index.Host, { class: { required, disabled }, style: { backgroundColor } }, index.h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), index.h("label", { htmlFor: id }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required, disabled }, style: { backgroundColor } }, index.h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), index.h("label", { htmlFor: id }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-signature.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
@@ -76,7 +77,11 @@ const VerdocsFieldSignature = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value && index.h("img", { src: value, alt: "Signature" }));
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? index.h("img", { src: value, alt: "Signature" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? index.h("img", { src: value, alt: "Signature" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-textarea.cjs.entry.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
@@ -50,7 +51,11 @@ const VerdocsFieldTextarea = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, settings.value);
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-textbox.cjs.entry.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-81ad25a7.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.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}";
 
@@ -51,7 +52,11 @@ const VerdocsFieldTextbox = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value);
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, index.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 && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, index.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 && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-field-timestamp.cjs.entry.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const index$1 = require('./index-6528b430.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
 require('./index-eb130f52.js');
@@ -57,7 +57,11 @@ const VerdocsFieldTimestamp = class {
     return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.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 && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onSettingsChanged: e => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("h6", null, "Field Settings"), index.h("verdocs-template-field-properties", { templateId: templateStore.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/cjs/verdocs-preview.cjs.entry.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const Templates = require('./Templates-2f2ea153.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 require('./Templates-ed812768.js');

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

@@ -8,14 +8,15 @@ const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const Templates = require('./Templates-2f2ea153.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 require('./Templates-ed812768.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.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/cjs/verdocs-sign.cjs.entry.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-const Envelopes = require('./Envelopes-68058bbe.js');
+const Envelopes = require('./Envelopes-7381bd9a.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const utils = require('./utils-865fd657.js');
-const Envelopes$1 = require('./Envelopes-4cc18551.js');
+const utils = require('./utils-f4cfa1fb.js');
+const Envelopes$1 = require('./Envelopes-9886af0f.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Templates-ed812768.js');
 
@@ -217,29 +218,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: Envelopes$1.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: Envelopes$1.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: Envelopes$1.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: Envelopes$1.state.envelope, event: 'printed' });
         break;
       case 'download':
-        utils.savePDF(this.endpoint, Envelopes$1.state.envelope, Envelopes$1.state.envelope.envelope_document_id).catch(e => {
+        utils.saveAttachment(this.endpoint, Envelopes$1.state.envelope, Envelopes$1.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: Envelopes$1.state.envelope, event: 'downloaded' });
         break;
     }
   }
@@ -495,7 +502,7 @@ const VerdocsSign = class {
     if (Envelopes$1.state.loading || !Envelopes$1.state.envelope) {
       return (index.h(index.Host, null, index.h("verdocs-loader", null)));
     }
-    return (index.h(index.Host, { class: { agreed: this.agreed } }, !this.isDone && !this.finishLater && index.h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (index.h("div", { class: "header" }, !this.agreed ? (index.h("div", { class: "agree" }, index.h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (index.h(index.Fragment, null, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, Envelopes$1.state.envelope.name), index.h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && index.h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), this.isDone ? (
+    return (index.h(index.Host, { class: { agreed: this.agreed }, "data-r": Envelopes$1.state.updateCount }, !this.isDone && !this.finishLater && index.h("div", { class: "intro" }, "Please review and act on these documents."), !this.isDone && (index.h("div", { class: "header" }, !this.agreed ? (index.h("div", { class: "agree" }, index.h("verdocs-checkbox", { name: "agree", label: "I agree to use electronic records and signatures.", onInput: () => this.handleClickAgree() }))) : (index.h(index.Fragment, null, index.h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), index.h("div", { class: "title" }, Envelopes$1.state.envelope.name), index.h("div", { style: { flex: '1' } }))), !this.isDone && !this.finishLater && index.h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), index.h("div", { style: { marginLeft: '10px' } }), index.h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), !this.isDone && !this.agreed ? index.h("div", { class: "cover" }) : index.h("div", { style: { display: 'none' } }), this.isDone ? (
     // <div>test</div>
     index.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); } })) : (index.h("div", { class: "document" }, (Envelopes$1.state.envelope.documents || []).map(envelopeDocument => {
       const pages = [...((envelopeDocument === null || envelopeDocument === void 0 ? void 0 : envelopeDocument.pages) || [])];

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

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

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

@@ -6,14 +6,15 @@ const index = require('./index-1329d89c.js');
 const Templates = require('./Templates-ed812768.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const errors = require('./errors-0396da3d.js');
-const interact_min = require('./interact.min-3e3c03a5.js');
+const interact_min = require('./interact.min-d223d04b.js');
 const Fields = require('./Fields-705a2168.js');
-const utils = require('./utils-865fd657.js');
+const utils = require('./utils-f4cfa1fb.js');
 const templateStore = require('./templateStore-81ad25a7.js');
 const Templates$1 = require('./Templates-2f2ea153.js');
 require('./Token-576f0e8a.js');
-require('./Envelopes-68058bbe.js');
+require('./Envelopes-7381bd9a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-6528b430.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
@@ -128,12 +129,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 },
@@ -146,12 +147,14 @@ const VerdocsTemplateFields = class {
     this.next = index.createEvent(this, "next", 7);
     this.cancel = index.createEvent(this, "cancel", 7);
     this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.templateUpdated = index.createEvent(this, "templateUpdated", 7);
     this.pageHeights = {};
     this.cachedPageInfo = {};
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.placing = null;
     this.selectedRoleName = '';
+    this.rerender = 1;
   }
   async componentWillLoad() {
     var _a, _b, _c, _d, _e, _f;
@@ -186,11 +189,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', utils.getRoleIndex(templateStore.state.roleNames, field.role_name));
+      this.rerender++;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: templateStore.state.template, event: 'updated-field' });
     });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
@@ -274,6 +282,7 @@ const VerdocsTemplateFields = class {
     return { x, y };
   }
   async handleClickPage(e, page) {
+    var _a;
     if (this.placing) {
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
@@ -332,11 +341,11 @@ const VerdocsTemplateFields = class {
       console.log('Saved field', saved);
       templateStore.state.fields.push(saved);
       this.placing = null;
+      (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: templateStore.state.template, event: 'added-field' });
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
   render() {
-    console.log('rendering', templateStore.state.updateCount);
     if (!this.endpoint.session) {
       return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
@@ -346,7 +355,7 @@ const VerdocsTemplateFields = class {
     }
     const pages = [...templateStore.state.template.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
-    return (index.h(index.Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": templateStore.state.updateCount, onSubmit: () => {
+    return (index.h(index.Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-r": this.rerender, onSubmit: () => {
         console.log('onSubmit');
       } }, index.h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);

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

@@ -56,13 +56,12 @@ const VerdocsTemplateName = class {
     (_a = this.close) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
+    if (!this.endpoint.session) {
+      return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
+    }
     if (this.loading) {
       return (index.h(index.Host, { class: "loading" }, index.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 || !templateStore.state.template) {
-      return index.h(index.Host, { class: "empty" });
-    }
     return (index.h(index.Host, null, index.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index.h("label", { htmlFor: "verdocs-template-name" }, "Template Name"), index.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 !== templateStore.state.template.name;