@verdocs/web-sdk 4.2.88 → 4.2.94

package/dist/collection/components/controls/verdocs-portal/verdocs-portal.js

@@ -24,7 +24,6 @@ export class VerdocsPortal {
         this.moved = false;
         this.anchor = undefined;
         this.voffset = 0;
-        this.align = 'left';
     }
     handleScroll() {
         this.calculatePosition();
@@ -39,24 +38,33 @@ export class VerdocsPortal {
         }
     }
     calculateLeft() {
+        var _a;
         const anchorEl = document.getElementById(this.anchor);
         if (!anchorEl)
             return 0;
         const anchorRect = anchorEl.getBoundingClientRect();
-        if (this.align === 'left') {
-            return Math.max(anchorRect.left, 0);
-        }
-        if (this.align === 'right') {
-            return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
-        }
-        return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+        const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;
+        const leftOfPopup = Math.max(anchorRect.left, 0);
+        // Old centering logic, disabled temporarily
+        //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+        // Old right-align logic, disabled temporarily
+        //    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;
+        console.log('Portal', { leftOfPopup, offRightEdge, popupWidth, rightOfViewportWithScroll });
+        return offRightEdge ? leftOfPopup - popupWidth : leftOfPopup;
     }
     calculateTop() {
+        var _a;
         const anchorEl = document.getElementById(this.anchor);
         if (!anchorEl)
             return 0;
         const anchorRect = anchorEl.getBoundingClientRect();
-        return anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
+        const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;
+        const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
+        const popupHeight = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 300;
+        const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;
+        return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;
     }
     calculatePosition() {
         this.portal.style.top = `${this.calculateTop()}px`;
@@ -71,12 +79,6 @@ export class VerdocsPortal {
         this.portal.style.zIndex = Z_INDEX;
         this.portal.style.position = 'absolute';
         document.body.append(this.portal);
-        // function debounce(method, delay) {
-        //   clearTimeout(method._tId);
-        //   method._tId = setTimeout(function () {
-        //     method();
-        //   }, delay);
-        // }
     }
     componentDidLoad() {
         this.portal.appendChild(this.element);
@@ -86,7 +88,7 @@ export class VerdocsPortal {
         this.moved ? this.portal.remove() : (this.moved = true);
     }
     render() {
-        return (h(Host, { key: '9929603a3ff04c0d2315b082cc23ec41394fad74', ref: el => (this.element = el) }, h("slot", { key: 'cbde23964359e4a9bbe7f41bd3ed13576c159aa5' })));
+        return (h(Host, { key: 'a69b388835d23116fdab01d461c2a6c6c1cd3dd8', ref: el => (this.element = el) }, h("slot", { key: '93b7a1bfae1c721b85291270aabf1953cb5d72ea' })));
     }
     static get is() { return "verdocs-portal"; }
     static get originalStyleUrls() {
@@ -135,24 +137,6 @@ export class VerdocsPortal {
                 "attribute": "voffset",
                 "reflect": false,
                 "defaultValue": "0"
-            },
-            "align": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'left' | 'center' | 'right'",
-                    "resolved": "\"center\" | \"left\" | \"right\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Horizontal alignment."
-                },
-                "attribute": "align",
-                "reflect": false,
-                "defaultValue": "'left'"
             }
         };
     }

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

@@ -67,7 +67,7 @@ export class VerdocsSign {
             this.endpoint = new VerdocsEndpoint({ sessionType: 'signing' });
         }
     }
-    async componentWillRender() {
+    async componentDidLoad() {
         var _a, _b, _c, _d, _e, _f, _g;
         if (!this.envelopeId) {
             (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError('[SIGN] Missing required envelopId', 500, ''));
@@ -83,16 +83,13 @@ export class VerdocsSign {
         }
         try {
             console.log(`[SIGN] Processing invite code for ${this.envelopeId} / ${this.roleId}`);
-            const { envelope, access_token } = await startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
-            const recipient = envelope.recipients.find(r => r.role_name === this.roleId);
-            console.log(`[SIGN] Loaded signing session`, envelope, recipient, access_token);
+            const { envelope, recipient } = await startSigningSession(this.endpoint, this.envelopeId, this.roleId, this.inviteCode);
+            console.log(`[SIGN] Loaded signing session`, envelope, recipient);
             this.recipient = recipient;
-            console.log('[SIGN] We are recipient', this.recipient);
-            this.endpoint.setToken(access_token);
+            this.envelope = envelope;
             if (this.agreed) {
                 this.nextButtonLabel = 'Next';
             }
-            this.envelope = envelope;
             createTemplateFieldStoreFromEnvelope(this.envelope);
             this.sortedRecipients = [...this.envelope.recipients];
             this.sortedRecipients.sort((a, b) => {
@@ -106,10 +103,9 @@ export class VerdocsSign {
             if (this.recipientIndex > -1) {
                 this.recipient = this.sortedRecipients[this.recipientIndex];
                 this.agreed = this.recipient.agreed;
-                console.log('[SIGN] Found our recipient in the envelope', this.recipientIndex, this.recipient);
             }
             else {
-                console.log('[SIGN] Could not find our recipient record', this.roleId, this.sortedRecipients);
+                console.warn('[SIGN] Could not find our recipient record', this.roleId, this.sortedRecipients);
             }
             this.isDone = ['submitted', 'canceled', 'declined'].includes(this.recipient.status);
             this.checkRecipientFields();
@@ -192,6 +188,7 @@ export class VerdocsSign {
         this.getRecipientFields().forEach(oldField => {
             if (oldField.name === fieldName) {
                 oldField.value = updateResult.value;
+                oldField.settings = updateResult.settings;
                 updateDocumentFieldValue(oldField);
                 this.checkRecipientFields();
             }
@@ -284,8 +281,9 @@ export class VerdocsSign {
                         return value !== '';
                 }
             case 'signature':
+                return value === 'signed';
             case 'initial':
-                return value !== '';
+                return value === 'initialed';
             // Timestamp fields get automatically filled when the envelope is submitted.
             case 'timestamp':
                 return true;
@@ -441,6 +439,7 @@ export class VerdocsSign {
         // NOTE: We don't filter on pageNumber here because we need the position in the
         // entire list to set the tabIndex.
         const recipientFields = this.getSortedFillableFields();
+        console.log('Recipient fields', recipientFields);
         // this.getRecipientFields().filter(field => field.page === pageInfo.pageNumber);
         // First render the fields for the signer
         // Also show field placeholders for other signers who have yet to act
@@ -450,6 +449,9 @@ export class VerdocsSign {
             if (field.page !== pageInfo.pageNumber) {
                 return;
             }
+            if (field.type === 'signature') {
+                console.log('rendering', field);
+            }
             const el = renderDocumentField(field, pageInfo, { disabled: false, editable: false, draggable: false, done: this.isDone }, tabIndex);
             if (!el) {
                 return;
@@ -492,7 +494,7 @@ export class VerdocsSign {
                     this.isDone = true;
                 } })), this.submitting && (h("div", { class: "loading-indicator" }, h("verdocs-loader", null)))));
         }
-        return (h(Host, { class: { agreed: this.agreed } }, 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.agreed && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), this.agreed && (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 => {
+        return (h(Host, { class: { agreed: this.agreed } }, 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.agreed && !this.finishLater && h("verdocs-button", { size: "small", label: this.nextButtonLabel, disabled: !this.agreed, onClick: () => this.handleNext() }), h("div", { style: { marginLeft: '10px' } }), this.agreed && (h("verdocs-dropdown", { options: !this.isDone && !this.finishLater ? inProgressMenuOptions : doneMenuOptions, onOptionSelected: e => this.handleOptionSelected(e) })))), this.agreed && (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 => {
                 // In signing mode we show the original template page with all the recipient fields so we can show source formatting and
@@ -508,7 +510,7 @@ export class VerdocsSign {
                         { name: 'controls', type: 'div' },
                     ] }));
             })));
-        })), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
+        }))), this.showFinishLater && (h("verdocs-ok-dialog", { heading: "You've saved your document to finish later.", message: `To complete the ${this.documentsSingularPlural}, use the link in the original email notification inviting you to review and finish the document.`, onNext: () => (this.showFinishLater = false) })), this.errorMessage && h("verdocs-ok-dialog", { heading: "Network Error", message: this.errorMessage, onNext: () => (this.errorMessage = '') }), this.showDone && (h("verdocs-ok-dialog", { heading: "You're Done!", message: `You can access the ${this.documentsSingularPlural} at any time by clicking on the link from the invitation email.<br /><br />After all recipients have completed their actions, you will receive an email with the document and envelope certificate attached.`, onNext: () => {
                 this.showDone = false;
                 this.isDone = true;
             } })), this.showLoadError && (h("verdocs-ok-dialog", { heading: "Error Loading Document", message: `Please check with the sender to ensure it has not been canceled, and try again later.`, buttonLabel: "Retry", onNext: () => {
@@ -531,7 +533,7 @@ export class VerdocsSign {
         return {
             "endpoint": {
                 "type": "unknown",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "VerdocsEndpoint",
                     "resolved": "VerdocsEndpoint",

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

@@ -1,7 +1,6 @@
-import interact from "interactjs";
-import { getRGBA, VerdocsEndpoint, updateField } from "@verdocs/js-sdk";
+import { getRGBA, VerdocsEndpoint } from "@verdocs/js-sdk";
 import { h, Host, Fragment } from "@stencil/core";
-import { getTemplateFieldStore, updateStoreField } from "../../../utils/TemplateFieldStore";
+import { getTemplateFieldStore } from "../../../utils/TemplateFieldStore";
 import { getRoleIndex, getTemplateRoleStore } from "../../../utils/TemplateRoleStore";
 import { SettingsIcon } from "../../../utils/Icons";
 const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
@@ -45,50 +44,6 @@ export class VerdocsFieldAttachment {
         this.fieldStore = getTemplateFieldStore(this.templateid);
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
-    componentDidRender() {
-        interact.dynamicDrop(true);
-        if (this.editable) {
-            interact(this.el).resizable({
-                edges: { top: false, bottom: false, left: true, right: true },
-                listeners: {
-                    start: this.handleResizeStart.bind(this),
-                    move: this.handleResize.bind(this),
-                    end: this.handleResizeEnd.bind(this),
-                },
-            });
-        }
-    }
-    handleResizeStart(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    handleResize(e) {
-        let { x = 0, y = 0, h = 0 } = e.target.dataset;
-        let { width, height } = e.rect;
-        x = (parseFloat(x) || 0) + e.deltaRect.left;
-        y = (parseFloat(y) || 0) + e.deltaRect.top;
-        h = (parseFloat(h) || 0) + e.deltaRect.height;
-        width /= this.xscale;
-        height /= this.yscale;
-        Object.assign(e.target.style, {
-            width: `${width}px`,
-            height: `${height}px`,
-            transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
-        });
-        Object.assign(e.target.dataset, { x, y, h });
-    }
-    handleResizeEnd(e) {
-        const width = Math.round(parseFloat(e.target.style.width));
-        const height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
-            .then(field => {
-            var _a;
-            updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, field });
-            Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
-        })
-            .catch(e => console.log('Field update failed', e));
-    }
     handleShow() {
         this.dialog = document.createElement('verdocs-upload-dialog');
         this.dialog.open = true;

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

@@ -75,11 +75,12 @@ export class VerdocsFieldInitial {
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const { required = false, role_name = '', value = '', label = '' } = field || {};
+        const { base64 } = field.settings || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), value ? h("img", { src: value, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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), base64 ? h("img", { src: base64, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {

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

@@ -76,11 +76,12 @@ export class VerdocsFieldSignature {
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const { required = false, role_name = '', value = '', label = '' } = field || {};
+        const { base64 } = field.settings || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
-            return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Signature" }));
+            return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "Signature" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 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.hideSettingsPanel(), onDelete: () => {

package/dist/collection/utils/TemplateFieldStore.js

@@ -19,7 +19,6 @@ export const createTemplateFieldStoreFromEnvelope = (envelope) => {
         templateFieldStores[envelope.template_id] = store;
     }
     else {
-        console.log('Resetting field store for envelope', envelope.id, envelope.template_id);
         store.reset();
     }
     store.set('fields', [...envelope.fields]);

package/dist/collection/utils/utils.js

@@ -57,32 +57,15 @@ export const defaultHeight = (type) => {
 };
 export const setControlStyles = (el, field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
-    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    // if (optionSettings) {
-    //   x = optionSettings.x ?? x;
-    //   y = optionSettings.y ?? y;
-    //   width = optionSettings.width ?? width;
-    //   height = optionSettings.height ?? height;
-    // }
     el.style.width = `${width}px`;
     el.style.height = `${height}px`;
     el.style.position = 'absolute';
     el.style.left = `${rescale(xScale, x)}px`;
     el.style.bottom = `${rescale(yScale, y)}px`;
     el.style.transform = `scale(${xScale}, ${yScale})`;
-    // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
 };
 export const getControlStyles = (field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
-    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    // if (optionSettings) {
-    //   x = optionSettings.x ?? x;
-    //   y = optionSettings.y ?? y;
-    //   width = optionSettings.width ?? width;
-    //   height = optionSettings.height ?? height;
-    // }
     return {
         width: `${width}px`,
         height: `${height}px`,
@@ -116,7 +99,7 @@ export const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1)
         console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
         return;
     }
-    console.log('[renderDocumentField] Rendering field', field);
+    // console.log('[renderDocumentField] Rendering field', field);
     switch (field.type) {
         case 'attachment':
         case 'date':

package/dist/components/TemplateFieldStore.js

@@ -20,7 +20,6 @@ const createTemplateFieldStoreFromEnvelope = (envelope) => {
         templateFieldStores[envelope.template_id] = store;
     }
     else {
-        console.log('Resetting field store for envelope', envelope.id, envelope.template_id);
         store.reset();
     }
     store.set('fields', [...envelope.fields]);

package/dist/components/utils.js

@@ -78,32 +78,15 @@ const defaultHeight = (type) => {
 };
 const setControlStyles = (el, field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
-    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    // if (optionSettings) {
-    //   x = optionSettings.x ?? x;
-    //   y = optionSettings.y ?? y;
-    //   width = optionSettings.width ?? width;
-    //   height = optionSettings.height ?? height;
-    // }
     el.style.width = `${width}px`;
     el.style.height = `${height}px`;
     el.style.position = 'absolute';
     el.style.left = `${rescale(xScale, x)}px`;
     el.style.bottom = `${rescale(yScale, y)}px`;
     el.style.transform = `scale(${xScale}, ${yScale})`;
-    // el.style.backgroundColor = field['rgba'] || getRGBA(roleIndex);
 };
 const getControlStyles = (field, xScale, yScale) => {
     let { x = 0, y = 0, width = defaultWidth(field.type), height = defaultHeight(field.type) } = field;
-    // const settings = (field as ITemplateField).settings || (field as IEnvelopeField).settings;
-    // const optionSettings = settings.options && option !== undefined && settings.options[option] ? settings.options[option] : null;
-    // if (optionSettings) {
-    //   x = optionSettings.x ?? x;
-    //   y = optionSettings.y ?? y;
-    //   width = optionSettings.width ?? width;
-    //   height = optionSettings.height ?? height;
-    // }
     return {
         width: `${width}px`,
         height: `${height}px`,
@@ -137,7 +120,7 @@ const renderDocumentField = (field, docPage, fieldOptions, tabIndex = 1) => {
         console.log('[renderDocumentField] No controls DIV found', docPage.containerId + '-controls', docPage);
         return;
     }
-    console.log('[renderDocumentField] Rendering field', field);
+    // console.log('[renderDocumentField] Rendering field', field);
     switch (field.type) {
         case 'attachment':
         case 'date':

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

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
-import { i as interact } from './interact.min.js';
-import { VerdocsEndpoint, updateField, getRGBA } from '@verdocs/js-sdk';
-import { g as getTemplateFieldStore, u as updateStoreField } from './TemplateFieldStore.js';
+import { VerdocsEndpoint, getRGBA } from '@verdocs/js-sdk';
+import { g as getTemplateFieldStore } from './TemplateFieldStore.js';
 import { g as getTemplateRoleStore, a as getRoleIndex } from './TemplateRoleStore.js';
 import { S as SettingsIcon } from './Icons.js';
 import { d as defineCustomElement$9 } from './verdocs-button2.js';
@@ -60,50 +59,6 @@ const VerdocsFieldAttachment = /*@__PURE__*/ proxyCustomElement(class VerdocsFie
         this.fieldStore = getTemplateFieldStore(this.templateid);
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
-    componentDidRender() {
-        interact.dynamicDrop(true);
-        if (this.editable) {
-            interact(this.el).resizable({
-                edges: { top: false, bottom: false, left: true, right: true },
-                listeners: {
-                    start: this.handleResizeStart.bind(this),
-                    move: this.handleResize.bind(this),
-                    end: this.handleResizeEnd.bind(this),
-                },
-            });
-        }
-    }
-    handleResizeStart(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
-    handleResize(e) {
-        let { x = 0, y = 0, h = 0 } = e.target.dataset;
-        let { width, height } = e.rect;
-        x = (parseFloat(x) || 0) + e.deltaRect.left;
-        y = (parseFloat(y) || 0) + e.deltaRect.top;
-        h = (parseFloat(h) || 0) + e.deltaRect.height;
-        width /= this.xscale;
-        height /= this.yscale;
-        Object.assign(e.target.style, {
-            width: `${width}px`,
-            height: `${height}px`,
-            transform: `scale(${this.xscale}, ${this.yscale}); translate(${x}px, ${y + h}px)`,
-        });
-        Object.assign(e.target.dataset, { x, y, h });
-    }
-    handleResizeEnd(e) {
-        const width = Math.round(parseFloat(e.target.style.width));
-        const height = Math.round(parseFloat(e.target.style.height));
-        updateField(this.endpoint, this.templateid, this.fieldname, { width, height })
-            .then(field => {
-            var _a;
-            updateStoreField(this.fieldStore, this.fieldname, field);
-            (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: field.name, field });
-            Object.assign(e.target.dataset, { x: 0, y: 0, h: 0 });
-        })
-            .catch(e => console.log('Field update failed', e));
-    }
     handleShow() {
         this.dialog = document.createElement('verdocs-upload-dialog');
         this.dialog.open = true;

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

@@ -87,11 +87,12 @@ const VerdocsFieldInitial = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldI
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const { required = false, role_name = '', value = '', label = '' } = field || {};
+        const { base64 } = field.settings || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
             return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Initial" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), value ? h("img", { src: value, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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), base64 ? h("img", { src: base64, alt: "Initial" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Initial"), 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-field-signature2.js

@@ -86,11 +86,12 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         const { templateid, fieldname = '', editable = false, focused, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
         const { required = false, role_name = '', value = '', label = '' } = field || {};
+        const { base64 } = field.settings || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
         if (done) {
-            return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Signature" }));
+            return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "Signature" }));
         }
-        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), value ? h("img", { src: value, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 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.hideSettingsPanel(), onDelete: () => {

package/dist/components/verdocs-portal2.js

@@ -12,7 +12,6 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
         this.moved = false;
         this.anchor = undefined;
         this.voffset = 0;
-        this.align = 'left';
     }
     handleScroll() {
         this.calculatePosition();
@@ -27,24 +26,33 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
         }
     }
     calculateLeft() {
+        var _a;
         const anchorEl = document.getElementById(this.anchor);
         if (!anchorEl)
             return 0;
         const anchorRect = anchorEl.getBoundingClientRect();
-        if (this.align === 'left') {
-            return Math.max(anchorRect.left, 0);
-        }
-        if (this.align === 'right') {
-            return Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
-        }
-        return Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+        const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;
+        const leftOfPopup = Math.max(anchorRect.left, 0);
+        // Old centering logic, disabled temporarily
+        //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
+        // Old right-align logic, disabled temporarily
+        //    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;
+        console.log('Portal', { leftOfPopup, offRightEdge, popupWidth, rightOfViewportWithScroll });
+        return offRightEdge ? leftOfPopup - popupWidth : leftOfPopup;
     }
     calculateTop() {
+        var _a;
         const anchorEl = document.getElementById(this.anchor);
         if (!anchorEl)
             return 0;
         const anchorRect = anchorEl.getBoundingClientRect();
-        return anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
+        const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;
+        const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
+        const popupHeight = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 300;
+        const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;
+        return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;
     }
     calculatePosition() {
         this.portal.style.top = `${this.calculateTop()}px`;
@@ -59,12 +67,6 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
         this.portal.style.zIndex = Z_INDEX;
         this.portal.style.position = 'absolute';
         document.body.append(this.portal);
-        // function debounce(method, delay) {
-        //   clearTimeout(method._tId);
-        //   method._tId = setTimeout(function () {
-        //     method();
-        //   }, delay);
-        // }
     }
     componentDidLoad() {
         this.portal.appendChild(this.element);
@@ -74,13 +76,12 @@ const VerdocsPortal = /*@__PURE__*/ proxyCustomElement(class VerdocsPortal exten
         this.moved ? this.portal.remove() : (this.moved = true);
     }
     render() {
-        return (h(Host, { key: '9929603a3ff04c0d2315b082cc23ec41394fad74', ref: el => (this.element = el) }, h("slot", { key: 'cbde23964359e4a9bbe7f41bd3ed13576c159aa5' })));
+        return (h(Host, { key: 'a69b388835d23116fdab01d461c2a6c6c1cd3dd8', ref: el => (this.element = el) }, h("slot", { key: '93b7a1bfae1c721b85291270aabf1953cb5d72ea' })));
     }
     static get style() { return VerdocsPortalStyle0; }
 }, [4, "verdocs-portal", {
         "anchor": [1],
-        "voffset": [2],
-        "align": [1]
+        "voffset": [2]
     }, [[11, "scroll", "handleScroll"], [9, "resize", "handleResize"], [4, "click", "handleClick"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {