@verdocs/web-sdk 4.2.124 → 4.2.127

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

@@ -81,7 +81,7 @@ export class VerdocsUploadDialog {
     render() {
         var _a;
         const existingFile = ((_a = this.existingFile) === null || _a === void 0 ? void 0 : _a.name) ? this.existingFile : null;
-        return (h(Host, { key: 'e7a5e6df6d936adbfe74ba8e212dfe79816b0c05' }, h("div", { key: 'b534d7c777b37af48c27498337b62daca283e22e', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '11967dfddc9da736bdf1957ee3743b1777dc971e', class: "upload-dialog-content" }, h("div", { key: 'ec967b175dfc6edffbfc57537f0a6c12f8cf3844', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '9e6ec10aeacb411d5fefada717b9d724520e0869' }, h("div", { key: '5b5cd3c87833d862fd361e84155c3622d51280d1', class: "current-label" }, "Current Attachment"), h("div", { key: '866c221a7b3bda742d336d2c111da02b8fd4a960', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '345302d3801fe2b0f2e69ed64d2cba8f42e57174', class: "attachment" }, h("div", { key: '7a9a948fa18aca0a99b76f089622113de7e24cee', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '5dced948f61febe18703583f7e4a3b9827782cff', class: "name" }, existingFile.name), h("div", { key: '9e715db7009c444ae2ebcdc2f7ac15e9165d2798', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'bf4a4796aeaa0d3a941299e482198c58acc26912', class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", { key: '73708b0cc4f5a17b25336546bc167500de6b7d33' }, "Drag and drop a ", !!existingFile && 'replacement', " here..."), h("p", { key: 'c8e0584a2816f73e0ded9a512d9a8a21482748d4' }, "- or -"), h("verdocs-button", { key: 'bde27f1ace37fcfe4c499f13d30078bded11415a', label: !!existingFile ? 'Replace file...' : 'Select a file...', onClick: () => this.handleSelectFile() }), h("input", { key: '7d9fa1cd9432bfa2929999f5f3f7bd5027ca07cf', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: 'ea91d6a64a82c89614aa1f925491d22569dd641a', class: "attachments" }, this.selectedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), !!this.errorMessage && h("div", { key: 'a1d49fc0d88dd44dacd75267f5fc1d3607c9ba1c', class: "error" }, this.errorMessage), h("div", { key: '2b195ca472b3490e6aa00559736db4760f5e822e', class: "buttons" }, h("verdocs-button", { key: '213c44025a3e7f3343c69ce4fcf880416d3c84f7', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'a7c12c9c0b497fec67f43dbe7fefb31700625724', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'e0c2be554a401f9a02ba8ca63b33ba11f02c836a', heading: "Delete Attachment?", message: "Are you sure you wish to delete this attachment? This action cannot be undone.", showCancel: true, onExit: e => {
+        return (h(Host, { key: 'e7a5e6df6d936adbfe74ba8e212dfe79816b0c05' }, h("div", { key: 'b534d7c777b37af48c27498337b62daca283e22e', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '11967dfddc9da736bdf1957ee3743b1777dc971e', class: "upload-dialog-content" }, h("div", { key: 'ec967b175dfc6edffbfc57537f0a6c12f8cf3844', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '9e6ec10aeacb411d5fefada717b9d724520e0869' }, h("div", { key: '5b5cd3c87833d862fd361e84155c3622d51280d1', class: "current-label" }, "Current Attachment"), h("div", { key: '866c221a7b3bda742d336d2c111da02b8fd4a960', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '345302d3801fe2b0f2e69ed64d2cba8f42e57174', class: "attachment" }, h("div", { key: '7a9a948fa18aca0a99b76f089622113de7e24cee', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '5dced948f61febe18703583f7e4a3b9827782cff', class: "name" }, existingFile.name), h("div", { key: '9e715db7009c444ae2ebcdc2f7ac15e9165d2798', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'bf4a4796aeaa0d3a941299e482198c58acc26912', class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", { key: '73708b0cc4f5a17b25336546bc167500de6b7d33' }, "Drag and drop your files here:"), h("p", { key: 'b4a07e8326d43f446eaecf13fd0f400fb17cd6bc', class: "subscript" }, "Supported files: PDF, Word"), h("verdocs-button", { key: '5bfb3c923be8b81cc658ed8e0c065e0b4173f223', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: 'c79faf14a271446bb49c5392a09da3f436c3ea38', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: '00d5e4e07d8f4d0dfd883ce28f14c54a8191ca87', class: "attachments" }, this.selectedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), !!this.errorMessage && h("div", { key: '4206cad3dcff0055fc5f3ea8e7c217ae33c63263', class: "error" }, this.errorMessage), h("div", { key: 'e6debad16cfbae400e8e0bd42b5a928a8a233f5a', class: "buttons" }, h("verdocs-button", { key: '9dc79a516fb2f49b30f958d875b2bef8c9d78aad', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '45bf5a77c30a2e562a7e56637dee743800b197da', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: '80a4428099ca88e49f84d20c5e36e54dc45be3c6', heading: "Delete Attachment?", message: "Are you sure you wish to delete this attachment? This action cannot be undone.", showCancel: true, onExit: e => {
                 // So we don't close the upload dialog
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -76,10 +76,13 @@ export class VerdocsPreview {
         }
         return (h(Host, null, (((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
             const pageNumbers = integerSequence(1, document.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: false, done: false, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
-                    { name: 'page', type: 'canvas' },
-                    { name: 'controls', type: 'div' },
-                ] })))));
+            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+                const pageSize = document.page_sizes[pageNumber];
+                return (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: false, done: false, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, onPageRendered: e => this.handlePageRendered(e), layers: [
+                        { name: 'page', type: 'canvas' },
+                        { name: 'controls', type: 'div' },
+                    ] }));
+            })));
         })));
     }
     static get is() { return "verdocs-preview"; }

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

@@ -248,6 +248,8 @@ export class VerdocsSign {
     async handleFieldChange(field, e) {
         const { value, checked } = e.target;
         switch (field.type) {
+            // TODO: Remove legacy type when no longer needed
+            case 'textarea':
             case 'textbox':
                 return this.saveFieldChange(field.name, { prepared: false, value });
             case 'checkbox': {
@@ -389,7 +391,7 @@ export class VerdocsSign {
             nextFocusedIndex = 0;
         }
         let nextRequiredField = emptyFields[nextFocusedIndex];
-        console.log('Next field', nextRequiredField);
+        console.log('Next field', nextRequiredField, emptyFields);
         // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
         let skips = 0;
         if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
@@ -406,8 +408,8 @@ export class VerdocsSign {
         if (nextRequiredField) {
             const id = getFieldId(nextRequiredField);
             const el = document.getElementById(id);
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth' });
             el === null || el === void 0 ? void 0 : el.focusField();
-            el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
             this.focusedField = nextRequiredField.name;
         }
     }
@@ -598,6 +600,7 @@ export class VerdocsSign {
         return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
+                const pageSize = envelopeDocument.page_sizes[pageNumber];
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
                 // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
                 // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
@@ -606,7 +609,7 @@ export class VerdocsSign {
                 // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
                 //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
                 // console.log('tp', templatePage, page);
-                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: 612, virtualHeight: 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
+                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
                         { name: 'page', type: 'canvas' },
                         { name: 'controls', type: 'div' },
                     ] }));

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

@@ -165,10 +165,13 @@ export class VerdocsView {
             .filter(document => document.type !== 'certificate')
             .map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, type: "filled", virtualWidth: 612, virtualHeight: 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), layers: [
-                    { name: 'page', type: 'canvas' },
-                    { name: 'controls', type: 'div' },
-                ] })))));
+            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+                const pageSize = envelopeDocument.page_sizes[pageNumber];
+                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, type: "filled", virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), layers: [
+                        { name: 'page', type: 'canvas' },
+                        { name: 'controls', type: 'div' },
+                    ] }));
+            })));
         })), this.showCancelDone && (h("verdocs-ok-dialog", { heading: "Cancelled", message: `This envelope has been cancelled successfully.`, onNext: () => {
                 this.showCancelDone = false;
             } })), this.canceling && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));

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

@@ -59,11 +59,7 @@ export class VerdocsFieldDropdown {
         // TODO: Look for other places this mistaken assumption was made.
         // Defaults only apply in destructuring if undefined. null doesn't trigger it.
         options || (options = []);
-        if (!options.length) {
-            console.log('[DROPDOWN] Dropdown has no options, hiding field...', fieldname);
-            return h(Host, null);
-        }
-        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) => {
+        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))), !options.length && h("option", { value: "NA" }, "N/A")), 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/templates/verdocs-template-field-properties/verdocs-template-field-properties.js

@@ -66,9 +66,6 @@ export class VerdocsTemplateFieldProperties {
             console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
             return;
         }
-        else {
-            console.log('[FIELD PROPERTIES]', field);
-        }
         this.type = field.type;
         this.name = field.name;
         this.label = field.label;
@@ -149,6 +146,8 @@ export class VerdocsTemplateFieldProperties {
         if (this.helpText && this.showingHelp) {
             return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
         }
+        const hasOptions = this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.label || '').trim() !== '').length > 0;
+        const saveDisabled = !this.dirty || (this.type === 'dropdown' && !hasOptions);
         return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
             //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
             placeholder: "Field Name...", onInput: (e) => {
@@ -187,7 +186,7 @@ export class VerdocsTemplateFieldProperties {
                 this.options = this.options.filter(opt => opt.id !== option.id);
                 this.dirty = true;
                 this.cleanupOptions();
-            } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+            } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: saveDisabled, onClick: e => !saveDisabled && this.handleSave(e) })))));
     }
     static get is() { return "verdocs-template-field-properties"; }
     static get originalStyleUrls() {

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

@@ -51,8 +51,17 @@ export class VerdocsTemplateFields {
         this.selectedRoleName = '';
         this.loading = true;
     }
+    onTemplateIdChanged(newTemplateId) {
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
+    // Stop field-placement mode if ESC is pressed
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.placing = null;
+        }
+    }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
             if (!this.templateId) {
@@ -63,27 +72,17 @@ export class VerdocsTemplateFields {
                 console.log('[FIELDS] Unable to start builder session, must be authenticated');
                 return;
             }
-            getTemplateStore(this.endpoint, this.templateId, true)
-                .then(ts => {
-                var _a, _b;
-                this.templateStore = ts;
-                this.fieldStore = getTemplateFieldStore(this.templateId);
-                this.roleStore = getTemplateRoleStore(this.templateId);
-                this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-                this.loading = false;
-                this.fieldStore.onChange('fields', fields => {
-                    var _a;
-                    console.log('[FIELDS] Fields changed', { fields });
-                    (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
-                });
-            })
-                .catch(e => {
-                console.log(e);
-            });
+            try {
+                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+            }
+            catch (e) {
+                console.log('[FIELDS] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            }
         }
         catch (e) {
             console.log('[FIELDS] Error with fields session', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
     componentDidRender() {
@@ -97,23 +96,27 @@ export class VerdocsTemplateFields {
         }
     }
     componentWillUpdate() {
-        var _a;
+        var _a, _b;
         // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
-        const roles = this.roleStore.get('roles');
+        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
         if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
-            this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
+            this.selectedRoleName = ((_b = roles[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
             console.log('[FIELDS] Selected new role', this.selectedRoleName);
         }
     }
-    // Stop field-placement mode if ESC is pressed
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.placing = null;
+    async loadTemplate(templateId) {
+        var _a, _b;
+        if (templateId) {
+            this.loading = true;
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
+            this.roleStore = getTemplateRoleStore(this.templateId);
+            this.fieldStore = getTemplateFieldStore(this.templateId);
+            this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
+            this.loading = false;
+            // TODO: Necessary?
+            // this.fieldsUpdated?.emit({event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields});
         }
     }
-    // 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', () => {
@@ -303,10 +306,13 @@ export class VerdocsTemplateFields {
                 }
             } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
             const pageNumbers = integerSequence(1, document.pages);
-            return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
-                    { name: 'page', type: 'canvas' },
-                    { name: 'controls', type: 'div' },
-                ] })));
+            return pageNumbers.map(page => {
+                const pageSize = document.page_sizes[page];
+                return (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+                        { name: 'page', type: 'canvas' },
+                        { name: 'controls', type: 'div' },
+                    ] }));
+            });
         })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
     }
     static get is() { return "verdocs-template-fields"; }
@@ -346,7 +352,7 @@ export class VerdocsTemplateFields {
             },
             "templateId": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string | null",
                     "resolved": "string",
@@ -359,7 +365,7 @@ export class VerdocsTemplateFields {
                     "text": "The ID of the template to create the document from."
                 },
                 "attribute": "template-id",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "null"
             },
             "toolbarTargetId": {
@@ -466,6 +472,12 @@ export class VerdocsTemplateFields {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "templateId",
+                "methodName": "onTemplateIdChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",

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

@@ -73,11 +73,7 @@ const VerdocsFieldDropdown = /*@__PURE__*/ proxyCustomElement(class VerdocsField
         // TODO: Look for other places this mistaken assumption was made.
         // Defaults only apply in destructuring if undefined. null doesn't trigger it.
         options || (options = []);
-        if (!options.length) {
-            console.log('[DROPDOWN] Dropdown has no options, hiding field...', fieldname);
-            return h(Host, null);
-        }
-        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) => {
+        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))), !options.length && h("option", { value: "NA" }, "N/A")), 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/components/verdocs-portal2.js

@@ -39,7 +39,7 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
         //    Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
         const popupWidth = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 400;
         const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;
-        return offRightEdge ? leftOfPopup + anchorRect.width - popupWidth : leftOfPopup;
+        return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;
     }
     calculateTop() {
         var _a;

package/dist/components/verdocs-preview2.js

@@ -95,10 +95,13 @@ const VerdocsPreview = /*@__PURE__*/ proxyCustomElement(class VerdocsPreview ext
         }
         return (h(Host, null, (((_b = (_a = this.templateStore) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.documents) || []).map(document => {
             const pageNumbers = integerSequence(1, document.pages);
-            return (h(Fragment, null, pageNumbers.map(pageNumber => (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: false, done: false, virtualWidth: 612, virtualHeight: 792, onPageRendered: e => this.handlePageRendered(e), layers: [
-                    { name: 'page', type: 'canvas' },
-                    { name: 'controls', type: 'div' },
-                ] })))));
+            return (h(Fragment, null, pageNumbers.map(pageNumber => {
+                const pageSize = document.page_sizes[pageNumber];
+                return (h("verdocs-template-document-page", { templateId: document.template_id, documentId: document.id, pageNumber: pageNumber, disabled: true, editable: false, done: false, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, onPageRendered: e => this.handlePageRendered(e), layers: [
+                        { name: 'page', type: 'canvas' },
+                        { name: 'controls', type: 'div' },
+                    ] }));
+            })));
         })));
     }
     static get watchers() { return {

package/dist/components/verdocs-sign.js

@@ -247,6 +247,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
     async handleFieldChange(field, e) {
         const { value, checked } = e.target;
         switch (field.type) {
+            // TODO: Remove legacy type when no longer needed
+            case 'textarea':
             case 'textbox':
                 return this.saveFieldChange(field.name, { prepared: false, value });
             case 'checkbox': {
@@ -388,7 +390,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
             nextFocusedIndex = 0;
         }
         let nextRequiredField = emptyFields[nextFocusedIndex];
-        console.log('Next field', nextRequiredField);
+        console.log('Next field', nextRequiredField, emptyFields);
         // Skip signature and initial fields that are already filled in. We have to count our "skips" just in case, to avoid infinite loops.
         let skips = 0;
         if (skips < emptyFields.length && ['signature', 'initial'].includes(nextRequiredField.type) && ['initialed', 'signed'].includes(nextRequiredField.value)) {
@@ -405,8 +407,8 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         if (nextRequiredField) {
             const id = getFieldId(nextRequiredField);
             const el = document.getElementById(id);
+            el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth' });
             el === null || el === void 0 ? void 0 : el.focusField();
-            el === null || el === void 0 ? void 0 : el.scrollTo({ behavior: 'smooth', top: 0 });
             this.focusedField = nextRequiredField.name;
         }
     }
@@ -597,6 +599,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
         return (h(Host, null, h("div", { id: "verdocs-sign-header" }, h("div", { class: "inner" }, h("img", { src: "https://verdocs.com/assets/white-logo.svg", alt: "Verdocs Logo", class: "logo" }), h("div", { class: "title" }, this.envelope.name), h("div", { style: { flex: '1' } }), !this.finishLater && h("verdocs-button", { size: "xsmall", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) }))), h("div", { class: "document", style: { paddingTop: '15px' } }, (this.envelope.documents || []).map(envelopeDocument => {
             const pageNumbers = integerSequence(1, envelopeDocument.pages);
             return (h(Fragment, null, pageNumbers.map(pageNumber => {
+                const pageSize = envelopeDocument.page_sizes[pageNumber];
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
                 // where everything went. This is also a visual indicator when optional fields weren't filled in by previous actors, or
                 // future signers still need to act. Once we're "done" we flip to showing the envelope's documents which have the final
@@ -605,7 +608,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
                 // TODO: Confirm that a pure page-number match is good enough to find the matching template page. We need to make sure
                 //  we either don't reset our page numbers for additional attachments, or add match-on identifiers to work around that.
                 // console.log('tp', templatePage, page);
-                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: 612, virtualHeight: 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
+                return (h("verdocs-envelope-document-page", { envelopeId: this.envelopeId, documentId: envelopeDocument.id, endpoint: this.endpoint, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, pageNumber: pageNumber, onPageRendered: e => this.handlePageRendered(e), type: "filled", layers: [
                         { name: 'page', type: 'canvas' },
                         { name: 'controls', type: 'div' },
                     ] }));

package/dist/components/verdocs-template-field-properties2.js

@@ -79,9 +79,6 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
             console.log(`[FIELD PROPERTIES] Unable to find field "${this.fieldName}" in fields`);
             return;
         }
-        else {
-            console.log('[FIELD PROPERTIES]', field);
-        }
         this.type = field.type;
         this.name = field.name;
         this.label = field.label;
@@ -162,6 +159,8 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
         if (this.helpText && this.showingHelp) {
             return (h(Host, null, h("h6", null, capitalize(this.fieldType), " Settings ", h("div", { style: { flex: '1' } }), h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = false) })), h("p", { class: "instructions", innerHTML: this.helpText })));
         }
+        const hasOptions = this.options.filter(opt => (opt.id || '').trim() !== '' || (opt.label || '').trim() !== '').length > 0;
+        const saveDisabled = !this.dirty || (this.type === 'dropdown' && !hasOptions);
         return (h(Host, { id: "verdocs-template-field-properties" }, h("h6", null, capitalize(this.fieldType.replace(/_/g, ' ')), " Settings ", h("div", { style: { flex: '1' } }), this.helpText && h("div", { class: "help-icon", innerHTML: HelpIcon, onClick: () => (this.showingHelp = true) })), h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("div", { class: "row" }, h("verdocs-text-input", { id: "verdocs-field-name", label: "Field Name", value: this.name, autocomplete: "off",
             //              helpText="The internal name of the field. Must be unique, and contain only letters, numbers, and dashes. After an envelope is completed, the value entered by the signer will be tagged with this key."
             placeholder: "Field Name...", onInput: (e) => {
@@ -200,7 +199,7 @@ const VerdocsTemplateFieldProperties = /*@__PURE__*/ proxyCustomElement(class Ve
                 this.options = this.options.filter(opt => opt.id !== option.id);
                 this.dirty = true;
                 this.cleanupOptions();
-            } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: !this.dirty, onClick: e => this.handleSave(e) })))));
+            } })))))), h("div", { class: "buttons" }, h("button", { class: "delete-button", disabled: this.dirty, onClick: e => this.handleDelete(e), innerHTML: TrashIcon }), h("div", { style: { flex: '1' } }), h("verdocs-button", { size: "small", variant: "outline", label: "Cancel", disabled: !this.dirty, onClick: e => this.handleCancel(e) }), h("verdocs-button", { size: "small", label: "Save", disabled: saveDisabled, onClick: e => !saveDisabled && this.handleSave(e) })))));
     }
     get el() { return this; }
     static get style() { return VerdocsTemplateFieldPropertiesStyle0; }

package/dist/components/verdocs-template-fields2.js

@@ -81,8 +81,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
         this.selectedRoleName = '';
         this.loading = true;
     }
+    onTemplateIdChanged(newTemplateId) {
+        this.loadTemplate(newTemplateId).catch((e) => console.log('Unknown Error', e));
+    }
+    // Stop field-placement mode if ESC is pressed
+    handleKeyDown(ev) {
+        if (ev.key === 'Escape') {
+            this.placing = null;
+        }
+    }
     async componentWillLoad() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         try {
             this.endpoint.loadSession();
             if (!this.templateId) {
@@ -93,27 +102,17 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
                 console.log('[FIELDS] Unable to start builder session, must be authenticated');
                 return;
             }
-            getTemplateStore(this.endpoint, this.templateId, true)
-                .then(ts => {
-                var _a, _b;
-                this.templateStore = ts;
-                this.fieldStore = getTemplateFieldStore(this.templateId);
-                this.roleStore = getTemplateRoleStore(this.templateId);
-                this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
-                this.loading = false;
-                this.fieldStore.onChange('fields', fields => {
-                    var _a;
-                    console.log('[FIELDS] Fields changed', { fields });
-                    (_a = this.fieldsUpdated) === null || _a === void 0 ? void 0 : _a.emit({ event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields });
-                });
-            })
-                .catch(e => {
-                console.log(e);
-            });
+            try {
+                this.loadTemplate(this.templateId).catch(e => console.log('[BUILD] Unable to load template', e));
+            }
+            catch (e) {
+                console.log('[FIELDS] Error loading template', e);
+                (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            }
         }
         catch (e) {
             console.log('[FIELDS] Error with fields session', e);
-            (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+            (_d = this.sdkError) === null || _d === void 0 ? void 0 : _d.emit(new SDKError(e.message, (_e = e.response) === null || _e === void 0 ? void 0 : _e.status, (_f = e.response) === null || _f === void 0 ? void 0 : _f.data));
         }
     }
     componentDidRender() {
@@ -127,23 +126,27 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
         }
     }
     componentWillUpdate() {
-        var _a;
+        var _a, _b;
         // If a new role was added and there were none yet so far, or the "selected" role was deleted, reset our selection
-        const roles = this.roleStore.get('roles');
+        const roles = ((_a = this.roleStore) === null || _a === void 0 ? void 0 : _a.get('roles')) || [];
         if (!this.selectedRoleName || !roles.find(role => role && role.name === this.selectedRoleName)) {
-            this.selectedRoleName = ((_a = roles[0]) === null || _a === void 0 ? void 0 : _a.name) || '';
+            this.selectedRoleName = ((_b = roles[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
             console.log('[FIELDS] Selected new role', this.selectedRoleName);
         }
     }
-    // Stop field-placement mode if ESC is pressed
-    handleKeyDown(ev) {
-        if (ev.key === 'Escape') {
-            this.placing = null;
+    async loadTemplate(templateId) {
+        var _a, _b;
+        if (templateId) {
+            this.loading = true;
+            this.templateStore = await getTemplateStore(this.endpoint, templateId, false);
+            this.roleStore = getTemplateRoleStore(this.templateId);
+            this.fieldStore = getTemplateFieldStore(this.templateId);
+            this.selectedRoleName = ((_b = (_a = this.roleStore.get('roles')) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name) || '';
+            this.loading = false;
+            // TODO: Necessary?
+            // this.fieldsUpdated?.emit({event: 'updated', endpoint: this.endpoint, templateId: this.templateId, fields});
         }
     }
-    // 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', () => {
@@ -333,22 +336,30 @@ const VerdocsTemplateFields = /*@__PURE__*/ proxyCustomElement(class VerdocsTemp
                 }
             } })))), h("div", { class: "pages" }, (((_c = (_b = this.templateStore) === null || _b === void 0 ? void 0 : _b.state) === null || _c === void 0 ? void 0 : _c.documents) || []).map(document => {
             const pageNumbers = integerSequence(1, document.pages);
-            return pageNumbers.map(page => (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: 612, virtualHeight: 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
-                    { name: 'page', type: 'canvas' },
-                    { name: 'controls', type: 'div' },
-                ] })));
+            return pageNumbers.map(page => {
+                const pageSize = document.page_sizes[page];
+                return (h("verdocs-template-document-page", { templateId: this.templateId, documentId: document.id, pageNumber: page, virtualWidth: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.width) || 612, virtualHeight: (pageSize === null || pageSize === void 0 ? void 0 : pageSize.height) || 792, disabled: true, editable: true, done: false, onClick: (e) => this.handleClickPage(e, page), onPageRendered: e => this.handlePageRendered(e), layers: [
+                        { name: 'page', type: 'canvas' },
+                        { name: 'controls', type: 'div' },
+                    ] }));
+            });
         })), this.showMustSelectRole && (h("verdocs-ok-dialog", { heading: "Unable to add field", message: this.roleStore.get('roles').length > 0 ? 'Please select a role before adding fields.' : 'Please add at least one role before adding fields.', onNext: () => (this.showMustSelectRole = false) }))));
     }
+    static get watchers() { return {
+        "templateId": ["onTemplateIdChanged"]
+    }; }
     static get style() { return VerdocsTemplateFieldsStyle0; }
 }, [0, "verdocs-template-fields", {
         "endpoint": [16],
-        "templateId": [1, "template-id"],
+        "templateId": [1537, "template-id"],
         "toolbarTargetId": [1, "toolbar-target-id"],
         "placing": [32],
         "showMustSelectRole": [32],
         "selectedRoleName": [32],
         "loading": [32]
-    }, [[4, "keydown", "handleKeyDown"]]]);
+    }, [[4, "keydown", "handleKeyDown"]], {
+        "templateId": ["onTemplateIdChanged"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;