@verdocs/web-sdk 4.2.36 → 4.2.40

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from
 import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from
 import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from
 import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';

package/dist/components/verdocs-field-radio.d.ts

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

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

@@ -0,0 +1,154 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { getRGBA } from '@verdocs/js-sdk';
+import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
+import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
+import { g as getFieldSettings } from './utils.js';
+import { S as SettingsIcon } from './Icons.js';
+import { d as defineCustomElement$9 } from './verdocs-button2.js';
+import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';
+import { d as defineCustomElement$7 } from './verdocs-component-error2.js';
+import { d as defineCustomElement$6 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$5 } from './verdocs-portal2.js';
+import { d as defineCustomElement$4 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$3 } from './verdocs-template-field-properties2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+
+const verdocsFieldRadioCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}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 input{cursor:inherit}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.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio-button verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio-button .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio-button .settings-icon svg{fill:#707ae5}verdocs-field-radio-button .settings-icon:hover{opacity:1}";
+const VerdocsFieldRadioStyle0 = verdocsFieldRadioCss;
+
+const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
+const RadioIconSelected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
+const VerdocsFieldRadio$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldRadio extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.settingsChanged = createEvent(this, "settingsChanged", 7);
+        this.deleted = createEvent(this, "deleted", 7);
+        this.fieldStore = null;
+        this.roleStore = null;
+        this.templateid = '';
+        this.fieldname = '';
+        this.option = 0;
+        this.disabled = false;
+        this.done = false;
+        this.editable = false;
+        this.moveable = false;
+        this.xscale = 1;
+        this.yscale = 1;
+        this.pagenumber = 1;
+        this.showingProperties = false;
+    }
+    async showSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.showPanel) {
+            settingsPanel.showPanel();
+        }
+    }
+    async hideSettingsPanel() {
+        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
+        if (settingsPanel && settingsPanel.hidePanel) {
+            settingsPanel.hidePanel();
+        }
+    }
+    async componentWillLoad() {
+        this.fieldStore = getTemplateFieldStore(this.templateid);
+        this.roleStore = getTemplateRoleStore(this.templateid);
+    }
+    render() {
+        const { templateid, fieldname = '', option, editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
+        const { required = false, role_name = '' } = field || {};
+        const { options = [] } = getFieldSettings(field);
+        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { id = 'option1', selected = false } = options[option] || {};
+        const fieldId = `${fieldname}-${id}`;
+        if (done) {
+            return (h(Host, { class: { done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
+        }
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+                e.stopPropagation();
+                this.showingProperties = !this.showingProperties;
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
+                var _a;
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
+                return this.hideSettingsPanel();
+            }, onSettingsChanged: e => {
+                var _a;
+                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
+                return this.hideSettingsPanel();
+            }, helpText: "Radio buttons capture the recipient's selection of just one of several related (exclusive) options." })))))));
+    }
+    static get style() { return VerdocsFieldRadioStyle0; }
+}, [0, "verdocs-field-radio", {
+        "templateid": [513],
+        "fieldname": [513],
+        "option": [514],
+        "disabled": [516],
+        "done": [516],
+        "editable": [516],
+        "moveable": [516],
+        "xscale": [514],
+        "yscale": [514],
+        "pagenumber": [514],
+        "showingProperties": [32],
+        "showSettingsPanel": [64],
+        "hideSettingsPanel": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["verdocs-field-radio", "verdocs-button", "verdocs-checkbox", "verdocs-component-error", "verdocs-help-icon", "verdocs-portal", "verdocs-select-input", "verdocs-template-field-properties", "verdocs-text-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "verdocs-field-radio":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, VerdocsFieldRadio$1);
+            }
+            break;
+        case "verdocs-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "verdocs-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "verdocs-component-error":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "verdocs-help-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "verdocs-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "verdocs-select-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "verdocs-template-field-properties":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "verdocs-text-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const VerdocsFieldRadio = VerdocsFieldRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsFieldRadio, defineCustomElement };

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from
 import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
 import { d as defineCustomElement$8 } from './verdocs-checkbox2.js';

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

@@ -3,7 +3,7 @@ import { i as interact } from './interact.min.js';
 import { VerdocsEndpoint, updateField, getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';

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

@@ -3,7 +3,7 @@ import { i as interact } from './interact.min.js';
 import { VerdocsEndpoint, updateField, getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
 import { d as defineCustomElement$7 } from './verdocs-checkbox2.js';
@@ -29,6 +29,7 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
         this.templateid = '';
         this.fieldname = '';
         this.disabled = false;
+        this.multiline = false;
         this.editable = false;
         this.moveable = false;
         this.done = false;
@@ -107,14 +108,18 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
     render() {
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', placeholder = '' } = field || {};
-        const { result: value = '', width = 150 } = getFieldSettings(field);
+        let { required = false, role_name = '', placeholder = '', width = 150, height = 15, default: value = '' } = field || {};
+        // TODO: Consolidate value/defaultValue handling between template and envelope fields
+        if (field.value) {
+            value = field.value;
+        }
         // TODO: This is an outdated technique from the old system. We should compute it.
         const maxlength = width / 5;
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
+        console.log('text field', { multiline: this.multiline, value, placeholder, maxlength, width, height });
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, h("input", { type: "text", name: fieldname, value: value, disabled: disabled, required: required, placeholder: placeholder, maxlength: maxlength, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
@@ -135,6 +140,7 @@ const VerdocsFieldTextbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldT
         "templateid": [513],
         "fieldname": [513],
         "disabled": [516],
+        "multiline": [516],
         "editable": [516],
         "moveable": [516],
         "done": [516],

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

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { n as format } from './format.js';
 import { getRGBA } from '@verdocs/js-sdk';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { b as getFieldSettings } from './utils.js';
+import { g as getFieldSettings } from './utils.js';
 import { F as FORMAT_TIMESTAMP } from './Types.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$8 } from './verdocs-button2.js';
@@ -13,7 +14,6 @@ import { d as defineCustomElement$4 } from './verdocs-portal2.js';
 import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
-import { d as dateFns } from './index2.js';
 
 const verdocsFieldTimestampCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-timestamp{width:160px;height:15px;opacity:0.5;display:block;font-size:9px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-timestamp.done{opacity:1}verdocs-field-timestamp input{position:absolute;cursor:inherit;width:100%;height:100%;font-size:9px;background:none;font-weight:500;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-box-sizing:border-box;box-sizing:border-box;color:rgba(0, 0, 0, 0.87);border:1px solid rgba(0, 0, 0, 0.2)}verdocs-field-timestamp input.hide{display:none}verdocs-field-timestamp.required{border:1px solid rgb(204, 0, 0)}verdocs-field-timestamp.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}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}verdocs-field-timestamp .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-timestamp .settings-icon svg{fill:#707ae5}verdocs-field-timestamp .settings-icon:hover{opacity:1}";
 const VerdocsFieldTimestampStyle0 = verdocsFieldTimestampCss;
@@ -62,7 +62,7 @@ const VerdocsFieldTimestamp = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         const { required = false, role_name = '', placeholder = '' } = field || {};
         const { value = '' } = getFieldSettings(field);
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        const formatted = dateFns.format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
+        const formatted = format.format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
         if (done) {
             return h(Host, { class: { done } }, formatted);
         }

package/dist/components/verdocs-preview2.js

@@ -49,7 +49,7 @@ const VerdocsPreview = /*@__PURE__*/ proxyCustomElement(class VerdocsPreview ext
         this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
     }
     async componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c;
         try {
             this.endpoint.loadSession();
             if (!this.endpoint.session) {
@@ -60,31 +60,27 @@ const VerdocsPreview = /*@__PURE__*/ proxyCustomElement(class VerdocsPreview ext
                 console.log(`[PREVIEW] Missing required template ID ${this.templateId}`);
                 return;
             }
-            try {
-                getTemplateStore(this.endpoint, this.templateId, true)
-                    .then(ts => {
-                    this.templateStore = ts;
-                    this.fieldStore = getTemplateFieldStore(this.templateId);
-                    this.roleStore = getTemplateRoleStore(this.templateId);
-                    this.loading = false;
-                })
-                    .catch(e => {
-                    console.log(e);
-                });
-            }
-            catch (e) {
-                console.log('[PREVIEW] Error with preview session', e);
-                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new 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));
-            }
+            return this.loadTemplate(this.templateId);
         }
         catch (e) {
             console.log('[PREVIEW] Error with preview session', e);
-            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
+            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new 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));
         }
     }
     async loadTemplate(templateId) {
         if (templateId) {
-            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
+            console.log('lt', templateId);
+            getTemplateStore(this.endpoint, templateId, false)
+                .then(ts => {
+                this.templateStore = ts;
+                this.fieldStore = getTemplateFieldStore(this.templateId);
+                this.roleStore = getTemplateRoleStore(this.templateId);
+                this.loading = false;
+            })
+                .catch(e => {
+                console.log('Unable to load template', e);
+                throw e;
+            });
         }
     }
     handlePageRendered(e) {

package/dist/components/verdocs-sign.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { VerdocsEndpoint, getSigningSession, getEnvelope, envelopeRecipientAgree, envelopeRecipientDecline, updateEnvelopeField, createSignature, updateEnvelopeFieldSignature, createInitials, updateEnvelopeFieldInitials, isValidPhone, isValidEmail, envelopeRecipientSubmit, uploadEnvelopeFieldAttachment, fullNameToInitials, integerSequence } from '@verdocs/js-sdk';
-import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, g as getFieldId } from './utils.js';
+import { a as saveAttachment, u as updateDocumentFieldValue, r as renderDocumentField, b as getFieldId } from './utils.js';
 import { c as createTemplateFieldStoreFromEnvelope } from './TemplateFieldStore.js';
 import { V as VerdocsToast } from './Toast.js';
 import { S as SDKError } from './errors.js';
@@ -212,10 +212,12 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         switch (field.type) {
             case 'textbox':
                 return this.saveFieldChange(field.name, { prepared: false, value });
+            case 'checkbox':
             case 'checkbox_group': {
                 const options = field.settings.options.map(option => ({ id: option.id, checked: e.target.checked }));
                 return this.saveFieldChange(field.name, { prepared: false, value: { options } });
             }
+            case 'radio':
             case 'radio_button_group': {
                 const options = field.settings.options.map(option => ({ id: option.id, selected: e.target.value === option.id }));
                 return this.saveFieldChange(field.name, { prepared: false, value: { options } });
@@ -292,9 +294,11 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 return result !== '';
             case 'dropdown':
                 return value !== '';
+            case 'checkbox':
             case 'checkbox_group':
                 const checkedCount = (((_b = (_a = field.settings) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.filter(option => option.checked)) || []).length;
                 return checkedCount >= (((_c = field.settings) === null || _c === void 0 ? void 0 : _c.minimum_checked) || 0) && checkedCount <= (((_d = field.settings) === null || _d === void 0 ? void 0 : _d.maximum_checked) || 999);
+            case 'radio':
             case 'radio_button_group':
                 return (((_f = (_e = field.settings) === null || _e === void 0 ? void 0 : _e.options) === null || _f === void 0 ? void 0 : _f.filter(option => option.selected)) || []).length > 0;
             // TODO

package/dist/components/verdocs-template-document-page2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { VerdocsEndpoint, getTemplateDocumentPageDisplayUri } from '@verdocs/js-sdk';
 import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
-import { t as throttle, e as getControlStyles, g as getFieldId, f as getFieldOptionId } from './utils.js';
+import { t as throttle, e as getControlStyles, b as getFieldId, f as getFieldOptionId } from './utils.js';
 import { d as defineCustomElement$l } from './verdocs-button2.js';
 import { d as defineCustomElement$k } from './verdocs-checkbox2.js';
 import { d as defineCustomElement$j } from './verdocs-component-error2.js';
@@ -122,14 +122,15 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
                 .map(field => {
                 var _a, _b;
                 const id = getFieldId(field);
-                let { name, type } = field;
+                let { name, type, multiline } = field;
                 const { xScale, yScale, templateId, editable, disabled, done, pageNumber } = this;
                 if (((_a = field['setting']) === null || _a === void 0 ? void 0 : _a.leading) > 0 || ((_b = field['settings']) === null || _b === void 0 ? void 0 : _b.leading) > 0) {
                     type = 'textarea';
+                    multiline = true;
                 }
                 switch (type) {
                     case 'textbox':
-                        return (h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                        return (h("verdocs-field-textbox", { id: id, fieldname: name, templateid: templateId, editable: editable, multiline: multiline, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
                     case 'textarea':
                         return (h("verdocs-field-textarea", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
                     case 'date':
@@ -144,11 +145,13 @@ const VerdocsTemplateDocumentPage = /*@__PURE__*/ proxyCustomElement(class Verdo
                         return (h("verdocs-field-signature", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, this.xScale, this.yScale, 0) }));
                     case 'timestamp':
                         return (h("verdocs-field-timestamp", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale, 0) }));
+                    case 'checkbox':
                     case 'checkbox_group':
                         return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
                             const id = getFieldOptionId(field, checkboxIndex);
                             return (h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, option: checkboxIndex, style: getControlStyles(field, xScale, yScale, checkboxIndex) }));
                         });
+                    case 'radio':
                     case 'radio_button_group':
                         return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
                             const id = getFieldOptionId(field, checkboxIndex);