@verdocs/web-sdk 2.3.14 → 2.3.16

package/dist/components/verdocs-portal.d.ts

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

package/dist/components/verdocs-portal.js

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

package/dist/components/verdocs-portal2.js

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const verdocsPortalCss = "";
+
+const Z_INDEX = '10001';
+const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.clickAway = createEvent(this, "clickAway", 7);
+    this.moved = false;
+    this.anchor = undefined;
+    this.voffset = 0;
+    this.align = 'left';
+  }
+  handleScroll() {
+    this.calculatePosition();
+  }
+  handleResize() {
+    this.calculatePosition();
+  }
+  handleClick(e) {
+    var _a;
+    if (!this.element.contains(e.target)) {
+      (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
+    }
+  }
+  calculateLeft() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    if (this.align === 'left') {
+      return Math.max(anchorRect.left, 0);
+    }
+    if (this.align === 'right') {
+      return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
+    }
+    return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+  }
+  calculateTop() {
+    const anchorEl = document.getElementById(this.anchor);
+    if (!anchorEl)
+      return 0;
+    const anchorRect = anchorEl.getBoundingClientRect();
+    return anchorRect.bottom + this.voffset;
+  }
+  calculatePosition() {
+    this.portal.style.top = `${this.calculateTop()}px`;
+    this.portal.style.left = `${this.calculateLeft()}px`;
+  }
+  componentWillLoad() {
+    var _a;
+    const id = `${this.anchor}-portal`;
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+    this.portal = document.createElement('div');
+    this.portal.setAttribute('id', id);
+    this.portal.style.zIndex = Z_INDEX;
+    this.portal.style.position = 'absolute';
+    document.body.append(this.portal);
+  }
+  componentDidLoad() {
+    this.portal.appendChild(this.element);
+    this.calculatePosition();
+  }
+  disconnectedCallback() {
+    this.moved ? this.portal.remove() : (this.moved = true);
+  }
+  render() {
+    return (h(Host, { ref: el => (this.element = el) }, h("slot", null)));
+  }
+  static get style() { return verdocsPortalCss; }
+}, [4, "verdocs-portal", {
+    "anchor": [1],
+    "voffset": [2],
+    "align": [1]
+  }, [[11, "scroll", "handleScroll"], [11, "resize", "handleResize"], [10, "click", "handleClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-portal"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-portal":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsPortal);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsPortal as V, defineCustomElement as d };

package/dist/components/verdocs-preview2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { r as renderDocumentField, b as getRoleIndex } from './utils.js';
-import { g as getTemplateStore, a as getRoleNames } from './TemplateStore.js';
+import { g as getTemplateStore, b as getRoleNames } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$2 } from './verdocs-loader2.js';
 import { d as defineCustomElement$1 } from './verdocs-template-document-page2.js';

package/dist/components/verdocs-search.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { d as defineCustomElement$4 } from './verdocs-quick-functions2.js';
-import { d as defineCustomElement$3 } from './verdocs-search-activity2.js';
+import { d as defineCustomElement$3 } from './verdocs-quick-functions2.js';
 import { d as defineCustomElement$2 } from './verdocs-search-box2.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}";
@@ -24,7 +23,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-search", "verdocs-quick-functions", "verdocs-search-activity", "verdocs-search-box"];
+  const components = ["verdocs-search", "verdocs-quick-functions", "verdocs-search-box"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-search":
       if (!customElements.get(tagName)) {
@@ -32,11 +31,6 @@ function defineCustomElement$1() {
       }
       break;
     case "verdocs-quick-functions":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "verdocs-search-activity":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-send2.js

@@ -7,8 +7,9 @@ import { g as getRGBA } from './Colors.js';
 import { g as getTemplateStore } from './TemplateStore.js';
 import { b as getRoleIndex } from './utils.js';
 import { S as SDKError } from './errors.js';
-import { d as defineCustomElement$4 } from './verdocs-button2.js';
-import { d as defineCustomElement$3 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$5 } from './verdocs-button2.js';
+import { d as defineCustomElement$4 } from './verdocs-contact-picker2.js';
+import { d as defineCustomElement$3 } from './verdocs-portal2.js';
 import { d as defineCustomElement$2 } from './verdocs-spinner2.js';
 import { d as defineCustomElement$1 } from './verdocs-toggle-button2.js';
 
@@ -153,7 +154,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
-      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role) }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))));
+      const elId = `verdocs-send-recipient-${role.name}`;
+      return unknown ? (h("div", { class: "recipient", style: { backgroundColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_b = (_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.full_name) !== null && _b !== void 0 ? _b : role.name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: getRGBA(getRoleIndex(roleNames, role.name)) }, onClick: e => this.handleClickRole(e, role), id: elId }, (_e = (_d = this.rolesCompleted[role.id]) === null || _d === void 0 ? void 0 : _d.full_name) !== null && _e !== void 0 ? _e : role.full_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_f = this.rolesCompleted[role.id]) !== null && _f !== void 0 ? _f : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
     })))), h("div", { class: `level level-done` }, this.getLevelIcon(this.levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
   }
   static get style() { return verdocsSendCss; }
@@ -173,7 +175,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-spinner", "verdocs-toggle-button"];
+  const components = ["verdocs-send", "verdocs-button", "verdocs-contact-picker", "verdocs-portal", "verdocs-spinner", "verdocs-toggle-button"];
   components.forEach(tagName => { switch (tagName) {
     case "verdocs-send":
       if (!customElements.get(tagName)) {
@@ -182,10 +184,15 @@ function defineCustomElement() {
       break;
     case "verdocs-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "verdocs-contact-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-portal":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/verdocs-settings-organization2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { z } from './index3.js';
 import './Types.js';
-import { g as getOrganization, u as updateOrganization } from './Organizations.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { d as convertToE164 } from './utils.js';
 import { V as VerdocsToast } from './Toast.js';
@@ -10,6 +9,28 @@ import { d as defineCustomElement$3 } from './verdocs-help-icon2.js';
 import { d as defineCustomElement$2 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
+/**
+ * An Organization is the top level object for ownership for Members, Documents, and Templates.
+ *
+ * @module
+ */
+/**
+ * Get an organization by ID.
+ */
+var getOrganization = function (endpoint, organizationId) {
+    return endpoint.api //
+        .get("/organizations/".concat(organizationId))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update an organization.
+ */
+var updateOrganization = function (endpoint, organizationId, params) {
+    return endpoint.api //
+        .patch("/organizations/".concat(organizationId), params)
+        .then(function (r) { return r.data; });
+};
+
 const TimeZones = [
   ['International Date Line West', 'GMT-11:00', '(GMT-11:00) International Date Line West'],
   ['Midway Island', 'GMT-11:00', '(GMT-11:00) Midway Island'],

package/dist/components/verdocs-sign.js

@@ -85,6 +85,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.submitting = false;
     this.isDone = false;
     this.showDone = false;
+    this.showLoadError = false;
     this.finishLater = false;
     this.showFinishLater = false;
     this.agreed = false;
@@ -150,6 +151,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     catch (e) {
       console.log('Error with signing session', e);
       (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
+      this.showLoadError = true;
     }
   }
   componentDidRender() {
@@ -276,9 +278,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         if (!e.detail) {
           return;
         }
-        console.log('Creating signature blob', e.detail);
         const signatureBlob = await (await fetch(e.detail)).blob();
-        console.log('Created signature blob', signatureBlob);
         return createSignature(this.endpoint, 'signature', signatureBlob) //
           .then(async (newSignature) => {
           console.log('Signature update result', newSignature);
@@ -326,6 +326,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       case 'textarea':
       case 'date':
       case 'attachment':
+        console.log('Date-type field valid', { required, result, output: !required || result !== '' });
         return !required || result !== '';
       case 'dropdown':
         return !required || value !== '';
@@ -400,7 +401,6 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     if (invalidFields.length < 1) {
       this.nextButtonLabel = 'Finish';
       if (!this.nextSubmits) {
-        // this.showSubmitDialog = true;
         this.nextSubmits = true;
       }
     }
@@ -416,7 +416,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       console.log('[SIGN] onfieldInput', e.detail, e.target.value);
       // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
       // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
-      if (e.target.name.includes('date') || e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
+      if (e.target.name.includes('checkbox_group') || e.target.name.includes('radio_button_group')) {
         console.log('CB', e.target);
         this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
       }
@@ -513,6 +513,9 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
         this.showDone = false;
         this.isDone = true;
+      } })), this.showLoadError && (h("verdocs-ok-dialog", { heading: "Error Loading Document", message: `Please check with the sender to ensure it has not been canceled, and try again later.`, buttonLabel: "Retry", onNext: () => {
+        this.showLoadError = false;
+        window.location.reload();
       } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null))), !this.agreed && (h("div", { class: "cover" }, h("div", { class: "agree" }, h("verdocs-checkbox", { name: "agree", label: "By checking this box, you:", onInput: () => this.handleClickAgree() }), h("ul", null, h("li", null, "Agree to use electronic records and signatures, and confirm you have read the", ' ', h("a", { href: "https://verdocs.com/en/electronic-record-signature-disclosure/", target: "_blank" }, "Electronic Record and Signatures Disclosure"), "."), h("li", null, "Agree to Verdocs", ' ', h("a", { href: "https://verdocs.com/en/eula", target: "_blank" }, "End User License Agreement"), ' ', "and confirm you have read Verdocs'", ' ', h("a", { href: "https://verdocs.com/en/privacy-policy/", target: "_blank" }, "Privacy Policy"), ".")))))));
   }
   static get style() { return verdocsSignCss; }
@@ -534,6 +537,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "submitting": [32],
     "isDone": [32],
     "showDone": [32],
+    "showLoadError": [32],
     "finishLater": [32],
     "showFinishLater": [32],
     "agreed": [32],

package/dist/components/verdocs-template-create2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
-import { V as VerdocsEndpoint, a as createTemplate } from './VerdocsEndpoint.js';
+import { V as VerdocsEndpoint, a as createTemplatev2 } from './VerdocsEndpoint.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$4 } from './verdocs-button2.js';
 import { d as defineCustomElement$3 } from './verdocs-component-error2.js';
@@ -55,7 +55,7 @@ const VerdocsTemplateCreate = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.creating = true;
     this.progressLabel = 'Uploading...';
     try {
-      const template = await createTemplate(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
+      const template = await createTemplatev2(this.endpoint, { name: this.file.name, documents: [this.file] }, percent => {
         if (percent >= 99) {
           this.progressLabel = 'Processing...';
           this.progressPercent = 100;

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

@@ -3,7 +3,7 @@ import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
 import { u as updateField, d as deleteField } from './Fields.js';
-import { g as getTemplateStore } from './TemplateStore.js';
+import { g as getTemplateStore, c as createTemplateFieldStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$6 } from './verdocs-button2.js';
 import { d as defineCustomElement$5 } from './verdocs-checkbox2.js';
@@ -214,20 +214,23 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.delete = createEvent(this, "delete", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
-    this.store = null;
+    this.templateStore = null;
+    this.fieldStore = null;
+    this.watcher = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
     this.helpText = '';
     this.dirty = false;
     this.loading = true;
-    this.type = 'signature';
     this.setting = null;
+    this.label = '';
+    this.type = 'textbox';
     this.name = '';
+    this.required = false;
     this.roleName = '';
     this.group = '';
     this.fieldType = '';
-    this.required = false;
     this.options = [];
     this.placeholder = '';
     this.value = '';
@@ -235,7 +238,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     this.showingHelp = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
@@ -250,52 +253,81 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         console.log('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
         return;
       }
-      this.store = await getTemplateStore(this.endpoint, this.templateId, false);
-      const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
+      this.templateStore = await getTemplateStore(this.endpoint, this.templateId);
+      this.fieldStore = await createTemplateFieldStore(this.templateStore.state);
+      const field = this.fieldStore.get(this.fieldName);
       if (!field) {
-        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
+        console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
       }
+      else {
+        console.log('props', field);
+      }
+      createTemplateFieldStore(this.templateStore.state);
+      this.watcher = this.fieldStore.onChange(this.fieldName, field => {
+        var _a, _b, _c, _d;
+        console.log('Field changed', field);
+        this.type = field.type;
+        this.name = field.name;
+        this.label = field.label;
+        this.group = field.name;
+        this.roleName = field.role_name;
+        this.required = field.required;
+        this.fieldType = field.type;
+        // TODO: Talk about how we want to handle labels/placeholders
+        this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+        this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
+        this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
+        this.setting = field.setting || {};
+        this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
+        this.dirty = false;
+        this.loading = false;
+      });
+      console.log('watcher', this.watcher);
       this.type = field.type;
       this.name = field.name;
+      this.label = field.label;
       this.group = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
       this.fieldType = field.type;
       // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
-      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
-      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
+      this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+      this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
+      this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
       this.setting = field.setting || {};
-      this.options = ((_f = field.setting) === null || _f === void 0 ? void 0 : _f.options) || [];
+      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
       this.dirty = false;
       this.loading = false;
+      console.log('Displaying settings for', this.setting);
     }
     catch (e) {
       console.log('[FIELD PROPERTIES] Error loading template', e);
       this.loading = false;
-      (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
+      (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
     }
   }
   handleCancel(e) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d;
     e.stopPropagation();
-    const field = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.find(field => field.name === this.fieldName);
+    const field = this.fieldStore.get(this.fieldName);
     if (field) {
       this.name = field.name;
+      this.label = field.label;
       this.roleName = field.role_name;
       this.required = field.required;
       // TODO: Talk about how we want to handle labels/placeholders
-      this.placeholder = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.placeholder) || '';
-      this.value = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.result) || '';
-      this.leading = ((_e = field.setting) === null || _e === void 0 ? void 0 : _e.leading) || 0;
+      this.placeholder = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+      this.value = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.result) || '';
+      this.leading = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.leading) || 0;
     }
     this.dirty = false;
-    (_f = this.close) === null || _f === void 0 ? void 0 : _f.emit();
+    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
   }
   handleSave(e) {
     e.stopPropagation();
     const newProperties = {
       name: this.name,
+      label: this.label || null,
       required: this.required,
       role_name: this.roleName,
       // TODO: Default value in setting?
@@ -315,6 +347,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
         options: this.options,
       };
     }
+    console.log('FP: Will update', newProperties);
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(field => {
       var _a, _b;
@@ -366,33 +399,19 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     });
   }
   updateField(newField) {
-    const newFields = [...this.store.state.fields];
-    newFields.forEach(field => {
-      if (field.name === this.fieldName) {
-        Object.assign(field, newField);
-        // field.name = this.name;
-        // field.role_name = this.roleName;
-        // field.required = this.required;
-        // field.label = this.placeholder;
-        // field.setting.result = this.defaultValue;
-        // if (field.setting.options) {
-        //   field.setting.options = this.options;
-        // }
-      }
-    });
-    this.store.state.fields = newFields;
+    const oldField = this.fieldStore.get(this.fieldName) || {};
+    console.log('Updating field', newField, oldField);
+    Object.assign(oldField, newField);
+    this.fieldStore.set(this.fieldName, newField);
   }
   async handleDelete(e) {
     e.stopPropagation();
     if (window.confirm('Are you sure you wish to remove this field? This action cannot be undone.')) {
       deleteField(this.endpoint, this.templateId, this.fieldName)
         .then(() => {
-        var _a, _b, _c, _d, _e;
-        this.store.state.fields = [...(_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.name !== this.fieldName)];
-        (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.forEach(role => {
-          role.fields = [...role.fields.filter(field => field.name !== this.fieldName)];
-        });
-        (_e = this.delete) === null || _e === void 0 ? void 0 : _e.emit({ templateId: this.templateId, roleName: this.roleName });
+        var _a;
+        this.fieldStore.set(this.fieldName, undefined);
+        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
         console.log('[FIELD PROPERTIES] Deletion error', e);
@@ -400,12 +419,13 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     }
   }
   render() {
-    var _a, _b, _c, _d;
+    var _a;
+    // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
     if (!this.endpoint.session) {
       return (h(Host, null, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
     // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
+    if (!this.endpoint.session || !this.fieldStore.get(this.fieldName)) {
       return h(Host, { class: "empty" });
     }
     if (this.helpText && this.showingHelp) {
@@ -416,7 +436,12 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
       placeholder: "Field Name...", onInput: (e) => {
         this.name = e.target.value;
         this.dirty = true;
-      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+      } })), h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Optional Label", value: this.label, autocomplete: "off",
+      //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
+      placeholder: "Optional Label...", onInput: (e) => {
+        this.label = e.target.value;
+        this.dirty = true;
+      } })), h("div", { class: "row" }, h("div", { class: "input-label" }, "Role:"), h("verdocs-select-input", { value: this.roleName, options: (_a = this.templateStore.state) === null || _a === void 0 ? void 0 : _a.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
         this.roleName = e.target.value;
         this.dirty = true;
       } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Value", value: this.value, autocomplete: "off", placeholder: "Pre-defined value...", onInput: (e) => {
@@ -463,13 +488,14 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class ex
     "helpText": [1, "help-text"],
     "dirty": [32],
     "loading": [32],
-    "type": [32],
     "setting": [32],
+    "label": [32],
+    "type": [32],
     "name": [32],
+    "required": [32],
     "roleName": [32],
     "group": [32],
     "fieldType": [32],
-    "required": [32],
     "options": [32],
     "placeholder": [32],
     "value": [32],