@verdocs/web-sdk 1.12.44 → 1.13.0

package/dist/components/Templates.js

@@ -1,47 +1,67 @@
-import { g as getTemplate } from './Templates2.js';
-import { s as state } from './templateStore.js';
-
-const pendingNotifications = [];
-const loadTemplate = async (endpoint, templateId, forceReload = false) => {
-  if (!templateId) {
-    console.log(`[TEMPLATES] Missing required template ID`);
-    throw new Error('Missing required template ID');
-  }
-  // TODO: This resolves a race condition where multiple components might share the template store and all want to load the same template
-  //  at once. It also creates a problem where two components might want DIFFERENT templates. This should be rare because most components
-  //  are visually "large" experiences that wouldn't run well in parallel with others anyway. But just to cover the base we may want to
-  //  account for that in the future.
-  if (state.loading) {
-    return new Promise((resolve, reject) => {
-      pendingNotifications.push({ resolve, reject });
-    });
-  }
-  if (templateId === state.templateId && !forceReload) {
-    return state.template;
-  }
-  state.loading = true;
-  state.template = null;
-  try {
-    console.log(`[TEMPLATES] Loading template ${templateId}`);
-    const template = await getTemplate(endpoint, templateId);
-    if (!template) {
-      console.log('[TEMPLATES] Unable to load template');
-      return;
-    }
-    state.loading = false;
-    state.template = template;
-    state.templateId = templateId;
-    pendingNotifications.forEach(notification => notification.resolve(true));
-    pendingNotifications.length = 0;
-    return true;
-  }
-  catch (e) {
-    console.log('[TEMPLATES] Error loading template', e);
-    state.loading = false;
-    pendingNotifications.forEach(notification => notification.reject(e));
-    pendingNotifications.length = 0;
-    throw e;
-  }
+/**
+ * A Template defines how a Verdocs signing flow will be performed, including attachments, signing fields, and
+ * recipients.
+ *
+ * @module
+ */
+/**
+ * Get all templates accessible by the caller, with optional filters.
+ *
+ * ```typescript
+ * import {Templates} from '@verdocs/js-sdk/Templates';
+ *
+ * await Templates.getTemplates((VerdocsEndpoint.getDefault());
+ * await Templates.getTemplates((VerdocsEndpoint.getDefault(), { is_starred: true });
+ * await Templates.getTemplates((VerdocsEndpoint.getDefault(), { is_creator: true });
+ * await Templates.getTemplates((VerdocsEndpoint.getDefault(), { is_organization: true });
+ * ```
+ */
+var getTemplates = function (endpoint, params) {
+    return endpoint.api //
+        .post('/templates', { params: params })
+        .then(function (r) { return r.data; });
+};
+/**
+ * Get one template by its ID.
+ *
+ * ```typescript
+ * import {Templates} from '@verdocs/js-sdk/Templates';
+ *
+ * const template = await Templates.getTemplate((VerdocsEndpoint.getDefault(), '83da3d70-7857-4392-b876-c4592a304bc9');
+ * ```
+ */
+var getTemplate = function (endpoint, templateId) {
+    return endpoint.api //
+        .get("/templates/".concat(templateId))
+        .then(function (r) { return r.data; });
+};
+/**
+ * Create a template.
+ *
+ * ```typescript
+ * import {Templates} from '@verdocs/js-sdk/Templates';
+ *
+ * const newTemplate = await Templates.createTemplate((VerdocsEndpoint.getDefault(), {...});
+ * ```
+ */
+var createTemplate = function (endpoint, params) {
+    return endpoint.api //
+        .post('/templates/', params)
+        .then(function (r) { return r.data; });
+};
+/**
+ * Update a template.
+ *
+ * ```typescript
+ * import {Templates} from '@verdocs/js-sdk/Templates';
+ *
+ * const updatedTemplate = await Templates.updateTemplate((VerdocsEndpoint.getDefault(), '83da3d70-7857-4392-b876-c4592a304bc9', { name: 'New Name' });
+ * ```
+ */
+var updateTemplate = function (endpoint, templateId, params) {
+    return endpoint.api //
+        .put("/templates/".concat(templateId), params)
+        .then(function (r) { return r.data; });
 };
 
-export { loadTemplate as l };
+export { getTemplate as a, createTemplate as c, getTemplates as g, updateTemplate as u };

package/dist/components/verdocs-build.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import './Types.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
-import { l as loadTemplate } from './Templates.js';
+import { g as getTemplateStore } from './TemplateStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$h } from './verdocs-button2.js';
 import { d as defineCustomElement$g } from './verdocs-checkbox2.js';
@@ -29,6 +29,7 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.sdkError = createEvent(this, "sdkError", 7);
     this.stepChanged = createEvent(this, "stepChanged", 7);
     this.fields = [];
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.step = 'create';
@@ -37,20 +38,18 @@ const VerdocsBuild$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   async componentWillLoad() {
     var _a, _b, _c;
-    this.endpoint.loadSession();
-    if (!this.endpoint.session) {
-      console.log('[BUILD] Unable to start builder session, must be authenticated');
-      return;
-    }
-    if (!this.templateId) {
-      console.log(`[BUILD] No template ID specified, showing upload option`);
-      this.step = 'create';
-      return;
-    }
     try {
-      console.log(`[BUILD] Loading template ${this.templateId}`);
-      await loadTemplate(this.endpoint, this.templateId);
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[BUILD] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[BUILD] Unable to start builder session, must be authenticated');
+        return;
+      }
       this.step = 'roles';
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
     }
     catch (e) {
       console.log('[BUILD] Error loading template', e);

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

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$3 } from './verdocs-button2.js';
 import { d as defineCustomElement$2 } from './verdocs-upload-dialog2.js';
 
@@ -12,6 +11,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.roleIndex = 0;
@@ -38,7 +38,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -55,6 +55,7 @@ const VerdocsFieldAttachment$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   static get style() { return verdocsFieldAttachmentCss; }
 }, [0, "verdocs-field-attachment", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "roleIndex": [2, "role-index"],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -20,6 +19,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -40,7 +40,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -51,7 +51,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { type: "checkbox", tabIndex: settings.order, checked: option.checked, disabled: disabled, required: settings.required, value: option.id }), h("span", null), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -63,6 +63,7 @@ const VerdocsFieldCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   static get style() { return verdocsFieldCheckboxCss; }
 }, [0, "verdocs-field-checkbox", {
+    "templateid": [1],
     "field": [16],
     "option": [2],
     "disabled": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getFieldSettings } from './utils.js';
 import { g as getRGBA } from './Colors.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -2571,6 +2570,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateId = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -2611,7 +2611,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
@@ -2623,7 +2623,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
       const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), 'PP') : '';
       return h(Host, { class: { done: this.done } }, formatted);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: settings.placeholder, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -2635,6 +2635,7 @@ const VerdocsFieldDate$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
   }
   static get style() { return verdocsFieldDateCss; }
 }, [0, "verdocs-field-date", {
+    "templateId": [1, "template-id"],
     "field": [16],
     "disabled": [4],
     "editable": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -21,6 +20,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.fieldChange = createEvent(this, "fieldChange", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -47,7 +47,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -58,7 +58,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === value }, option.value)))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("select", { tabIndex: settings.order, disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === value }, option.value)))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -70,6 +70,7 @@ const VerdocsFieldDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   static get style() { return verdocsFieldDropdownCss; }
 }, [0, "verdocs-field-dropdown", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "editable": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
 import { d as defineCustomElement$9 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
@@ -25,6 +24,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.initials = '';
@@ -69,7 +69,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -80,7 +80,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -92,6 +92,7 @@ const VerdocsFieldInitial$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   static get style() { return verdocsFieldInitialCss; }
 }, [0, "verdocs-field-initial", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "initials": [1],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 
 const verdocsFieldPaymentCss = "verdocs-field-payment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;position:relative;border:1px solid #cfa;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-payment.disabled{opacity:0.5}verdocs-field-payment button,verdocs-field-payment div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-payment button{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}verdocs-field-payment button.hide{display:none}verdocs-field-payment input{float:left;font-family:Arial, sans-serif}verdocs-field-payment select{position:absolute;font-family:Arial, sans-serif;background:linear-gradient(55deg, transparent 50%, #333 50%), linear-gradient(125deg, #333 50%, transparent 50%), linear-gradient(to right, transparent, transparent);background-position:calc(100% - 7px) 4px, calc(100% - 3px) 4px, 100% 0;background-size:5px 5px, 5px 5px, 2.5em 2.5em;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none}verdocs-field-payment .frame{width:100%;height:100%;background-size:contain;text-align:left}verdocs-field-payment .frame img{position:absolute;height:auto;width:100%}verdocs-field-payment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -32,6 +31,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.fontSize = 11;
     this.averageFontWidth = 5;
     this.requiredFields = [];
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.fields = undefined;
@@ -106,7 +106,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -118,6 +118,7 @@ const VerdocsFieldPayment$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   }
   static get style() { return verdocsFieldPaymentCss; }
 }, [0, "verdocs-field-payment", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "fields": [16],

package/dist/components/verdocs-field-radio-button.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -22,6 +21,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -42,7 +42,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -55,7 +55,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
     if (this.done) {
       return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), h("label", { htmlFor: id }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -67,6 +67,7 @@ const VerdocsFieldRadioButton$1 = /*@__PURE__*/ proxyCustomElement(class extends
   }
   static get style() { return verdocsFieldRadioButtonCss; }
 }, [0, "verdocs-field-radio-button", {
+    "templateid": [1],
     "field": [16],
     "option": [2],
     "disabled": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$a } from './verdocs-button2.js';
 import { d as defineCustomElement$9 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
@@ -23,6 +22,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.settingsPress = createEvent(this, "settingsPress", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.name = '';
     this.disabled = false;
@@ -68,7 +68,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -79,7 +79,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -91,6 +91,7 @@ const VerdocsFieldSignature$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   static get style() { return verdocsFieldSignatureCss; }
 }, [0, "verdocs-field-signature", {
+    "templateid": [1],
     "field": [16],
     "name": [1],
     "disabled": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -20,6 +19,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -42,7 +42,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -52,7 +52,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
     if (this.done) {
       return h(Host, { class: { done: this.done } }, settings.value);
     }
-    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -64,6 +64,7 @@ const VerdocsFieldTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HT
   }
   static get style() { return verdocsFieldTextareaCss; }
 }, [0, "verdocs-field-textarea", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "editable": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { i as interact } from './interact.min.js';
 import { g as getRGBA } from './Colors.js';
-import { s as state } from './templateStore.js';
 import { g as getFieldSettings } from './utils.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
@@ -21,6 +20,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -43,7 +43,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   componentDidRender() {
     interact.dynamicDrop(true);
@@ -82,7 +82,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
     if (this.done) {
       return h(Host, { class: { done: this.done } }, value);
     }
-    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, h("div", { class: "resizer-inner" }))), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -95,6 +95,7 @@ const VerdocsFieldTextbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTM
   get el() { return this; }
   static get style() { return verdocsFieldTextboxCss; }
 }, [0, "verdocs-field-textbox", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "editable": [4],

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getRGBA } from './Colors.js';
 import { g as getFieldSettings } from './utils.js';
-import { s as state } from './templateStore.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-button-panel2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -21,6 +20,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     this.__registerHost();
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -43,7 +43,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -59,7 +59,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
     return (h(Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
         var _a;
         (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.field.name });
         return this.hideSettingsPanel();
@@ -71,6 +71,7 @@ const VerdocsFieldTimestamp$1 = /*@__PURE__*/ proxyCustomElement(class extends H
   }
   static get style() { return verdocsFieldTimestampCss; }
 }, [0, "verdocs-field-timestamp", {
+    "templateid": [1],
     "field": [16],
     "disabled": [4],
     "editable": [4],