@verdocs/web-sdk 1.10.1 → 1.10.4

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

@@ -4,10 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-712ba3ec.js');
+const utils = require('./utils-865fd657.js');
+const templateStore = require('./templateStore-97e17e58.js');
 require('./Envelopes-68058bbe.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-eb130f52.js');
+require('./Primitives-be5088cb.js');
 
 const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -15,6 +18,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
 const VerdocsFieldTextarea = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -25,6 +29,19 @@ const VerdocsFieldTextarea = class {
   async focusField() {
     this.el.focus();
   }
+  async showSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.showPanel) {
+      settingsPanel.showPanel();
+    }
+  }
+  async hideSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.hidePanel) {
+      settingsPanel.hidePanel();
+    }
+    templateStore.state.updateCount++;
+  }
   render() {
     var _a, _b;
     const settings = utils.getFieldSettings(this.field);
@@ -33,12 +50,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 }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", options: [
-        { label: 'Buyer', value: 'Buyer' },
-        { label: 'Seller', value: 'Seller' },
-      ], onChange: e => {
-        console.log('select changed', e);
-      } }), index.h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), index.h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', 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(), onSettingsChanged: e => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+        return this.hideSettingsPanel();
+      } })))));
   }
 };
 VerdocsFieldTextarea.style = verdocsFieldTextareaCss;

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const templateStore = require('./templateStore-48acfb52.js');
-const utils = require('./utils-712ba3ec.js');
+const templateStore = require('./templateStore-97e17e58.js');
+const utils = require('./utils-865fd657.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 require('./Envelopes-68058bbe.js');
@@ -18,7 +18,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
 const VerdocsFieldTextbox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.recipientChanged = index.createEvent(this, "recipientChanged", 7);
+    this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -29,9 +29,18 @@ const VerdocsFieldTextbox = class {
   async focusField() {
     this.el.focus();
   }
-  handleChangeRecipient(e) {
-    var _a;
-    (_a = this.recipientChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+  async showSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.showPanel) {
+      settingsPanel.showPanel();
+    }
+  }
+  async hideSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.hidePanel) {
+      settingsPanel.hidePanel();
+    }
+    templateStore.state.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -42,13 +51,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 }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", value: templateStore.state.roleNames[this.roleindex], options: templateStore.state.roleNames.map(role => ({ label: role, value: role })), onChange: e => this.handleChangeRecipient(e) }), index.h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => {
-        e.stopPropagation();
-        console.log('ipt', e);
-      } }), index.h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => {
-        e.stopPropagation();
-        console.log('ipt', 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(), onSettingsChanged: e => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+        return this.hideSettingsPanel();
+      } })))));
   }
 };
 VerdocsFieldTextbox.style = verdocsFieldTextboxCss;

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

@@ -4,11 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Colors = require('./Colors-e809dcc9.js');
-const utils = require('./utils-712ba3ec.js');
+const utils = require('./utils-865fd657.js');
+const templateStore = require('./templateStore-97e17e58.js');
 const index$1 = require('./index-6528b430.js');
 require('./Envelopes-68058bbe.js');
 require('./Token-576f0e8a.js');
 require('./Files-4bdc0c0f.js');
+require('./index-eb130f52.js');
+require('./Primitives-be5088cb.js');
 
 const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp 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-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
 
@@ -16,6 +19,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
 const VerdocsFieldTimestamp = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -26,6 +30,19 @@ const VerdocsFieldTimestamp = class {
   async focusField() {
     this.el.focus();
   }
+  async showSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.showPanel) {
+      settingsPanel.showPanel();
+    }
+  }
+  async hideSettingsPanel() {
+    const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.field.name}`);
+    if (settingsPanel && settingsPanel.hidePanel) {
+      settingsPanel.hidePanel();
+    }
+    templateStore.state.updateCount++;
+  }
   render() {
     var _a, _b, _c;
     const settings = utils.getFieldSettings(this.field);
@@ -40,10 +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 }, index.h("h6", null, "Field Settings"), index.h("form", null, index.h("verdocs-select-input", { label: "Recipient", options: [
-        { label: 'Buyer', value: 'Buyer' },
-        { label: 'Seller', value: 'Seller' },
-      ] }), index.h("verdocs-text-input", { label: "Field Name", value: "", placeholder: "Stored field name...", onInput: e => console.log('ipt', e) }), index.h("verdocs-text-input", { label: "Placeholder", value: "", placeholder: "Placeholder text...", onInput: e => console.log('ipt', 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(), onSettingsChanged: e => {
+        var _a;
+        (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+        return this.hideSettingsPanel();
+      } })))));
   }
 };
 VerdocsFieldTimestamp.style = verdocsFieldTimestampCss;

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

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
-const utils = require('./utils-712ba3ec.js');
-const templateStore = require('./templateStore-48acfb52.js');
-const Templates = require('./Templates-612a81f2.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
+const utils = require('./utils-865fd657.js');
+const templateStore = require('./templateStore-97e17e58.js');
+const Templates = require('./Templates-a46d2fe8.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./Envelopes-68058bbe.js');

package/dist/cjs/verdocs-quick-functions_3.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const Templates = require('./Templates-ed812768.js');
 require('./Token-576f0e8a.js');
 

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1329d89c.js');
+
+const verdocsRadioButtonCss = "verdocs-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:20px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-radio-button.disabled{opacity:0.5}verdocs-radio-button input[type=radio]{position:absolute;opacity:0}verdocs-radio-button input[type=radio]+label:before{content:\"\";background:#f5f5fa;border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:16px;height:16px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-radio-button input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-radio-button input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-radio-button input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-radio-button input[type=radio]+label:empty:before{margin-right:0}verdocs-radio-button.required input[type=radio]+label:before{border:1px solid #cc0000}verdocs-radio-button.hide{display:none}verdocs-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
+
+const VerdocsRadioButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.checked = false;
+    this.name = '';
+    this.value = '';
+    this.disabled = false;
+  }
+  render() {
+    return (index.h(index.Host, { class: { disabled: this.disabled } }, index.h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), index.h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+  }
+};
+VerdocsRadioButton.style = verdocsRadioButtonCss;
+
+exports.verdocs_radio_button = VerdocsRadioButton;

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

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
-require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 require('./Token-576f0e8a.js');
 
 const verdocsSearchCss = "verdocs-search{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;background-color:#1e2031}verdocs-search search-box{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:20px 10px}verdocs-search .boxes{-ms-flex-wrap:wrap;flex-wrap:wrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin:20px 0}verdocs-search search-recent,verdocs-search search-saved,verdocs-search search-quick-functions,verdocs-search search-starred{display:-ms-flexbox;display:flex;margin:0 20px 20px 0}";

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

@@ -4,11 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Templates = require('./Templates-ed812768.js');
-require('./Types-da57ce69.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
-const utils = require('./utils-712ba3ec.js');
+const utils = require('./utils-865fd657.js');
 require('./Token-576f0e8a.js');
 require('./Envelopes-68058bbe.js');
 require('./Files-4bdc0c0f.js');
@@ -117,10 +116,10 @@ const VerdocsSend = class {
       return Validators.isValidEmail(recipient.email) || Validators.isValidPhone(recipient.phone);
     }).length >= ((_c = this.template) === null || _c === void 0 ? void 0 : _c.roles.length);
     console.log('assigned', allRecipientsAssigned);
-    return (index.h(index.Host, { class: {} }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Document")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (index.h(index.Host, { class: {} }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c;
       return (index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(utils.getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.recipientsAssigned[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.h("verdocs-contact-picker", { onCancel: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.recipientsAssigned[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => console.log('Search', e.detail) }))));
-    })))), index.h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { class: "complete" }, "Document Complete"))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onClick: e => this.handleSend(e) }))));
+    })))), index.h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), index.h("div", { class: "complete" }, "Signing Complete"))), index.h("div", { class: "buttons" }, index.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e) }), index.h("verdocs-button", { label: "Send", size: "small", disabled: !allRecipientsAssigned, onClick: e => this.handleSend(e) }))));
   }
 };
 VerdocsSend.style = verdocsSendCss;

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

@@ -4,11 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Envelopes = require('./Envelopes-68058bbe.js');
-require('./Types-da57ce69.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Primitives = require('./Primitives-be5088cb.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
-const utils = require('./utils-712ba3ec.js');
+const utils = require('./utils-865fd657.js');
 const Envelopes$1 = require('./Envelopes-4cc18551.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');

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

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1329d89c.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
+const templateStore = require('./templateStore-97e17e58.js');
+const Templates = require('./Templates-a46d2fe8.js');
+const errors = require('./errors-0396da3d.js');
+require('./Token-576f0e8a.js');
+require('./index-eb130f52.js');
+require('./Primitives-be5088cb.js');
+require('./Templates-ed812768.js');
+
+const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#4c56cb}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b;border:1px solid #cccccc}verdocs-template-attachments svg{width:24px;height:24px;fill:#5c6575;margin:2px 10px 0 0}";
+
+const FileIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>';
+const VerdocsTemplateAttachments = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.close = index.createEvent(this, "close", 7);
+    this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
+    this.templateId = '';
+    this.loading = true;
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      await Templates.loadTemplate(this.endpoint, this.templateId);
+      this.loading = false;
+    }
+    catch (e) {
+      console.log('[TEMPLATE NAME] Error loading template', e);
+      this.loading = false;
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  render() {
+    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("h5", null, "Attachments"), templateStore.state.template.template_documents.map(document => (index.h("div", { class: "attachment" }, index.h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
+  }
+};
+VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;
+
+exports.verdocs_template_attachments = VerdocsTemplateAttachments;

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

@@ -4,36 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Templates = require('./Templates-ed812768.js');
-require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const errors = require('./errors-0396da3d.js');
 const interact_min = require('./interact.min-3e3c03a5.js');
-const utils = require('./utils-712ba3ec.js');
-const templateStore = require('./templateStore-48acfb52.js');
-const Templates$1 = require('./Templates-612a81f2.js');
+const Fields = require('./Fields-705a2168.js');
+const utils = require('./utils-865fd657.js');
+const templateStore = require('./templateStore-97e17e58.js');
+const Templates$1 = require('./Templates-a46d2fe8.js');
 require('./Token-576f0e8a.js');
 require('./Envelopes-68058bbe.js');
 require('./Files-4bdc0c0f.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
-/**
- * Add a field to a template.
- */
-var createField = function (endpoint, templateId, params) {
-    return endpoint.api //
-        .post("/templates/".concat(templateId, "/fields"), params)
-        .then(function (r) { return r.data; });
-};
-/**
- * Update a template field.
- */
-var editField = function (endpoint, templateId, fieldName, params) {
-    return endpoint.api //
-        .put("/templates/".concat(templateId, "/fields/").concat(fieldName), params)
-        .then(function (r) { return r.data; });
-};
-
 /**
  * A TemplateDocument represents a PDF or other attachment in a Template.
  *
@@ -203,6 +186,9 @@ const VerdocsTemplateFields = class {
   }
   attachFieldAttributes(pageInfo, field, roleIndex, el) {
     el.addEventListener('input', e => this.handleFieldChange(field, e));
+    el.addEventListener('settingsChanged', () => {
+      el.setAttribute('roleindex', utils.getRoleIndex(templateStore.state.roleNames, field.role_name));
+    });
     el.setAttribute('roleindex', roleIndex);
     el.setAttribute('pageNumber', pageInfo.pageNumber);
     el.setAttribute('xScale', pageInfo.xScale);
@@ -214,7 +200,6 @@ const VerdocsTemplateFields = class {
     console.log('[FIELDS] Page rendered', pageInfo);
     this.cachedPageInfo[pageInfo.pageNumber] = pageInfo;
     this.pageHeights[pageInfo.pageNumber] = pageInfo.naturalHeight;
-    console.log('tsf', pageInfo.pageNumber, templateStore.state.fields);
     const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // const fields = this.fields.filter(field => field.page_sequence === pageInfo.renderedPage.pageNumber);
     console.log('[FIELDS] Fields on page', fields);
@@ -268,8 +253,7 @@ const VerdocsTemplateFields = class {
     if (field) {
       field.setting.x = x;
       field.setting.y = y;
-      const edited = await editField(this.endpoint, this.templateId, name, field);
-      console.log('edited field', edited);
+      await Fields.updateField(this.endpoint, this.templateId, name, field);
       this.handlePageRendered({ detail: this.cachedPageInfo[pageNumber] });
     }
   }
@@ -291,8 +275,8 @@ const VerdocsTemplateFields = class {
       const pageNumber = page.sequence;
       const clickedX = e.offsetX;
       const clickedY = e.offsetY;
-      const width = utils.defaultWidth({ type: this.placing });
-      const height = utils.defaultHeight({ type: this.placing });
+      const width = utils.defaultWidth(this.placing);
+      const height = utils.defaultHeight(this.placing);
       const { naturalWidth = 612, naturalHeight = 792 } = this.cachedPageInfo[pageNumber];
       const { x, y } = this.viewCoordinatesToPageCoordinates(clickedX, clickedY, pageNumber, naturalWidth - width, naturalHeight - height);
       const field = {
@@ -311,7 +295,7 @@ const VerdocsTemplateFields = class {
           result: '',
         },
       };
-      const saved = await createField(this.endpoint, this.templateId, field);
+      const saved = await Fields.createField(this.endpoint, this.templateId, field);
       console.log('Saved field', saved);
       templateStore.state.fields.push(saved);
       this.placing = null;
@@ -319,6 +303,7 @@ const VerdocsTemplateFields = class {
     }
   }
   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." })));
     }
@@ -328,7 +313,9 @@ 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 } : {} }, index.h("div", { class: "pages" }, pages.map(page => {
+    return (index.h(index.Host, { class: this.placing ? { [`placing-${this.placing}`]: true } : {}, "data-updated": templateStore.state.updateCount, onSubmit: () => {
+        console.log('onSubmit');
+      } }, index.h("div", { class: "pages" }, pages.map(page => {
       // console.log('rendering page', page);
       return (index.h("verdocs-document-page", { pageImageUri: page.display_uri, virtualWidth: 612, virtualHeight: 792, onClick: (e) => this.handleClickPage(e, page), pageNumber: page.sequence, onPageRendered: e => this.handlePageRendered(e), layers: [
           { name: 'page', type: 'canvas' },

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

@@ -4,16 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Templates$1 = require('./Templates-ed812768.js');
-require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
-const templateStore = require('./templateStore-48acfb52.js');
-const Templates = require('./Templates-612a81f2.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
+const templateStore = require('./templateStore-97e17e58.js');
+const Templates = require('./Templates-a46d2fe8.js');
 const errors = require('./errors-0396da3d.js');
 require('./Token-576f0e8a.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');
 
-const verdocsTemplateNameCss = "verdocs-template-name{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-name.loading{min-height:300px;position:relative;display:block}verdocs-template-name.empty{display:none}verdocs-template-name form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-name form label{font-size:16px;font-weight:500;margin:0 0 6px 0}verdocs-template-name form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-name form input:focus{outline:none}verdocs-template-name .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-name ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-name ::-moz-placeholder{color:#aaaaaa}verdocs-template-name :-ms-input-placeholder{color:#aaaaaa}verdocs-template-name ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-name ::placeholder{color:#aaaaaa}";
+const verdocsTemplateNameCss = "verdocs-template-name{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-name.loading{min-height:300px;position:relative;display:block}verdocs-template-name.empty{display:none}verdocs-template-name form{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-template-name form label{font-size:16px;font-weight:bold;color:#4c56cb;margin:0 0 20px 0}verdocs-template-name form input{border:none;font-size:18px;padding:3px 6px 3px 0;background:transparent;border-bottom:1px solid #33364b}verdocs-template-name form input:focus{outline:none}verdocs-template-name .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-top:16px;-ms-flex-direction:row;flex-direction:row}verdocs-template-name ::-webkit-input-placeholder{color:#aaaaaa}verdocs-template-name ::-moz-placeholder{color:#aaaaaa}verdocs-template-name :-ms-input-placeholder{color:#aaaaaa}verdocs-template-name ::-ms-input-placeholder{color:#aaaaaa}verdocs-template-name ::placeholder{color:#aaaaaa}";
 
 const VerdocsTemplateName = class {
   constructor(hostRef) {

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1329d89c.js');
 const Templates = require('./Templates-ed812768.js');
-require('./Types-da57ce69.js');
-const VerdocsEndpoint = require('./VerdocsEndpoint-38feb32a.js');
+const VerdocsEndpoint = require('./VerdocsEndpoint-25056c73.js');
 const errors = require('./errors-0396da3d.js');
-const templateStore = require('./templateStore-48acfb52.js');
+const templateStore = require('./templateStore-97e17e58.js');
 require('./Token-576f0e8a.js');
 require('./index-eb130f52.js');
 require('./Primitives-be5088cb.js');