@verdocs/web-sdk 4.2.93 → 4.2.95

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,56 +59,13 @@ 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;
         this.dialog.addEventListener('exit', () => { var _a; return (_a = this.dialog) === null || _a === void 0 ? void 0 : _a.remove(); });
         document.addEventListener('next', (e) => {
             var _a, _b;
+            console.log('attach onNext', e.detail[0]);
             this.selectedFile = e.detail[0];
             (_a = this.attached) === null || _a === void 0 ? void 0 : _a.emit(e.detail[0]);
             (_b = this.dialog) === null || _b === void 0 ? void 0 : _b.remove();

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

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
-const verdocsFieldCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-checkbox{padding:0;width:16px;height:16px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-checkbox label{cursor:inherit;width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox.disabled label{opacity:0.5}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:14px;height:14px;display:block;line-height:14px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-checkbox .settings-icon{position:absolute;top:-5px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-checkbox .settings-icon svg{fill:#707ae5}verdocs-field-checkbox .settings-icon:hover{opacity:1}";
+const verdocsFieldCheckboxCss = "@charset \"UTF-8\";@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-checkbox{padding:0;width:16px;height:16px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform-origin:bottom left;transform-origin:bottom left;font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif}verdocs-field-checkbox div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-checkbox label{cursor:inherit;width:14px;height:14px;display:block;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-field-checkbox.disabled label{opacity:0.5}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-checkbox label>input[type=checkbox]{display:none}verdocs-field-checkbox label>input[type=checkbox]+*::before{margin:0;content:\"\";width:12px;height:12px;display:block;line-height:12px;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #aeb4bf}verdocs-field-checkbox label>input[type=checkbox]:checked+*{color:#55bc81}verdocs-field-checkbox label>input[type=checkbox]:checked+*::before{content:\"✓\";color:white;font-size:12px;text-align:center;background:#55bc81;border-color:#55bc81}verdocs-field-checkbox.required{border:1px solid #cc0000}verdocs-field-checkbox.hide{display:none}verdocs-field-checkbox.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-checkbox verdocs-button-panel{display:block;margin-left:-20px;margin-top:-17px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-checkbox .settings-icon{position:absolute;top:-5px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-checkbox .settings-icon svg{fill:#707ae5}verdocs-field-checkbox .settings-icon:hover{opacity:1}";
 const VerdocsFieldCheckboxStyle0 = verdocsFieldCheckboxCss;
 
 const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldCheckbox extends HTMLElement {
@@ -33,6 +33,16 @@ const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsField
         this.yscale = 1;
         this.pagenumber = 1;
         this.showingProperties = false;
+        this.focused = false;
+    }
+    async focusField() {
+        // We don't have a visible input that we can actually focus on, so we fake it
+        console.log('Focusing me', this.fieldname);
+        this.focused = false;
+        this.focused = true;
+        setTimeout(() => {
+            this.focused = false;
+        }, 500);
     }
     async showSettingsPanel() {
         const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
@@ -51,18 +61,17 @@ const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsField
         this.roleStore = getTemplateRoleStore(this.templateid);
     }
     render() {
-        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
+        const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1, focused } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', label = '' } = field || {};
+        const { required = false, role_name = '', label = '', value = false } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        // TODO
-        const { id = 'option1', checked = false } = {};
-        // const {id = 'option1', checked = false} = options[option] || {};
-        const fieldId = `${fieldname}-${id}`;
+        const fieldId = `${fieldname}`;
+        // const fieldId = `${fieldname}-${id}`;
+        const checked = value === 'true';
         if (done) {
             return h(Host, { class: { done } }, checked ? '✓' : '☐');
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required, value: id }), h("span", null), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), h("label", { htmlFor: fieldId }, h("input", { id: fieldId, name: fieldname, type: "checkbox", checked: checked, disabled: disabled, required: required }), h("span", null), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
@@ -87,6 +96,8 @@ const VerdocsFieldCheckbox = /*@__PURE__*/ proxyCustomElement(class VerdocsField
         "yscale": [514],
         "pagenumber": [514],
         "showingProperties": [32],
+        "focused": [32],
+        "focusField": [64],
         "showSettingsPanel": [64],
         "hideSettingsPanel": [64]
     }]);

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

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './verdocs-select-input2.js';
 import { d as defineCustomElement$2 } from './verdocs-template-field-properties2.js';
 import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
 
-const verdocsFieldRadioCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-radio{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:10px;height:10px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid #cc0000}verdocs-field-radio.hide{display:none}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .settings-icon:hover{opacity:1}";
+const verdocsFieldRadioCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-field-radio{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;width:12px;height:12px;display:block;font-size:11px;position:relative;background-color:transparent;-webkit-transform-origin:bottom left;transform-origin:bottom left;border-radius:100%}verdocs-field-radio svg{margin-top:4px}verdocs-field-radio.disabled.done{opacity:1}verdocs-field-radio div.label{top:-14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#4a4a99;border-top-left-radius:2px;border-top-right-radius:2px}verdocs-field-radio div.group{top:14px;left:-1px;height:14px;color:white;padding:0 4px;font-size:9px;line-height:13px;position:absolute;background:#bb0589;border-bottom-left-radius:2px;border-bottom-right-radius:2px}verdocs-field-radio input{cursor:inherit}verdocs-field-radio.disabled input{opacity:0.5}verdocs-field-radio.done input[type=radio]{margin:0;padding:0;width:10px;height:10px}verdocs-field-radio:not(.done) input[type=radio]{position:absolute;opacity:0}verdocs-field-radio:not(.done) input[type=radio]+label:before{content:\"\";border-radius:100%;border:1px solid rgba(0, 0, 0, 0.6);display:inline-block;width:12px;height:12px;position:absolute;left:1px;top:1px;cursor:pointer;text-align:center;-webkit-transition:all 250ms ease;transition:all 250ms ease}verdocs-field-radio:not(.done) input[type=radio]:checked+label:before{background-color:#55bc81;-webkit-box-shadow:inset 0 0 0 2px #f5f5fa;box-shadow:inset 0 0 0 2px #f5f5fa}verdocs-field-radio:not(.done) input[type=radio]:focus+label:before{outline:none;border-color:#55bc81}verdocs-field-radio:not(.done) input[type=radio]:disabled+label:before{-webkit-box-shadow:inset 0 0 0 4px #f5f5fa;box-shadow:inset 0 0 0 4px #f5f5fa;border-color:#a0a0d0;background:#a0a0d0}verdocs-field-radio:not(.done) input[type=radio]+label:empty:before{margin-right:0}verdocs-field-radio.required{border:1px solid #cc0000}verdocs-field-radio.hide{display:none}verdocs-field-radio.focused{-webkit-animation:verdocs-field-pulse 0.4s 1;animation:verdocs-field-pulse 0.4s 1}verdocs-field-radio verdocs-button-panel{margin-left:-20px;margin-top:-7px;-webkit-transform:scale(0.7);transform:scale(0.7)}verdocs-field-radio .settings-icon{position:absolute;top:-6px;left:-20px;display:inline-block;cursor:pointer;opacity:0.3}verdocs-field-radio .settings-icon svg{fill:#707ae5}verdocs-field-radio .settings-icon:hover{opacity:1}";
 const VerdocsFieldRadioStyle0 = verdocsFieldRadioCss;
 
 const RadioIconUnselected = `<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>`;
@@ -55,16 +55,15 @@ const VerdocsFieldRadio = /*@__PURE__*/ proxyCustomElement(class VerdocsFieldRad
     render() {
         const { templateid, fieldname = '', editable = false, done = false, disabled = false, xscale = 1, yscale = 1 } = this;
         const field = this.fieldStore.get('fields').find(field => field.name === fieldname);
-        const { required = false, role_name = '', label = '', group = '' } = field || {};
+        const { name, required = false, role_name = '', label = '', group = '', value = false } = field || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        // TODO
-        const { id = 'option1', selected = false } = {};
-        // const {id = 'option1', selected = false} = options[option] || {};
-        const fieldId = `${fieldname}-${id}`;
+        const fieldId = `${fieldname}`;
+        // const fieldId = `${fieldname}-${id}`;
+        const selected = value === 'true';
         if (done) {
             return (h(Host, { class: { done }, style: { maxWidth: '10px' } }, h("span", { innerHTML: selected ? RadioIconSelected : RadioIconUnselected })));
         }
-        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), editable && group && h("div", { class: "group" }, group), h("input", { id: fieldId, type: "radio", name: fieldname, value: id, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
+        return (h(Host, { class: { required, disabled, done }, style: { backgroundColor } }, label && h("div", { class: "label" }, label), editable && group && h("div", { class: "group" }, group), h("input", { id: fieldId, type: "radio", name: group || fieldname, value: name, checked: !!selected, disabled: disabled, required: required }), h("label", { htmlFor: fieldId }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();
                 this.showingProperties = !this.showingProperties;
             } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${fieldname}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: templateid, fieldName: fieldname, onClose: () => (this.showingProperties = false), onDelete: () => {

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

@@ -88,9 +88,8 @@ const VerdocsFieldSignature = /*@__PURE__*/ proxyCustomElement(class VerdocsFiel
         const { required = false, role_name = '', value = '', label = '' } = field || {};
         const { base64 } = field.settings || {};
         const backgroundColor = getRGBA(getRoleIndex(this.roleStore, role_name));
-        console.log('sig', field, value, base64);
         if (done) {
-            return h(Host, { class: { done } }, value && h("img", { src: value, alt: "Signature" }));
+            return h(Host, { class: { done } }, value && h("img", { src: base64, alt: "Signature" }));
         }
         return (h(Host, { class: { required, disabled, done, focused }, style: { backgroundColor } }, label && h("label", null, label), base64 ? h("img", { src: base64, alt: "Signature" }) : h("button", { onClick: () => !disabled && this.handleShow() }, "Signature"), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                 e.stopPropagation();

package/dist/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") {

package/dist/components/verdocs-sign.js

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

package/dist/components/verdocs-upload-dialog2.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { fileToDataUrl } from '@verdocs/js-sdk';
 import { d as defineCustomElement$1 } from './verdocs-button2.js';
 
-const verdocsUploadDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-upload-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:absolute;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}verdocs-upload-dialog .dialog{width:320px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{opacity:1;width:100%;display:-ms-flexbox;display:flex;margin:20px 0;min-height:260px;padding:30px 15px;text-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;background-color:#f5f5f5;color:rgba(0, 0, 0, 0.54);border:2px dashed #979797}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;font-size:14px;overflow:hidden;font-weight:400;white-space:nowrap;text-overflow:ellipsis}";
+const verdocsUploadDialogCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-upload-dialog{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog div{-webkit-box-sizing:border-box;box-sizing:border-box}verdocs-upload-dialog .background-overlay{top:0;left:0;right:0;bottom:0;display:-ms-flexbox;display:flex;z-index:10000;position:fixed;-ms-flex-align:center;align-items:center;background:rgba(0, 0, 0, 0.4980392157);-ms-flex-pack:center;justify-content:center}verdocs-upload-dialog .dialog{width:320px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-radius:4px;overflow:hidden;background:#ffffff;padding:16px;-webkit-box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4);box-shadow:3px 3px 5px 1px rgba(40, 40, 40, 0.4)}verdocs-upload-dialog .heading{display:-ms-flexbox;display:flex;font-size:20px;font-weight:500;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .buttons{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end}verdocs-upload-dialog .buttons verdocs-button{margin-left:16px}verdocs-upload-dialog .drop-target{opacity:1;width:100%;display:-ms-flexbox;display:flex;margin:20px 0;min-height:260px;padding:30px 15px;text-align:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;background-color:#f5f5f5;color:rgba(0, 0, 0, 0.54);border:2px dashed #979797}verdocs-upload-dialog .drop-target p{margin:12px 0}verdocs-upload-dialog .drop-target.dragging-over{border:5px solid #4c56cb}verdocs-upload-dialog .drop-target>verdocs-button{margin:12px 0;display:inline-block}verdocs-upload-dialog .attachments{height:56px;font-size:0;margin:20px 0;padding:0 16px;line-height:56px;white-space:normal;-webkit-box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14);box-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)}verdocs-upload-dialog .attachments .attachment{gap:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row}verdocs-upload-dialog .attachments .attachment .icon{width:18px;height:18px;line-height:18px}verdocs-upload-dialog .attachments .attachment .icon.trash{cursor:pointer}verdocs-upload-dialog .attachments .attachment .name{-ms-flex:1;flex:1;font-size:14px;overflow:hidden;font-weight:400;white-space:nowrap;text-overflow:ellipsis}";
 const VerdocsUploadDialogStyle0 = verdocsUploadDialogCss;
 
 const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
@@ -14,8 +13,9 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsUpload
         this.exit = createEvent(this, "exit", 7);
         this.next = createEvent(this, "next", 7);
         this.draggingOver = false;
-        this.decodedFiles = [];
+        this.selectedFiles = [];
     }
+    // @State() droppedFiles = [] as IFileWithData[];
     handleCancel() {
         this.exit.emit();
     }
@@ -27,7 +27,8 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsUpload
         }
     }
     handleDone() {
-        this.next.emit(this.decodedFiles);
+        this.next.emit(this.selectedFiles);
+        // this.next.emit(this.droppedFiles);
     }
     handleDragOver(e) {
         e.preventDefault();
@@ -40,45 +41,54 @@ const VerdocsUploadDialog = /*@__PURE__*/ proxyCustomElement(class VerdocsUpload
     async handleDrop(e) {
         e.preventDefault();
         this.draggingOver = false;
+        this.selectedFiles = Array.from(e.dataTransfer.items);
         // Required for cross-browser support. Note that dataTransfer.items is of type DataTransferItemList and is not an array.
-        let droppedFiles = [];
-        if (e.dataTransfer.items) {
-            for (let i = 0; i < e.dataTransfer.items.length; i++) {
-                if (e.dataTransfer.items[i].kind === 'file') {
-                    const file = e.dataTransfer.items[i].getAsFile();
-                    droppedFiles.push(file);
-                }
-            }
-        }
-        else {
-            droppedFiles = e.dataTransfer.files;
-        }
-        this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+        // let droppedFiles = [] as File[];
+        // if (e.dataTransfer.items) {
+        //   for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        //     if (e.dataTransfer.items[i].kind === 'file') {
+        //       const file = e.dataTransfer.items[i].getAsFile();
+        //       droppedFiles.push(file);
+        //     }
+        //   }
+        // } else {
+        //   droppedFiles = e.dataTransfer.files;
+        // }
+        // this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
     }
     handleRemoveAttachment(index) {
-        const newFiles = [...this.decodedFiles];
+        const newFiles = [...this.selectedFiles];
         newFiles.splice(index, 1);
-        this.decodedFiles = newFiles;
+        this.selectedFiles = newFiles;
+        // const newFiles = [...this.decodedFiles];
+        // newFiles.splice(index, 1);
+        // this.decodedFiles = newFiles;
     }
     handleSelectFile() {
         var _a;
         (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
     }
     async handleFileChange() {
-        var _a, _b;
-        let droppedFiles = [];
-        for (let i = 0; i < ((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files.length); i++) {
-            droppedFiles.push((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files[i]);
-        }
-        this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+        var _a;
+        this.selectedFiles = Array.from((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
+        // this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
+        // let droppedFiles = [] as File[];
+        // for (let i = 0; i < this.fileInput?.files.length; i++) {
+        //   droppedFiles.push(this.fileInput?.files[i]);
+        // }
+        // this.decodedFiles = await Promise.all(droppedFiles.map(fileToDataUrl));
     }
     render() {
-        return (h(Host, { key: '2cd98783a0cba44f723273fe01518cc96d6b0618' }, h("div", { key: '118f116c01a7a555564d95e42472333c59476e64', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '73f17cb245b77d8b67a4bca73599bb0cd4a527da', class: "dialog" }, h("div", { key: '4047027eea9e427cca5b6e70d4173b254952995a', class: "heading" }, "Upload attachment"), this.decodedFiles.length < 1 ? (h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.decodedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: 'c406436cf2827cb59da7acc8e0f023aa16870c2f', class: "buttons" }, h("verdocs-button", { key: '8d12c1a94e3981148d09888bf17926e07606b1ed', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '581b0253772c130efbee4f6ef8a65c38bbf3ea62', label: "Done", onClick: () => this.handleDone(), disabled: this.decodedFiles.length < 1 }))))));
+        return (h(Host, { key: 'f64e07a78fc85647e8f9434b5a113320f3d7e4f0' }, h("div", { key: 'e982fab85ed6d9e7a19bfd701887b481d6386a68', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'd5f998907651e578adb315f0305d15b08a24d574', class: "dialog" }, h("div", { key: '8258e31e6e261c60156cf1370630d8f34fe84141', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 ? (
+        // {this.decodedFiles.length < 1 ? (
+        h("div", { class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", null, "Drag and drop a file here..."), h("p", null, "- or -"), h("verdocs-button", { label: "Select a file...", onClick: () => this.handleSelectFile() }), h("input", { type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, onChange: () => this.handleFileChange() }))) : (h("div", { class: "attachments" }, this.selectedFiles.map((file, index) => (
+        // {this.decodedFiles.map((file, index) => (
+        h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), h("div", { key: '566289404d41ef017e101c68601593bd85b4fb4a', class: "buttons" }, h("verdocs-button", { key: 'd1d62c6590dd3d800f329e2c70aca963527d42b4', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '000b401b00de23141b2c7f856d14715835ce2f7c', label: "Done", onClick: () => this.handleDone(), disabled: this.selectedFiles.length < 1 }))))));
     }
     static get style() { return VerdocsUploadDialogStyle0; }
 }, [0, "verdocs-upload-dialog", {
         "draggingOver": [32],
-        "decodedFiles": [32]
+        "selectedFiles": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/esm/{Types-e4a6eba5.js → Types-95d86a44.js}

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