@verdocs/web-sdk 4.0.9 → 4.1.3

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

@@ -5,8 +5,13 @@ 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 will be disabled. Otherwise, a placeholder
- * button will be shown. Clicking the button will show a dialog to adopt an initial.
+ * Displays an initial field. If an initial already exists, it will be displayed and the field
+ * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+ * show a dialog to adopt an initial.
+ *
+ * NOTE: When initial fields are completed they will be filled with an initial "stamp".
+ * This requires operation against a live, valid envelope. If you are testing this component
+ * in Storybook, it will not be visible here.
  */
 export class VerdocsFieldInitial {
     constructor() {
@@ -68,25 +73,18 @@ export class VerdocsFieldInitial {
         }
     }
     render() {
-        var _a;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-        if (!field) {
-            return h(Fragment, null);
-        }
-        const settings = getFieldSettings(field);
-        const value = settings.base64 || this.tempInitials;
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Initials" }));
+        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 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: field === null || field === void 0 ? void 0 : field.required, disabled, focused: this.focused }, style: { backgroundColor } }, value ? (h("img", { src: value, alt: "Initials" })) : (h("button", { class: {}, onClick: () => !disabled && this.handleShow() }, "Initials")), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        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) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${this.fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
                 (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
                 return this.hideSettingsPanel();
@@ -124,7 +122,7 @@ export class VerdocsFieldInitial {
                     "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -142,7 +140,7 @@ export class VerdocsFieldInitial {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -160,7 +158,7 @@ export class VerdocsFieldInitial {
                     "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "initials": {
@@ -178,7 +176,7 @@ export class VerdocsFieldInitial {
                     "text": "The document or template field to display."
                 },
                 "attribute": "initials",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "editable": {
@@ -196,7 +194,7 @@ export class VerdocsFieldInitial {
                     "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
                 },
                 "attribute": "editable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "moveable": {
@@ -214,7 +212,7 @@ export class VerdocsFieldInitial {
                     "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
                 },
                 "attribute": "moveable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "done": {
@@ -232,7 +230,7 @@ export class VerdocsFieldInitial {
                     "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                 },
                 "attribute": "done",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "xscale": {
@@ -250,7 +248,7 @@ export class VerdocsFieldInitial {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -268,7 +266,7 @@ export class VerdocsFieldInitial {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -286,7 +284,7 @@ export class VerdocsFieldInitial {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };

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

@@ -64,7 +64,7 @@ verdocs-field-payment .frame img {
   width: 100%;
 }
 verdocs-field-payment.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-payment .settings-icon {
   position: absolute;

package/dist/collection/components/fields/verdocs-field-radio-button-group/verdocs-field-radio-button.css

@@ -79,7 +79,7 @@ verdocs-field-radio-button.hide {
   display: none;
 }
 verdocs-field-radio-button.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-radio-button verdocs-button-panel {
   margin-left: -20px;

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

@@ -42,29 +42,22 @@ export class VerdocsFieldRadioButton {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        var _a;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-        if (!field) {
-            return h(Fragment, null);
+        const { templateid, fieldname = '', option, editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
+        const { required = false, role_name = '' } = field || {};
+        const { options = [] } = getFieldSettings(field);
+        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const { id = 'option1', selected = false } = options[option] || {};
+        const fieldId = `${fieldname}-${id}`;
+        if (done) {
+            return (h(Host, { class: { done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
         }
-        const settings = getFieldSettings(field);
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        const required = field.required;
-        const option = settings.options[this.option];
-        const id = `${field.name}-${option.id}`;
-        if (this.done) {
-            return (h(Host, { class: { done: this.done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: !!option.selected ? RadioIconSelected : RadioIconUnselected })));
-        }
-        return (h(Host, { class: { required, disabled }, style: { backgroundColor } }, h("input", { id: id, type: "radio", name: field.name, value: option.id, checked: !!option.selected, disabled: disabled, required: field.required }), h("label", { htmlFor: id }), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
             }, onSettingsChanged: e => {
                 var _a;
@@ -100,7 +93,7 @@ export class VerdocsFieldRadioButton {
                     "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -118,7 +111,7 @@ export class VerdocsFieldRadioButton {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "option": {
@@ -136,7 +129,7 @@ export class VerdocsFieldRadioButton {
                     "text": "The index of the settings option this particular checkbox is for"
                 },
                 "attribute": "option",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "disabled": {
@@ -154,7 +147,7 @@ export class VerdocsFieldRadioButton {
                     "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "done": {
@@ -172,7 +165,7 @@ export class VerdocsFieldRadioButton {
                     "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                 },
                 "attribute": "done",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "editable": {
@@ -190,7 +183,7 @@ export class VerdocsFieldRadioButton {
                     "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
                 },
                 "attribute": "editable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "moveable": {
@@ -208,7 +201,7 @@ export class VerdocsFieldRadioButton {
                     "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
                 },
                 "attribute": "moveable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "xscale": {
@@ -226,7 +219,7 @@ export class VerdocsFieldRadioButton {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -244,7 +237,7 @@ export class VerdocsFieldRadioButton {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -262,7 +255,7 @@ export class VerdocsFieldRadioButton {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };

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

@@ -52,7 +52,7 @@ verdocs-field-signature.required {
   border: 1px solid rgb(204, 0, 0);
 }
 verdocs-field-signature.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-signature verdocs-button-panel {
   top: -3px;

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

@@ -5,8 +5,13 @@ 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 will be disabled. Otherwise, a placeholder
- * button will be shown. Clicking the button will show a dialog to adopt a signature.
+ * Displays a signature field. If a signature already exists, it will be displayed and the field
+ * will be disabled. Otherwise, a placeholder button will be shown. Clicking the button will
+ * show a dialog to adopt a signature.
+ *
+ * NOTE: When signature fields are completed they will be filled with a signature "stamp".
+ * This requires operation against a live, valid envelope. If you are testing this component
+ * in Storybook, it will not be visible here.
  */
 export class VerdocsFieldSignature {
     constructor() {
@@ -28,7 +33,6 @@ export class VerdocsFieldSignature {
     }
     async focusField() {
         this.handleShow();
-        console.log('focused', this);
     }
     hideDialog() {
         var _a;
@@ -69,27 +73,20 @@ export class VerdocsFieldSignature {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        var _a;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-        if (!field) {
-            return h(Fragment, null);
-        }
-        const settings = getFieldSettings(field);
-        const value = settings.base64 || this.tempSignature;
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, value && h("img", { src: value, alt: "Signature" }));
+        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 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: field === null || field === void 0 ? void 0 : field.required, disabled, focused: this.focused }, style: { backgroundColor } }, value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        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) => {
                 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: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
             }, onSettingsChanged: e => {
                 var _a;
@@ -125,7 +122,7 @@ export class VerdocsFieldSignature {
                     "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -143,7 +140,7 @@ export class VerdocsFieldSignature {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "name": {
@@ -161,7 +158,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, the signature creation dialog will be initialized with this text."
                 },
                 "attribute": "name",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -179,7 +176,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "editable": {
@@ -197,7 +194,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
                 },
                 "attribute": "editable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "moveable": {
@@ -215,7 +212,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
                 },
                 "attribute": "moveable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "done": {
@@ -233,7 +230,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                 },
                 "attribute": "done",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "xscale": {
@@ -251,7 +248,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -269,7 +266,7 @@ export class VerdocsFieldSignature {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -287,7 +284,7 @@ export class VerdocsFieldSignature {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };

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

@@ -46,7 +46,7 @@ verdocs-field-textarea.required {
   border: 1px solid rgb(204, 0, 0);
 }
 verdocs-field-textarea.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-textarea verdocs-button-panel {
   top: -3px;

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

@@ -7,7 +7,8 @@ import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
- * Display a multi-line text input field.
+ * Display a multi-line text input field. Reminder: the "position" of the field is specified
+ * as the BOTTOM-LEFT corner.
  */
 export class VerdocsFieldTextarea {
     constructor() {
@@ -95,27 +96,20 @@ export class VerdocsFieldTextarea {
             .catch(e => console.log('Field update failed', e));
     }
     render() {
-        var _a, _b;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field.role_name);
-        const backgroundColor = field['rgba'] || getRGBA(roleIndex);
-        if (!field) {
-            return h(Fragment, null);
-        }
-        const settings = getFieldSettings(field);
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        const value = (settings === null || settings === void 0 ? void 0 : settings.result) || '';
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, settings.value);
+        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 backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        if (done) {
+            return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled, done: this.done, focused: this.focused }, style: { backgroundColor } }, h("textarea", { placeholder: (_b = field.placeholder) !== null && _b !== void 0 ? _b : '', disabled: disabled, name: field.name, required: field === null || field === void 0 ? void 0 : field.required, ref: el => (this.inputEl = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, value), this.editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${field.name}`, style: { transform: `scale(${Math.floor((1 / this.xscale) * 1000) / 1000}, ${Math.floor((1 / this.yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        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) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
-            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${this.fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: this.templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
                 var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name });
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
             }, onSettingsChanged: e => {
                 var _a;
@@ -173,7 +167,7 @@ export class VerdocsFieldTextarea {
                     "text": "The template the field is for/from. Only required in Builder mode, to support the Field Properties dialog."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -191,7 +185,7 @@ export class VerdocsFieldTextarea {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -209,7 +203,7 @@ export class VerdocsFieldTextarea {
                     "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
                 },
                 "attribute": "disabled",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "editable": {
@@ -227,7 +221,7 @@ export class VerdocsFieldTextarea {
                     "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
                 },
                 "attribute": "editable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "moveable": {
@@ -245,7 +239,7 @@ export class VerdocsFieldTextarea {
                     "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
                 },
                 "attribute": "moveable",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "done": {
@@ -263,7 +257,7 @@ export class VerdocsFieldTextarea {
                     "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                 },
                 "attribute": "done",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "xscale": {
@@ -281,7 +275,7 @@ export class VerdocsFieldTextarea {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -299,7 +293,7 @@ export class VerdocsFieldTextarea {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -317,7 +311,7 @@ export class VerdocsFieldTextarea {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };

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

@@ -46,7 +46,7 @@ verdocs-field-textbox.required {
   border: 1px solid rgb(204, 0, 0);
 }
 verdocs-field-textbox.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-textbox verdocs-button-panel {
   top: -3px;