@verdocs/web-sdk 1.12.44 → 1.13.0

package/dist/collection/components/embeds/verdocs-send/verdocs-send.js

@@ -2,8 +2,7 @@ import { VerdocsEndpoint } from '@verdocs/js-sdk';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { isValidEmail, isValidPhone } from '@verdocs/js-sdk/Templates/Validators';
 import { h, Host } from '@stencil/core';
-import TemplateStore from '../../../utils/templateStore';
-import { loadTemplate } from '../../../utils/Templates';
+import { getTemplateStore } from '../../../utils/TemplateStore';
 import { getRoleIndex } from '../../../utils/utils';
 import { SDKError } from '../../../utils/errors';
 const editIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>';
@@ -22,6 +21,7 @@ const doneIcon = '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"
 export class VerdocsSend {
   constructor() {
     this.levels = [];
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
@@ -34,22 +34,25 @@ export class VerdocsSend {
     this.rolesCompleted = {};
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e, _f;
-    const loadSessionResult = this.endpoint.loadSession();
-    if (!this.templateId) {
-      console.log(`[SEND] Missing required template ID ${this.templateId}`);
-      return;
-    }
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     try {
-      console.log(`[SEND] Loading template ${this.templateId}`);
-      await loadTemplate(this.endpoint, this.templateId, true);
-      if (!((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.is_sendable)) {
+      const loadSessionResult = this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[SEND] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[SEND] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await getTemplateStore(this.endpoint, this.templateId, true);
+      if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.is_sendable)) {
         console.warn(`[SEND] Template is not sendable`, this.templateId);
       }
-      if ((_b = TemplateStore.template) === null || _b === void 0 ? void 0 : _b.roles) {
+      if ((_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.roles) {
         const rolesAtLevel = {};
         this.rolesCompleted = {};
-        TemplateStore.template.roles.forEach(role => {
+        (_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.roles.forEach(role => {
           const level = role.sequence - 1;
           rolesAtLevel[level] || (rolesAtLevel[level] = []);
           const id = `r-${level}-${rolesAtLevel[level].length}`;
@@ -59,18 +62,18 @@ export class VerdocsSend {
         this.levels = Object.keys(rolesAtLevel).map(levelStr => +levelStr);
         this.levels.sort((a, b) => a - b);
       }
+      if ((_g = loadSessionResult === null || loadSessionResult === void 0 ? void 0 : loadSessionResult.session) === null || _g === void 0 ? void 0 : _g.profile) {
+        this.sessionContacts.push({
+          id: loadSessionResult.session.profile.id,
+          name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
+          email: loadSessionResult.session.profile.email,
+          phone: loadSessionResult.session.profile.phone,
+        });
+      }
     }
     catch (e) {
-      console.log('[SEND] Error loading template', e);
-      (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
-    }
-    if ((_f = loadSessionResult.session) === null || _f === void 0 ? void 0 : _f.profile) {
-      this.sessionContacts.push({
-        id: loadSessionResult.session.profile.id,
-        name: `${loadSessionResult.session.profile.first_name} ${loadSessionResult.session.profile.last_name}`,
-        email: loadSessionResult.session.profile.email,
-        phone: loadSessionResult.session.profile.phone,
-      });
+      console.log('[SEND] Error with preview session', e);
+      (_h = this.sdkError) === null || _h === void 0 ? void 0 : _h.emit(new SDKError(e.message, (_j = e.response) === null || _j === void 0 ? void 0 : _j.status, (_k = e.response) === null || _k === void 0 ? void 0 : _k.data));
     }
   }
   getLevelIcon(level) {
@@ -95,9 +98,9 @@ export class VerdocsSend {
     this.showPickerForId = role.id;
   }
   handleSend(e) {
-    var _a;
+    var _a, _b, _c;
     e.stopPropagation();
-    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: TemplateStore.template.name, template_id: this.templateId });
+    (_a = this.send) === null || _a === void 0 ? void 0 : _a.emit({ roles: Object.values(this.rolesCompleted), name: (_c = (_b = this.store) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.name, template_id: this.templateId });
   }
   handleCancel(e) {
     var _a;
@@ -105,11 +108,11 @@ export class VerdocsSend {
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    var _a, _b;
-    const roleNames = (((_a = TemplateStore.template) === null || _a === void 0 ? void 0 : _a.roles) || []).map(role => role.name) || [];
+    var _a, _b, _c, _d;
+    const roleNames = (((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.roles) || []).map(role => role.name) || [];
     const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
     const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (h(Host, { class: { sendable: (_b = TemplateStore.template) === null || _b === void 0 ? void 0 : _b.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 => {
+    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); } }))));

package/dist/collection/components/embeds/verdocs-view/verdocs-view.js

@@ -1,10 +1,10 @@
 import { VerdocsEndpoint } from '@verdocs/js-sdk';
-import { cancelEnvelope, throttledGetEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
+import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 import { userCanCancelEnvelope } from '@verdocs/js-sdk/Envelopes/Permissions';
+import { cancelEnvelope, throttledGetEnvelope } from '@verdocs/js-sdk/Envelopes/Envelopes';
 import { h, Host, Fragment } from '@stencil/core';
 import { saveAttachment, saveCertificate, saveEnvelopesAsZip } from '../../../utils/utils';
 import { SDKError } from '../../../utils/errors';
-import { integerSequence } from '@verdocs/js-sdk/Utils/Primitives';
 /**
  * Render the documents attached to an envelope in read-only (view) mode. All documents are displayed in order.
  */

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

@@ -1,6 +1,5 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
-import TemplateStore from '../../../utils/templateStore';
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 /**
  * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
@@ -8,6 +7,7 @@ const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
  */
 export class VerdocsFieldAttachment {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.roleIndex = 0;
@@ -34,7 +34,7 @@ export class VerdocsFieldAttachment {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -62,6 +62,24 @@ export class VerdocsFieldAttachment {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,13 +1,13 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Displays a checkbox.
  */
 export class VerdocsFieldCheckbox {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -28,7 +28,7 @@ export class VerdocsFieldCheckbox {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -39,7 +39,7 @@ export class VerdocsFieldCheckbox {
     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: TemplateStore.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();
@@ -62,6 +62,24 @@ export class VerdocsFieldCheckbox {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -3,13 +3,13 @@ import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { format } from 'date-fns';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Displays a date field. When tapped or clicked, the input element will display a date picker component.
  */
 export class VerdocsFieldDate {
   constructor() {
+    this.templateId = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -50,7 +50,7 @@ export class VerdocsFieldDate {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
   render() {
@@ -62,7 +62,7 @@ export class VerdocsFieldDate {
       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: TemplateStore.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();
@@ -85,6 +85,24 @@ export class VerdocsFieldDate {
   }
   static get properties() {
     return {
+      "templateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required for the field builder, passed down to the properties component."
+        },
+        "attribute": "template-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,7 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
@@ -9,6 +8,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldDropdown {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -35,7 +35,7 @@ export class VerdocsFieldDropdown {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -46,7 +46,7 @@ export class VerdocsFieldDropdown {
     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: TemplateStore.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();
@@ -69,6 +69,24 @@ export class VerdocsFieldDropdown {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,7 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Displays an initial field. If an initial already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
@@ -9,6 +8,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldInitial {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.initials = '';
@@ -53,7 +53,7 @@ export class VerdocsFieldInitial {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -64,7 +64,7 @@ export class VerdocsFieldInitial {
     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: TemplateStore.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();
@@ -87,6 +87,24 @@ export class VerdocsFieldInitial {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,7 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 /**
  * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
  * input types like text and checkbox.
@@ -27,6 +26,7 @@ export class VerdocsFieldPayment {
     this.fontSize = 11;
     this.averageFontWidth = 5;
     this.requiredFields = [];
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.fields = undefined;
@@ -101,7 +101,7 @@ export class VerdocsFieldPayment {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -124,6 +124,24 @@ export class VerdocsFieldPayment {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.js

@@ -1,7 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
 const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
@@ -10,6 +9,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldRadioButton {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -30,7 +30,7 @@ export class VerdocsFieldRadioButton {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -43,7 +43,7 @@ export class VerdocsFieldRadioButton {
     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: TemplateStore.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();
@@ -66,6 +66,24 @@ export class VerdocsFieldRadioButton {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,

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

@@ -1,7 +1,6 @@
 import { getRGBA } from '@verdocs/js-sdk/Utils/Colors';
 import { h, Host } from '@stencil/core';
 import { getFieldSettings } from '../../../utils/utils';
-import TemplateStore from '../../../utils/templateStore';
 const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><path d="m7.5 18.5-.312-2.667q-.188-.125-.396-.25-.209-.125-.396-.229l-2.479 1.063-2.521-4.334 2.125-1.625q.021-.104.021-.229v-.458q0-.125-.021-.229L1.396 7.917l2.521-4.313 2.5 1.042q.166-.104.375-.229.208-.125.396-.229L7.5 1.5h5l.312 2.688q.188.104.396.229.209.125.396.229l2.479-1.042 2.521 4.313-2.125 1.625v.916l2.125 1.625-2.521 4.334-2.5-1.063q-.166.104-.375.229-.208.125-.396.25L12.5 18.5Zm2.479-5.521q1.229 0 2.104-.875T12.958 10q0-1.229-.875-2.104t-2.104-.875q-1.208 0-2.094.875Q7 8.771 7 10t.885 2.104q.886.875 2.094.875Zm0-1.75q-.5 0-.864-.364Q8.75 10.5 8.75 10t.365-.865q.364-.364.864-.364t.865.364q.364.365.364.865t-.364.865q-.365.364-.865.364ZM10.021 10Zm-.792 6.521h1.542l.25-2.146q.625-.167 1.198-.51.573-.344 1.031-.823l2.021.854.771-1.271-1.771-1.354q.104-.292.156-.615.052-.323.052-.656 0-.292-.052-.604-.052-.313-.135-.646l1.77-1.375-.77-1.271-2.021.875q-.479-.5-1.042-.833-.562-.334-1.187-.5l-.271-2.167H9.208l-.25 2.167q-.625.166-1.187.5-.563.333-1.042.812l-2-.854-.771 1.271 1.73 1.354q-.084.333-.136.656Q5.5 9.708 5.5 10t.052.604q.052.313.136.667l-1.73 1.354.771 1.271 2-.834q.479.459 1.042.792.562.334 1.187.5Z"/></svg>';
 /**
  * Displays a signature field. If a signature already exists, it will be displayed and the field will be disabled. Otherwise, a placeholder
@@ -9,6 +8,7 @@ const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width=
  */
 export class VerdocsFieldSignature {
   constructor() {
+    this.templateid = '';
     this.field = null;
     this.name = '';
     this.disabled = false;
@@ -54,7 +54,7 @@ export class VerdocsFieldSignature {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    TemplateStore.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -65,7 +65,7 @@ export class VerdocsFieldSignature {
     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: TemplateStore.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();
@@ -88,6 +88,24 @@ export class VerdocsFieldSignature {
   }
   static get properties() {
     return {
+      "templateid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
+        },
+        "attribute": "templateid",
+        "reflect": false,
+        "defaultValue": "''"
+      },
       "field": {
         "type": "unknown",
         "mutable": false,