@verdocs/web-sdk 4.2.118 → 4.2.121

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

@@ -15,6 +15,7 @@ export class VerdocsFieldAttachment {
         this.handleUploadNext = (e) => {
             var _a;
             console.log('Upload next', e);
+            this.dialogOpen = false;
             this.selectedFile = e.detail[0];
             (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
         };
@@ -31,9 +32,14 @@ export class VerdocsFieldAttachment {
         this.showingProperties = false;
         this.dialogOpen = false;
         this.selectedFile = null;
+        this.focused = false;
     }
     async focusField() {
-        this.inputEl.focus();
+        // Our input field is fake, so we fake the flash too
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
     }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
@@ -53,29 +59,18 @@ export class VerdocsFieldAttachment {
     }
     handleShow() {
         this.dialogOpen = true;
-        // this.dialog = document.createElement('verdocs-upload-dialog');
-        // this.dialog.open = true;
-        // this.dialog.existingFile = {name: 'image.png', size: 1000, type: 'image/png', lastModified: Date.now(), data: ''};
-        // this.dialog.addEventListener('exit', () => this.dialog?.remove());
-        // this.dialog.addEventListener('remove', () => this.remove?.emit());
-        // document.addEventListener('next', (e: any) => {
-        //   console.log('attach onNext', e.detail[0]);
-        //   this.selectedFile = e.detail[0];
-        //   this.attached?.emit(e.detail[0]);
-        //   this.dialog.open = false;
-        // });
-        // document.body.append(this.dialog);
     }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { templateid, fieldname = '', editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', value = '', label = '' } = field || {};
+        console.log('Rendering attachment', field);
+        const { required = false, role_name = '', value = '', label = '', settings = {} } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         const hasFile = value || !!this.selectedFile;
         if (done) {
             return (h(Host, { class: { done } }, h("div", { class: "attach", innerHTML: hasFile ? AttachedIcon : PaperclipIcon })));
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("label", null, label), h("div", { class: "attach", 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) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("div", { class: "attach", 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-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -86,12 +81,9 @@ export class VerdocsFieldAttachment {
                 var _a;
                 (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
                 return this.hideSettingsPanel();
-            }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' }))))), this.dialogOpen && (h("verdocs-upload-dialog", {
-            // existingFile={{name: 'image.png', size: 1000, type: 'image/png', lastModified: Date.now(), data: ''}}
-            onNext: e => this.handleUploadNext(e), onExit: () => (this.dialogOpen = false), onRemove: e => {
+            }, helpText: 'Attachments allow the user to attach their own documents (e.g. resumes or disclosures) to a signing flow.' }))))), this.dialogOpen && (h("verdocs-portal", null, h("verdocs-upload-dialog", { existingFile: settings, onNext: e => this.handleUploadNext(e), onExit: () => (this.dialogOpen = false), onRemove: e => {
                 console.log('remove', e);
-            }
-        }))));
+            } })))));
     }
     static get is() { return "verdocs-field-attachment"; }
     static get originalStyleUrls() {
@@ -296,7 +288,8 @@ export class VerdocsFieldAttachment {
         return {
             "showingProperties": {},
             "dialogOpen": {},
-            "selectedFile": {}
+            "selectedFile": {},
+            "focused": {}
         };
     }
     static get events() {

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

@@ -20,9 +20,14 @@ export class VerdocsFieldDropdown {
         this.yscale = 1;
         this.pagenumber = 1;
         this.showingProperties = false;
+        this.focused = false;
     }
     async focusField() {
-        this.el.focus();
+        // Our input field is fake, so we fake the flash too
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
     }
     handleChange(e) {
         this.fieldChange.emit(e.target.value);
@@ -44,15 +49,14 @@ export class VerdocsFieldDropdown {
         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, focused, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const { required = false, role_name = '', value = '', label = '', options = [] } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value);
         }
-        // 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) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), h("select", { disabled: disabled, 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: () => {
@@ -244,7 +248,8 @@ export class VerdocsFieldDropdown {
     }
     static get states() {
         return {
-            "showingProperties": {}
+            "showingProperties": {},
+            "focused": {}
         };
     }
     static get events() {

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

@@ -20,6 +20,9 @@ verdocs-field-radio {
   transform-origin: bottom left;
   border-radius: 100%;
 }
+verdocs-field-radio.focused {
+  animation: verdocs-field-pulse 0.4s 1;
+}
 verdocs-field-radio svg {
   margin-top: 4px;
 }

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

@@ -22,6 +22,14 @@ export class VerdocsFieldRadio {
         this.yscale = 1;
         this.pagenumber = 1;
         this.showingProperties = false;
+        this.focused = false;
+    }
+    async focusField() {
+        // Our input field is fake, so we fake the flash too
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
     }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
@@ -40,7 +48,7 @@ export class VerdocsFieldRadio {
         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, focused, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const { name, required = false, role_name = '', label = '', group = '', value = false } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
@@ -50,7 +58,7 @@ export class VerdocsFieldRadio {
         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: 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) => {
+        return (h(Host, { class: { required, disabled, done, focused }, 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: () => {
@@ -242,7 +250,8 @@ export class VerdocsFieldRadio {
     }
     static get states() {
         return {
-            "showingProperties": {}
+            "showingProperties": {},
+            "focused": {}
         };
     }
     static get events() {
@@ -286,6 +295,23 @@ export class VerdocsFieldRadio {
     }
     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/templates/verdocs-template-card/verdocs-template-card.js

@@ -12,7 +12,7 @@ export class VerdocsTemplateCard {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '764d4b13847b9248b54f75b415d7aa9bd47f1a0e' }, h("span", { key: '63e24c019fa23f00dd40b251fe89cdf720df9994', class: "name" }, this.template.name), h("span", { key: 'a709d0cf41957ba84ccbd5b58c63ecaec41272d5', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: '33a685839d160dc1f8cea2ede8784878a34cca13' }), h("div", { key: '0e08647c71b9245cfd1cb372c4dbe44805cb98db', class: "controls" }, h("div", { key: '42763e333948034dbf73e186dfdc4ba82068d399', class: "control" }, h("span", { key: '3ffcc3c8c3c766fa2d8a4a617373223bffab5768', class: "icon", innerHTML: StarIcon }), h("span", { key: 'e1bdfa83c6764f1522e87011d19d65dee70492b8', class: "value" }, this.template.star_counter)), h("div", { key: '05f132e36844a277a4bf619248d4f1405f5175a6', class: "control secondary" }, h("span", { key: '88615f3a8413a68132098961898ceed4d369d9b1', class: "icon", innerHTML: PagesIcon }), h("span", { key: 'd35c7465d76f88a8fd29045d4ea18b9dd6031667', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: '179a4acabb579ea1c52793c4681f0dec2947800f', class: "control secondary" }, h("span", { key: '3d5de3e3d320eb3209aa5b8809d06613fe24da7c', class: "icon", innerHTML: EmailIcon }), h("span", { key: 'f2386b02c0562d8dc02bd2508c5a56059616d2c7', class: "value" }, this.template.counter)), h("span", { key: 'd98e1df83d33b1aa258f4bb92361dd4dc119269f', class: "additional-controls", innerHTML: ActionsIcon }))));
+        return (h(Host, { key: '3e5011cab3a4e78b92e9c2565f40d304ad334ed6' }, h("span", { key: '65ae319e5f2c07d6ad30dc7e1ef797d7d1f45e34', class: "name" }, this.template.name), h("span", { key: '81078cc46080d7417f3a2aa2a87f62787867ab7d', class: "org-name" }, ((_a = this.template.organization) === null || _a === void 0 ? void 0 : _a.name) || 'Public'), h("hr", { key: 'e35365811650f21862ebc87e89015c1c044f65cc' }), h("div", { key: '9d7e0b7a9e09be59890df0b8655f1ad74b8aadc9', class: "controls" }, h("div", { key: '24e402c45e499969b3f039010a730b7e22e5eb82', class: "control" }, h("span", { key: '06891917e493b9902f141acf3c906d9f2dfb98fc', class: "icon", innerHTML: StarIcon }), h("span", { key: '6599c695f7f5e1798254a16e1e209afe1768cd9d', class: "value" }, this.template.star_counter)), h("div", { key: '868b45b247a1e613caa0ca20270435ecfc52032d', class: "control secondary" }, h("span", { key: 'c0c308c9762ed5ada2456d69697dc5b0295f257c', class: "icon", innerHTML: PagesIcon }), h("span", { key: 'f851ea648cd5115798937af1d9d12671410e3f5b', class: "value" }, ((_d = (_c = (_b = this.template) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1)), h("div", { key: '3c24408d7b9cd968d721cd5360a87f7d66d0f02a', class: "control secondary" }, h("span", { key: '12a94b8fc7850db8ab535161abd7003ddb8f5eca', class: "icon", innerHTML: EmailIcon }), h("span", { key: '544d6b2ba82c971ba46649fa45d044293a89ca07', class: "value" }, this.template.counter)), h("span", { key: '62c64a478015d8edd079272405a366fc117dafea', class: "additional-controls", innerHTML: ActionsIcon }))));
     }
     static get is() { return "verdocs-template-card"; }
     static get originalStyleUrls() {

package/dist/collection/components/templates/verdocs-template-document-page/verdocs-template-document-page.js

@@ -94,7 +94,7 @@ export class VerdocsTemplateDocumentPage {
     }
     render() {
         const height = `${this.renderedHeight}px`;
-        return (h(Host, { key: 'a0d656b86f18762601961c420ab39fb439c3ca7e', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
+        return (h(Host, { key: '4c35b1d1d350e3c16813170b0421d888aaf76a4d', id: `${this.containerId}`, style: { height, flex: `0 0 ${height}` } }, this.layers.map(layer => layer.type === 'div' ? (h("div", { class: "verdocs-template-document-page-layer", id: `${this.containerId}-${layer.name}`, style: { height } }, layer.name === 'controls' &&
             this.fieldStore
                 .get('fields')
                 .filter(field => field && field.page === this.pageNumber)

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

@@ -111,19 +111,17 @@ export class VerdocsTemplateFields {
             this.placing = null;
         }
     }
-    async handleFieldChange(field, e, optionId) {
-        console.log('[FIELDS] handleFieldChange', field, e, optionId);
-    }
+    // async handleFieldChange(field: ITemplateField, e: any, optionId?: string) {
+    //   console.log('[FIELDS] handleFieldChange', field, e, optionId);
+    // }
     attachFieldAttributes(pageInfo, field, el) {
-        el.addEventListener('input', e => this.handleFieldChange(field, e));
-        el.addEventListener('settingsChanged', (e) => {
+        // el.addEventListener('input', e => this.handleFieldChange(field, e));
+        el.addEventListener('settingsChanged', () => {
             var _a, _b;
-            console.log('Settings changed', e.detail);
             (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'added-field' });
         });
         el.addEventListener('deleted', () => {
             var _a, _b;
-            console.log('[FIELDS] Deleted', this, field);
             el.remove();
             (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
         });
@@ -172,7 +170,7 @@ export class VerdocsTemplateFields {
         updateCssTransform(event.target, 'translate', `${newX}px, ${newY}px`);
     }
     async handleMoveEnd(event) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const name = event.target.getAttribute('fieldname');
         const option = +(event.target.getAttribute('option') || '0');
         const field = this.fieldStore.get('fields').find(field => field.name === name);
@@ -181,19 +179,33 @@ export class VerdocsTemplateFields {
             return;
         }
         const pageNumber = event.target.getAttribute('pagenumber');
-        const { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
+        let { naturalWidth = 612, naturalHeight = 792, renderedHeight = 792 } = this.cachedPageInfo[pageNumber];
         const clientRect = event.target.getBoundingClientRect();
         const parent = event.target.parentElement;
         const parentRect = parent.getBoundingClientRect();
         const width = field.width || defaultWidth(field.type);
         const height = field.height || defaultHeight(field.type);
-        // These two being backwards is not a mistake. Left measures "over" from the left (positive displacement) while bottom measures
-        // "up" from the bottom (negative displacement).
+        // These two being backwards is not a mistake. Left measures "over" from the left
+        // (positive displacement) while bottom measures "up" from the bottom (negative displacement).
         const newX = Math.max(clientRect.left - parentRect.left, 0);
-        const newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
+        let newY = Math.max(renderedHeight - (parentRect.bottom - clientRect.bottom), 0);
+        console.log('drop', { pageNumber, newX, newY });
+        let newPageNumber = parseInt(pageNumber);
+        if (newY > renderedHeight) {
+            newPageNumber = Math.min(newPageNumber + 1, ((_d = (_c = (_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.pages) || 1);
+            newY -= renderedHeight;
+            renderedHeight = this.cachedPageInfo[newPageNumber].renderedHeight;
+            console.log('Next page', { newPageNumber, newY, renderedHeight });
+        }
+        else if (newY < 0) {
+            newPageNumber = Math.max(newPageNumber - 1, 1);
+            renderedHeight = this.cachedPageInfo[newPageNumber].renderedHeight;
+            newY += renderedHeight;
+            console.log('Next page', { newPageNumber, newY, renderedHeight });
+        }
         const { x, y } = this.viewCoordinatesToPageCoordinates(newX, newY, pageNumber, naturalWidth - width, naturalHeight - height);
         try {
-            const params = { x, y };
+            const params = { x, y, page: newPageNumber };
             console.log('[FIELDS] Will update', name, y, option, params);
             const newFieldData = await updateField(this.endpoint, this.templateId, name, params);
             console.log('[FIELDS] Updated', newFieldData);
@@ -201,12 +213,12 @@ export class VerdocsTemplateFields {
             event.target.removeAttribute('posX');
             event.target.removeAttribute('posY');
             removeCssTransform(event.target);
-            (_a = this.templateUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template: (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state, event: 'updated-field' });
+            (_e = this.templateUpdated) === null || _e === void 0 ? void 0 : _e.emit({ endpoint: this.endpoint, template: (_f = this.templateStore) === null || _f === void 0 ? void 0 : _f.state, event: 'updated-field' });
         }
         catch (e) {
             VerdocsToast('Error updating field, please try again later', { style: 'error' });
             console.log('[FIELDS] Error updating field', e);
-            (_c = this.sdkError) === null || _c === void 0 ? void 0 : _c.emit(new SDKError(e.message, (_d = e.response) === null || _d === void 0 ? void 0 : _d.status, (_e = e.response) === null || _e === void 0 ? void 0 : _e.data));
+            (_g = this.sdkError) === null || _g === void 0 ? void 0 : _g.emit(new SDKError(e.message, (_h = e.response) === null || _h === void 0 ? void 0 : _h.status, (_j = e.response) === null || _j === void 0 ? void 0 : _j.data));
             event.target.removeAttribute('posX');
             event.target.removeAttribute('posY');
             removeCssTransform(event.target);

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

@@ -116,34 +116,34 @@ export class VerdocsTemplateRoleProperties {
     }
     render() {
         const hasFields = this.fieldStore.get('fields').some(field => field.role_name === this.roleName);
-        return (h(Host, { key: 'a1e71e2e85110fc84f4639a249a869effa03059c' }, h("div", { key: 'e5d573e2e8782ac53a34caa8a861e31e5011a8e0', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: 'e185f3b840b6ac8922672f5cdafbd2a0215e820f', class: "dialog" }, h("form", { key: '8d98eae65f1672e89db98aed339533f5723d544b', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: 'e5659b7b89e51cf6a7e1015ff962730009888113', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
+        return (h(Host, { key: 'c54a0b5c84e2ca6eba28bccd0ed7dbaf61b9318e' }, h("div", { key: 'ed724b07e6bd402c2c8f593e4f0ae5eeb7af6f2a', class: "background-overlay", onClick: e => this.handleCancel(e) }, h("div", { key: '7372ec9e048dde505c4f59f30d4bf94c9d206e2c', class: "dialog" }, h("form", { key: '2fc19ec7adb1fafa2f501698a6e61025fdc31749', onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("verdocs-text-input", { key: 'd11fa702e1b5ae5ffb300b9d89c437ac6ba419c1', id: "verdocs-role-name", label: "Role Name", value: this.name, autocomplete: "off", disabled: hasFields, helpText: hasFields
                 ? 'This role has fields assigned and can no longer be renamed.'
                 : 'A unique name to identify the role in the workflow. Submitted data will also be tagged with this value.', placeholder: "Role Name...", onInput: (e) => {
                 this.name = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: 'b891fcf91ddb5dda364c2906c24d3d8a133ba959', class: "row" }, h("div", { key: 'e7c4510014a59a4c77cc178b535082d8a4048365', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: '1cc4b4a1e3edbb40ba60ef5d35b4becde48d5a17', value: this.type, options: [
+            } }), h("div", { key: 'e9558475d3e2a193ac753402e4df7fd4c975bc9d', class: "row" }, h("div", { key: 'ecb28611e04310a9d802f597ef4bc3a4b7b53f4d', class: "input-label" }, "Type:"), h("verdocs-select-input", { key: 'a9dc9ae0fd6ac107ec9a79fc5a77b2b4f0286808', value: this.type, options: [
                 { label: 'Signer', value: 'signer' },
                 { label: 'CC', value: 'cc' },
                 { label: 'Approver', value: 'approver' },
             ], onInput: (e) => {
                 this.type = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-help-icon", { key: '69b3ffb497857debafc245aeb263d3e1cdbcac11', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: '15ef892258e97a4397ce6b05d13e999937112cce', id: "verdocs-recipient-first", label: "First Name", value: this.first_name, autocomplete: "off", helpText: "The recipient's first name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "First Name...", onInput: (e) => {
+            } }), h("verdocs-help-icon", { key: '56b67267f62756e09f7b02d2ebbd5b3cc20e228f', text: "Most participants are Signers. CC roles are notified when documents are signed, but have no other actions. Approvers get notified when signing is completed to perform a final review." })), h("verdocs-text-input", { key: '29f2c4124c9fc9a126f73088f8f7f8056f4c4323', id: "verdocs-recipient-first", label: "First Name", value: this.first_name, autocomplete: "off", helpText: "The recipient's first name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "First Name...", onInput: (e) => {
                 this.first_name = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: '0319a7fe5f3bd910ac32cb327ba764e209c08a6c', id: "verdocs-recipient-first", label: "Last Name", value: this.last_name, autocomplete: "off", helpText: "The recipient's last name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Last Name...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: '512457a0c6e9abf29b6f4e8403deef8ee833dec4', id: "verdocs-recipient-first", label: "Last Name", value: this.last_name, autocomplete: "off", helpText: "The recipient's last name, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Last Name...", onInput: (e) => {
                 this.last_name = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: '2848ae472e3c0b2bf634a235cb72e89bd2d409b0', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: 'b69cc6d65593ecd139748a6b39e33f13f38ed3be', id: "verdocs-recipient-email", label: "Email", value: this.email, autocomplete: "off", helpText: "The recipient's email address, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Email Address...", onInput: (e) => {
                 this.email = e.target.value;
                 this.dirty = true;
-            } }), h("verdocs-text-input", { key: 'd25f31ed90028ca4cd4f7b1660a0988be3ecf112', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
+            } }), h("verdocs-text-input", { key: '931910a385e6b54ae33897bde3c344a4643089f6', id: "verdocs-recipient-phone", label: "Phone", value: this.phone, autocomplete: "off", helpText: "The recipient's phone number, if it will always stay the same. Leave blank to supply this value later, when each new envelope is created from the template.", placeholder: "Phone Number...", onInput: (e) => {
                 this.phone = e.target.value;
                 this.dirty = true;
-            } }), h("div", { key: '1c569da3207a3d46bb3a0f417cf1488d4c4ebfa6', class: "row" }, h("div", { key: 'daa2968dcba6cba37b84d57fd682f60a1dd5adbc', class: "input-label" }, "May Delegate:"), h("div", { key: '15b44b67d4b554bb1f6546746b0d60b78b67a3ee', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '6f6046bd9791923328c234f7394ecacd674a1926', checked: this.delegator, onInput: (e) => {
+            } }), h("div", { key: '380809846d4cc9a93737e244c60f2455dc3c451b', class: "row" }, h("div", { key: 'f2f518c482eed372f261eb80c4678f839ec23c9c', class: "input-label" }, "May Delegate:"), h("div", { key: 'ee8816cd6b1268c8c62c793fcd500f45d676f1d6', class: "checkbox-wrapper" }, h("verdocs-checkbox", { key: '36958e4cdfbc38ea934fe19fb3509e3107aa015f', checked: this.delegator, onInput: (e) => {
                 this.delegator = e.target.checked;
                 this.dirty = true;
-            } })), h("verdocs-help-icon", { key: 'ad0ffedf4341761786cd3764f6b9794a97211dc9', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '496ee13c6b658687975d58978a000f9eb555a9c3', class: "buttons" }, h("button", { key: 'fa00b8f96af35ba7603ef660dd596cee1c7d3e21', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '7866c12a9e3d073aaef509324de7c02788d117a9', style: { flex: '1' } }), h("verdocs-button", { key: '699bda4fd7cad7cd02affd6e76fdf00f360e940b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: 'df0476c8601ec5a0bd84ab7166ea03a323ff68f5', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
+            } })), h("verdocs-help-icon", { key: '44b92c48e4604fb543ff5028528bb761c348091e', text: "If enabled, this recipient may delegate their actions to another individual." })), h("div", { key: '855c97f472fe9ec7e230cb3687bbb43ad0f3d893', class: "buttons" }, h("button", { key: '09b8562821002359fa9c3d5e6281b58e2eea5ee5', class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { key: '65fdeeecbdc7a34bee5d1c72dcc9ab9630e6adfa', style: { flex: '1' } }), h("verdocs-button", { key: '1dcf66c59be34535f3af1e96cc15816ea097546b', size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { key: '0eb80af6e8d388eeb6563db768bc5511a14cafb8', size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))))));
     }
     static get is() { return "verdocs-template-role-properties"; }
     static get originalStyleUrls() {

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

@@ -61,7 +61,7 @@ export class VerdocsTemplateSender {
         });
     }
     render() {
-        return (h(Host, { key: 'e51de4bd58287341b8b1f5679c03ea8f388aeaed' }, h("div", { key: 'a93c06f123a78217478fe16299fa4345863d8b53', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '78a9f18025bbad871be472a12ec3f27665700be4', class: "dialog" }, h("div", { key: '4227eb9c4f23342c0d7b40b4c4cc77878f48f3ba', class: "options" }, h("div", { key: '041a7ec81a81653c650924323a6ad6597d2c46f5', class: "option" }, h("verdocs-radio-button", { key: 'e98602966885fd7a5119d4c5acb3d3fecaf752ad', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '3f7fb8069d798329020eca837db6431bd1d80ba2', class: "description" }, h("div", { key: 'cb1da501fd3cce4f0bdecdb7992d1889caded1a7', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '837bfdb94c53c951fd2669bceb25947a0cec0f98', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: '05a5a34875d6103fbec3ac0a9c41d001abcf73cb', class: "option" }, h("verdocs-radio-button", { key: '15a5daa447b6697c3ccc6621802451b10ab18cb7', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: 'a4c8e2fce754de4f4fb65a983dcd6a73b3c4cf90', class: "description" }, h("div", { key: '60bc31ca29d6c9554c4b20202a848e0eb742914e', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: 'c0cf14c6ba072ed36b039facf59b749b25fa80ed', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: 'd3aa2900be1c02c82859c46e62554b0ea3bd0382', class: "option" }, h("verdocs-radio-button", { key: 'edab1a25a81388f237ab187cad4ebfecbfd8f5b7', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: '05006c432b108586048d8e3a63f3b506f184dab3', class: "description" }, h("div", { key: '46d929d03d0ac453bf75e5bb7785373f741f2b47', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: 'e02f6a03e7e5c46141ecdf9aa50b4047eced450e', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'd6a67519982feab0e5ef3131349ca53a4312597f', class: "option" }, h("verdocs-radio-button", { key: '9eef88a57e5e2653a0a6e06c8d7d30d6a56ff9ec', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: '725275a9b3a1d702328aed52f831eaf28827d399', class: "description" }, h("div", { key: '85ee3e891b241048cf2bcc05812fc221faf21b28', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: '960eb5345948e8a4adef466138d0cc62b49b9406', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: 'd7b71dbd2019e20d2a734c737a21f9097b9dcf60', class: "option" }, h("verdocs-radio-button", { key: 'f99c206e998ed717754b2ee7d51ba614f7774d4d', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: 'aca94259df3bf9904cbc51a3996699df3aeba58c', class: "description" }, h("div", { key: '123b4a4d607575fb116912f74318a74e593c9da8', class: "name" }, "Me"), h("verdocs-help-icon", { key: 'ef96de2bf38213c4ade608b8ef26576a86fbb8b9', text: "Only I can use this template." })))), h("div", { key: '44945452b32f23b58c4941ecd8b91284f5c85040', class: "buttons" }, h("verdocs-button", { key: 'e128593df73e4b1733ec15ebb70dcb6726319496', label: "Close", onClick: () => this.handleClose() }))))));
+        return (h(Host, { key: '67fca56fbc8af88952abcbf38e100924ef12450e' }, h("div", { key: '7aa3d03b7cf0a197c2c0b19f8095acff8f33b0c7', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '14ed1a78f60c2f9390f5b950bc367334bf3ba5ab', class: "dialog" }, h("div", { key: 'eadbe8d3794d0bbaef40c4cf66b2b4003470cff3', class: "options" }, h("div", { key: '4e55a553a7a543ba7d0d0f9b89cc079a29cbc23f', class: "option" }, h("verdocs-radio-button", { key: 'cd77756aff5201d3278a8bf8564842bfd77378b1', name: "template-sender", value: 'everyone', checked: this.sender === 'everyone', onInput: () => this.handleSelectSetting('everyone') }), h("div", { key: '65aa448d8011a4835762bda5350758353fb86554', class: "description" }, h("div", { key: '4811f42f5a2779834b8e0c0705b52bc4ea9071df', class: "name" }, "Anyone on the Web"), h("verdocs-help-icon", { key: '2738d5cbd942df36910ae33548dfda99b93114be', text: "Anyone can use this template. (Make its visibility is set to to 'Public' or 'Shared'.)" }))), h("div", { key: 'f316dd18967d795dc19973d46c0178d48b04cf3a', class: "option" }, h("verdocs-radio-button", { key: '06c9415f680dbe9eb06995ac46f3884ab341ca76', name: "template-sender", value: 'everyone_as_creator', checked: this.sender === 'everyone_as_creator', onInput: () => this.handleSelectSetting('everyone_as_creator') }), h("div", { key: '5f88f41c3eac901c01a996edeb21ef729d90dbf4', class: "description" }, h("div", { key: '4f6977dc538f073bf0eb24034ea9ec60e274169c', class: "name" }, "Anyone on the Web as me"), h("verdocs-help-icon", { key: 'a3d6246ae9288c701f50ecc73176c649962c3301', text: "Anyone can use this template on my behalf. (Make sure its visibility is set to 'Public' or 'Shared'.)" }))), h("div", { key: '00209bb46399d1e8630540a020db6a83acb80d70', class: "option" }, h("verdocs-radio-button", { key: 'b236c9613d1078151e4c0adea3767d095714276b', name: "template-sender", value: 'organization_member', checked: this.sender === 'organization_member', onInput: () => this.handleSelectSetting('organization_member') }), h("div", { key: '6335469dd6109b6b36eec21bfb344e2a94fa793e', class: "description" }, h("div", { key: '88cddc5dd229213d243e175c7bca422e67d84fc4', class: "name" }, "Anyone in my organization"), h("verdocs-help-icon", { key: 'e2f24e4d1c5af940e1c8860b7fd78eeb8a8367b4', text: "Anyone in my organization can use this template. (Make sure its visibility is set to 'Shared')" }))), h("div", { key: 'fcbfa21b9b5aad992a608b83cec6104bee2e410f', class: "option" }, h("verdocs-radio-button", { key: 'b31555051581c7eeedd012510053f29cee40b2d0', name: "template-sender", value: 'organization_member_as_creator', checked: this.sender === 'organization_member_as_creator', onInput: () => this.handleSelectSetting('organization_member_as_creator') }), h("div", { key: 'ca1941475808a7db037dafab17ff6c2fc6b40b1b', class: "description" }, h("div", { key: '6bca41574f92ce15eba532289db4ac2a5480c9f2', class: "name" }, "Anyone in my organization as me"), h("verdocs-help-icon", { key: '8e916441fcd37488e0061c49c0b91c88b9b7f467', text: "Anyone in my organization can use this template on my behalf. (Make sure its visibility is set to to 'Shared'.)" }))), h("div", { key: '2c32fb35cc221336e96cd07ff5e79971c26475c8', class: "option" }, h("verdocs-radio-button", { key: '2f86e27c50fb65632dd647e627621f163369ca2e', name: "template-sender", value: 'creator', checked: this.sender === 'creator', onInput: () => this.handleSelectSetting('creator') }), h("div", { key: '21cef2358038a2089c5a80f32f745530380cb5f0', class: "description" }, h("div", { key: 'ed173b10391c63d838d2a814de2d3c74a056a837', class: "name" }, "Me"), h("verdocs-help-icon", { key: 'c7f3204522f631e84d34f7f040bb73af50455196', text: "Only I can use this template." })))), h("div", { key: '4d26f9e23c3b3eed492a0782b324612ddd989325', class: "buttons" }, h("verdocs-button", { key: 'e65545f203f631214e5939946b95fbc14f37686a', label: "Close", onClick: () => this.handleClose() }))))));
     }
     static get is() { return "verdocs-template-sender"; }
     static get originalStyleUrls() {

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

@@ -38,7 +38,7 @@ export class VerdocsTemplateStar {
         });
     }
     render() {
-        return (h(Host, { key: '40bad1fc57171bcdffe69ff8f1c876813ff6cc78' }, h("div", { key: '656891e6efc6645d9d3638a9be48728529a078ad', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: '486526042ff5d20a37e7b8207c959d6ee2eede0a', class: "count" }, this.template.star_counter || '--')));
+        return (h(Host, { key: '9b776fbc0df8053116cf8c90abf92ca936e4aed3' }, h("div", { key: '4623b371e18334c1c88f8a2463c9cc48b308eedf', class: `star ${this.updating ? 'updating' : ''}`, innerHTML: this.template.star_counter ? SolidStarIcon : OutlineStarIcon, onClick: e => this.toggle(e) }), h("div", { key: 'd0f7d0d65266d1683a1fcd537cd4eda40e94b287', class: "count" }, this.template.star_counter || '--')));
     }
     static get is() { return "verdocs-template-star"; }
     static get originalStyleUrls() {

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

@@ -8,7 +8,7 @@ export class VerdocsTemplateTags {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b1adfd5844f2d5302e2fda6355d868a845005345' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
+        return (h(Host, { key: 'bae2503fd50b94ad99bfbb24f2abe5e6d5629e2e' }, (_a = this.tags) === null || _a === void 0 ? void 0 : _a.map(tag => (h("span", null, tag)))));
     }
     static get is() { return "verdocs-template-tags"; }
     static get originalStyleUrls() {

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

@@ -144,24 +144,24 @@ export class VerdocsTemplatesList {
         // In addition to the server query we also filter locally. This provides a faster UI update
         // while the onBlur re-queries the server for any new records that now qualify by the filter.
         const locallyFilteredTemplates = !this.localNameFilter ? this.templates : this.templates.filter(t => t.name.toLowerCase().includes(this.localNameFilter.toLowerCase()));
-        return (h(Host, { key: '7dc672029a1ec88a20c7ea019bdd80bd98b4e54d' }, h("div", { key: 'feb106c393aa87d7e4207679a3823fb5ceb0f8d0', class: "header" }, h("div", { key: 'c53a7346d4c485fda35c4ebe960e1e76c8a58d81', class: "filter" }, h("verdocs-text-input", { key: 'ba16ba49cce33494d5379751378061a2ed838762', id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
+        return (h(Host, { key: '898a88f10e4db5a0478c10370b9560e9ec2d2e25' }, h("div", { key: 'c4c2a4a0bff5ab4ca103377ae08d376b0951f9b6', class: "header" }, h("div", { key: '20f158444d4b919126800d546a54834128f7a44d', class: "filter" }, h("verdocs-text-input", { key: 'dbe2cbff9289957b4fd1ab37664d8c465502fb2e', id: "verdocs-filter-name", value: this.name, clearable: true, autocomplete: "off", placeholder: "Filter by Name...", onInput: (e) => (this.localNameFilter = e.target.value.trim()), onFocusout: (e) => {
                 var _a;
                 this.name = e.target.value.trim();
                 this.localNameFilter = e.target.value.trim();
                 (_a = this.changeName) === null || _a === void 0 ? void 0 : _a.emit(this.name);
-            } })), h("verdocs-quick-filter", { key: '2854a34cb955ed1e330234eac3303c1dbf90dff0', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
+            } })), h("verdocs-quick-filter", { key: '5fde3481a06af0d8fb407754178762d03dbeb2f2', label: "Sharing", value: this.sharing, options: SharingFilters, onOptionSelected: e => {
                 var _a;
                 this.sharing = e.detail.value;
                 (_a = this.changeSharing) === null || _a === void 0 ? void 0 : _a.emit(this.sharing);
-            } }), h("verdocs-quick-filter", { key: 'db872856578e8961bfce82e6ee3a8161100fff51', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
+            } }), h("verdocs-quick-filter", { key: 'a712ec2f941b30700b8fc8becd6e97d7be1311e2', label: "Starred", value: this.starred, options: StarredFilters, onOptionSelected: e => {
                 var _a;
                 this.starred = e.detail.value;
                 (_a = this.changeStarred) === null || _a === void 0 ? void 0 : _a.emit(this.starred);
-            } }), h("verdocs-quick-filter", { key: '7ff37f6760a422c30426247434f75f61c1403773', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
+            } }), h("verdocs-quick-filter", { key: '593d4b27e4939583864c799b77a7b3a81c99b2f0', label: "Sort By", value: this.sort, options: SortOptions, onOptionSelected: e => {
                 var _a;
                 this.sort = e.detail.value;
                 (_a = this.changeSort) === null || _a === void 0 ? void 0 : _a.emit(this.sort);
-            } }), this.loading && h("verdocs-spinner", { key: '5f957818a90efacab9f67e0a672bde9da0cc5fba', mode: "dark", size: 24 }), h("div", { key: '8c2cf92c197f2c76e9a2586eda4377042d851537', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
+            } }), this.loading && h("verdocs-spinner", { key: '6ee3d50355dabbd44a89b38f8239470a18ac9fa8', mode: "dark", size: 24 }), h("div", { key: 'd7601f4897a5322d0bd09e579c54de2a183fd622', style: { display: 'flex', flex: '1' } })), locallyFilteredTemplates.map(template => {
             const dateToShow = this.sort === 'created_at' ? 'created_at' : this.sort === 'updated_at' ? 'updated_at' : 'last_used_at';
             const date = template[dateToShow];
             const MENU_OPTIONS = [];
@@ -208,9 +208,9 @@ export class VerdocsTemplatesList {
                     var _a;
                     (_a = this.viewTemplate) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, template });
                 } }, h("div", { class: "inner" }, h("verdocs-template-star", { template: template, endpoint: this.endpoint }), h("div", { class: "spacer icon-spacer" }), h("div", { class: "name" }, template.name), h("div", { class: "spacer usage-spacer" }), h("div", { class: "usage" }, h("span", { innerHTML: EnvelopeIcon, title: "Usage Counter" }), template.counter || '--'), h("div", { class: "spacer last-used-spacer" }), h("div", { class: "last-used" }, dateToShow === 'created_at' && h("span", { innerHTML: CreatedIcon, title: "Created" }), dateToShow === 'updated_at' && h("span", { innerHTML: UpdatedIcon, title: "Last Updated" }), dateToShow === 'last_used_at' && h("span", { innerHTML: LastUsedIcon, title: "Last Used" }), date ? format(new Date(date), 'P') : 'Never'), h("div", { class: "spacer ownership-spacer" }), template.is_public && (h("div", { class: "ownership" }, h("span", { innerHTML: GlobeAltIcon }), " Public")), !template.is_public && !template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: LockClosedIcon }), " Private")), !template.is_public && template.is_personal && (h("div", { class: "ownership" }, h("span", { innerHTML: BuildingOfficeIcon }), " Shared")), h("verdocs-dropdown", { options: MENU_OPTIONS, onOptionSelected: e => this.handleOptionSelected(e.detail.id, template) }))));
-        }), !this.initiallyLoaded && (h("div", { key: '47313a9255707d50181d0211425c60085fa5583a' }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { key: '9bb8a3dd1a35a0c742284b8bb9c8bd4f03b19680', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.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: '8a712cf07d27722804ffa0984e2860b07e148e96' }, integerSequence(0, this.rowsPerPage).map(() => (h("div", { class: "template-placeholder" }))))), this.initiallyLoaded && !this.templates.length && h("div", { key: '41d59dffca16ffcfe601a06ac85d85534b02a415', class: "empty-text" }, "No matching templates found. Please adjust your filters and try again."), this.initiallyLoaded && this.templates.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)), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'dc67ae619c47deca58789f3495813b78d6c90070', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
+            } }))) : (h("div", null)), this.confirmDelete && (h("verdocs-ok-dialog", { key: '8a42405881f456dac853d2bb382277e4c7e7f0b7', heading: "Delete this Template?", message: "This operation cannot be undone.", onNext: () => this.deleteTemplate(this.confirmDelete), onExit: () => (this.confirmDelete = null), showCancel: true }))));
     }
     static get is() { return "verdocs-templates-list"; }
     static get originalStyleUrls() {

package/dist/collection/utils/utils.js

@@ -67,6 +67,7 @@ export const setControlStyles = (el, field, xScale, yScale) => {
 export const getControlStyles = (field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
     return {
+        zIndex: '100',
         width: `${width}px`,
         height: `${height}px`,
         position: 'absolute',

package/dist/components/format.js

@@ -80,7 +80,7 @@ const constructFromSymbol = Symbol.for("constructDateFrom");
 function constructFrom(date, value) {
   if (typeof date === "function") return date(value);
 
-  if (typeof date === "object" && constructFromSymbol in date)
+  if (date && typeof date === "object" && constructFromSymbol in date)
     return date[constructFromSymbol](value);
 
   if (date instanceof Date) return new date.constructor(value);
@@ -127,32 +127,8 @@ function constructFrom(date, value) {
  * //=> Tue Feb 11 2014 11:30:30
  */
 function toDate(argument, context) {
-  // [TODO] Use constructFrom here instead?
-  if (context) return context(argument);
-
-  const argStr = Object.prototype.toString.call(argument);
-
-  // Clone the date
-  if (typeof argument === "object" && constructFromSymbol in argument) {
-    return argument[constructFromSymbol](argument);
-  } else if (
-    argument instanceof Date ||
-    (typeof argument === "object" && argStr === "[object Date]")
-  ) {
-    // Prevent the date to lose the milliseconds when passed to new Date() in IE10
-    return new argument.constructor(+argument);
-  } else if (
-    typeof argument === "number" ||
-    argStr === "[object Number]" ||
-    typeof argument === "string" ||
-    argStr === "[object String]"
-  ) {
-    // TODO: Can we get rid of as?
-    return new Date(argument);
-  } else {
-    // TODO: Can we get rid of as?
-    return new Date(NaN);
-  }
+  // [TODO] Get rid of `toDate` or `constructFrom`?
+  return constructFrom(context || argument, argument);
 }
 
 let defaultOptions = {};
@@ -318,12 +294,10 @@ function getTimezoneOffsetInMilliseconds(date) {
 }
 
 function normalizeDates(context, ...dates) {
-  const normalize =
-    context ||
-    constructFrom.bind(
-      null,
-      dates.find((date) => typeof date === "object"),
-    );
+  const normalize = constructFrom.bind(
+    null,
+    context || dates.find((date) => typeof date === "object"),
+  );
   return dates.map(normalize);
 }
 
@@ -2266,14 +2240,13 @@ const formatters = {
 
   // Seconds timestamp
   t: function (date, token, _localize) {
-    const timestamp = Math.trunc(date.getTime() / 1000);
+    const timestamp = Math.trunc(+date / 1000);
     return addLeadingZeros(timestamp, token.length);
   },
 
   // Milliseconds timestamp
   T: function (date, token, _localize) {
-    const timestamp = date.getTime();
-    return addLeadingZeros(timestamp, token.length);
+    return addLeadingZeros(+date, token.length);
   },
 };
 
@@ -2721,7 +2694,7 @@ function format(date, formatStr, options) {
     defaultOptions.locale?.options?.weekStartsOn ??
     0;
 
-  const originalDate = toDate(date);
+  const originalDate = toDate(date, options?.in);
 
   if (!isValid(originalDate)) {
     throw new RangeError("Invalid time value");

package/dist/components/utils.js

@@ -88,6 +88,7 @@ const setControlStyles = (el, field, xScale, yScale) => {
 const getControlStyles = (field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
     return {
+        zIndex: '100',
         width: `${width}px`,
         height: `${height}px`,
         position: 'absolute',