@verdocs/web-sdk 4.0.9 → 4.1.2

package/dist/collection/components/envelopes/verdocs-envelopes-list/verdocs-envelopes-list.js

@@ -190,18 +190,18 @@ export class VerdocsEnvelopesList {
         });
     }
     render() {
-        return (h(Host, { key: '1533851ebdceca1b689aec246de482f547817585' }, h("div", { key: 'a33685ad776d4ad2282a794fc08a6928c2a2c2c6', class: "header" }, h("div", { key: '774df81f4db58154c20b5aa6d00585cf70f2c0be', class: "filter" }, h("verdocs-text-input", { key: 'd279867c1693c181d115ed9380263f7ca33cf54e', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
+        return (h(Host, { key: '6edaa0dc845957fdc3c41c5b12769acbec99e5ef' }, h("div", { key: 'd8bfa9ca32548c14f58f8de9e07f74f56b59bcf5', class: "header" }, h("div", { key: '77c565abd59956f38530c62f206be1c32e19ac62', class: "filter" }, h("verdocs-text-input", { key: 'c723b51faa1634f944d2034342038b5748515c36', id: "verdocs-filter-name", value: this.match, clearable: true, autocomplete: "off", placeholder: "Filter by Name, Recipient, or Field...", onFocusout: (e) => {
                 var _a;
                 // We don't locally filter envelopes because there are too many fields to match against efficiently.
                 this.match = e.target.value.trim();
                 (_a = this.changeMatch) === null || _a === void 0 ? void 0 : _a.emit(this.match);
-            } })), h("verdocs-quick-filter", { key: '0e24f54710055db16f106c43419ae8c7d60a137a', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: 'd09efd430424bbf73065c159a1ddae88906943c7', label: "View", value: this.view, options: ViewFilters, onOptionSelected: e => {
                 this.view = e.detail.value;
-            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'd94ade343fe8dfabb11cc6995960c2a221e3fdc4', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
+            } }), this.view === 'all' && (h("verdocs-quick-filter", { key: 'ede4a4258b0c7fbe48ab89a8d97f092dad407cf4', label: "Status", value: this.status, options: StatusFilters, onOptionSelected: e => {
                 this.status = e.detail.value;
-            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: '5b7e637fb7621c1e3b8c52888fd9fabc5b56e27e', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
+            } })), this.view === 'all' && (h("verdocs-quick-filter", { key: 'e904efda70b7a06111a877ccfd35f5f8addda438', label: "Sort By", value: this.sort, options: SortFilters, onOptionSelected: e => {
                 this.sort = e.detail.value;
-            } })), this.loading && h("verdocs-spinner", { key: '2c1a05c9c04cd61733816141c6811ba52229056c', mode: "dark", size: 24 }), h("div", { key: '5af2c9f56ba9bb21cba28637b925dc011613bd05', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: '06bc8e1fd09692bdaf9e56268a8592d97ff10cce', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
+            } })), this.loading && h("verdocs-spinner", { key: '69b2b8fab8cd3e24c6d42c0f0232478da387c537', mode: "dark", size: 24 }), h("div", { key: '2dab430f1de35a2c969f9a86e999a01b97685165', style: { display: 'flex', flex: '1' } }), this.selectedEnvelopes.length > 0 && h("verdocs-button", { key: 'dc829e57afc61fcef27f21d55b1241dcfa148bc0', label: `Download (${this.selectedEnvelopes.length})`, onClick: () => this.handleDownload() })), this.envelopes.map(envelope => {
             var _a;
             const recipientsWithActions = getRecipientsWithActions(envelope);
             const userCanCancel = userCanCancelEnvelope(this.endpoint.session, envelope);
@@ -242,7 +242,7 @@ export class VerdocsEnvelopesList {
                             break;
                     }
                 } }))));
-        }), !this.initiallyLoaded && (h("div", { key: 'ff38c547cc65bd2559dc9f2fb5be237384f56be5', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: 'bd666277c44235c7ef9855b1b7985860b8d8f0da', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
+        }), !this.initiallyLoaded && (h("div", { key: 'fbb26beda8dbe6eade806f9440281c04c1fc94c3', style: { width: '100%' } }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "envelope-placeholder" }))))), this.initiallyLoaded && !this.envelopes.length && h("div", { key: '406dda17fe96ef1494cd5ee17399098f7a322134', class: "empty-text" }, "No matching envelopes found. Please adjust your filters and try again."), this.initiallyLoaded && this.envelopes.length && this.showPagination ? (h("div", { style: { marginTop: '20px' } }, h("verdocs-pagination", { selectedPage: this.selectedPage, perPage: this.rowsPerPage, itemCount: this.count, onSelectPage: e => {
                 this.selectedPage = e.detail.selectedPage;
             } }))) : (h("div", null))));
     }

package/dist/collection/components/envelopes/verdocs-status-indicator/verdocs-status-indicator.js

@@ -238,11 +238,11 @@ export class VerdocsStatusIndicator {
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: 'aaaa7b0cc222b74a9fc8b1663ca3ddf9d4580cf6', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: '7e17d1f0ebec0898aff25f562fc7d10a4687d9b9', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
                 this.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '03baee21425fefa4ce17e3e1998fb60f32310bb0', class: "icon", innerHTML: icon }), h("span", { key: '19b98f1e2cb76a7488bd7400928930d33b1003d0', class: "content" }, statusMessage), h("div", { key: '870dd620390fa1f201ca1b509f0c3bcf513cfa8c', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '7cbe6e3452da0997d2169f2d1024e3d68f891d96', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '6f17422d18876713f28ca8336b59338a3697f906', class: "icon", innerHTML: icon }), h("span", { key: '71b11f70c36bd2be72094f39edc9da893da89a29', class: "content" }, statusMessage), h("div", { key: 'd321e89c2ccf9da54f86c1f93958ccfe62db70e0', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'fb57fbe71ca19de698f8866b8aa1863b512d83b2', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
     }
     static get is() { return "verdocs-status-indicator"; }
     static get originalStyleUrls() {

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

@@ -12,14 +12,18 @@
 verdocs-field-attachment {
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
   box-sizing: border-box;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   display: block;
   font-size: 11px;
   position: relative;
   background-color: transparent;
   transform-origin: bottom left;
 }
+verdocs-field-attachment svg {
+  width: 16px;
+  height: 16px;
+}
 verdocs-field-attachment.disabled {
   opacity: 0.5;
 }
@@ -34,7 +38,7 @@ verdocs-field-attachment.required span {
   border: 1px solid #cc0000;
 }
 verdocs-field-attachment.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-attachment verdocs-button-panel {
   top: 1px;

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

@@ -1,7 +1,9 @@
-import { getRGBA } from "@verdocs/js-sdk";
+import interact from "interactjs";
+import { getRGBA, VerdocsEndpoint, updateField } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
-import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
+import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
+import { getFieldSettings } from "../../../utils/utils";
 import { SettingsIcon } from "../../../utils/Icons";
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
 const AttachedIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104.69 122.88"><g><path d="M31.54,86.95c-1.74,0-3.16-1.43-3.16-3.19c0-1.76,1.41-3.19,3.16-3.19h20.5c1.74,0,3.16,1.43,3.16,3.19 c0,1.76-1.41,3.19-3.16,3.19H31.54L31.54,86.95z M31.54,42.27c-1.74,0-3.15-1.41-3.15-3.15c0-1.74,1.41-3.15,3.15-3.15h41.61 c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,42.27z M66.57,108.66c-1.36-1.08-1.59-3.06-0.5-4.42 c1.08-1.36,3.06-1.59,4.42-0.5l9.57,7.59l18.21-22.27c1.1-1.35,3.09-1.54,4.43-0.44c1.35,1.1,1.54,3.09,0.44,4.43l-20.17,24.67l0,0 c-1.09,1.33-3.04,1.54-4.39,0.47L66.57,108.66L66.57,108.66z M56.85,116.58c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15 H7.33c-2.02,0-3.85-0.82-5.18-2.15C0.82,119.4,0,117.57,0,115.55V7.33c0-2.02,0.82-3.85,2.15-5.18C3.48,0.82,5.31,0,7.33,0h90.02 c2.02,0,3.85,0.82,5.18,2.15c1.33,1.33,2.15,3.16,2.15,5.18V72.6c0,1.74-1.41,3.15-3.15,3.15c-1.74,0-3.15-1.41-3.15-3.15V7.33 c0-0.28-0.12-0.54-0.3-0.73c-0.19-0.19-0.45-0.3-0.73-0.3H7.33c-0.28,0-0.54,0.12-0.73,0.3C6.42,6.8,6.3,7.05,6.3,7.33v108.21 c0,0.28,0.12,0.54,0.3,0.73c0.19,0.19,0.45,0.3,0.73,0.3H56.85L56.85,116.58z M31.54,64.59c-1.74,0-3.15-1.41-3.15-3.15 c0-1.74,1.41-3.15,3.15-3.15h41.61c1.74,0,3.15,1.41,3.15,3.15c0,1.74-1.41,3.15-3.15,3.15H31.54L31.54,64.59z"/></g></svg>`;
@@ -12,6 +14,7 @@ export class VerdocsFieldAttachment {
     constructor() {
         this.fieldStore = null;
         this.roleStore = null;
+        this.endpoint = VerdocsEndpoint.getDefault();
         this.templateid = '';
         this.fieldname = '';
         this.disabled = false;
@@ -22,21 +25,10 @@ export class VerdocsFieldAttachment {
         this.yscale = 1;
         this.pagenumber = 1;
         this.showingProperties = false;
+        this.selectedFile = null;
     }
     async focusField() {
-        this.handleShow();
-    }
-    handleShow() {
-        this.dialog = document.createElement('verdocs-upload-dialog');
-        this.dialog.open = true;
-        this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
-        document.addEventListener('next', (e) => {
-            var _a, _b;
-            console.log('Attachment next', e);
-            (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
-            (_b = this.dialog) === null || _b === void 0 ? void 0 : _b.remove();
-        });
-        document.body.append(this.dialog);
+        this.inputEl.focus();
     }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
@@ -54,26 +46,80 @@ export class VerdocsFieldAttachment {
         this.fieldStore = getTemplateFieldStore(this.templateid);
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
-    render() {
-        var _a;
+    componentDidRender() {
+        interact.dynamicDrop(true);
+        if (this.editable) {
+            interact(this.el).resizable({
+                edges: { top: false, bottom: false, left: true, right: true },
+                listeners: {
+                    start: this.handleResizeStart.bind(this),
+                    move: this.handleResize.bind(this),
+                    end: this.handleResizeEnd.bind(this),
+                },
+            });
+        }
+    }
+    handleResizeStart(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    handleResize(e) {
+        let { x = 0, y = 0, h = 0 } = e.target.dataset;
+        let { width, height } = e.rect;
+        x = (parseFloat(x) || 0) + e.deltaRect.left;
+        y = (parseFloat(y) || 0) + e.deltaRect.top;
+        h = (parseFloat(h) || 0) + e.deltaRect.height;
+        width /= this.xscale;
+        height /= this.yscale;
+        Object.assign(e.target.style, {
+            width: `${width}px`,
+            height: `${height}px`,
+            transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
+        });
+        Object.assign(e.target.dataset, { x, y, h });
+    }
+    handleResizeEnd(e) {
         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 newSettings = { ...getFieldSettings(field) };
+        newSettings.width = Math.round(parseFloat(e.target.style.width));
+        newSettings.height = Math.round(parseFloat(e.target.style.height));
+        updateField(this.endpoint, this.templateid, this.fieldname, { settings: newSettings })
+            .then(field => {
+            var _a;
+            updateStoreField(this.fieldStore, this.fieldname, field);
+            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, settings: newSettings, field });
+            Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
+        })
+            .catch(e => console.log('Field update failed', e));
+    }
+    handleShow() {
+        this.dialog = document.createElement('verdocs-upload-dialog');
+        this.dialog.open = true;
+        this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
+        document.addEventListener('next', (e) => {
+            var _a, _b;
+            this.selectedFile = e.detail[0];
+            (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
+            (_b = this.dialog) === null || _b === void 0 ? void 0 : _b.remove();
+        });
+        document.body.append(this.dialog);
+    }
+    render() {
+        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
+        const { required = false, role_name = '' } = field || {};
+        const { result: url = '' } = getFieldSettings(field);
+        const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
+        const hasFile = url || !!this.selectedFile;
+        if (done) {
+            return (h(Host, { class: { done } }, h("span", { innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
         }
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_a = this.disabled) !== null && _a !== void 0 ? _a : false;
-        // TODO
-        const url = '';
-        // const {url} = settings;
-        return (h(Host, { class: { required: field.required, disabled }, style: { backgroundColor } }, h("span", { innerHTML: url ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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("span", { innerHTML: hasFile ? AttachedIcon : PaperclipIcon, onClick: () => !disabled && this.handleShow() }), 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;
@@ -94,6 +140,28 @@ export class VerdocsFieldAttachment {
     }
     static get properties() {
         return {
+            "endpoint": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "VerdocsEndpoint",
+                    "resolved": "VerdocsEndpoint",
+                    "references": {
+                        "VerdocsEndpoint": {
+                            "location": "import",
+                            "path": "@verdocs/js-sdk",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.\nThis component self-manages its resize (width) behavior when in edit-template mode, and uses\nthis endpoint to save changes."
+                },
+                "defaultValue": "VerdocsEndpoint.getDefault()"
+            },
             "templateid": {
                 "type": "string",
                 "mutable": false,
@@ -109,7 +177,7 @@ export class VerdocsFieldAttachment {
                     "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": {
@@ -127,7 +195,7 @@ export class VerdocsFieldAttachment {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "disabled": {
@@ -145,7 +213,7 @@ export class VerdocsFieldAttachment {
                     "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": {
@@ -163,7 +231,7 @@ export class VerdocsFieldAttachment {
                     "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": {
@@ -181,7 +249,7 @@ export class VerdocsFieldAttachment {
                     "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": {
@@ -199,7 +267,7 @@ export class VerdocsFieldAttachment {
                     "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": {
@@ -217,7 +285,7 @@ export class VerdocsFieldAttachment {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -235,7 +303,7 @@ export class VerdocsFieldAttachment {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -253,14 +321,15 @@ export class VerdocsFieldAttachment {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };
     }
     static get states() {
         return {
-            "showingProperties": {}
+            "showingProperties": {},
+            "selectedFile": {}
         };
     }
     static get events() {
@@ -316,9 +385,14 @@ export class VerdocsFieldAttachment {
                     "text": "Event fired when the field is deleted."
                 },
                 "complexType": {
-                    "original": "{data: string; lastModified: number; name: string; size: number; type: string}",
-                    "resolved": "{ data: string; lastModified: number; name: string; size: number; type: string; }",
-                    "references": {}
+                    "original": "ISelectedFile",
+                    "resolved": "ISelectedFile",
+                    "references": {
+                        "ISelectedFile": {
+                            "location": "global",
+                            "id": "global::ISelectedFile"
+                        }
+                    }
                 }
             }];
     }
@@ -377,4 +451,5 @@ export class VerdocsFieldAttachment {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -14,6 +14,7 @@ verdocs-field-checkbox {
   width: 16px;
   height: 16px;
   padding: 1px;
+  display: block;
   box-sizing: border-box;
   transform-origin: bottom left;
   font-family: "Inter", -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
@@ -60,7 +61,7 @@ verdocs-field-checkbox.hide {
   display: none;
 }
 verdocs-field-checkbox.focused {
-  animation: verdocs-field-pulse 0.75s 2;
+  animation: verdocs-field-pulse 0.4s 1;
 }
 verdocs-field-checkbox verdocs-button-panel {
   display: block;

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

@@ -40,27 +40,22 @@ export class VerdocsFieldCheckbox {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        var _a, _b, _c;
-        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', checked = false } = options[option] || {};
+        const fieldId = `${fieldname}-${id}`;
+        if (done) {
+            return h(Host, { class: { done } }, checked ? '✓' : '☐');
         }
-        const settings = getFieldSettings(field);
-        const option = (_b = (_a = settings.options) === null || _a === void 0 ? void 0 : _a[this.option]) !== null && _b !== void 0 ? _b : { checked: false };
-        // TODO:
-        // const disabled = this.disabled ?? settings.disabled ?? false;
-        const disabled = (_c = this.disabled) !== null && _c !== void 0 ? _c : false;
-        if (this.done) {
-            return h(Host, { class: { done: this.done } }, option.checked ? '✓' : '☐');
-        }
-        return (h(Host, { class: { required: field.required, disabled }, style: { backgroundColor } }, h("label", null, h("input", { name: field.name, type: "checkbox", checked: option.checked, disabled: disabled, required: field.required, value: option.id }), h("span", null), 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("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required, value: id }), h("span", null), 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-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: field.name, 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;
@@ -96,7 +91,7 @@ export class VerdocsFieldCheckbox {
                     "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": {
@@ -114,7 +109,7 @@ export class VerdocsFieldCheckbox {
                     "text": "The name of the field to display."
                 },
                 "attribute": "fieldname",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "''"
             },
             "option": {
@@ -132,7 +127,7 @@ export class VerdocsFieldCheckbox {
                     "text": "The index of the settings option this particular checkbox is for"
                 },
                 "attribute": "option",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "disabled": {
@@ -150,7 +145,7 @@ export class VerdocsFieldCheckbox {
                     "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": {
@@ -168,7 +163,7 @@ export class VerdocsFieldCheckbox {
                     "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": {
@@ -186,7 +181,7 @@ export class VerdocsFieldCheckbox {
                     "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": {
@@ -204,7 +199,7 @@ export class VerdocsFieldCheckbox {
                     "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": {
@@ -222,7 +217,7 @@ export class VerdocsFieldCheckbox {
                     "text": "If set, the field will be be scaled horizontally by this factor."
                 },
                 "attribute": "xscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "yscale": {
@@ -240,7 +235,7 @@ export class VerdocsFieldCheckbox {
                     "text": "If set, the field will be be scaled vertically by this factor."
                 },
                 "attribute": "yscale",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             },
             "pagenumber": {
@@ -258,7 +253,7 @@ export class VerdocsFieldCheckbox {
                     "text": "The page the field is on"
                 },
                 "attribute": "pagenumber",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "1"
             }
         };