@verdocs/web-sdk 1.12.44 → 1.13.1

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

@@ -5,13 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const Colors = require('./Colors-e809dcc9.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
-require('./Primitives-be5088cb.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}";
 
@@ -25,6 +23,7 @@ const VerdocsFieldInitial = class {
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.settingsPress = index.createEvent(this, "settingsPress", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.initials = '';
@@ -69,7 +68,7 @@ const VerdocsFieldInitial = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -80,7 +79,7 @@ const VerdocsFieldInitial = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value && index.h("img", { src: value, alt: "Initials" }));
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (index.h("img", { src: value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, value ? (index.h("img", { src: value, alt: "Initials" })) : (index.h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.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/cjs/verdocs-field-payment.cjs.entry.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const Colors = require('./Colors-e809dcc9.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
-require('./Primitives-be5088cb.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}";
 
@@ -41,6 +39,7 @@ const VerdocsFieldPayment = class {
     this.fontSize = 11;
     this.averageFontWidth = 5;
     this.requiredFields = [];
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.fields = undefined;
@@ -115,7 +114,7 @@ const VerdocsFieldPayment = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;

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

@@ -5,13 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const Colors = require('./Colors-e809dcc9.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
-require('./Primitives-be5088cb.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)}";
 
@@ -23,6 +21,7 @@ const VerdocsFieldRadioButton = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.option = 0;
     this.disabled = false;
@@ -43,7 +42,7 @@ const VerdocsFieldRadioButton = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -56,7 +55,7 @@ const VerdocsFieldRadioButton = class {
     if (this.done) {
       return (index.h(index.Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, index.h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
     }
-    return (index.h(index.Host, { class: { required, disabled }, style: { backgroundColor } }, index.h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), index.h("label", { htmlFor: id }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required, disabled }, style: { backgroundColor } }, index.h("input", { id: id, type: "radio", value: option.id, tabIndex: settings.order, name: this.field.name, checked: !!option.selected, disabled: disabled, required: settings.required }), index.h("label", { htmlFor: id }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.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/cjs/verdocs-field-signature.cjs.entry.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const Colors = require('./Colors-e809dcc9.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
-require('./Primitives-be5088cb.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}";
 
@@ -23,6 +21,7 @@ const VerdocsFieldSignature = class {
     this.settingsPress = index.createEvent(this, "settingsPress", 7);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.name = '';
     this.disabled = false;
@@ -68,7 +67,7 @@ const VerdocsFieldSignature = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -79,7 +78,7 @@ const VerdocsFieldSignature = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value && index.h("img", { src: value, alt: "Signature" }));
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? index.h("img", { src: value, alt: "Signature" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, value ? index.h("img", { src: value, alt: "Signature" }) : index.h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.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/cjs/verdocs-field-textarea.cjs.entry.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const Colors = require('./Colors-e809dcc9.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
-require('./Primitives-be5088cb.js');
 
 const verdocsFieldTextareaCss = "verdocs-field-textarea{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-textarea.disabled{opacity:0.5}verdocs-field-textarea textarea{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:11px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-textarea textarea.hide{display:none}verdocs-field-textarea.required{border:1px solid #cc0000}verdocs-field-textarea.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}";
 
@@ -21,6 +19,7 @@ const VerdocsFieldTextarea = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -43,7 +42,7 @@ const VerdocsFieldTextarea = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b;
@@ -53,7 +52,7 @@ const VerdocsFieldTextarea = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, settings.value);
     }
-    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: settings.required, disabled }, style: { backgroundColor } }, index.h("textarea", { placeholder: settings.placeholder || '', tabIndex: settings.order, value: settings.value, disabled: disabled, required: settings.required, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("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/cjs/verdocs-field-textbox.cjs.entry.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const interact_min = require('./interact.min-ba5cc513.js');
 const Colors = require('./Colors-e809dcc9.js');
-const templateStore = require('./templateStore-1862f03c.js');
 const utils = require('./utils-c218d9c7.js');
 require('./_commonjsHelpers-0c557e26.js');
-require('./Primitives-be5088cb.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
@@ -22,6 +20,7 @@ const VerdocsFieldTextbox = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -44,7 +43,7 @@ const VerdocsFieldTextbox = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   componentDidRender() {
     interact_min.interact.dynamicDrop(true);
@@ -83,7 +82,7 @@ const VerdocsFieldTextbox = class {
     if (this.done) {
       return index.h(index.Host, { class: { done: this.done } }, value);
     }
-    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (index.h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, index.h("div", { class: "resizer-inner" }))), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+    return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled, done: this.done }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order, value: value, disabled: disabled, required: (_d = this.field) === null || _d === void 0 ? void 0 : _d.required, ref: el => (this.inputEl = el) }), this.editable && (index.h("div", { class: "resizer", ref: el => (this.resizeHandle = el) }, index.h("div", { class: "resizer-inner" }))), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.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/cjs/verdocs-field-timestamp.cjs.entry.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 const Colors = require('./Colors-e809dcc9.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
 const index$1 = require('./index-6528b430.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Types-f89f9116.js');
 require('./Files-4bdc0c0f.js');
-require('./Primitives-be5088cb.js');
 
 const verdocsFieldTimestampCss = "verdocs-field-timestamp{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:150px;height:15px;display:block;font-size:10px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;opacity:0.5}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;height:100%;width:100%;background:none;font-size:10px;border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid #cc0000}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.75s 2;animation:verdocs-field-pulse 0.75s 2}verdocs-field-timestamp verdocs-button-panel{top:-3px;left:-2px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-timestamp verdocs-button-panel[data-active],verdocs-field-timestamp verdocs-button-panel:hover{opacity:1}verdocs-field-timestamp verdocs-button-panel .icon svg{fill:#333333}verdocs-field-timestamp verdocs-button-panel .icon:hover svg{fill:#000000}";
 
@@ -21,6 +19,7 @@ const VerdocsFieldTimestamp = class {
     index.registerInstance(this, hostRef);
     this.settingsChanged = index.createEvent(this, "settingsChanged", 7);
     this.deleted = index.createEvent(this, "deleted", 7);
+    this.templateid = '';
     this.field = null;
     this.disabled = false;
     this.editable = false;
@@ -43,7 +42,7 @@ const VerdocsFieldTimestamp = class {
     if (settingsPanel && settingsPanel.hidePanel) {
       settingsPanel.hidePanel();
     }
-    templateStore.state.updateCount++;
+    // TemplateStore.updateCount++;
   }
   render() {
     var _a, _b, _c;
@@ -59,7 +58,7 @@ const VerdocsFieldTimestamp = class {
     return (index.h(index.Host, { class: { required: (_c = this.field) === null || _c === void 0 ? void 0 : _c.required, disabled }, style: { backgroundColor } }, index.h("input", { type: "text", placeholder: settings === null || settings === void 0 ? void 0 : settings.placeholder, tabIndex: settings === null || settings === void 0 ? void 0 : settings.order,
       // TODO: It would really make more sense to show the date and time but the default width of 64px for this field
       // is encoded in a ton of existing entries in the database and is hard to change.
-      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("verdocs-template-field-properties", { templateId: templateStore.state.templateId, fieldName: this.field.name, onClose: () => this.hideSettingsPanel(), onDelete: () => {
+      value: formatted, disabled: true, ref: el => (this.el = el) }), this.editable && (index.h("verdocs-button-panel", { icon: settingsIcon, id: `verdocs-settings-panel-${this.field.name}` }, index.h("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/cjs/verdocs-preview.cjs.entry.js

@@ -6,14 +6,12 @@ const index = require('./index-67233b76.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const utils = require('./utils-c218d9c7.js');
-const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-f310df2f.js');
+const TemplateStore = require('./TemplateStore-01ff3237.js');
 const errors = require('./errors-0396da3d.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
 require('./Files-4bdc0c0f.js');
 require('./index-6528b430.js');
-require('./Primitives-be5088cb.js');
 require('./Templates-e258cbd5.js');
 
 const verdocsPreviewCss = "verdocs-preview{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-preview div,verdocs-preview canvas{-webkit-box-sizing:border-box;box-sizing:border-box}";
@@ -22,39 +20,45 @@ const VerdocsPreview = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = null;
   }
-  // TODO: Move to state store so we can load this one time
-  async componentDidLoad() {
+  async componentWillLoad() {
     var _a, _b, _c;
-    this.endpoint.loadSession();
-    if (!this.templateId) {
-      console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
-      return;
-    }
     try {
-      console.log(`[PREVIEW] Loading template ${this.templateId}`);
-      await Templates.loadTemplate(this.endpoint, this.templateId, true);
+      this.endpoint.loadSession();
+      if (!this.templateId) {
+        console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[PREVIEW] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, true);
+      console.log(`[PREVIEW] Loading template ${this.templateId}`, this.endpoint.session);
     }
     catch (e) {
-      console.log('[PREVIEW] Error loading template', e);
+      console.log('[PREVIEW] Error with preview session', e);
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
   handlePageRendered(e) {
+    var _a, _b;
     const pageInfo = e.detail;
     // console.log('[PREVIEW] Page rendered', pageInfo);
-    const fields = templateStore.state.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
+    const fields = (_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.fields.filter(field => field.page_sequence === pageInfo.pageNumber);
     // console.log('[PREVIEW] Fields on page', fields);
-    fields.forEach(field => utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(templateStore.state.roleNames, field.role_name), { disabled: true, editable: false, draggable: false }));
+    fields.forEach(field => utils.renderDocumentField(field, pageInfo, utils.getRoleIndex(TemplateStore.getRoleNames(this.store), field.role_name), { disabled: true, editable: false, draggable: false }));
   }
   render() {
+    var _a, _b, _c, _d;
     // TODO: Render a better error
-    if (templateStore.state.loading || !templateStore.state.template) {
+    if (!((_b = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.isLoaded)) {
       return (index.h(index.Host, null, index.h("verdocs-loader", null)));
     }
-    const pages = [...templateStore.state.template.pages];
+    const pages = [...(_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.pages];
     pages.sort((a, b) => a.sequence - b.sequence);
     return (index.h(index.Host, null, pages.map(page => {
       return (index.h("verdocs-template-document-page", { templateId: page.template_id, documentId: page.document_id, pageNumber: page.sequence, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [

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

@@ -7,11 +7,9 @@ require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
 const Validators = require('./Validators-16e6d7d1.js');
 const Colors = require('./Colors-e809dcc9.js');
-const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-f310df2f.js');
+const TemplateStore = require('./TemplateStore-01ff3237.js');
 const utils = require('./utils-c218d9c7.js');
 const errors = require('./errors-0396da3d.js');
-require('./Primitives-be5088cb.js');
 require('./Templates-e258cbd5.js');
 require('./_commonjsHelpers-0c557e26.js');
 require('./Envelopes-699531b7.js');
@@ -32,6 +30,7 @@ const VerdocsSend = class {
     this.sdkError = index.createEvent(this, "sdkError", 7);
     this.searchContacts = index.createEvent(this, "searchContacts", 7);
     this.levels = [];
+    this.store = null;
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = null;
     this.containerId = `verdocs-send-${Math.random().toString(36).substring(2, 11)}`;
@@ -44,22 +43,25 @@ const VerdocsSend = class {
     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 Templates.loadTemplate(this.endpoint, this.templateId, true);
-      if (!((_a = templateStore.state.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 TemplateStore.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.state.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.state.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}`;
@@ -69,18 +71,18 @@ const VerdocsSend = class {
         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 errors.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 errors.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) {
@@ -104,9 +106,9 @@ const VerdocsSend = class {
     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.state.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;
@@ -114,11 +116,11 @@ const VerdocsSend = class {
     (_a = this.exit) === null || _a === void 0 ? void 0 : _a.emit();
   }
   render() {
-    var _a, _b;
-    const roleNames = (((_a = templateStore.state.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 => Validators.isValidEmail(recipient.email) || Validators.isValidPhone(recipient.phone));
     const allRolesAssigned = rolesAssigned.length >= roleNames.length;
-    return (index.h(index.Host, { class: { sendable: (_b = templateStore.state.template) === null || _b === void 0 ? void 0 : _b.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
+    return (index.h(index.Host, { class: { sendable: (_d = (_c = this.store) === null || _c === void 0 ? void 0 : _c.state) === null || _d === void 0 ? void 0 : _d.is_sendable } }, index.h("div", { class: "recipients" }, index.h("div", { class: "left-line" }), index.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index.h("div", { class: "complete" }, "Send Envelope")), this.levels.map(level => (index.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.rolesAtLevel[level].map(role => {
       var _a, _b, _c, _d, _e, _f;
       const unknown = !role.email;
       return unknown ? (index.h("div", { class: "recipient", style: { backgroundColor: Colors.getRGBA(utils.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, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.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); } })))) : (index.h("div", { class: "recipient", style: { borderColor: Colors.getRGBA(utils.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, index.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index.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/cjs/verdocs-template-attachments.cjs.entry.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-67233b76.js');
 require('./Types-f89f9116.js');
 const VerdocsEndpoint = require('./VerdocsEndpoint-3e95f87f.js');
-const templateStore = require('./templateStore-1862f03c.js');
-const Templates = require('./Templates-f310df2f.js');
+const TemplateStore = require('./TemplateStore-01ff3237.js');
 const errors = require('./errors-0396da3d.js');
-require('./Primitives-be5088cb.js');
 require('./Templates-e258cbd5.js');
 
 const verdocsTemplateAttachmentsCss = "verdocs-template-attachments{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-template-attachments h5{font-size:16px;font-weight:bold;margin:0 0 10px 0;color:#4c56cb}verdocs-template-attachments .attachment{display:-ms-flexbox;display:flex;padding:5px 10px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;color:#33364b;border:1px solid #cccccc}verdocs-template-attachments svg{width:24px;height:24px;fill:#5c6575;margin:2px 10px 0 0}";
@@ -19,35 +17,46 @@ const VerdocsTemplateAttachments = class {
     index.registerInstance(this, hostRef);
     this.close = index.createEvent(this, "close", 7);
     this.sdkError = index.createEvent(this, "sdkError", 7);
+    this.store = null;
     this.endpoint = VerdocsEndpoint.VerdocsEndpoint.getDefault();
     this.templateId = '';
-    this.loading = true;
   }
   async componentWillLoad() {
     var _a, _b, _c;
     try {
       this.endpoint.loadSession();
-      await Templates.loadTemplate(this.endpoint, this.templateId);
-      this.loading = false;
+      if (!this.templateId) {
+        console.log(`[ROLES] Missing required template ID ${this.templateId}`);
+        return;
+      }
+      if (!this.endpoint.session) {
+        console.log('[ROLES] Unable to start builder session, must be authenticated');
+        return;
+      }
+      this.store = await TemplateStore.getTemplateStore(this.endpoint, this.templateId, false);
+      this.endpoint.loadSession();
     }
     catch (e) {
-      console.log('[TEMPLATE NAME] Error loading template', e);
-      this.loading = false;
+      console.log('[TEMPLATE ATTACHMENTS] Error loading template', e);
       (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new errors.SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
     }
   }
   render() {
+    var _a, _b;
     if (!this.endpoint.session) {
       return (index.h(index.Host, null, index.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
     }
-    if (this.loading) {
+    const templateState = (_a = this.store) === null || _a === void 0 ? void 0 : _a.state;
+    if (!templateState.isLoaded) {
       return (index.h(index.Host, { class: "loading" }, index.h("verdocs-loader", null)));
     }
     // This is meant to be a companion for larger visual experiences so we just go blank on errors for now.
-    if (!this.endpoint.session || !templateStore.state.template) {
+    // Checking
+    if (!this.endpoint.session || !templateState.profile_id) {
       return index.h(index.Host, { class: "empty" });
     }
-    return (index.h(index.Host, null, index.h("h5", null, "Attachments"), templateStore.state.template.template_documents.map(document => (index.h("div", { class: "attachment" }, index.h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
+    return (index.h(index.Host, null, index.h("h5", null, "Attachments"), (_b = this.store) === null || _b === void 0 ? void 0 :
+      _b.state.template_documents.map(document => (index.h("div", { class: "attachment" }, index.h("span", { innerHTML: FileIcon }), document.name, " (", document.page_numbers, " page", document.page_numbers > 1 ? 's' : '', ")")))));
   }
 };
 VerdocsTemplateAttachments.style = verdocsTemplateAttachmentsCss;