@verdocs/web-sdk 4.2.94 → 4.2.96

package/dist/collection/components/envelopes/verdocs-envelope-recipient-summary/verdocs-envelope-recipient-summary.css

@@ -95,8 +95,11 @@ verdocs-envelope-recipient-summary .summary-recipient .link-wrapper .link {
   display: flex;
   font-size: 16px;
   padding: 0 12px;
+  overflow: hidden;
   border-radius: 4px;
   align-items: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   border: 1px solid #cccccc;
   background: rgb(249, 250, 251);
 }

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.css

@@ -88,4 +88,16 @@ verdocs-field-attachment .settings-icon svg {
 }
 verdocs-field-attachment .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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

@@ -50,6 +50,7 @@ export class VerdocsFieldAttachment {
         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;
@@ -95,4 +98,16 @@ verdocs-field-checkbox .settings-icon svg {
 }
 verdocs-field-checkbox .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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-date/verdocs-field-date.css

@@ -912,4 +912,16 @@ verdocs-field-date .settings-icon:hover {
   width: 100%;
   height: 100%;
   transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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

@@ -84,4 +84,16 @@ verdocs-field-dropdown .settings-icon svg {
 }
 verdocs-field-dropdown .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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

@@ -51,7 +51,8 @@ export class VerdocsFieldDropdown {
         if (done) {
             return h(Host, { class: { done } }, value);
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("label", null, label), 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.value, selected: option.value === value }, option.label)))), 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) => {
+        // TODO: Remove as any when JS SDK is updated
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("label", null, label), 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.id === value }, option.label)))), 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-initial/verdocs-field-initial.css

@@ -98,4 +98,16 @@ verdocs-field-initial .settings-icon svg {
 }
 verdocs-field-initial .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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

@@ -79,4 +79,16 @@ verdocs-field-payment .settings-icon svg {
 }
 verdocs-field-payment .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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;
@@ -125,4 +125,16 @@ verdocs-field-radio .settings-icon svg {
 }
 verdocs-field-radio .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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.css

@@ -98,4 +98,16 @@ verdocs-field-signature .settings-icon svg {
 }
 verdocs-field-signature .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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

@@ -92,4 +92,16 @@ verdocs-field-textarea .settings-icon svg {
 }
 verdocs-field-textarea .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

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

@@ -117,4 +117,16 @@ verdocs-field-textbox .settings-icon svg {
 }
 verdocs-field-textbox .settings-icon:hover {
   opacity: 1;
+}
+
+@keyframes verdocs-field-pulse {
+  0% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+  50% {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  100% {
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 }

package/dist/collection/components/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -130,9 +130,9 @@ export class VerdocsTemplateFieldProperties {
         });
     }
     cleanupOptions() {
-        this.options = [...this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.value || '').trim() !== '')];
-        if (!this.options.find(opt => !opt.id && !opt.value)) {
-            this.options = [...this.options, { id: '', value: '' }];
+        this.options = [...this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.label || '').trim() !== '')];
+        if (!this.options.find(opt => !opt.id && !opt.label)) {
+            this.options = [...this.options, { id: '', label: '' }];
         }
     }
     render() {
@@ -170,9 +170,7 @@ export class VerdocsTemplateFieldProperties {
                     .toLowerCase()
                     .replace(/[^a-z0-9]/g, '');
                 this.dirty = true;
-            } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off",
-            // helpText="Placeholder to display if the field is empty."
-            placeholder: "Placeholder...", onInput: (e) => {
+            } }))), ['textbox', 'textarea'].includes(this.type) && (h("div", { class: "row", style: { marginTop: '10px', marginBottom: '10px' } }, h("verdocs-text-input", { id: "verdocs-field-placeholder", label: "Placeholder", value: this.placeholder, autocomplete: "off", placeholder: "Placeholder...", onInput: (e) => {
                 this.placeholder = e.target.value;
                 this.dirty = true;
             } }))), h("div", { class: "row", style: { marginTop: '15px', marginBottom: '15px' } }, h("label", { htmlFor: "verdocs-is-required", class: "input-label" }, "Required"), h("verdocs-checkbox", { id: "verdocs-is-required", name: "is-required", checked: this.required, value: "on", onInput: (e) => {
@@ -182,8 +180,8 @@ export class VerdocsTemplateFieldProperties {
                 this.options[index].id = e.target.value;
                 this.dirty = true;
                 this.cleanupOptions();
-            } }), h("verdocs-text-input", { id: `verdocs-option-value-${option.id}`, value: option.value, placeholder: "Display value", onInput: (e) => {
-                this.options[index].value = e.target.value;
+            } }), h("verdocs-text-input", { id: `verdocs-option-label-${option.id}`, value: option.value, placeholder: "Display label", onInput: (e) => {
+                this.options[index].label = e.target.label;
                 this.dirty = true;
                 this.cleanupOptions();
             } }), h("button", { innerHTML: TrashIcon, class: "remove-button", onClick: () => {

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

@@ -259,7 +259,7 @@ export class VerdocsTemplateFields {
                 width,
                 height,
                 multiline: false,
-                options: this.placing === 'radio' ? [{ value: 'option-1', label: 'Option 1' }] : [],
+                options: this.placing === 'radio' ? [{ id: 'option-1', label: 'Option 1' }] : [],
             };
             console.log('[FIELDS] Will save new field', field);
             const saved = await createField(this.endpoint, this.templateId, field);

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-recipient-summary2.js

@@ -4,7 +4,7 @@ import { g as getEnvelopeStore } from './EnvelopeStore.js';
 import { S as SDKError } from './errors.js';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
-const verdocsEnvelopeRecipientSummaryCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-recipient-summary{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-recipient-summary .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-summary .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-summary .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-summary .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-summary .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-summary .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-summary .summary-recipient .recipient-link{width:120px;padding:0 16px;font-weight:500;margin:0 0 0 8px;text-align:center;font-size:0.875rem;border-radius:100%;color:rgb(55, 65, 81);line-height:1.25rem;background-color:#d8d8d8;border:2px solid rgb(156, 163, 175)}verdocs-envelope-recipient-summary .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-summary .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-summary .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-summary .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-summary .buttons verdocs-button button{width:100%}";
+const verdocsEnvelopeRecipientSummaryCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-envelope-recipient-summary{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:100000;position:fixed;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-family:\"Inter\", \"Barlow\", sans-serif;background-color:rgba(0, 0, 0, 0.4980392157)}verdocs-envelope-recipient-summary .summary-content{width:600px;display:-ms-flexbox;display:flex;max-width:90%;font-size:18px;-ms-flex:0 0 600px;flex:0 0 600px;border-radius:6px;background:#ffffff;-ms-flex-direction:column;flex-direction:column;padding:30px 20px 20px}verdocs-envelope-recipient-summary .summary-content .summary-title{font-size:20px;font-weight:700;margin:0 0 10px 0;color:#33364b}verdocs-envelope-recipient-summary .summary-recipient{display:-ms-flexbox;display:flex;color:#33364b;margin:8px 0 24px 0;-ms-flex-direction:column;flex-direction:column}verdocs-envelope-recipient-summary .summary-recipient .role-name{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;font-size:14px;font-weight:600;margin:0 0 8px 0;color:#092c4c}verdocs-envelope-recipient-summary .summary-recipient .role-info{gap:5px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end}verdocs-envelope-recipient-summary .summary-recipient .role-full-name{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;border-radius:4px;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-summary .summary-recipient .recipient-link{width:120px;padding:0 16px;font-weight:500;margin:0 0 0 8px;text-align:center;font-size:0.875rem;border-radius:100%;color:rgb(55, 65, 81);line-height:1.25rem;background-color:#d8d8d8;border:2px solid rgb(156, 163, 175)}verdocs-envelope-recipient-summary .summary-recipient .link-wrapper{gap:5px;display:-ms-flexbox;display:flex;margin:4px 0 0 0;-ms-flex-direction:row;flex-direction:row}verdocs-envelope-recipient-summary .summary-recipient .link-wrapper .link{-ms-flex:1;flex:1;height:34px;display:-ms-flexbox;display:flex;font-size:16px;padding:0 12px;overflow:hidden;border-radius:4px;-ms-flex-align:center;align-items:center;white-space:nowrap;text-overflow:ellipsis;border:1px solid #cccccc;background:rgb(249, 250, 251)}verdocs-envelope-recipient-summary .buttons{display:-ms-flexbox;display:flex;-webkit-column-gap:15px;-moz-column-gap:15px;column-gap:15px;margin:10px 0 0 0;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-envelope-recipient-summary .buttons verdocs-button{-ms-flex:0 0 120px;flex:0 0 120px;margin-left:10px;white-space:nowrap}verdocs-envelope-recipient-summary .buttons verdocs-button button{width:100%}";
 const VerdocsEnvelopeRecipientSummaryStyle0 = verdocsEnvelopeRecipientSummaryCss;
 
 const VerdocsEnvelopeRecipientSummary = /*@__PURE__*/ proxyCustomElement(class VerdocsEnvelopeRecipientSummary extends HTMLElement {

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) });

package/dist/components/verdocs-field-attachment2.js

@@ -13,7 +13,7 @@ import { d as defineCustomElement$3 } from './verdocs-template-field-properties2
 import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
 import { d as defineCustomElement$1 } from './verdocs-upload-dialog2.js';
 
-const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled svg{opacity:0.5}verdocs-field-attachment.disabled svg span{cursor:inherit}verdocs-field-attachment .attach{cursor:inherit;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-attachment.required .attach{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}";
+const verdocsFieldAttachmentCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-attachment{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;width:24px;height:24px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left}verdocs-field-attachment label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-attachment svg{width:16px;height:16px}verdocs-field-attachment.disabled svg{opacity:0.5}verdocs-field-attachment.disabled svg span{cursor:inherit}verdocs-field-attachment .attach{cursor:inherit;width:24px;height:24px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}verdocs-field-attachment.required .attach{border:1px solid #cc0000}verdocs-field-attachment.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-attachment verdocs-button-panel{top:1px;left:-19px;opacity:0.5;z-index:1000;cursor:pointer;position:absolute;-webkit-transform:scale(0.6);transform:scale(0.6)}verdocs-field-attachment verdocs-button-panel[data-active],verdocs-field-attachment verdocs-button-panel:hover{opacity:1}verdocs-field-attachment verdocs-button-panel .icon svg{fill:#333333}verdocs-field-attachment verdocs-button-panel .icon:hover svg{fill:#000000}verdocs-field-attachment .settings-icon{position:absolute;top:-3px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-attachment .settings-icon svg{fill:#707ae5}verdocs-field-attachment .settings-icon:hover{opacity:1}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";
 const VerdocsFieldAttachmentStyle0 = verdocsFieldAttachmentCss;
 
 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>`;
@@ -65,6 +65,7 @@ const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class VerdocsFie
         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();