@verdocs/web-sdk 1.12.43 → 1.13.0

package/dist/esm/verdocs-button-panel_3.entry.js

@@ -1,13 +1,11 @@
 import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-5260ed60.js';
 import { c as createPopper } from './popper-f860750c.js';
+import { a as commonjsGlobal } from './_commonjsHelpers-5ec8f9b7.js';
 import './Types-5f31149e.js';
 import { u as updateField, d as deleteField } from './Fields-c82e6df3.js';
 import { V as VerdocsEndpoint } from './VerdocsEndpoint-4367eb13.js';
-import { a as commonjsGlobal } from './_commonjsHelpers-5ec8f9b7.js';
-import { s as state } from './templateStore-17c872da.js';
-import { l as loadTemplate } from './Templates-d94fb9d5.js';
+import { g as getTemplateStore } from './TemplateStore-91a71f46.js';
 import { S as SDKError } from './errors-9b5498c8.js';
-import './Primitives-054bc6e5.js';
 import './Templates-ca52ef90.js';
 
 const verdocsButtonPanelCss = "verdocs-button-panel{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:inline-block}verdocs-button-panel .icon{display:inline-block;cursor:pointer;opacity:0.6}verdocs-button-panel .icon svg{fill:#707ae5}verdocs-button-panel .icon:hover{opacity:1}.verdocs-button-panel-content{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-shadow:0 0 10px 1px #999999;box-shadow:0 0 10px 1px #999999;display:none;background:#ffffff;color:#33364b;width:320px;font-weight:bold;padding:15px;font-size:14px;position:relative;border-radius:4px;z-index:10000}.verdocs-button-panel-content .arrow,.verdocs-button-panel-content .arrow::before{position:absolute;width:8px;height:8px;background:inherit}.verdocs-button-panel-content .arrow{visibility:hidden;top:-4px}.verdocs-button-panel-content .arrow::before{visibility:visible;content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg)}.verdocs-button-panel-content[data-show]{display:block}.verdocs-button-panel-content[data-popper-placement^=top]>.arrow{bottom:-4px}.verdocs-button-panel-content[data-popper-placement^=bottom]>.arrow{top:-4px}.verdocs-button-panel-content[data-popper-placement^=left]>.arrow{right:-4px}.verdocs-button-panel-content[data-popper-placement^=right]>.arrow{left:-4px}.verdocs-button-panel-content h6{font-size:16px;font-weight:bold;margin:0 0 16px 0;color:#092c4c;border-bottom:1px solid #cccccc}";
@@ -299,6 +297,7 @@ const VerdocsTemplateFieldProperties = class {
     this.delete = createEvent(this, "delete", 7);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.sdkError = createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.getDefault();
     this.templateId = '';
     this.fieldName = '';
@@ -318,11 +317,11 @@ const VerdocsTemplateFieldProperties = class {
     this.showingHelp = false;
   }
   async componentWillLoad() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     try {
       this.endpoint.loadSession();
       if (!this.templateId) {
-        console.error(`[FIELD PROPERTIES] Missing required template ID`);
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
         return;
       }
       if (!this.fieldName) {
@@ -330,11 +329,11 @@ const VerdocsTemplateFieldProperties = class {
         return;
       }
       if (!this.endpoint.session) {
-        console.error('[FIELD PROPERTIES] Unable to start builder session, must be authenticated');
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
         return;
       }
-      await loadTemplate(this.endpoint, this.templateId);
-      const field = state.fields.find(field => field.name === this.fieldName);
+      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);
       if (!field) {
         console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in template`);
       }
@@ -345,31 +344,31 @@ const VerdocsTemplateFieldProperties = class {
       this.required = field.required;
       this.fieldType = field.type;
       this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
-      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.value) || '';
+      this.defaultValue = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.value) || '';
       this.setting = field.setting || {};
-      this.options = ((_b = field.setting) === null || _b === void 0 ? void 0 : _b.options) || [];
+      this.options = ((_d = field.setting) === null || _d === void 0 ? void 0 : _d.options) || [];
       this.dirty = false;
       this.loading = false;
     }
     catch (e) {
       console.log('[FIELD PROPERTIES] Error loading template', e);
       this.loading = false;
-      (_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));
+      (_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;
+    var _a, _b, _c, _d;
     e.stopPropagation();
-    const field = state.fields.find(field => field.name === this.fieldName);
+    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);
     if (field) {
       this.name = field.name;
       this.roleName = field.role_name;
       this.required = field.required;
       this.placeholder = field.label; // TODO: Talk about how we want to handle labels/placeholders
-      this.defaultValue = ((_a = field.setting) === null || _a === void 0 ? void 0 : _a.result) || '';
+      this.defaultValue = ((_c = field.setting) === null || _c === void 0 ? void 0 : _c.result) || '';
     }
     this.dirty = false;
-    (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+    (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
   }
   handleSave(e) {
     e.stopPropagation();
@@ -392,9 +391,9 @@ const VerdocsTemplateFieldProperties = class {
     }
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       this.dirty = false;
-      const field = state.fields.find(field => field.name === this.fieldName);
+      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);
       if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
@@ -405,8 +404,8 @@ const VerdocsTemplateFieldProperties = class {
           field.setting.options = this.options;
         }
       }
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
-      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
+      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
+      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -439,9 +438,9 @@ const VerdocsTemplateFieldProperties = class {
     newProperties.setting.options = this.options;
     updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
       .then(() => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       this.dirty = false;
-      const field = state.fields.find(field => field.name === this.fieldName);
+      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);
       if (field) {
         field.name = this.name;
         field.role_name = this.roleName;
@@ -449,9 +448,10 @@ const VerdocsTemplateFieldProperties = class {
         field.label = this.placeholder;
         field.setting.result = this.defaultValue;
       }
-      (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName });
-      (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
-      state.updateCount++;
+      (_c = this.settingsChanged) === null || _c === void 0 ? void 0 : _c.emit({ fieldName: this.fieldName });
+      (_d = this.close) === null || _d === void 0 ? void 0 : _d.emit();
+      // TODO: Verify this
+      // TemplateStore.updateCount++;
     })
       .catch(() => {
       console.log('Field update failed', e);
@@ -462,13 +462,13 @@ const VerdocsTemplateFieldProperties = class {
     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(r => {
-        var _a;
+        var _a, _b, _c, _d, _e;
         console.log('Field deleted', r);
-        state.fields = [...state.fields.filter(field => field.name !== this.fieldName)];
-        state.template.roles.forEach(role => {
+        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)];
         });
-        (_a = this.delete) === null || _a === void 0 ? void 0 : _a.emit({ templateId: this.templateId, roleName: this.roleName });
+        (_e = this.delete) === null || _e === void 0 ? void 0 : _e.emit({ templateId: this.templateId, roleName: this.roleName });
       })
         .catch(e => {
         console.log('Deletion error', e);
@@ -476,11 +476,12 @@ const VerdocsTemplateFieldProperties = class {
     }
   }
   render() {
+    var _a, _b, _c, _d;
     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 || !state.template) {
+    if (!this.endpoint.session || !((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
       return h(Host, { class: "empty" });
     }
     if (this.helpText && this.showingHelp) {
@@ -491,7 +492,7 @@ const VerdocsTemplateFieldProperties = class {
       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: state.template.roles.map(role => ({ label: role.name, value: role.name })), onInput: (e) => {
+      } })), 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) => {
         this.roleName = e.target.value;
         this.dirty = true;
       } })), ['textbox', 'textarea'].includes(this.type) && (h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.name, autocomplete: "off",

package/dist/esm/verdocs-field-attachment.entry.js

@@ -1,7 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { s as state } from './templateStore-17c872da.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldAttachmentCss = "verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:24px;height:24px;display:block;font-size:11px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment.disabled{opacity:0.5}verdocs-field-attachment.disabled span{cursor:inherit}verdocs-field-attachment span{width:20px;cursor:pointer}verdocs-field-attachment.required span{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -10,6 +8,7 @@ const VerdocsFieldAttachment = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.roleIndex = 0;
@@ -36,7 +35,7 @@ const VerdocsFieldAttachment = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;

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

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldCheckboxCss = "@charset \"UTF-8\";verdocs-field-checkbox{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;font-size:14px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-checkbox.disabled{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{content:\"\";position:absolute;display:block;top:1px;left:1px;width:10px;height:10px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0.7)}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-checkbox verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
@@ -17,6 +15,7 @@ const VerdocsFieldCheckbox = class {
     registerInstance(this, hostRef);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -37,7 +36,7 @@ const VerdocsFieldCheckbox = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c, _d;
@@ -48,7 +47,7 @@ const VerdocsFieldCheckbox = class {
     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();

package/dist/esm/verdocs-field-date.entry.js

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { s as state } from './templateStore-17c872da.js';
 import { f as format } from './index-d264c496.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
-import './Primitives-054bc6e5.js';
 
 var HOOKS = [
     "onChange",
@@ -2567,6 +2565,7 @@ const VerdocsFieldDate = class {
     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;
@@ -2607,7 +2606,7 @@ const VerdocsFieldDate = class {
     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() {
@@ -2619,7 +2618,7 @@ const VerdocsFieldDate = class {
       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();

package/dist/esm/verdocs-field-dropdown.entry.js

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldDropdownCss = "verdocs-field-dropdown{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:85px;height:20px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-dropdown.disabled{opacity:0.5}verdocs-field-dropdown select{position:absolute;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;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-dropdown select:focus{outline:none}verdocs-field-dropdown select.hide{display:none}verdocs-field-dropdown.required select{border:1px solid #cc0000}verdocs-field-dropdown.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-dropdown verdocs-button-panel{margin-left:-20px;margin-top:-4px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
@@ -18,6 +16,7 @@ const VerdocsFieldDropdown = class {
     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;
@@ -44,7 +43,7 @@ const VerdocsFieldDropdown = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -55,7 +54,7 @@ const VerdocsFieldDropdown = class {
     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();

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

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldInitialCss = "verdocs-field-initial{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-initial.disabled{opacity:0.5}verdocs-field-initial.done{border:none;opacity:1}verdocs-field-initial img{display:block;max-width:100%;max-height:100%}verdocs-field-initial button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;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-initial button.hide{display:none}verdocs-field-initial.required{border:1px solid #cc0000}verdocs-field-initial.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-initial verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-initial verdocs-button-panel[data-active],verdocs-field-initial verdocs-button-panel:hover{opacity:1}verdocs-field-initial verdocs-button-panel .icon svg{fill:#333333}verdocs-field-initial verdocs-button-panel .icon:hover svg{fill:#000000}";
 
@@ -21,6 +19,7 @@ const VerdocsFieldInitial = class {
     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 = '';
@@ -65,7 +64,7 @@ const VerdocsFieldInitial = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -76,7 +75,7 @@ const VerdocsFieldInitial = class {
     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();

package/dist/esm/verdocs-field-payment.entry.js

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.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}";
 
@@ -37,6 +35,7 @@ const VerdocsFieldPayment = class {
     this.fontSize = 11;
     this.averageFontWidth = 5;
     this.requiredFields = [];
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.fields = undefined;
@@ -111,7 +110,7 @@ const VerdocsFieldPayment = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;

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

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldRadioButtonCss = "verdocs-field-radio-button{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio-button svg{margin-top:4px}verdocs-field-radio-button.disabled{opacity:0.5}verdocs-field-radio-button.disabled.done{opacity:1}verdocs-field-radio-button.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio-button:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio-button:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio-button:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio-button:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio-button:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio-button:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio-button.required{border:1px solid #cc0000}verdocs-field-radio-button.hide{display:none}verdocs-field-radio-button.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}";
 
@@ -19,6 +17,7 @@ const VerdocsFieldRadioButton = class {
     registerInstance(this, hostRef);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -39,7 +38,7 @@ const VerdocsFieldRadioButton = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -52,7 +51,7 @@ const VerdocsFieldRadioButton = class {
     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();

package/dist/esm/verdocs-field-signature.entry.js

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldSignatureCss = "verdocs-field-signature{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:83px;height:36px;display:block;font-size:11px;position:relative;letter-spacing:0.3px;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-signature.disabled{opacity:0.5}verdocs-field-signature.done{border:none;opacity:1}verdocs-field-signature img{display:block;max-width:100%;max-height:100%}verdocs-field-signature button{-webkit-box-sizing:border-box;box-sizing:border-box;border:none;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-signature button.hide{display:none}verdocs-field-signature.required{border:1px solid #cc0000}verdocs-field-signature.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-signature verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-signature verdocs-button-panel[data-active],verdocs-field-signature verdocs-button-panel:hover{opacity:1}verdocs-field-signature verdocs-button-panel .icon svg{fill:#333333}verdocs-field-signature verdocs-button-panel .icon:hover svg{fill:#000000}";
 
@@ -19,6 +17,7 @@ const VerdocsFieldSignature = class {
     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;
@@ -64,7 +63,7 @@ const VerdocsFieldSignature = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -75,7 +74,7 @@ const VerdocsFieldSignature = class {
     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();

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

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
 import './index-d264c496.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -17,6 +15,7 @@ const VerdocsFieldTextarea = class {
     registerInstance(this, hostRef);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -39,7 +38,7 @@ const VerdocsFieldTextarea = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -49,7 +48,7 @@ const VerdocsFieldTextarea = class {
     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();

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

@@ -1,10 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-5260ed60.js';
 import { i as interact } from './interact.min-cf83fa88.js';
 import { g as getRGBA } from './Colors-1b298092.js';
-import { s as state } from './templateStore-17c872da.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
 import './_commonjsHelpers-5ec8f9b7.js';
-import './Primitives-054bc6e5.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
@@ -18,6 +16,7 @@ const VerdocsFieldTextbox = class {
     registerInstance(this, hostRef);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -40,7 +39,7 @@ const VerdocsFieldTextbox = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   componentDidRender() {
     interact.dynamicDrop(true);
@@ -79,7 +78,7 @@ const VerdocsFieldTextbox = class {
     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();

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

@@ -1,13 +1,11 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-5260ed60.js';
 import { g as getRGBA } from './Colors-1b298092.js';
 import { g as getFieldSettings } from './utils-78a752e0.js';
-import { s as state } from './templateStore-17c872da.js';
 import { f as format } from './index-d264c496.js';
 import './_commonjsHelpers-5ec8f9b7.js';
 import './Envelopes-921cd9d0.js';
 import './Types-5f31149e.js';
 import './Files-70a192df.js';
-import './Primitives-054bc6e5.js';
 
 const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
 
@@ -17,6 +15,7 @@ const VerdocsFieldTimestamp = class {
     registerInstance(this, hostRef);
     this.settingsChanged = createEvent(this, "settingsChanged", 7);
     this.deleted = createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -39,7 +38,7 @@ const VerdocsFieldTimestamp = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -55,7 +54,7 @@ const VerdocsFieldTimestamp = class {
     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();