@verdocs/web-sdk 4.2.47 → 4.2.49

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

@@ -42,7 +42,7 @@ export class VerdocsFieldRadio {
     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 { required = false, role_name = '', label = '', group = '' } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         // TODO
         const { id = 'option1', selected = false } = {};
@@ -51,7 +51,7 @@ export class VerdocsFieldRadio {
         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: () => {

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

@@ -74,12 +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 = '', value = '' } = 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: () => {

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

@@ -96,12 +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 = '', value = '' } = 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: () => {

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

@@ -46,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),
@@ -92,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;
@@ -103,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: () => {

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

@@ -46,13 +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 = '', value = '' } = 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: () => {

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

@@ -127,7 +127,7 @@ export class VerdocsTemplateDocumentPage {
                     case 'checkbox':
                         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':
-                        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) }));
+                        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 { h, Host } from "@stencil/core";
-import { deleteField, updateField, VerdocsEndpoint } from "@verdocs/js-sdk";
+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,6 +104,12 @@ 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 => {
@@ -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": {}
         };

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

@@ -8,7 +8,6 @@ import { getTemplateStore } from "../../../utils/TemplateStore";
 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,7 +22,6 @@ 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', tooltip: 'Check Box', icon: iconCheck, class: 'checkbox' },
     { id: 'radio', tooltip: 'Radio Button', icon: iconRadio, class: 'radio' },
     { id: 'dropdown', tooltip: 'Dropdown', icon: iconDropdown, class: 'dropdown' },

package/dist/collection/utils/TemplateRoleStore.js

@@ -7,7 +7,6 @@ export const getTemplateRoleStore = (templateId) => {
     return templateRoleStores[templateId];
 };
 export const createTemplateRoleStore = (template) => {
-    console.log('creating role store', template);
     let store = getTemplateRoleStore(template.id);
     const roles = [...(template.roles || [])];
     roles.sort((a, b) => {

package/dist/components/TemplateRoleStore.js

@@ -8,7 +8,6 @@ const getTemplateRoleStore = (templateId) => {
     return templateRoleStores[templateId];
 };
 const createTemplateRoleStore = (template) => {
-    console.log('creating role store', template);
     let store = getTemplateRoleStore(template.id);
     const roles = [...(template.roles || [])];
     roles.sort((a, b) => {