@verdocs/web-sdk 4.2.43 → 4.2.48

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

@@ -830,8 +830,18 @@ verdocs-field-date {
   background-color: transparent;
   transform-origin: bottom left;
 }
-verdocs-field-date.disabled {
-  opacity: 0.5;
+verdocs-field-date label {
+  top: -14px;
+  left: 0;
+  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-date input {
   position: absolute;
@@ -850,6 +860,9 @@ verdocs-field-date input {
 verdocs-field-date input.hide {
   display: none;
 }
+verdocs-field-date.disabled input {
+  opacity: 0.5;
+}
 verdocs-field-date.required input {
   border: 1px solid #cc0000;
 }

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

@@ -5,7 +5,6 @@ import localeEn from "air-datepicker/locale/en";
 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";
 import { FORMAT_DATE } from "../../../utils/Types";
 /**
@@ -69,14 +68,13 @@ export class VerdocsFieldDate {
     render() {
         const { templateid, fieldname = '', containerId = '', 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 = 'Date...' } = field || {};
-        const { result: value = '' } = getFieldSettings(field);
+        const { required = false, role_name = '', placeholder = 'Date...', value = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';
         if (this.done) {
             return h(Host, { class: { done } }, formattedValue);
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: containerId, disabled: disabled, placeholder: placeholder, ref: el => (this.el = 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), h("input", { name: fieldname, class: "input-el", type: "text", value: formattedValue, id: containerId, disabled: disabled, placeholder: placeholder, ref: el => (this.el = 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-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -321,14 +319,9 @@ export class VerdocsFieldDate {
                     "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-dropdown/verdocs-field-dropdown.css

@@ -19,8 +19,18 @@ verdocs-field-dropdown {
   background-color: transparent;
   transform-origin: bottom left;
 }
-verdocs-field-dropdown.disabled {
-  opacity: 0.5;
+verdocs-field-dropdown label {
+  top: -14px;
+  left: 0;
+  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-dropdown select {
   cursor: inherit;
@@ -46,6 +56,9 @@ verdocs-field-dropdown select:focus {
 verdocs-field-dropdown select.hide {
   display: none;
 }
+verdocs-field-dropdown.disabled select {
+  opacity: 0.5;
+}
 verdocs-field-dropdown.required select {
   border: 1px solid #cc0000;
 }

package/dist/collection/components/fields/verdocs-field-dropdown/verdocs-field-dropdown.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 dropdown field that allows the user to choose one of a list of options.
@@ -47,13 +46,12 @@ export class VerdocsFieldDropdown {
     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 = '' } = field || {};
-        const { result: value = '', options = [] } = getFieldSettings(field);
+        const { required = false, role_name = '', value = '', label = '', options = [] } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("select", { disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), options.map(option => (h("option", { value: option.id, selected: option.value === value }, option.value)))), 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("select", { disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (options || []).map(option => (h("option", { value: option.value, selected: option.value === value }, option.label)))), 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: () => {
@@ -275,14 +273,9 @@ export class VerdocsFieldDropdown {
                     "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-initial/verdocs-field-initial.css

@@ -15,13 +15,24 @@ verdocs-field-initial {
   height: 36px;
   display: block;
   font-size: 11px;
+  position: relative;
   letter-spacing: 0.3px;
   background-color: transparent;
   transform-origin: bottom left;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
-verdocs-field-initial.disabled {
-  opacity: 0.5;
+verdocs-field-initial 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-initial.done {
   border: none;
@@ -32,6 +43,9 @@ verdocs-field-initial img {
   max-width: 100%;
   max-height: 100%;
 }
+verdocs-field-initial.disabled img {
+  opacity: 0.5;
+}
 verdocs-field-initial button {
   cursor: inherit;
   box-sizing: border-box;

package/dist/collection/components/fields/verdocs-field-initial/verdocs-field-initial.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 an initial field. If an initial already exists, it will be displayed and the field
@@ -56,7 +55,7 @@ export class VerdocsFieldInitial {
         this.dialog.setAttribute('initials', this.initials);
         // 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,13 +74,12 @@ export class VerdocsFieldInitial {
     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 = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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), value ? h("img", { src: value, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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: () => {
@@ -353,14 +351,9 @@ export class VerdocsFieldInitial {
                     "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-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.css

@@ -9,7 +9,7 @@
     background-color: rgba(0, 0, 0, 0.35);
   }
 }
-verdocs-field-radio-button {
+verdocs-field-radio {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   width: 12px;
   height: 12px;
@@ -20,29 +20,55 @@ verdocs-field-radio-button {
   transform-origin: bottom left;
   border-radius: 100%;
 }
-verdocs-field-radio-button svg {
+verdocs-field-radio svg {
   margin-top: 4px;
 }
-verdocs-field-radio-button.disabled {
-  opacity: 0.5;
-}
-verdocs-field-radio-button.disabled.done {
+verdocs-field-radio.disabled.done {
   opacity: 1;
 }
-verdocs-field-radio-button input {
+verdocs-field-radio div.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-radio div.group {
+  top: 14px;
+  left: -1px;
+  height: 14px;
+  color: white;
+  padding: 0 4px;
+  font-size: 9px;
+  line-height: 13px;
+  position: absolute;
+  background: #bb0589;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+verdocs-field-radio input {
   cursor: inherit;
 }
-verdocs-field-radio-button.done input[type=radio] {
+verdocs-field-radio.disabled input {
+  opacity: 0.5;
+}
+verdocs-field-radio.done input[type=radio] {
   margin: 0;
   padding: 0;
   width: 10px;
   height: 10px;
 }
-verdocs-field-radio-button:not(.done) input[type=radio] {
+verdocs-field-radio:not(.done) input[type=radio] {
   position: absolute;
   opacity: 0;
 }
-verdocs-field-radio-button:not(.done) input[type=radio] + label:before {
+verdocs-field-radio:not(.done) input[type=radio] + label:before {
   content: "";
   border-radius: 100%;
   border: 1px solid rgba(0, 0, 0, 0.6);
@@ -56,37 +82,37 @@ verdocs-field-radio-button:not(.done) input[type=radio] + label:before {
   text-align: center;
   transition: all 250ms ease;
 }
-verdocs-field-radio-button:not(.done) input[type=radio]:checked + label:before {
+verdocs-field-radio:not(.done) input[type=radio]:checked + label:before {
   background-color: #55bc81;
   box-shadow: inset 0 0 0 2px #f5f5fa;
 }
-verdocs-field-radio-button:not(.done) input[type=radio]:focus + label:before {
+verdocs-field-radio:not(.done) input[type=radio]:focus + label:before {
   outline: none;
   border-color: #55bc81;
 }
-verdocs-field-radio-button:not(.done) input[type=radio]:disabled + label:before {
+verdocs-field-radio:not(.done) input[type=radio]:disabled + label:before {
   box-shadow: inset 0 0 0 4px #f5f5fa;
   border-color: #a0a0d0;
   background: #a0a0d0;
 }
-verdocs-field-radio-button:not(.done) input[type=radio] + label:empty:before {
+verdocs-field-radio:not(.done) input[type=radio] + label:empty:before {
   margin-right: 0;
 }
-verdocs-field-radio-button.required {
+verdocs-field-radio.required {
   border: 1px solid #cc0000;
 }
-verdocs-field-radio-button.hide {
+verdocs-field-radio.hide {
   display: none;
 }
-verdocs-field-radio-button.focused {
+verdocs-field-radio.focused {
   animation: verdocs-field-pulse 0.4s 1;
 }
-verdocs-field-radio-button verdocs-button-panel {
+verdocs-field-radio verdocs-button-panel {
   margin-left: -20px;
   margin-top: -7px;
   transform: scale(0.7);
 }
-verdocs-field-radio-button .settings-icon {
+verdocs-field-radio .settings-icon {
   position: absolute;
   top: -6px;
   left: -20px;
@@ -94,9 +120,9 @@ verdocs-field-radio-button .settings-icon {
   cursor: pointer;
   opacity: 0.3;
 }
-verdocs-field-radio-button .settings-icon svg {
+verdocs-field-radio .settings-icon svg {
   fill: #707ae5;
 }
-verdocs-field-radio-button .settings-icon:hover {
+verdocs-field-radio .settings-icon:hover {
   opacity: 1;
 }

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,17 +40,18 @@ 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 { required = false, role_name = '', label = '', group = '' } = 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 })));
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), editable && group && h("div", { class: "group" }, group), h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -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.css

@@ -21,8 +21,18 @@ verdocs-field-signature {
   transform-origin: bottom left;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
-verdocs-field-signature.disabled {
-  opacity: 0.5;
+verdocs-field-signature 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-signature.done {
   border: none;
@@ -33,6 +43,9 @@ verdocs-field-signature img {
   max-width: 100%;
   max-height: 100%;
 }
+verdocs-field-signature.disabled img {
+  opacity: 0.5;
+}
 verdocs-field-signature button {
   cursor: inherit;
   box-sizing: border-box;

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,13 +74,12 @@ 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 = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Signature" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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), value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), 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: () => {
@@ -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.css

@@ -21,9 +21,6 @@ verdocs-field-textarea {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
-verdocs-field-textarea.disabled {
-  opacity: 0.5;
-}
 verdocs-field-textarea textarea {
   cursor: inherit;
   width: 100%;
@@ -42,6 +39,22 @@ verdocs-field-textarea textarea {
 verdocs-field-textarea textarea.hide {
   display: none;
 }
+verdocs-field-textarea.disabled textarea {
+  opacity: 0.5;
+}
+verdocs-field-textarea 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-textarea.required {
   border: 1px solid rgb(204, 0, 0);
 }

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,13 +96,12 @@ 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 = '', label = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value), 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), h("textarea", { name: fieldname, disabled: disabled, required: required, placeholder: placeholder, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value), 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: () => {
@@ -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",