@verdocs/web-sdk 4.2.43 → 4.2.48

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

@@ -16,14 +16,12 @@ verdocs-field-textbox {
   height: 15px;
   display: block;
   font-size: 11px;
+  position: relative;
   letter-spacing: -0.2px;
   background-color: transparent;
   transform-origin: bottom left;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
-verdocs-field-textbox.disabled {
-  opacity: 0.5;
-}
 verdocs-field-textbox input {
   cursor: inherit;
   width: 100%;
@@ -42,6 +40,43 @@ verdocs-field-textbox input {
 verdocs-field-textbox input.hide {
   display: none;
 }
+verdocs-field-textbox.disabled input {
+  opacity: 0.5;
+}
+verdocs-field-textbox textarea {
+  cursor: inherit;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 0 3px;
+  font-size: 11px;
+  background: none;
+  font-weight: 500;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+}
+verdocs-field-textbox textarea.hide {
+  display: none;
+}
+verdocs-field-textbox.disabled textarea {
+  opacity: 0.5;
+}
+verdocs-field-textbox label {
+  top: -14px;
+  left: -1px;
+  height: 14px;
+  color: white;
+  padding: 0 4px;
+  font-size: 9px;
+  line-height: 13px;
+  position: absolute;
+  background: #4a4a99;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
 verdocs-field-textbox.required {
   border: 1px solid rgb(204, 0, 0);
 }

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.
@@ -47,9 +46,11 @@ export class VerdocsFieldTextbox {
     }
     componentDidRender() {
         interact.dynamicDrop(true);
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
+        let { multiline = false } = field || {};
         if (this.editable) {
             interact(this.el).resizable({
-                edges: { top: false, bottom: false, left: true, right: true },
+                edges: { top: multiline, bottom: multiline, left: true, right: true },
                 listeners: {
                     start: this.handleResizeStart.bind(this),
                     move: this.handleResize.bind(this),
@@ -79,15 +80,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));
@@ -95,7 +94,7 @@ export class VerdocsFieldTextbox {
     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);
-        let { required = false, role_name = '', placeholder = '', width = 150, height = 15, default: value = '' } = field || {};
+        let { required = false, role_name = '', placeholder = '', label = '', width = 150, default: value = '', multiline = false } = field || {};
         // TODO: Consolidate value/defaultValue handling between template and envelope fields
         if (field.value) {
             value = field.value;
@@ -106,8 +105,7 @@ export class VerdocsFieldTextbox {
         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) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), multiline ? (h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value)) : (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;
             } }), 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: () => {
@@ -355,14 +353,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.css

@@ -12,7 +12,6 @@
 verdocs-field-timestamp {
   width: 160px;
   height: 15px;
-  opacity: 0.5;
   display: block;
   font-size: 9px;
   position: relative;
@@ -26,6 +25,7 @@ verdocs-field-timestamp.done {
 verdocs-field-timestamp input {
   position: absolute;
   cursor: inherit;
+  opacity: 0.5;
   width: 100%;
   height: 100%;
   font-size: 9px;
@@ -39,6 +39,19 @@ verdocs-field-timestamp input {
 verdocs-field-timestamp input.hide {
   display: none;
 }
+verdocs-field-timestamp label {
+  top: -14px;
+  left: -1px;
+  height: 14px;
+  color: white;
+  padding: 0 4px;
+  font-size: 9px;
+  line-height: 13px;
+  position: absolute;
+  background: #4a4a99;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
 verdocs-field-timestamp.required {
   border: 1px solid rgb(204, 0, 0);
 }

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,14 +46,13 @@ 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 = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         const formatted = format(new Date(value || new Date().toISOString()), FORMAT_TIMESTAMP);
         if (done) {
             return h(Host, { class: { done } }, formatted);
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("input", { type: "text", placeholder: placeholder, value: formatted, disabled: true, ref: el => (this.el = el) }), 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) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("label", null, label), h("input", { type: "text", placeholder: placeholder, value: formatted, disabled: true, ref: el => (this.el = el) }), 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: () => {
@@ -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", { 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.css

@@ -137,6 +137,25 @@ verdocs-template-field-properties .row-header .add-button svg {
   width: 32px;
   height: 32px;
 }
+verdocs-template-field-properties .options-header {
+  gap: 10px;
+  margin: 0 0 5px 0;
+  display: flex;
+  color: #ffffff;
+  font-size: 14px;
+  padding: 5px 8px;
+  font-weight: 700;
+  text-align: center;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #333333;
+}
+verdocs-template-field-properties .options-header-label {
+  display: flex;
+  flex: 1;
+  font-weight: 700;
+  font-size: 14px;
+}
 verdocs-template-field-properties .option-row {
   margin: 15px 0;
 }
@@ -163,7 +182,7 @@ verdocs-template-field-properties .option-row .remove-button svg {
 }
 verdocs-template-field-properties .options {
   background: #f3f3f3;
-  padding: 0 0 10px 0;
+  padding: 0 0 1px 0;
 }
 verdocs-template-field-properties .options .row-header,
 verdocs-template-field-properties .options .option-row {

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 { DEFAULT_FIELD_HEIGHTS, DEFAULT_FIELD_WIDTHS, deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
 import { getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateStore } from "../../../utils/TemplateStore";
@@ -25,12 +25,12 @@ export class VerdocsTemplateFieldProperties {
         this.type = 'textbox';
         this.name = '';
         this.required = false;
+        this.multiline = false;
         this.roleName = '';
         this.group = '';
         this.fieldType = '';
         this.options = [];
         this.placeholder = '';
-        this.multiline = false;
         this.defaultValue = '';
         this.showingHelp = false;
     }
@@ -72,16 +72,17 @@ export class VerdocsTemplateFieldProperties {
         this.type = field.type;
         this.name = field.name;
         this.label = field.label;
-        this.group = field.name;
+        this.group = field.group;
         this.roleName = field.role_name;
         this.required = field.required;
         this.fieldType = field.type;
-        this.options = field.options;
+        this.options = field.options || [];
         this.placeholder = field.placeholder || '';
         this.defaultValue = field.default || '';
         this.multiline = field.multiline || false;
         this.dirty = false;
         this.loading = false;
+        this.cleanupOptions();
     }
     handleCancel(e) {
         var _a, _b;
@@ -103,13 +104,19 @@ export class VerdocsTemplateFieldProperties {
             default: this.defaultValue,
             options: this.options,
         };
+        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldName);
+        if (!newProperties.multiline && field.multiline) {
+            console.log('Switching off multiline');
+            newProperties.width = DEFAULT_FIELD_WIDTHS.textbox;
+            newProperties.height = DEFAULT_FIELD_HEIGHTS.textbox;
+        }
         console.log('[FIELD PROPERTIES] Will update', this.fieldName, newProperties);
         updateField(this.endpoint, this.templateId, this.fieldName, newProperties)
             .then(updated => {
             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();
         })
@@ -130,6 +137,12 @@ export class VerdocsTemplateFieldProperties {
             console.log('[FIELD PROPERTIES] Deletion error', e);
         });
     }
+    cleanupOptions() {
+        this.options = [...this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.value || '').trim() !== '')];
+        if (!this.options.find(opt => !opt.id && !opt.value)) {
+            this.options = [...this.options, { id: '', value: '' }];
+        }
+    }
     render() {
         var _a;
         // console.log('Rendering field properties', this.fieldStore.get(this.fieldName));
@@ -159,6 +172,12 @@ export class VerdocsTemplateFieldProperties {
             } })), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-value", label: "Default Value", value: this.defaultValue, autocomplete: "off", placeholder: "Pre-filled value...", onInput: (e) => {
                 this.defaultValue = e.target.value;
                 this.dirty = true;
+            } }))), this.type === 'radio' && (h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-label", label: "Group", value: this.group, autocomplete: "off", helpText: "Enable exclusive selections. Only one option within the same group may be selected at a time.", placeholder: "Group...", onInput: (e) => {
+                this.group = (e.target.value || '')
+                    .trim()
+                    .toLowerCase()
+                    .replace(/[^a-z0-9]/g, '');
+                this.dirty = true;
             } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
             // helpText="Placeholder to display if the field is empty."
             placeholder: "Placeholder...", onInput: (e) => {
@@ -167,29 +186,22 @@ export class VerdocsTemplateFieldProperties {
             } }))), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
                 this.required = e.target.checked;
                 this.dirty = true;
-            } })), ['dropdown'].includes(this.type) && (h("div", { class: "options" }, h("div", { class: "row", style: {
-                marginTop: '15px',
-                marginBottom: '15px',
-                textAlign: 'center',
-                fontWeight: '700',
-                fontSize: '14px',
-                justifyContent: 'center',
-                backgroundColor: '#333333',
-                padding: '5px 8px',
-                color: '#ffffff',
-            } }, "Options"), h("div", { class: "row-header" }, h("h6", null, "ID"), h("h6", null, "Label"), h("div", { style: { width: '34px' } })), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
+            } })), this.type === 'textbox' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-multline", class: "input-label" }, "Multi-Line"), h("verdocs-checkbox", { id: "verdocs-is-multiline", name: "is-multiline", checked: this.multiline, value: "on", onInput: (e) => {
+                this.multiline = e.target.checked;
+                this.dirty = true;
+            } }))), this.type === 'dropdown' && (h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Options"))), this.type === 'dropdown' && (h("div", { class: "options" }, h("div", { class: "options-header" }, h("div", { class: "options-header-label" }, "ID"), h("dev", { class: "options-header-label" }, "Label")), this.options.map((option, index) => (h("div", { class: "row option-row", key: index }, h("verdocs-text-input", { id: `verdocs-option-id-${option.id}`, value: option.id, placeholder: "Unique ID", onInput: (e) => {
                 this.options[index].id = e.target.value;
                 this.dirty = true;
+                this.cleanupOptions();
             } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
                 this.options[index].value = e.target.value;
                 this.dirty = true;
+                this.cleanupOptions();
             } }), h("button", { innerHTML: TrashIcon, class: "remove-button", onClick: () => {
                 this.options = this.options.filter(opt => opt.id !== option.id);
                 this.dirty = true;
-            } })))), h("div", { class: "row-header" }, h("button", { class: "add-option-button", onClick: () => {
-                this.options = [...this.options, { id: `option-${this.options.length + 1}`, value: `Option ${this.options.length + 1}` }];
-                this.dirty = true;
-            } }, "Add Option")))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+                this.cleanupOptions();
+            } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
     }
     static get is() { return "verdocs-template-field-properties"; }
     static get originalStyleUrls() {
@@ -290,12 +302,12 @@ export class VerdocsTemplateFieldProperties {
             "type": {},
             "name": {},
             "required": {},
+            "multiline": {},
             "roleName": {},
             "group": {},
             "fieldType": {},
             "options": {},
             "placeholder": {},
-            "multiline": {},
             "defaultValue": {},
             "showingHelp": {}
         };
@@ -342,14 +354,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,10 +5,9 @@ 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>';
 const iconRadio = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" 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"/></svg>';
 const iconDatepicker = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path fill="#ffffff" d="M7.6 13.925q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375Zm4.4 0q-.55 0-.925-.375t-.375-.925q0-.55.375-.937.375-.388.925-.388t.925.388q.375.387.375.937t-.375.925q-.375.375-.925.375ZM5.3 22.85q-1.325 0-2.238-.912-.912-.913-.912-2.238V6.3q0-1.325.912-2.238.913-.912 2.238-.912H6v-2h2.575v2h6.85v-2H18v2h.7q1.325 0 2.238.912.912.913.912 2.238v13.4q0 1.325-.912 2.238-.913.912-2.238.912Zm0-3.15h13.4V10H5.3v9.7ZM5.3 8h13.4V6.3H5.3Zm0 0V6.3 8Z"/></svg>';
@@ -23,9 +22,8 @@ const menuOptions = [
     { id: 'initial', tooltip: 'Initials', icon: iconInitial, class: 'initial' },
     { 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 +143,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 +246,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,