@verdocs/web-sdk 4.2.93 → 4.2.95

package/dist/collection/components/dialogs/verdocs-upload-dialog/verdocs-upload-dialog.js

@@ -1,4 +1,4 @@
-import { fileToDataUrl } from "@verdocs/js-sdk";
+// import {fileToDataUrl, IFileWithData} from '@verdocs/js-sdk';
 import { h, Host } from "@stencil/core";
 const TrashIcon = `<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
 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>`;
@@ -10,8 +10,9 @@ const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewB
 export class VerdocsUploadDialog {
     constructor() {
         this.draggingOver = false;
-        this.decodedFiles = [];
+        this.selectedFiles = [];
     }
+    // @State() droppedFiles = [] as IFileWithData[];
     handleCancel() {
         this.exit.emit();
     }
@@ -23,7 +24,8 @@ export class VerdocsUploadDialog {
         }
     }
     handleDone() {
-        this.next.emit(this.decodedFiles);
+        this.next.emit(this.selectedFiles);
+        // this.next.emit(this.droppedFiles);
     }
     handleDragOver(e) {
         e.preventDefault();
@@ -36,40 +38,53 @@ export class VerdocsUploadDialog {
     async handleDrop(e) {
         e.preventDefault();
         this.draggingOver = false;
+        this.selectedFiles = Array.from(e.dataTransfer.items);
         // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
-        let droppedFiles = [];
-        if (e.dataTransfer.items) {
-            for (let i = 0; i < e.dataTransfer.items.length; i++) {
-                if (e.dataTransfer.items[i].kind === 'file') {
-                    const file = e.dataTransfer.items[i].getAsFile();
-                    droppedFiles.push(file);
-                }
-            }
-        }
-        else {
-            droppedFiles = e.dataTransfer.files;
-        }
-        this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+        // let droppedFiles = [] as File[];
+        // if (e.dataTransfer.items) {
+        //   for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        //     if (e.dataTransfer.items[i].kind === 'file') {
+        //       const file = e.dataTransfer.items[i].getAsFile();
+        //       droppedFiles.push(file);
+        //     }
+        //   }
+        // } else {
+        //   droppedFiles = e.dataTransfer.files;
+        // }
+        // this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
     }
     handleRemoveAttachment(index) {
-        const newFiles = [...this.decodedFiles];
+        const newFiles = [...this.selectedFiles];
         newFiles.splice(index, 1);
-        this.decodedFiles = newFiles;
+        this.selectedFiles = newFiles;
+        // const newFiles = [...this.decodedFiles];
+        // newFiles.splice(index, 1);
+        // this.decodedFiles = newFiles;
     }
     handleSelectFile() {
         var _a;
         (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
     }
     async handleFileChange() {
-        var _a, _b;
+        var _a, _b, _c;
+        this.selectedFiles = Array.from((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
         let droppedFiles = [];
-        for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
-            droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
+        for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
+            droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
         }
-        this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+        // this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+        // let droppedFiles = [] as File[];
+        // for (let i = 0; i < this.fileInput?.files.length; i++) {
+        //   droppedFiles.push(this.fileInput?.files[i]);
+        // }
+        // this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
     }
     render() {
-        return (h(Host, { key: '2cd98783a0cba44f723273fe01518cc96d6b0618' }, h("div", { key: '118f116c01a7a555564d95e42472333c59476e64', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '73f17cb245b77d8b67a4bca73599bb0cd4a527da', class: "dialog" }, h("div", { key: '4047027eea9e427cca5b6e70d4173b254952995a', class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: 'c406436cf2827cb59da7acc8e0f023aa16870c2f', class: "buttons" }, h("verdocs-button", { key: '8d12c1a94e3981148d09888bf17926e07606b1ed', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '581b0253772c130efbee4f6ef8a65c38bbf3ea62', label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+        return (h(Host, { key: 'f64e07a78fc85647e8f9434b5a113320f3d7e4f0' }, h("div", { key: 'e982fab85ed6d9e7a19bfd701887b481d6386a68', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'd5f998907651e578adb315f0305d15b08a24d574', class: "dialog" }, h("div", { key: '8258e31e6e261c60156cf1370630d8f34fe84141', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 ? (
+        // {this.decodedFiles.length < 1 ? (
+        h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.selectedFiles.map((file, index) => (
+        // {this.decodedFiles.map((file, index) => (
+        h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: '566289404d41ef017e101c68601593bd85b4fb4a', class: "buttons" }, h("verdocs-button", { key: 'd1d62c6590dd3d800f329e2c70aca963527d42b4', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '000b401b00de23141b2c7f856d14715835ce2f7c', label: "Done", onClick: () => this.handleDone(), disabled: this.selectedFiles.length < 1 }))))));
     }
     static get is() { return "verdocs-upload-dialog"; }
     static get originalStyleUrls() {
@@ -85,7 +100,7 @@ export class VerdocsUploadDialog {
     static get states() {
         return {
             "draggingOver": {},
-            "decodedFiles": {}
+            "selectedFiles": {}
         };
     }
     static get events() {
@@ -115,13 +130,12 @@ export class VerdocsUploadDialog {
                     "text": "Event fired when the dialog is closed. The event data will contain the file selected."
                 },
                 "complexType": {
-                    "original": "IFileWithData[]",
-                    "resolved": "IFileWithData[]",
+                    "original": "File[]",
+                    "resolved": "File[]",
                     "references": {
-                        "IFileWithData": {
-                            "location": "import",
-                            "path": "@verdocs/js-sdk",
-                            "id": "node_modules::IFileWithData"
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
                         }
                     }
                 }

package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js

@@ -112,7 +112,7 @@ export class VerdocsSign {
             (_d = this.envelopeLoaded) === null || _d === void 0 ? void 0 : _d.emit({ endpoint: this.endpoint, envelope: this.envelope });
         }
         catch (e) {
-            console.log('Error with signing session', e);
+            console.log('[SIGN] Error with signing session', e);
             (_e = this.sdkError) === null || _e === void 0 ? void 0 : _e.emit(new SDKError(e.message, (_f = e.response) === null || _f === void 0 ? void 0 : _f.status, (_g = e.response) === null || _g === void 0 ? void 0 : _g.data));
             this.showLoadError = true;
         }
@@ -139,7 +139,7 @@ export class VerdocsSign {
         })
             .catch(e => {
             var _a, _b, _c;
-            console.log('Update failure', e);
+            console.log('[SIGN] Update failure', e);
             this.submitting = false;
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
         });
@@ -160,7 +160,7 @@ export class VerdocsSign {
                 {
                     this.submitting = true;
                     const declineResult = await envelopeRecipientDecline(this.endpoint, this.envelopeId, this.roleId);
-                    console.log('Decline result', declineResult);
+                    console.log('[SIGN] Decline result', declineResult);
                     (_c = this.envelopeUpdated) === null || _c === void 0 ? void 0 : _c.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'declined' });
                     this.submitting = false;
                     this.isDone = true;
@@ -175,7 +175,7 @@ export class VerdocsSign {
                     const firstDoc = this.envelope.documents.find(doc => doc.type === 'attachment');
                     if (firstDoc) {
                         saveAttachment(this.endpoint, this.envelope, firstDoc.id).catch(e => {
-                            console.log('Error downloading PDF', e);
+                            console.log('[SIGN] Error downloading PDF', e);
                         });
                         (_e = this.envelopeUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, envelope: this.envelope, event: 'downloaded' });
                     }
@@ -219,7 +219,7 @@ export class VerdocsSign {
                 return this.saveFieldChange(field.name, { prepared: false, value: e.target.checked });
             }
             case 'radio': {
-                return this.saveFieldChange(field.name, { prepared: false, value: e.target.value === e.target.checked });
+                return this.saveFieldChange(field.name, { prepared: false, value: e.target.checked });
             }
             case 'dropdown':
                 return this.saveFieldChange(field.name, { prepared: false, value: e.detail });
@@ -251,20 +251,19 @@ export class VerdocsSign {
                     this.updateRecipientFieldValue(field.name, updateResult);
                 })
                     .catch(e => {
-                    console.warn('Error updating signature', e);
+                    console.warn('[SIGN] Error updating signature', e);
                 });
             case 'date':
-                const { date, formattedDate } = e.detail;
+                const { formattedDate } = e.detail;
                 if (formattedDate) {
-                    console.log('dt', { date, formattedDate });
                     return this.saveFieldChange(field.name, { prepared: false, value: formattedDate });
                 }
                 break;
             case 'timestamp':
-                console.log('Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
+                console.log('[SIGN] Updating timestamp', { value, ts: e.target.getAttribute('timestamp') });
                 break;
             default:
-                console.log('Unhandled field update', { value, checked }, field);
+                console.log('[SIGN] Unhandled field update', { value, checked }, field);
                 break;
         }
     }
@@ -281,28 +280,34 @@ export class VerdocsSign {
                         return value !== '';
                 }
             case 'signature':
+                return value === 'signed';
             case 'initial':
-                return value && value !== '';
+                return value === 'initialed';
             // Timestamp fields get automatically filled when the envelope is submitted.
             case 'timestamp':
                 return true;
             case 'textarea':
             case 'date':
-            case 'attachment':
                 return value !== '';
+            case 'attachment':
+                return value === 'attached';
             case 'dropdown':
                 return value !== '';
             case 'checkbox':
-                return !!value;
+                return value === 'true';
             case 'radio':
-                return !!value;
+                if (!!field.group) {
+                    return this.getRecipientFields()
+                        .filter(f => f.group === field.group)
+                        .some(field => field.value === 'true');
+                }
+                return field.value === 'true';
             default:
                 return false;
         }
     }
     isFieldValid(field) {
-        const { required = false } = field;
-        return !required || this.isFieldFilled(field);
+        return !field.required || this.isFieldFilled(field);
     }
     getSortedFillableFields() {
         const recipientFields = this.getRecipientFields().filter(field => field.type !== 'timestamp');
@@ -377,7 +382,6 @@ export class VerdocsSign {
         if (nextRequiredField) {
             const id = getFieldId(nextRequiredField);
             const el = document.getElementById(id);
-            console.log('Jumping to next field', nextRequiredField);
             el === null || el === void 0 ? void 0 : el.focusField();
             el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
             this.focusedField = nextRequiredField.name;
@@ -406,7 +410,9 @@ export class VerdocsSign {
             // console.log('[SIGN] onfieldInput', e.detail, e.target.value);
             // These field types don't emit fieldChange. Should we standardize on that? We don't tap "input" for fields like
             // text boxes because we'd be updating the field on every keystroke. We do those on blur which fires fieldChange.
-            if (e.target.name.includes('date') || e.target.name.includes('checkbox') || e.target.name.includes('radio')) {
+            console.log('onInput', e.target.type, e.target.name);
+            if (e.target.type === 'radio' || e.target.type === 'checkbox') {
+                // if (e.target.type === 'radio' || e.target.name.includes('date') || e.target.name.includes('checkbox')) {
                 this.handleFieldChange(field, e).finally(() => this.checkRecipientFields());
             }
             else {
@@ -415,7 +421,7 @@ export class VerdocsSign {
         });
         el.addEventListener('attached', async (e) => {
             console.log('[SIGN] onAttached', e.detail, e.target.value);
-            const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, this.roleId, field.name, e.detail);
+            const r = await uploadEnvelopeFieldAttachment(this.endpoint, this.envelopeId, field.name, e.detail);
             console.log('upload result', r);
             this.checkRecipientFields();
         });
@@ -448,9 +454,6 @@ export class VerdocsSign {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
-            if (field.type === 'signature') {
-                console.log('rendering', field);
-            }
             const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;

package/dist/collection/components/envelopes/verdocs-envelope-sidebar/verdocs-envelope-sidebar.js

@@ -137,6 +137,8 @@ export class VerdocsEnvelopeSidebar {
         if (((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.status) === 'complete') {
             entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.updated_at) });
         }
+        // TODO: Shift back to server-side generating these events? We'll still need
+        // to tolerate both cases here for a while.
         const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
         if (((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.status) === 'canceled' && !ownerCanceled) {
             entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.canceled_at) });
@@ -238,6 +240,7 @@ export class VerdocsEnvelopeSidebar {
                 case 'completed':
                     entries.push({ icon: 'done_all', message: `Envelope was completed.`, date: new Date(history.created_at) });
                     break;
+                case 'envelope_canceled':
                 case 'canceled':
                 case 'owner:canceled':
                     entries.push({ icon: 'cancel', message: `Envelope was canceled by the creator.`, date: new Date(history.created_at) });

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

@@ -1,7 +1,6 @@
-import interact from "interactjs";
-import { getRGBA, VerdocsEndpoint, updateField } from "@verdocs/js-sdk";
+import { getRGBA, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
+import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 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>`;
@@ -45,56 +44,13 @@ export class VerdocsFieldAttachment {
         this.fieldStore = getTemplateFieldStore(this.templateid);
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
-    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 width = Math.round(parseFloat(e.target.style.width));
-        const height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
-            .then(field => {
-            var _a;
-            updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, 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;
+            console.log('attach onNext', e.detail[0]);
             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();

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

@@ -42,16 +42,19 @@ verdocs-field-checkbox label {
 verdocs-field-checkbox.disabled label {
   opacity: 0.5;
 }
+verdocs-field-checkbox.focused {
+  animation: verdocs-field-pulse 0.4s 1;
+}
 verdocs-field-checkbox label > input[type=checkbox] {
   display: none;
 }
 verdocs-field-checkbox label > input[type=checkbox] + *::before {
   margin: 0;
   content: "";
-  width: 14px;
-  height: 14px;
+  width: 12px;
+  height: 12px;
   display: block;
-  line-height: 14px;
+  line-height: 12px;
   border-radius: 2px;
   box-sizing: border-box;
   border: 1px solid #aeb4bf;

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

@@ -20,6 +20,16 @@ export class VerdocsFieldCheckbox {
         this.yscale = 1;
         this.pagenumber = 1;
         this.showingProperties = false;
+        this.focused = false;
+    }
+    async focusField() {
+        // We don't have a visible input that we can actually focus on, so we fake it
+        console.log('Focusing me', this.fieldname);
+        this.focused = false;
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
     }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
@@ -38,18 +48,17 @@ export class VerdocsFieldCheckbox {
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1, focused } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', label = '' } = field || {};
+        const { required = false, role_name = '', label = '', value = false } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        // TODO
-        const { id = 'option1', checked = false } = {};
-        // const {id = 'option1', checked = false} = options[option] || {};
-        const fieldId = `${fieldname}-${id}`;
+        const fieldId = `${fieldname}`;
+        // const fieldId = `${fieldname}-${id}`;
+        const checked = value === 'true';
         if (done) {
             return h(Host, { class: { done } }, checked ? '✓' : '☐');
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), 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) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required }), 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: templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -241,7 +250,8 @@ export class VerdocsFieldCheckbox {
     }
     static get states() {
         return {
-            "showingProperties": {}
+            "showingProperties": {},
+            "focused": {}
         };
     }
     static get events() {
@@ -285,6 +295,23 @@ export class VerdocsFieldCheckbox {
     }
     static get methods() {
         return {
+            "focusField": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "showSettingsPanel": {
                 "complexType": {
                     "signature": "() => Promise<void>",

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

@@ -73,8 +73,8 @@ verdocs-field-radio:not(.done) input[type=radio] + label:before {
   border-radius: 100%;
   border: 1px solid rgba(0, 0, 0, 0.6);
   display: inline-block;
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   position: absolute;
   left: 1px;
   top: 1px;

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

@@ -42,16 +42,15 @@ export class VerdocsFieldRadio {
     render() {
         const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', label = '', group = '' } = field || {};
+        const { name, required = false, role_name = '', label = '', group = '', value = false } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        // TODO
-        const { id = 'option1', selected = false } = {};
-        // const {id = 'option1', selected = false} = options[option] || {};
-        const fieldId = `${fieldname}-${id}`;
+        const fieldId = `${fieldname}`;
+        // const fieldId = `${fieldname}-${id}`;
+        const selected = value === 'true';
         if (done) {
             return (h(Host, { class: { done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), editable && group && h("div", { class: "group" }, group), h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), editable && group && h("div", { class: "group" }, group), h("input", { id: fieldId, type: "radio", name: group || fieldname, value: name, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {

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

@@ -78,9 +78,8 @@ export class VerdocsFieldSignature {
         const { required = false, role_name = '', value = '', label = '' } = field || {};
         const { base64 } = field.settings || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        console.log('sig', field, value, base64);
         if (done) {
-            return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Signature" }));
+            return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "Signature" }));
         }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, 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();

package/dist/collection/utils/Types.js

@@ -1,3 +1,3 @@
 export const FORMAT_TIMESTAMP = 'P pp';
 // export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
-export const FORMAT_DATE = 'Y-MM-dd';
+export const FORMAT_DATE = 'y-MM-dd';

package/dist/collection/utils/utils.js

@@ -78,9 +78,6 @@ export const getControlStyles = (field, xScale, yScale) => {
 export const getFieldId = (field) => {
     return `verdocs-doc-fld-${field.name}`;
 };
-export const getFieldOptionId = (field, index) => {
-    return `verdocs-doc-fld-${field.name}-${index}`;
-};
 export const updateDocumentFieldValue = (field) => {
     const id = getFieldId(field);
     const existingField = document.getElementById(id);
@@ -134,7 +131,6 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             else {
                 el.setAttribute('tabIndex', tabIndex);
             }
-            console.log(field.name, 'editable', editable);
             el.setAttribute('editable', editable);
             el.setAttribute('draggable', draggable);
             el.setAttribute('done', done);
@@ -143,7 +139,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             return el;
         }
         case 'checkbox': {
-            const id = getFieldOptionId(field, 0);
+            const id = getFieldId(field);
             const existingField = document.getElementById(id);
             if (existingField) {
                 setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
@@ -170,7 +166,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
             return cbEl;
         }
         case 'radio': {
-            const id = getFieldOptionId(field, 0);
+            const id = getFieldId(field);
             const existingField = document.getElementById(id);
             if (existingField) {
                 setControlStyles(existingField, field, docPage.xScale, docPage.yScale);

package/dist/components/Types.js

@@ -1,5 +1,5 @@
 const FORMAT_TIMESTAMP = 'P pp';
 // export const FORMAT_TIMESTAMP = 'Y-MM-dd hh:mm:ss a';
-const FORMAT_DATE = 'Y-MM-dd';
+const FORMAT_DATE = 'y-MM-dd';
 
 export { FORMAT_TIMESTAMP as F, FORMAT_DATE as a };

package/dist/components/utils.js

@@ -99,9 +99,6 @@ const getControlStyles = (field, xScale, yScale) => {
 const getFieldId = (field) => {
     return `verdocs-doc-fld-${field.name}`;
 };
-const getFieldOptionId = (field, index) => {
-    return `verdocs-doc-fld-${field.name}-${index}`;
-};
 const updateDocumentFieldValue = (field) => {
     const id = getFieldId(field);
     const existingField = document.getElementById(id);
@@ -155,7 +152,6 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             else {
                 el.setAttribute('tabIndex', tabIndex);
             }
-            console.log(field.name, 'editable', editable);
             el.setAttribute('editable', editable);
             el.setAttribute('draggable', draggable);
             el.setAttribute('done', done);
@@ -164,7 +160,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             return el;
         }
         case 'checkbox': {
-            const id = getFieldOptionId(field, 0);
+            const id = getFieldId(field);
             const existingField = document.getElementById(id);
             if (existingField) {
                 setControlStyles(existingField, field, docPage.xScale, docPage.yScale);
@@ -191,7 +187,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
             return cbEl;
         }
         case 'radio': {
-            const id = getFieldOptionId(field, 0);
+            const id = getFieldId(field);
             const existingField = document.getElementById(id);
             if (existingField) {
                 setControlStyles(existingField, field, docPage.xScale, docPage.yScale);

package/dist/components/verdocs-envelope-sidebar.js

@@ -148,6 +148,8 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
         if (((_f = (_e = this.store) === null || _e === void 0 ? void 0 : _e.state) === null || _f === void 0 ? void 0 : _f.status) === 'complete') {
             entries.push({ icon: 'pencil', message: 'Envelope completed.', date: new Date((_h = (_g = this.store) === null || _g === void 0 ? void 0 : _g.state) === null || _h === void 0 ? void 0 : _h.updated_at) });
         }
+        // TODO: Shift back to server-side generating these events? We'll still need
+        // to tolerate both cases here for a while.
         const ownerCanceled = histories.some(history => history.event === 'owner:canceled');
         if (((_k = (_j = this.store) === null || _j === void 0 ? void 0 : _j.state) === null || _k === void 0 ? void 0 : _k.status) === 'canceled' && !ownerCanceled) {
             entries.push({ icon: 'pencil', message: 'Envelope Cancelled.', date: new Date((_m = (_l = this.store) === null || _l === void 0 ? void 0 : _l.state) === null || _m === void 0 ? void 0 : _m.canceled_at) });
@@ -249,6 +251,7 @@ const VerdocsEnvelopeSidebar$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsE
                 case 'completed':
                     entries.push({ icon: 'done_all', message: `Envelope was completed.`, date: new Date(history.created_at) });
                     break;
+                case 'envelope_canceled':
                 case 'canceled':
                 case 'owner:canceled':
                     entries.push({ icon: 'cancel', message: `Envelope was canceled by the creator.`, date: new Date(history.created_at) });