@verdocs/web-sdk 4.2.43 → 4.2.47

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

@@ -41,7 +41,7 @@ export class VerdocsFieldPayment {
         // Load fields
         // Get role names
         if (this.recipients && this.recipients.length > 0) {
-            const preparer = this.recipients.find(r => r.type === 'preparer');
+            const preparer = this.recipients.find((r) => r.type === 'preparer');
             console.log('Found preparer', preparer);
             if (preparer) {
                 this.preparedMessage = `Prepared by ${preparer['full_name']}`;

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

@@ -2,7 +2,6 @@ import { getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 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>`;
@@ -15,7 +14,6 @@ export class VerdocsFieldRadio {
         this.roleStore = null;
         this.templateid = '';
         this.fieldname = '';
-        this.option = 0;
         this.disabled = false;
         this.done = false;
         this.editable = false;
@@ -42,12 +40,13 @@ export class VerdocsFieldRadio {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        const { templateid, fieldname = '', option, editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { templateid, fieldname = '', 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] || {};
+        // TODO
+        const { id = 'option1', selected = false } = {};
+        // 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 })));
@@ -114,24 +113,6 @@ export class VerdocsFieldRadio {
                 "reflect": true,
                 "defaultValue": "''"
             },
-            "option": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The index of the settings option this particular checkbox is for"
-                },
-                "attribute": "option",
-                "reflect": true,
-                "defaultValue": "0"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -277,14 +258,9 @@ export class VerdocsFieldRadio {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

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

@@ -2,7 +2,6 @@ import { getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
  * Displays a signature field. If a signature already exists, it will be displayed and the field
@@ -52,7 +51,7 @@ export class VerdocsFieldSignature {
         this.dialog.setAttribute('name', this.name);
         // this.dialog.setAttribute('roleindex', this.roleindex);
         this.dialog.addEventListener('exit', () => this.hideDialog());
-        this.dialog.addEventListener('next', e => this.handleAdopt(e));
+        this.dialog.addEventListener('next', (e) => this.handleAdopt(e));
         document.body.append(this.dialog);
         this.focused = true;
     }
@@ -75,8 +74,7 @@ export class VerdocsFieldSignature {
     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 = '' } = field || {};
-        const { result: value = '' } = getFieldSettings(field);
+        const { required = false, role_name = '', value = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Signature" }));
@@ -338,14 +336,9 @@ export class VerdocsFieldSignature {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

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

@@ -4,7 +4,6 @@ import { updateField, getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
  * Display a multi-line text input field. Reminder: the "position" of the field is specified
@@ -81,16 +80,15 @@ export class VerdocsFieldTextarea {
         if (!field) {
             return h(Fragment, null);
         }
-        const newSettings = { ...getFieldSettings(field) };
         const [translateX, translateY] = e.target.style.transform.split('(')[1].split(')')[0].split(',').map(parseFloat);
-        newSettings.width = Math.round(parseFloat(e.target.style.width) / this.xscale);
-        newSettings.height = Math.round(parseFloat(e.target.style.height) / this.yscale);
-        newSettings.x = Math.round(newSettings.x + translateX / this.xscale);
-        newSettings.y = Math.round(newSettings.y - translateY / this.yscale);
-        updateField(this.endpoint, this.templateid, this.fieldname, { settings: newSettings })
+        const width = Math.round(parseFloat(e.target.style.width) / this.xscale);
+        const height = Math.round(parseFloat(e.target.style.height) / this.yscale);
+        const x = Math.round(field.x + translateX / this.xscale);
+        const y = Math.round(field.y - translateY / this.yscale);
+        updateField(this.endpoint, this.templateid, this.fieldname, { x, y, width, height })
             .then(field => {
             var _a;
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname, settings: newSettings, field });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldname, field });
             Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
         })
             .catch(e => console.log('Field update failed', e));
@@ -98,8 +96,7 @@ export class VerdocsFieldTextarea {
     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 = '' } = getFieldSettings(field);
+        const { required = false, role_name = '', placeholder = '', value = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
@@ -334,14 +331,9 @@ export class VerdocsFieldTextarea {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

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

@@ -3,7 +3,6 @@ import { getRGBA, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
  * Display a simple 1-line text input field.
@@ -79,15 +78,13 @@ export class VerdocsFieldTextbox {
     }
     handleResizeEnd(e) {
         const { fieldname = '' } = this;
-        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const newSettings = { ...getFieldSettings(field) };
-        newSettings.width = Math.round(parseFloat(e.target.style.width));
-        newSettings.height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { settings: newSettings })
+        const width = Math.round(parseFloat(e.target.style.width));
+        const height = Math.round(parseFloat(e.target.style.height));
+        updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
             .then(field => {
             var _a;
             updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, settings: newSettings, field });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname, field });
             Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
         })
             .catch(e => console.log('Field update failed', e));
@@ -355,14 +352,9 @@ export class VerdocsFieldTextbox {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

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

@@ -3,7 +3,6 @@ import { getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getFieldSettings } from "../../../utils/utils";
 import { FORMAT_TIMESTAMP } from "../../../utils/Types";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
@@ -47,8 +46,7 @@ export class VerdocsFieldTimestamp {
     render() {
         const { templateid, fieldname = '', 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 = '', placeholder = '' } = field || {};
-        const { value = '' } = getFieldSettings(field);
+        const { required = false, role_name = '', placeholder = '', value = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
         if (done) {
@@ -261,14 +259,9 @@ export class VerdocsFieldTimestamp {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

package/dist/collection/components/templates/verdocs-template-card/verdocs-template-card.js

@@ -12,7 +12,7 @@ export class VerdocsTemplateCard {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '92db1527b29db1accce1236ad170c1d071bd9af9' }, h("span", { key: '6df84f4e3f47f2a3bde4de1aaeb55cfdaaf24cec', class: "name" }, this.template.name), h("span", { key: '6be1cd61a1496fa579f25ff06fcd5295149aada1', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: '8f95b065445cf18ec71b2976c5c75d7335857f1a' }), h("div", { key: 'cce4e78b58f924de6b68bcf947af20dbed74ae15', class: "controls" }, h("div", { key: '124cf87ac1ab5f25d505004ebba55c0ad00d3b34', class: "control" }, h("span", { key: 'b39885d89f97c7f29077f5a0e8e943c2fd74e8a0', class: "icon", innerHTML: StarIcon }), h("span", { key: '7fa8e32525ed221d9907e658ca6f982fed16dba6', class: "value" }, this.template.star_counter)), h("div", { key: '37fb74c5e9302e8c310e2052b725183bac587c3d', class: "control secondary" }, h("span", { key: 'bef0ebc42c5f9062bf67d86a097dd0d4a8e03e11', class: "icon", innerHTML: PagesIcon }), h("span", { key: '3763e7ec4ac4e73ce712c460101223d6f8663b2a', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: 'e4f9d35db361036a46297e82ecf1528058e214bc', class: "control secondary" }, h("span", { key: '985da1d76dfeecb4e57e440fbf788c18453696a1', class: "icon", innerHTML: EmailIcon }), h("span", { key: 'f098866929e19bf47e30a660aba05a3e508561ed', class: "value" }, this.template.counter)), h("span", { key: 'c742e5c6e1087a9b0f1a8b037476759274838c42', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (h(Host, { key: '11be2283e6610b875b835e2d736d19ceba3b9358' }, h("span", { key: 'a41398c67dde9d240c13f73cc836917f23960ec3', class: "name" }, this.template.name), h("span", { key: '34b1cb0d87aae893f8e185d165023afdc62c5809', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: 'c4f2a830092009e425f12b3b9aecbfe3fa301486' }), h("div", { key: '5ed90379ab7ce3c102a1aba5a29a4e2cc574481e', class: "controls" }, h("div", { key: '3f2d20d7b8d34e6cfb999497b1f7041c2c543aa7', class: "control" }, h("span", { key: '6c3384e755b454f5faac3fce12855924e46be22d', class: "icon", innerHTML: StarIcon }), h("span", { key: '16d1cc0346dfc181d4233f7536ad9277fcca926e', class: "value" }, this.template.star_counter)), h("div", { key: 'c21690a71bc4c3f4c61b0baef7615afd74fe63e5', class: "control secondary" }, h("span", { key: '96871df90393b8be8323781f6e5f4f7ff09461ee', class: "icon", innerHTML: PagesIcon }), h("span", { key: 'f8eacea9e45b1324549b27554274c4cfe1d9fcbf', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: 'a1eac1e81ef20bca46effe92ada3814e1c67d1af', class: "control secondary" }, h("span", { key: '5878dc1bc0131b8a601c5927504e3699e2fae2a9', class: "icon", innerHTML: EmailIcon }), h("span", { key: 'ecc8da9b6565faf39b0627daa45f738ab15c42f0', class: "value" }, this.template.counter)), h("span", { key: '9c3351987febfa1df0e338c6e63d99d562b2e7da', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
     static get is() { return "verdocs-template-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js

@@ -2,7 +2,8 @@
 import { getTemplateDocumentPageDisplayUri, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
-import { getControlStyles, getFieldId, getFieldOptionId, throttle } from "../../../utils/utils";
+import { getControlStyles, getFieldId } from "../../../utils/utils";
+import { throttle } from "../../../utils/utils";
 /**
  * Represents one document page. This is primarily a layout container used to coordinate positions of
  * page-related layers such as the page itself, signature fields, etc. It is not intended to be used
@@ -93,7 +94,7 @@ export class VerdocsTemplateDocumentPage {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: '6fabe54a0840385228e13a0e61f7748d41fbcf17', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+        return (h(Host, { key: 'cf0967a619bcf0e5c966236b43dcfbf4ddd5c2c9', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
             this.fieldStore
                 .get('fields')
                 .filter(field => field && field.page === this.pageNumber)
@@ -108,33 +109,25 @@ export class VerdocsTemplateDocumentPage {
                 }
                 switch (type) {
                     case 'textbox':
-                        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) }));
+                        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) }));
                     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) }));
+                        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) }));
                     case 'date':
-                        return (h("verdocs-field-date", { 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-date", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                     case 'attachment':
-                        return (h("verdocs-field-attachment", { 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-attachment", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                     case 'dropdown':
-                        return (h("verdocs-field-dropdown", { 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-dropdown", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                     case 'initial':
-                        return (h("verdocs-field-initial", { 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-initial", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                     case 'signature':
-                        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) }));
+                        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) }));
                     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) }));
+                        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) }));
                     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) }));
-                        });
+                        return (h("verdocs-field-checkbox", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                     case 'radio':
-                    case 'radio_button_group':
-                        return (field.settings || field.setting || {}).options.map((_, checkboxIndex) => {
-                            const id = getFieldOptionId(field, checkboxIndex);
-                            return (h("verdocs-field-radio-button", { 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) }));
-                        });
+                        return (h("verdocs-field-radio-button", { id: id, fieldname: name, templateid: templateId, editable: editable, disabled: disabled, done: done, xscale: xScale, yscale: yScale, pagenumber: pageNumber, style: getControlStyles(field, xScale, yScale) }));
                     default:
                         return h(Fragment, null, name);
                 }

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -1,5 +1,5 @@
-import { deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host } from "@stencil/core";
+import { deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
 import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateStore } from "../../../utils/TemplateStore";
@@ -109,7 +109,7 @@ export class VerdocsTemplateFieldProperties {
             var _a, _b, _c;
             updateStoreField(this.fieldStore, this.fieldName, updated);
             this.resetForm();
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, settings: newProperties, field: updated });
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: this.fieldName, field: updated });
             (_b = this.close) === null || _b === void 0 ? void 0 : _b.emit();
             (_c = document.getElementById('verdocs-template-field-properties')) === null || _c === void 0 ? void 0 : _c.remove();
         })
@@ -342,14 +342,9 @@ export class VerdocsTemplateFieldProperties {
                     "text": "Event fired when the field's settings are changed."
                 },
                 "complexType": {
-                    "original": "{fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField}",
-                    "resolved": "{ fieldName: string; settings: ITemplateFieldSetting; field: ITemplateField; }",
+                    "original": "{fieldName: string; field: ITemplateField}",
+                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                     "references": {
-                        "ITemplateFieldSetting": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::ITemplateFieldSetting"
-                        },
                         "ITemplateField": {
                             "location": "import",
                             "path": "@verdocs/js-sdk",

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.css

@@ -105,7 +105,7 @@ verdocs-template-fields #verdocs-template-fields-toolbar verdocs-select-input {
 verdocs-template-fields.placing-attachment {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
 }
-verdocs-template-fields.placing-checkbox_group {
+verdocs-template-fields.placing-checkbox {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
 }
 verdocs-template-fields.placing-date {
@@ -120,7 +120,7 @@ verdocs-template-fields.placing-initial {
 verdocs-template-fields.placing-payment {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z'/%3E%3C/svg%3E") 16 16, pointer;
 }
-verdocs-template-fields.placing-radio_button_group {
+verdocs-template-fields.placing-radio {
   cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 17q2.075 0 3.538-1.463Q17 14.075 17 12t-1.462-3.538Q14.075 7 12 7 9.925 7 8.463 8.462 7 9.925 7 12q0 2.075 1.463 3.537Q9.925 17 12 17Zm0 5.85q-2.275 0-4.25-.85t-3.438-2.312Q2.85 18.225 2 16.25q-.85-1.975-.85-4.25T2 7.75q.85-1.975 2.312-3.438Q5.775 2.85 7.75 2q1.975-.85 4.25-.85t4.25.85q1.975.85 3.438 2.312Q21.15 5.775 22 7.75q.85 1.975.85 4.25T22 16.25q-.85 1.975-2.312 3.438Q18.225 21.15 16.25 22q-1.975.85-4.25.85Zm0-3.15q3.25 0 5.475-2.225Q19.7 15.25 19.7 12q0-3.25-2.225-5.475Q15.25 4.3 12 4.3q-3.25 0-5.475 2.225Q4.3 8.75 4.3 12q0 3.25 2.225 5.475Q8.75 19.7 12 19.7Zm0-7.7Z'/%3E%3C/svg%3E") 16 16, pointer;
 }
 verdocs-template-fields.placing-signature {

package/dist/collection/components/templates/verdocs-template-fields/verdocs-template-fields.js

@@ -5,8 +5,8 @@ import { defaultHeight, defaultWidth, getFieldId, removeCssTransform, updateCssT
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
 import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateStore } from "../../../utils/TemplateStore";
-import { SDKError } from "../../../utils/errors";
 import { VerdocsToast } from "../../../utils/Toast";
+import { SDKError } from "../../../utils/errors";
 const iconTextbox = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.425 16.15V13h11.15v3.15Zm0-5.15V7.85h17.15V11Z"/></svg>';
 const iconTextarea = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M3.225 20.725v-3.15h11.55v3.15Zm0-4.775V12.8h17.55v3.15Zm0-4.75V8.05h17.55v3.15Zm0-4.775v-3.15h17.55v3.15Z"/></svg>';
 const iconCheck = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="m10.55 16.55 7.275-7.275L16.05 7.5l-5.5 5.45-2.675-2.65L6.1 12.075Zm-5.375 4.925q-1.125 0-1.887-.763-.763-.762-.763-1.887V5.175q0-1.125.763-1.888.762-.762 1.887-.762h13.65q1.125 0 1.888.762.762.763.762 1.888v13.65q0 1.125-.762 1.887-.763.763-1.888.763Zm0-2.65h13.65V5.175H5.175v13.65Zm0-13.65v13.65-13.65Z"/></svg>';
@@ -24,8 +24,8 @@ const menuOptions = [
     { id: 'sep1', tooltip: '', icon: separator, class: 'separator' },
     { id: 'textbox', tooltip: 'Text Box', icon: iconTextbox, class: 'textbox' },
     { id: 'textarea', tooltip: 'Text Area', icon: iconTextarea, class: 'textarea' },
-    { id: 'checkbox_group', tooltip: 'Check Box', icon: iconCheck, class: 'checkbox' },
-    { id: 'radio_button_group', tooltip: 'Radio Button', icon: iconRadio, class: 'radio' },
+    { id: 'checkbox', tooltip: 'Check Box', icon: iconCheck, class: 'checkbox' },
+    { id: 'radio', tooltip: 'Radio Button', icon: iconRadio, class: 'radio' },
     { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown, class: 'dropdown' },
     { id: 'sep2', tooltip: '', icon: separator, class: 'separator' },
     { id: 'date', tooltip: 'Date', icon: iconDatepicker, class: 'date' },
@@ -145,28 +145,12 @@ export class VerdocsTemplateFields {
             .get('fields')
             .filter(field => field && field.page === pageInfo.pageNumber)
             .forEach(field => {
-            switch (field.type) {
-                // case 'checkbox_group':
-                // case 'radio_button_group':
-                //   (field.settings || {}).options.map((_, index) => {
-                //     const id = getFieldOptionId(field, index);
-                //     const el = document.getElementById(id);
-                //     if (el) {
-                //       el.setAttribute('fieldname', field.name);
-                //       el.setAttribute('pagenumber', String(field.page));
-                //       this.makeDraggable(el);
-                //     }
-                //   });
-                //   break;
-                default:
-                    const id = getFieldId(field);
-                    const el = document.getElementById(id);
-                    if (el) {
-                        el.setAttribute('fieldname', field.name);
-                        el.setAttribute('pagenumber', String(field.page));
-                        this.makeDraggable(el);
-                    }
-                    break;
+            const id = getFieldId(field);
+            const el = document.getElementById(id);
+            if (el) {
+                el.setAttribute('fieldname', field.name);
+                el.setAttribute('pagenumber', String(field.page));
+                this.makeDraggable(el);
             }
         });
     }
@@ -264,7 +248,7 @@ export class VerdocsTemplateFields {
                 template_id: this.templateId,
                 document_id: cachedPage.documentId,
                 type: this.placing,
-                required: this.placing === 'radio' ? false : true,
+                required: this.placing !== 'radio',
                 page: pageNumber,
                 validator: null,
                 label: null,

package/dist/collection/components/templates/verdocs-template-role-properties/verdocs-template-role-properties.js

@@ -118,31 +118,31 @@ export class VerdocsTemplateRoleProperties {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (h(Host, { key: 'c2728e2fb47306d99d3eebaaa38130322d37ad64' }, h("div", { key: 'a329fa189219f99c747e915ee2f0a41de978474f', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: 'a0325d8949c173d73ba2a48af5924d015e746266', class: "dialog" }, h("form", { key: '378e17dc270ae28779557793f6669143c86a41a3', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: '20f8de0856c8e5c847b7e1852edc437a8c6427fb', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (h(Host, { key: '3edd035c5d69b95c4cad1232b444513f1dbee44d' }, h("div", { key: '19aa33d7ba14d1034cb69d6cfeeb6506cf53a8e5', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '2012d47d29d0bb7b5efc2c733792eb0fd0e51aed', class: "dialog" }, h("form", { key: 'bdbdd0be3c27ccf69c9303ae42585dd2c3e9fbc9', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: 'dee4b0337c8f1d065118b033ae4dfffce2251802', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
                 ? 'This role has fields assigned and can no longer be renamed.'
                 : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: '35310c43c72be59031d74995d5e4e08fd74b34bd', class: "row" }, h("div", { key: '4b47e8595ad1119d4027049b56acd43443a4b09a', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '97f18bfb8052d6f0690bf2d570a42a0a604556b9', value: this.type, options: [
+            } }), h("div", { key: 'efdf8894739903c3f5fe8fb3eb039a5457cdf0bc', class: "row" }, h("div", { key: 'd2c85a2ca439758268704ced18dd7dbe76ffec69', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '343c54e4cde6b4cf540bb17a5190d1527e9528fc', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-help-icon", { key: '3f4059c1a1232aa08449e4518ccd9473066430df', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: 'df9c1439da6894608dad4ef81dddf21e2591115f', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
+            } }), h("verdocs-help-icon", { key: '6cc61871b2f417f0bf0d226c42e8fc3645841c5c', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: 'e151052eb861e97d4609bc3b4d41edc17c235822', id: "verdocs-recipient-email", label: "Full Name", value: this.full_name, autocomplete: "off", helpText: "The recipient's full name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Full Name...", onInput: (e) => {
                 this.full_name = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: 'af0ac9644670cb4b3e5607eb75e6c0aa9746ed76', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: '5e7c0e612d73cfb3510ccfbcaa9af6e3ebe3c383', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: 'f7055746726c2d199beac4206847bc1534de5601', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: 'c3b395d1207358018e1b3168923b156c535f64e5', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: '12903a2f12f8f750cecaf0332a69099f67b4d530', class: "row" }, h("div", { key: '9959973a48e154155cc6b5892ae81a5105d62d33', class: "input-label" }, "May Delegate:"), h("div", { key: '0dd8af27a2fd4cf6c8a641a39ea3332887b1f71a', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '8a145a05207fc1cae42d5c3e4596c2d673ecc097', checked: this.delegator, onInput: (e) => {
+            } }), h("div", { key: '9be759a4b006161944a3c64f88e0ec485442a498', class: "row" }, h("div", { key: '54736c623644013ec6f2920231c449f77f06b339', class: "input-label" }, "May Delegate:"), h("div", { key: '7a29cfa733029fb261399b675cde3bf757400810', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '35730144cecf76fd4d26737cac98fbceee559f8e', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), h("verdocs-help-icon", { key: 'd725f8446967e2c145e0e5ecad8416ee7e368bc8', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: 'eae241c53cc8213d5c14bb213b41923620e17be3', class: "buttons" }, h("button", { key: '5eb5792ff0f79aab12bcfbb20ffdf58d431f4103', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'bca3f871c37e1a346d98620ee0fd1dd0dfce9917', style: { flex: '1' } }), h("verdocs-button", { key: 'b40fb1ff70cb3cce19b793f940fc0038d12490ea', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '51270815757b0fd6803d527ac3388f1e2af16b25', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), h("verdocs-help-icon", { key: 'fb8d8aa0d555b6fa0a747dbbcf38b0078622e864', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '4323af3ee35e76d3774c58b0831b989a815825eb', class: "buttons" }, h("button", { key: '5efaefcae1c438a70186d752c336790e5b3ca448', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: 'c2db70468bec1d73264ee5da8d83b9d0ee453bb6', style: { flex: '1' } }), h("verdocs-button", { key: '826e2694e1ec1f7a24b5f3174d0e1da079b0b10b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '5bc64b65627615fbe543c42a619a98be9cb85ac7', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
     static get is() { return "verdocs-template-role-properties"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.css

@@ -43,6 +43,7 @@ verdocs-template-roles > form .row {
   display: flex;
   column-gap: 0;
   min-height: 35px;
+  margin-top: 0;
   margin-left: 40px;
   position: relative;
   flex-direction: row;

package/dist/collection/components/templates/verdocs-template-sender/verdocs-template-sender.js

@@ -61,7 +61,7 @@ export class VerdocsTemplateSender {
         });
     }
     render() {
-        return (h(Host, { key: 'f8d8cca0bfceaf4770487a2013d8b4719236ddf4' }, h("div", { key: '2f3adaefa9ee3dcbac271ee02d76fa46bbe58e10', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '659f51292068e189d9c995db643fae5c2acb15b3', class: "dialog" }, h("div", { key: '3015a1be71fe71983fce44357433b5e2186c4946', class: "options" }, h("div", { key: 'ce818b1d25630a8f487fbaff0c5db38119a6f824', class: "option" }, h("verdocs-radio-button", { key: '8a4d98f6553248a88a024c1d024d3a4145a202ed', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: 'e2924ad4589dfcdca2ad342852f517f919e99914', class: "description" }, h("div", { key: '6bf123474dc857917dd84c971bb3e634eecc8868', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '53129fa609dcb99cf6f1ddc76867c09a90359973', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '4b566084de0d35ade13b0d82354ddfab42fb4be2', class: "option" }, h("verdocs-radio-button", { key: '3704512d6d38faf3f275fb039a1c97cf2464b0e2', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: '8dd4ffbcc1727fb28bec4e404dcc1a4a7cec9431', class: "description" }, h("div", { key: '2c4093c5ecff6192c6ec94ffa0a32ae516a4d13d', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: '73b99113cd11ac40ef3784fe23b523e54f2a8d5a', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: '528f64ff348386c14b0cea7d4983bccd664a0645', class: "option" }, h("verdocs-radio-button", { key: 'f1538d9c86ad7f2dc337a42f53f49f86faa3a469', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: 'ddd5129726d3b2a0786341c2df2f8012e783d643', class: "description" }, h("div", { key: '449c1a5eb124b7006f319f96ff617d6480cab3a9', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: '8d01e0fba4bfb8b5d12390b5c138b19d6362a055', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: '76f686a2976749ffa02be5b95d9d61ded315714c', class: "option" }, h("verdocs-radio-button", { key: '00c5b5d78a7c380665abc3157403f597cbcaabc9', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: '7eaf1cce0528f17359b19320ba0e10311ec34821', class: "description" }, h("div", { key: '4bd0b1b35504afa1c67566ac8cd589041958de41', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: 'cfe825b414ef5a0c4ddd33e3de621629cc92149e', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: 'f86771d023449f505a45f07b73e505a7c481bdf0', class: "option" }, h("verdocs-radio-button", { key: '039f5bb7b444f942fb609ad1ef5fda0d5f160083', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: 'b7ecd4a8e68ac17e9ba116a6f8f2dcf84ff92c56', class: "description" }, h("div", { key: 'ca006222ed947daf96a22425fe7dbc1dd809aef5', class: "name" }, "Me"), h("verdocs-help-icon", { key: 'fec5c4aeb7285eaa3a22d238208e2072b17a14b0', text: "Only I can use this template." })))), h("div", { key: '1344c8e35ee75f17f5a035ba93e770958b1fcba0', class: "buttons" }, h("verdocs-button", { key: '6d2e2796fd3464440662e8dd5dba2ae273aab02e', label: "Close", onClick: () => this.handleClose() }))))));
+        return (h(Host, { key: 'b75d6f485ee4892b06723565b636e99934686734' }, h("div", { key: '571f2e8c2929d4c1613b81140b8f6bb6b3fef77c', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '5f367024e582f014eeeb8034e4584bd3ac2ba376', class: "dialog" }, h("div", { key: 'e56f16c943a49f75540d765001fb28478dec78df', class: "options" }, h("div", { key: '4f30c70e38c2a4c7da5ed36d2837419a9b4382f5', class: "option" }, h("verdocs-radio-button", { key: '5df0f864a7686e294f4d263fa15aaca7d76f23a7', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '193f9bacb11df6ee7ea8fce20352e8120d0ec9a2', class: "description" }, h("div", { key: 'b364415369c8926ba915ffc3509e022253564b3f', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '9f49f7abc5f0f83d3fe06eede0189d7f1afdc57f', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '6f6a173447a264dc20b6fc42ce3431937f5a676f', class: "option" }, h("verdocs-radio-button", { key: 'ff8c0f0853bbc22917888e889322debdd6f43dcf', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: '294cd0ad0eefcd67312bde25f1e84b03d31a78ae', class: "description" }, h("div", { key: '1df07d5a0e436cb52e5aaab5df9e42737e979098', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: '804ba6375f4b5cb6e073455a090b15311fcb47d4', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: '7d95c56de1c94d1265ae1f34d9cae248b5b3677d', class: "option" }, h("verdocs-radio-button", { key: 'aede61f03827eb862be042c454c43e8adb162ab2', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: '3a6262cd830d04f9998c354a8de77672f846502e', class: "description" }, h("div", { key: '38e6ca2fde7d7e5eb1690335c94a30b07b8c2962', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: 'ccfb7459079de7bcdcd2bae2109ff6ba052a0ecd', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'd69133422e538a470c61e8a7bb1f36e43bb2cddd', class: "option" }, h("verdocs-radio-button", { key: '1b7cae03a6195c382476c855a6c7dcaa21c637aa', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: 'd1eb1bb2c1fb37e6662f4181745f803052d03d11', class: "description" }, h("div", { key: 'e9a3252ea21a19b9bef476ed1f50703e0abf791d', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: '999706b170134d8fd9ff8b92b7d9e5defb2f323b', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: '636e4f3c82d3ccc1059bc42bc3a0d2e6c1bb8963', class: "option" }, h("verdocs-radio-button", { key: '699a6a1d47b96c67095b7c5c2d183c14dab06543', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: 'afa65902411976df46efa7b7fd934b86f167d269', class: "description" }, h("div", { key: '928b69772bfb2ede80b88a90d76094d331987c94', class: "name" }, "Me"), h("verdocs-help-icon", { key: '8edfcdd374311e55e59e91b1158ae4159fc25fc2', text: "Only I can use this template." })))), h("div", { key: 'c89ffcba333565428c0a1a8de8a1c047af448d1a', class: "buttons" }, h("verdocs-button", { key: 'd46f0eec71c778e53ae811ef0f1fce5d4b3bb71c', label: "Close", onClick: () => this.handleClose() }))))));
     }
     static get is() { return "verdocs-template-sender"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-star/verdocs-template-star.js

@@ -38,7 +38,7 @@ export class VerdocsTemplateStar {
         });
     }
     render() {
-        return (h(Host, { key: '96d245ead9fb7891ab0f497b37b306b379a20abc' }, h("div", { key: '67ceace21c9957fbb27a05a527ef1b7847ac33a9', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '3a76f28df10bb79ffb87ca8a046a6ec4e04dc49b', class: "count" }, this.template.star_counter || '--')));
+        return (h(Host, { key: '42bac1aa4c8efb6c88d46f3fe17742a1137eff94' }, h("div", { key: '54e66f392f1b267088c9334e9651cff284488637', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '57cf9dfff4afab77f2e65c5df2f271874b88e625', class: "count" }, this.template.star_counter || '--')));
     }
     static get is() { return "verdocs-template-star"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-tags/verdocs-template-tags.js

@@ -8,7 +8,7 @@ export class VerdocsTemplateTags {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e754a66c64713a7b01c072b1becd919d9768ac66' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
+        return (h(Host, { key: '5ae49ef85eb1b1e92695101f551ca08e9fb1ea39' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
     }
     static get is() { return "verdocs-template-tags"; }
     static get originalStyleUrls() {