@verdocs/web-sdk 4.0.9 → 4.1.2

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

@@ -854,7 +854,7 @@ verdocs-field-date.required input {
   border: 1px solid #cc0000;
 }
 verdocs-field-date.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-date verdocs-button-panel {
   top: -3px;
@@ -1789,37 +1789,45 @@ span.flatpickr-weekday {
   flex-direction: row;
 }
 
-.air-datepicker-cell.-year-.-other-decade-, .air-datepicker-cell.-day-.-other-month- {
+.air-datepicker-cell.-year-.-other-decade-,
+.air-datepicker-cell.-day-.-other-month- {
   color: var(--adp-color-other-month);
 }
 
-.air-datepicker-cell.-year-.-other-decade-:hover, .air-datepicker-cell.-day-.-other-month-:hover {
+.air-datepicker-cell.-year-.-other-decade-:hover,
+.air-datepicker-cell.-day-.-other-month-:hover {
   color: var(--adp-color-other-month-hover);
 }
 
-.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
+.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,
+.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
   color: var(--adp-color-other-month);
 }
 
-.-selected-.air-datepicker-cell.-year-.-other-decade-, .-selected-.air-datepicker-cell.-day-.-other-month- {
+.-selected-.air-datepicker-cell.-year-.-other-decade-,
+.-selected-.air-datepicker-cell.-day-.-other-month- {
   color: #fff;
   background: var(--adp-background-color-selected-other-month);
 }
 
-.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
+.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,
+.-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
   background: var(--adp-background-color-selected-other-month-focused);
 }
 
-.-in-range-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.air-datepicker-cell.-day-.-other-month- {
+.-in-range-.air-datepicker-cell.-year-.-other-decade-,
+.-in-range-.air-datepicker-cell.-day-.-other-month- {
   background-color: var(--adp-background-color-in-range);
   color: var(--adp-color);
 }
 
-.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
+.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,
+.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
   background-color: var(--adp-background-color-in-range-focused);
 }
 
-.air-datepicker-cell.-year-.-other-decade-:empty, .air-datepicker-cell.-day-.-other-month-:empty {
+.air-datepicker-cell.-year-.-other-decade-:empty,
+.air-datepicker-cell.-day-.-other-month-:empty {
   background: none;
   border: none;
 }
@@ -1973,7 +1981,8 @@ span.flatpickr-weekday {
   display: none;
 }
 
-.air-datepicker-nav--title, .air-datepicker-nav--action {
+.air-datepicker-nav--title,
+.air-datepicker-nav--action {
   display: flex;
   cursor: pointer;
   align-items: center;
@@ -2101,7 +2110,8 @@ span.flatpickr-weekday {
   line-height: 1;
 }
 
-.air-datepicker-time--current-hours, .air-datepicker-time--current-minutes {
+.air-datepicker-time--current-hours,
+.air-datepicker-time--current-minutes {
   line-height: 1;
   font-size: 19px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
@@ -2109,7 +2119,8 @@ span.flatpickr-weekday {
   z-index: 1;
 }
 
-.air-datepicker-time--current-hours:after, .air-datepicker-time--current-minutes:after {
+.air-datepicker-time--current-hours:after,
+.air-datepicker-time--current-minutes:after {
   content: "";
   background: var(--adp-background-color-hover);
   border-radius: var(--adp-border-radius);
@@ -2122,7 +2133,8 @@ span.flatpickr-weekday {
   opacity: 0;
 }
 
-.air-datepicker-time--current-hours.-focus-:after, .air-datepicker-time--current-minutes.-focus-:after {
+.air-datepicker-time--current-hours.-focus-:after,
+.air-datepicker-time--current-minutes.-focus-:after {
   opacity: 1;
 }
 
@@ -2276,14 +2288,14 @@ span.flatpickr-weekday {
   --adp-z-index: 100;
   --adp-padding: 4px;
   --adp-grid-areas: "nav" "body" "timepicker" "buttons";
-  --adp-transition-duration: .3s;
+  --adp-transition-duration: 0.3s;
   --adp-transition-ease: ease-out;
   --adp-transition-offset: 8px;
   --adp-background-color: #fff;
   --adp-background-color-hover: #f0f0f0;
   --adp-background-color-active: #eaeaea;
-  --adp-background-color-in-range: rgba(92, 196, 239, .1);
-  --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
+  --adp-background-color-in-range: rgba(92, 196, 239, 0.1);
+  --adp-background-color-in-range-focused: rgba(92, 196, 239, 0.2);
   --adp-background-color-selected-other-month-focused: #8ad5f4;
   --adp-background-color-selected-other-month: #a2ddf6;
   --adp-color: #4a4a4a;
@@ -2339,8 +2351,8 @@ span.flatpickr-weekday {
 }
 
 .air-datepicker-overlay {
-  --adp-overlay-background-color: rgba(0, 0, 0, .3);
-  --adp-overlay-transition-duration: .3s;
+  --adp-overlay-background-color: rgba(0, 0, 0, 0.3);
+  --adp-overlay-transition-duration: 0.3s;
   --adp-overlay-transition-ease: ease-out;
   --adp-overlay-z-index: 99;
 }
@@ -2465,59 +2477,89 @@ span.flatpickr-weekday {
   box-sizing: border-box;
 }
 
-.-top-left- .air-datepicker--pointer, .-top-center- .air-datepicker--pointer, .-top-right- .air-datepicker--pointer, [data-popper-placement^=top] .air-datepicker--pointer {
+.-top-left- .air-datepicker--pointer,
+.-top-center- .air-datepicker--pointer,
+.-top-right- .air-datepicker--pointer,
+[data-popper-placement^=top] .air-datepicker--pointer {
   top: calc(100% - var(--pointer-half-size) + 1px);
 }
 
-.-top-left- .air-datepicker--pointer:after, .-top-center- .air-datepicker--pointer:after, .-top-right- .air-datepicker--pointer:after, [data-popper-placement^=top] .air-datepicker--pointer:after {
+.-top-left- .air-datepicker--pointer:after,
+.-top-center- .air-datepicker--pointer:after,
+.-top-right- .air-datepicker--pointer:after,
+[data-popper-placement^=top] .air-datepicker--pointer:after {
   transform: rotate(135deg);
 }
 
-.-right-top- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer, [data-popper-placement^=right] .air-datepicker--pointer {
+.-right-top- .air-datepicker--pointer,
+.-right-center- .air-datepicker--pointer,
+.-right-bottom- .air-datepicker--pointer,
+[data-popper-placement^=right] .air-datepicker--pointer {
   right: calc(100% - var(--pointer-half-size) + 1px);
 }
 
-.-right-top- .air-datepicker--pointer:after, .-right-center- .air-datepicker--pointer:after, .-right-bottom- .air-datepicker--pointer:after, [data-popper-placement^=right] .air-datepicker--pointer:after {
+.-right-top- .air-datepicker--pointer:after,
+.-right-center- .air-datepicker--pointer:after,
+.-right-bottom- .air-datepicker--pointer:after,
+[data-popper-placement^=right] .air-datepicker--pointer:after {
   transform: rotate(225deg);
 }
 
-.-bottom-left- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer, [data-popper-placement^=bottom] .air-datepicker--pointer {
+.-bottom-left- .air-datepicker--pointer,
+.-bottom-center- .air-datepicker--pointer,
+.-bottom-right- .air-datepicker--pointer,
+[data-popper-placement^=bottom] .air-datepicker--pointer {
   bottom: calc(100% - var(--pointer-half-size) + 1px);
 }
 
-.-bottom-left- .air-datepicker--pointer:after, .-bottom-center- .air-datepicker--pointer:after, .-bottom-right- .air-datepicker--pointer:after, [data-popper-placement^=bottom] .air-datepicker--pointer:after {
+.-bottom-left- .air-datepicker--pointer:after,
+.-bottom-center- .air-datepicker--pointer:after,
+.-bottom-right- .air-datepicker--pointer:after,
+[data-popper-placement^=bottom] .air-datepicker--pointer:after {
   transform: rotate(315deg);
 }
 
-.-left-top- .air-datepicker--pointer, .-left-center- .air-datepicker--pointer, .-left-bottom- .air-datepicker--pointer, [data-popper-placement^=left] .air-datepicker--pointer {
+.-left-top- .air-datepicker--pointer,
+.-left-center- .air-datepicker--pointer,
+.-left-bottom- .air-datepicker--pointer,
+[data-popper-placement^=left] .air-datepicker--pointer {
   left: calc(100% - var(--pointer-half-size) + 1px);
 }
 
-.-left-top- .air-datepicker--pointer:after, .-left-center- .air-datepicker--pointer:after, .-left-bottom- .air-datepicker--pointer:after, [data-popper-placement^=left] .air-datepicker--pointer:after {
+.-left-top- .air-datepicker--pointer:after,
+.-left-center- .air-datepicker--pointer:after,
+.-left-bottom- .air-datepicker--pointer:after,
+[data-popper-placement^=left] .air-datepicker--pointer:after {
   transform: rotate(45deg);
 }
 
-.-top-left- .air-datepicker--pointer, .-bottom-left- .air-datepicker--pointer {
+.-top-left- .air-datepicker--pointer,
+.-bottom-left- .air-datepicker--pointer {
   left: var(--adp-pointer-offset);
 }
 
-.-top-right- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer {
+.-top-right- .air-datepicker--pointer,
+.-bottom-right- .air-datepicker--pointer {
   right: var(--adp-pointer-offset);
 }
 
-.-top-center- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer {
+.-top-center- .air-datepicker--pointer,
+.-bottom-center- .air-datepicker--pointer {
   left: calc(50% - var(--adp-pointer-size) / 2);
 }
 
-.-left-top- .air-datepicker--pointer, .-right-top- .air-datepicker--pointer {
+.-left-top- .air-datepicker--pointer,
+.-right-top- .air-datepicker--pointer {
   top: var(--adp-pointer-offset);
 }
 
-.-left-bottom- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer {
+.-left-bottom- .air-datepicker--pointer,
+.-right-bottom- .air-datepicker--pointer {
   bottom: var(--adp-pointer-offset);
 }
 
-.-left-center- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer {
+.-left-center- .air-datepicker--pointer,
+.-right-center- .air-datepicker--pointer {
   top: calc(50% - var(--adp-pointer-size) / 2);
 }
 
@@ -2543,7 +2585,8 @@ span.flatpickr-weekday {
   grid-area: buttons;
 }
 
-.air-datepicker--buttons, .air-datepicker--time {
+.air-datepicker--buttons,
+.air-datepicker--time {
   padding: var(--adp-padding);
   border-top: 1px solid var(--adp-border-color-inner);
 }

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

@@ -1,7 +1,7 @@
 import { format } from "date-fns";
+import { getRGBA } from "@verdocs/js-sdk";
 import AirDatepicker from "air-datepicker";
 import localeEn from "air-datepicker/locale/en";
-import { getRGBA } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
@@ -48,12 +48,7 @@ export class VerdocsFieldDate {
             onShow: () => (this.focused = true),
             onHide: () => (this.focused = false),
             onSelect: ({ date, formattedDate }) => {
-                console.log('Selected date', formattedDate, date);
-                const event = new CustomEvent('fieldChange', {
-                    detail: { date, formattedDate },
-                });
-                // const event = new window.Event('input', {composed: true, bubbles: true, cancelable: true});
-                console.log('Will dispatch', event, this.el);
+                const event = new CustomEvent('fieldChange', { detail: { date, formattedDate } });
                 this.hostEl.dispatchEvent(event);
             },
         });
@@ -72,24 +67,21 @@ export class VerdocsFieldDate {
     }
     // NOTE: We don't use a "date" field here because browsers vary widely in their formatting of it.
     render() {
-        var _a, _b;
-        const field = this.fieldStore.get('fields').find(field => field.name === this.fieldname);
-        const roleIndex = getRoleIndex(this.roleStore, field === null || field === void 0 ? void 0 : field.role_name);
-        const backgroundColor = (field === null || field === void 0 ? void 0 : field['rgba']) || getRGBA(roleIndex);
-        const settings = getFieldSettings(field);
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
+        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 backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const formattedValue = value ? format(new Date(value), FORMAT_DATE) : '';
         if (this.done) {
-            const formatted = (settings === null || settings === void 0 ? void 0 : settings.result) ? format(new Date(settings === null || settings === void 0 ? void 0 : settings.result), FORMAT_DATE) : '';
-            return h(Host, { class: { done: this.done } }, formatted);
+            return h(Host, { class: { done } }, formattedValue);
         }
-        return (h(Host, { class: { required: field === null || field === void 0 ? void 0 : field.required, disabled, focused: this.focused }, style: { backgroundColor } }, h("input", { name: field === null || field === void 0 ? void 0 : field.name, class: "input-el", type: "text", value: "", id: this.containerId, disabled: disabled, placeholder: (_b = field.placeholder) !== null && _b !== void 0 ? _b : '', ref: el => (this.el = el), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), 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("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: this.templateid, fieldName: field === null || field === void 0 ? void 0 : field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
+            } }), 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: () => {
                 var _a;
-                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field === null || field === void 0 ? void 0 : field.name });
+                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                 return this.hideSettingsPanel();
             }, onSettingsChanged: e => {
                 var _a;
@@ -125,7 +117,7 @@ export class VerdocsFieldDate {
                     "text": "The template the field is for/from. Only required for the field builder, passed down to the properties component."
                 },
                 "attribute": "templateid",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "fieldname": {
@@ -143,7 +135,7 @@ export class VerdocsFieldDate {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -161,7 +153,7 @@ export class VerdocsFieldDate {
                     "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": {
@@ -179,7 +171,7 @@ export class VerdocsFieldDate {
                     "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": {
@@ -197,7 +189,7 @@ export class VerdocsFieldDate {
                     "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": {
@@ -215,7 +207,7 @@ export class VerdocsFieldDate {
                     "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": {
@@ -233,7 +225,7 @@ export class VerdocsFieldDate {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -251,7 +243,7 @@ export class VerdocsFieldDate {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -269,7 +261,7 @@ export class VerdocsFieldDate {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "field": {

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

@@ -50,7 +50,7 @@ verdocs-field-dropdown.required select {
   border: 1px solid #cc0000;
 }
 verdocs-field-dropdown.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-dropdown verdocs-button-panel {
   display: block;

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

@@ -5,8 +5,7 @@ import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 /**
- * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
- * input types like text and checkbox.
+ * Displays a dropdown field that allows the user to choose one of a list of options.
  */
 export class VerdocsFieldDropdown {
     constructor() {
@@ -46,27 +45,20 @@ export class VerdocsFieldDropdown {
         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 = '', 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 backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        if (done) {
+            return h(Host, { class: { done } }, value);
         }
-        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.value) || '';
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, value);
-        }
-        return (h(Host, { class: { required: field.required, disabled }, style: { backgroundColor } }, h("select", { disabled: disabled, ref: el => (this.el = el), onChange: e => this.handleChange(e) }, h("option", { value: "" }, "Select..."), (settings.options || []).map(option => (h("option", { value: option.id, selected: option.value === value }, option.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 }, 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) => {
                 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;
@@ -102,7 +94,7 @@ export class VerdocsFieldDropdown {
                     "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": {
@@ -120,7 +112,7 @@ export class VerdocsFieldDropdown {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -138,7 +130,7 @@ export class VerdocsFieldDropdown {
                     "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": {
@@ -156,7 +148,7 @@ export class VerdocsFieldDropdown {
                     "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": {
@@ -174,7 +166,7 @@ export class VerdocsFieldDropdown {
                     "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": {
@@ -192,7 +184,7 @@ export class VerdocsFieldDropdown {
                     "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": {
@@ -210,7 +202,7 @@ export class VerdocsFieldDropdown {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -228,7 +220,7 @@ export class VerdocsFieldDropdown {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -246,7 +238,7 @@ export class VerdocsFieldDropdown {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };

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

@@ -51,7 +51,7 @@ verdocs-field-initial.required {
   border: 1px solid #cc0000;
 }
 verdocs-field-initial.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-initial verdocs-button-panel {
   top: -3px;